Interactive Snapshot Update mode

packages/jest-cli/src/SnapshotInteractiveMode.js

@@ -0,0 +1,138 @@
+/**
+ * @flow
+ */
+
+import type {AggregatedResult} from 'types/TestResult';
+
+const chalk = require('chalk');
+const ansiEscapes = require('ansi-escapes');
+const {pluralize} = require('./reporters/utils');
+const {rightPad} = require('./lib/terminalUtils');
+const {KEYS} = require('./constants');
+
+module.exports = class SnapshotInteractiveMode {
+  _pipe: stream$Writable | tty$WriteStream;
+  _isActive: boolean;
+  _updateTestRunnerConfig: (a: string, jestRunnerOptions: Object) => *;
+  _testFilePaths: Array<string>;
+  _countPaths: number;
+
+  constructor(pipe: stream$Writable | tty$WriteStream) {
+    this._pipe = pipe;
+    this._isActive = false;
+  }
+
+  isActive() {
+    return this._isActive;
+  }
+
+  _drawUIOverlay() {
+    this._pipe.write(ansiEscapes.scrollDown);
+    this._pipe.write(ansiEscapes.scrollDown);
+
+    this._pipe.write(ansiEscapes.cursorSavePosition);
+    this._pipe.write(ansiEscapes.cursorTo(0, 0));
+
+    const title = rightPad(' -> Interactive Snapshot Update Activated <-');
+    this._pipe.write(chalk.black.bold.bgYellow(title));
+
+    this._pipe.write(ansiEscapes.cursorRestorePosition);
+    this._pipe.write(ansiEscapes.cursorUp(6));
+    this._pipe.write(ansiEscapes.eraseDown);
+
+    const numFailed = this._testFilePaths.length;
+    const numPass = this._countPaths - this._testFilePaths.length;
+
+    let stats = chalk.bold.red(pluralize('suite', numFailed) + ' failed');
+    if (numPass) {
+      stats += ', ' + chalk.bold.green(pluralize('suite', numPass) + ' passed');
+    }
+    const messages = [
+      '\n' + chalk.bold('Interactive Snapshot Progress'),
+      ' \u203A ' + stats,
+      '\n' + chalk.bold('Watch Usage'),
+      chalk.dim(' \u203A Press ') +
+        'u' +
+        chalk.dim(' to update failing snapshots.'),
+      this._testFilePaths.length > 1
+        ? chalk.dim(' \u203A Press ') +
+            's' +
+            chalk.dim(' to skip the current snapshot..')
+        : '',
+      chalk.dim(' \u203A Press ') +
+        'q' +
+        chalk.dim(' to quit interactive snapshot mode.'),
+      chalk.dim(' \u203A Press ') +
+        'Enter' +
+        chalk.dim(' to trigger a test run.'),
+    ];
+
+    this._pipe.write(messages.filter(message => !!message).join('\n') + '\n');
+  }
+
+  put(key: string) {
+    switch (key) {
+      case KEYS.S:
+        const testFilePath = this._testFilePaths.shift();
+        this._testFilePaths.push(testFilePath);
+        this._run({});
+        break;
+
+      case KEYS.U:
+        this._run({updateSnapshot: 'all'});
+        break;
+
+      case KEYS.Q:
+      case KEYS.ESCAPE:
+        this.abort();
+        break;
+
+      case KEYS.ENTER:
+        this._run({});
+        break;
+      default:
+        console.log('got key event', key);
+        break;
+    }
+  }
+
+  abort() {
+    this._isActive = false;
+    this._updateTestRunnerConfig('', {});
+  }
+
+  updateWithResults(results: AggregatedResult) {
+    const hasSnapshotFailure = !!results.snapshot.failure;
+    if (hasSnapshotFailure) {
+      this._drawUIOverlay();
+      return;
+    }
+
+    this._testFilePaths.shift();
+    if (this._testFilePaths.length === 0) {
+      this.abort();
+      return;
+    }
+    this._run({});
+  }
+
+  _run(jestRunnerOptions: Object) {
+    const testFilePath = this._testFilePaths[0];
+    this._updateTestRunnerConfig(testFilePath, jestRunnerOptions);
+  }
+
+  run(
+    failedSnapshotTestPaths: Array<string>,
+    onConfigChange: (path: string, jestRunnerOptions: Object) => *,
+  ) {
+    if (!failedSnapshotTestPaths.length) {
+      return;
+    }
+
+    this._testFilePaths = [].concat(failedSnapshotTestPaths);
+    this._countPaths = this._testFilePaths.length;
+    this._updateTestRunnerConfig = onConfigChange;
+    this._isActive = true;
+    this._run({});
+  }
+};

