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,
 };