compare current version against latest and not wanted version in outdated command (#4519)

**Summary**
`current` and `wanted` version might be the same but `latest` is a new major version
and as current and wanted are compared against each other it results in most outdated entries being white instead of the proper color

Here a before/after screenshot:

![bildschirmfoto 2017-09-22 um 13 41 56](https://user-images.githubusercontent.com/231804/30743120-9efa6824-9f9c-11e7-9f17-7b511597e13b.png)

__tests__/commands/outdated.js

@@ -22,6 +22,18 @@ const runOutdated = buildRun.bind(
           write() {},
         }),
       });
+
+      // mock all formatters so we can assert on all of them
+      const mockFormat = {};
+      Object.keys(this.format).forEach(key => {
+        mockFormat[key] = jest.fn(this.format[key]);
+      });
+      // $FlowFixMe
+      this.format = mockFormat;
+    }
+
+    info(msg: string) {
+      // Overwrite to not interfere with the table output
     }
   },
   fixturesLoc,
@@ -56,6 +68,7 @@ test.concurrent('works with no arguments', (): Promise<void> => {
     const json: Object = JSON.parse(out);
 
     expect(json.data.body.length).toBe(1);
+    expect(reporter.format.green).toHaveBeenCalledWith('left-pad');
   });
 });
 
@@ -65,6 +78,7 @@ test.concurrent('works with single argument', (): Promise<void> => {
 
     expect(json.data.body.length).toBe(1);
     expect(json.data.body[0][0]).toBe('max-safe-integer');
+    expect(reporter.format.green).toHaveBeenCalledWith('max-safe-integer');
   });
 });
 
@@ -77,6 +91,8 @@ test.concurrent('works with multiple arguments', (): Promise<void> => {
     expect(json.data.body.length).toBe(2);
     expect(json.data.body[0][0]).toBe('left-pad');
     expect(json.data.body[1][0]).toBe('max-safe-integer');
+    expect(reporter.format.yellow).toHaveBeenCalledWith('left-pad');
+    expect(reporter.format.green).toHaveBeenCalledWith('max-safe-integer');
   });
 });
 
@@ -95,7 +111,9 @@ test.concurrent('works with exotic resolvers', (): Promise<void> => {
 
     expect(json.data.body.length).toBe(2);
     expect(json.data.body[0]).toEqual(first);
+    expect(reporter.format.red).toHaveBeenCalledWith('max-safe-integer');
     expect(json.data.body[1]).toEqual(second);
+    expect(reporter.format.red).toHaveBeenCalledWith('yarn');
   });
 });
 
@@ -112,6 +130,7 @@ test.concurrent('shows when wanted > current and current > latest', (): Promise<
     expect(json.data.body.length).toBe(1);
     expect(json.data.body[0][0]).toBe('webpack');
     expect(semver.lt(json.data.body[0][1], json.data.body[0][2])).toBe(true);
+    expect(reporter.format.yellow).toHaveBeenCalledWith('webpack');
   });
 });
 
@@ -124,10 +143,13 @@ test.concurrent('displays correct dependency types', (): Promise<void> => {
     expect(json.data.body.length).toBe(3);
     expect(body[0][0]).toBe('is-online');
     expect(body[0][4]).toBe('optionalDependencies');
+    expect(reporter.format.red).toHaveBeenCalledWith('is-online');
     expect(body[1][0]).toBe('left-pad');
     expect(body[1][4]).toBe('dependencies');
+    expect(reporter.format.yellow).toHaveBeenCalledWith('left-pad');
     expect(body[2][0]).toBe('max-safe-integer');
     expect(body[2][4]).toBe('devDependencies');
+    expect(reporter.format.green).toHaveBeenCalledWith('max-safe-integer');
   });
 });
 

src/cli/commands/outdated.js

@@ -30,7 +30,7 @@ export async function run(config: Config, reporter: Reporter, flags: Object, arg
   }
 
   const getNameFromHint = hint => (hint ? `${hint}Dependencies` : 'dependencies');
-  const colorizeName = ({current, wanted, name}) => reporter.format[colorForVersions(current, wanted)](name);
+  const colorizeName = ({current, latest, name}) => reporter.format[colorForVersions(current, latest)](name);
 
   if (deps.length) {
     const usesWorkspaces = !!config.workspaceRootFolder;
@@ -50,11 +50,17 @@ export async function run(config: Config, reporter: Reporter, flags: Object, arg
       return row;
     });
 
+    const red = reporter.format.red('<red>');
+    const yellow = reporter.format.yellow('<yellow>');
+    const green = reporter.format.green('<green>');
+    reporter.info(reporter.lang('legendColorsForVersionUpdates', red, yellow, green));
+
     const header = ['Package', 'Current', 'Wanted', 'Latest', 'Workspace', 'Package Type', 'URL'];
     if (!usesWorkspaces) {
       header.splice(4, 1);
     }
     reporter.table(header, body);
+
     return 1;
   }
   return 0;

src/cli/commands/upgrade-interactive.js

@@ -138,7 +138,7 @@ export async function run(config: Config, reporter: Reporter, flags: Object, arg
     const red = reporter.format.red('<red>');
     const yellow = reporter.format.yellow('<yellow>');
     const green = reporter.format.green('<green>');
-    reporter.info(reporter.lang('legendColorsForUpgradeInteractive', red, yellow, green));
+    reporter.info(reporter.lang('legendColorsForVersionUpdates', red, yellow, green));
 
     const answers: Array<Dependency> = await reporter.prompt('Choose which packages to update.', choices, {
       name: 'packages',

src/reporters/lang/en.js

@@ -112,7 +112,7 @@ const messages = {
   noPermission: 'Cannot create $0 due to insufficient permissions.',
   noGlobalFolder: 'Cannot find a suitable global folder. Tried these: $0',
   allDependenciesUpToDate: 'All of your dependencies are up to date.',
-  legendColorsForUpgradeInteractive:
+  legendColorsForVersionUpdates:
     'Color legend : \n $0    : Major Update backward-incompatible updates \n $1 : Minor Update backward-compatible features \n $2  : Patch Update backward-compatible bug fixes',
   frozenLockfileError: 'Your lockfile needs to be updated, but yarn was run with `--frozen-lockfile`.',
   fileWriteError: 'Could not write file $0: $1',