packages/jest-cli/src/__tests__/SnapshotInteractiveMode-test.js

@@ -0,0 +1,138 @@
+const chalk = require('chalk');
+import {KEYS} from '../constants';
+import SnapshotInteractiveMode from '../SnapshotInteractiveMode';
+
+jest.mock('../lib/terminalUtils', () => ({
+  getTerminalWidth: () => 80,
+  rightPad: () => {
+    '';
+  },
+}));
+
+jest.mock('ansi-escapes', () => ({
+  cursorRestorePosition: '[MOCK - cursorRestorePosition]',
+  cursorSavePosition: '[MOCK - cursorSavePosition]',
+  cursorScrollDown: '[MOCK - cursorScrollDown]',
+  cursorTo: (x, y) => `[MOCK - cursorTo(${x}, ${y})]`,
+  cursorUp: () => '[MOCK - cursorUp]',
+  eraseDown: '[MOCK - eraseDown]',
+}));
+
+jest.doMock('chalk', () =>
+  Object.assign(new chalk.constructor({enabled: false}), {
+    stripColor: str => str,
+  }),
+);
+
+describe('SnapshotInteractiveMode', () => {
+  let pipe;
+  let instance;
+
+  beforeEach(() => {
+    pipe = {write: jest.fn()};
+    instance = new SnapshotInteractiveMode(pipe);
+  });
+
+  test('is inactive at construction', () => {
+    expect(instance.isActive()).toBeFalsy();
+  });
+
+  test('call to run process the first file', () => {
+    const mockCallback = jest.fn();
+    instance.run(['first.js', 'second.js'], mockCallback);
+    expect(instance.isActive()).toBeTruthy();
+    expect(mockCallback).toBeCalledWith('first.js', {});
+  });
+
+  test('call to abort', () => {
+    const mockCallback = jest.fn();
+    instance.run(['first.js', 'second.js'], mockCallback);
+    expect(instance.isActive()).toBeTruthy();
+    instance.abort();
+    expect(instance.isActive()).toBeFalsy();
+    expect(mockCallback).toBeCalledWith('', {});
+  });
+  describe('key press handler', () => {
+    test('call to skip trigger a processing of next file', () => {
+      const mockCallback = jest.fn();
+      instance.run(['first.js', 'second.js'], mockCallback);
+      expect(mockCallback.mock.calls[0]).toEqual(['first.js', {}]);
+      instance.put(KEYS.S);
+      expect(mockCallback.mock.calls[1]).toEqual(['second.js', {}]);
+      instance.put(KEYS.S);
+      expect(mockCallback.mock.calls[2]).toEqual(['first.js', {}]);
+    });
+
+    test('call to skip works with 1 file', () => {
+      const mockCallback = jest.fn();
+      instance.run(['first.js'], mockCallback);
+      expect(mockCallback.mock.calls[0]).toEqual(['first.js', {}]);
+      instance.put(KEYS.S);
+      expect(mockCallback.mock.calls[1]).toEqual(['first.js', {}]);
+    });
+
+    test('press U trigger a snapshot update call', () => {
+      const mockCallback = jest.fn();
+      instance.run(['first.js'], mockCallback);
+      expect(mockCallback.mock.calls[0]).toEqual(['first.js', {}]);
+      instance.put(KEYS.U);
+      expect(mockCallback.mock.calls[1]).toEqual([
+        'first.js',
+        {updateSnapshot: 'all'},
+      ]);
+    });
+
+    test('press Q or ESC triggers an abort', () => {
+      instance.abort = jest.fn();
+      instance.put(KEYS.Q);
+      instance.put(KEYS.ESCAPE);
+      expect(instance.abort).toHaveBeenCalledTimes(2);
+    });
+
+    test('press ENTER trigger a run', () => {
+      const mockCallback = jest.fn();
+      instance.run(['first.js'], mockCallback);
+      instance.put(KEYS.ENTER);
+      expect(mockCallback).toHaveBeenCalledTimes(2);
+      expect(mockCallback).toHaveBeenCalledWith('first.js', {});
+    });
+  });
+  describe('updateWithResults', () => {
+    test('with a test failure simply update UI', () => {
+      const mockCallback = jest.fn();
+      instance.run(['first.js'], mockCallback);
+      pipe.write('TEST RESULTS CONTENTS');
+      instance.updateWithResults({snapshot: {failure: true}});
+      expect(pipe.write.mock.calls.join('\n')).toMatchSnapshot();
+      expect(mockCallback).toHaveBeenCalledTimes(1);
+    });
+
+    test('with a test success, call the next test', () => {
+      const mockCallback = jest.fn();
+      instance.run(['first.js', 'second.js'], mockCallback);
+      pipe.write('TEST RESULTS CONTENTS');
+      instance.updateWithResults({snapshot: {failure: false}});
+      expect(pipe.write.mock.calls.join('\n')).toMatchSnapshot();
+      expect(mockCallback.mock.calls[1]).toEqual(['second.js', {}]);
+    });
+
+    test('overlay handle progress UI', () => {
+      const mockCallback = jest.fn();
+      instance.run(['first.js', 'second.js', 'third.js'], mockCallback);
+      pipe.write('TEST RESULTS CONTENTS');
+      instance.updateWithResults({snapshot: {failure: false}});
+      instance.updateWithResults({snapshot: {failure: true}});
+      expect(pipe.write.mock.calls.join('\n')).toMatchSnapshot();
+    });
+
+    test('last test success, trigger end of interactive mode', () => {
+      const mockCallback = jest.fn();
+      instance.abort = jest.fn();
+      instance.run(['first.js'], mockCallback);
+      pipe.write('TEST RESULTS CONTENTS');
+      instance.updateWithResults({snapshot: {failure: false}});
+      expect(pipe.write.mock.calls.join('\n')).toMatchSnapshot();
+      expect(instance.abort).toHaveBeenCalled();
+    });
+  });
+});

packages/jest-cli/src/__tests__/__snapshots__/SnapshotInteractiveMode-test.js.snap

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SnapshotInteractiveMode updateWithResults last test success, trigger end of interactive mode 1`] = `"TEST RESULTS CONTENTS"`;
+
+exports[`SnapshotInteractiveMode updateWithResults overlay handle progress UI 1`] = `
+"TEST RESULTS CONTENTS
+
+
+[MOCK - cursorSavePosition]
+[MOCK - cursorTo(0, 0)]
+<bold>undefined</>
+[MOCK - cursorRestorePosition]
+[MOCK - cursorUp]
+[MOCK - eraseDown]
+
+<bold>Interactive Snapshot Progress
+ › <bold><red>2 suites failed</>, <bold><green>1 suite passed</>
+
+<bold>Watch Usage
+<dim> › Press u<dim> to update failing snapshots.
+<dim> › Press s<dim> to skip the current snapshot..
+<dim> › Press q<dim> to quit interactive snapshot mode.
+<dim> › Press Enter<dim> to trigger a test run.
+"
+`;
+
+exports[`SnapshotInteractiveMode updateWithResults with a test failure simply update UI 1`] = `
+"TEST RESULTS CONTENTS
+
+
+[MOCK - cursorSavePosition]
+[MOCK - cursorTo(0, 0)]
+<bold>undefined</>
+[MOCK - cursorRestorePosition]
+[MOCK - cursorUp]
+[MOCK - eraseDown]
+
+<bold>Interactive Snapshot Progress
+ › <bold><red>1 suite failed</>
+
+<bold>Watch Usage
+<dim> › Press u<dim> to update failing snapshots.
+<dim> › Press q<dim> to quit interactive snapshot mode.
+<dim> › Press Enter<dim> to trigger a test run.
+"
+`;
+
+exports[`SnapshotInteractiveMode updateWithResults with a test success, call the next test 1`] = `"TEST RESULTS CONTENTS"`;

packages/jest-cli/src/constants.js

@@ -24,10 +24,12 @@ const KEYS = {
   CONTROL_D: '04',
   ENTER: '0d',
   ESCAPE: '1b',
+  I: '69',
   O: '6f',
   P: '70',
   Q: '71',
   QUESTION_MARK: '3f',
+  S: '73',
   T: '74',
   U: '75',
   W: '77',

packages/jest-cli/src/lib/terminalUtils.js

@@ -9,8 +9,15 @@
  */
 
 /* $FlowFixMe */
-const getTerminalWidth = (): nubmer => process.stdout.columns;
+const getTerminalWidth = (): number => process.stdout.columns;
+
+const rightPad = (input: string): string => {
+  const termWidth = getTerminalWidth();
+  input += Array(termWidth - input.length + 1).join(' ');
+  return input;
+};
 
 module.exports = {
   getTerminalWidth,
+  rightPad,
 };