Interactive Snapshot Mode improvements (#5864)

* Interactive Snapshot Mode updates * Update docs * Squash images * More squashing * Update snaps * Move arrow to a const * Add comment * Update GIF * Clarify cursorUp usage * Update snaps * Update CHANGELOG * Add AssertionLocation type
jestjs · Mar 26, 2018 · 3c65b72 · 3c65b72
1 parent 2bd5dfd
commit 3c65b72
Show file tree

Hide file tree

Showing 12 changed files with 780 additions and 137 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -33,7 +33,9 @@
   ([#5605](https://github.com/facebook/jest/pull/5605))
 * `[jest-cli]` Add `isSerial` property that runners can expose to specify that
   they can not run in parallel
-  [#5706](https://github.com/facebook/jest/pull/5706)
+  ([#5706](https://github.com/facebook/jest/pull/5706))
+* `[jest-cli]` Interactive Snapshot Mode improvements
+  ([#5864](https://github.com/facebook/jest/pull/5864))
 
 ### Fixes
 

diff --git a/docs/SnapshotTesting.md b/docs/SnapshotTesting.md
@@ -128,13 +128,18 @@ Failed snapshots can also be updated interactively in watch mode:
 ![](/jest/img/content/interactiveSnapshot.png)
 
 Once you enter Interactive Snapshot Mode, Jest will step you through the failed
-snapshots one test suite at a time and give you the opportunity to review the
-failed output.
+snapshots one test at a time and give you the opportunity to review the failed
+output.
 
 From here you can choose to update that snapshot or skip to the next:
 
 ![](/jest/img/content/interactiveSnapshotUpdate.gif)
 
+Once you're finished, Jest will give you a summary before returning back to
+watch mode:
+
+![](/jest/img/content/interactiveSnapshotDone.png)
+
 ### Tests Should Be Deterministic
 
 Your tests should be deterministic. That is, running the same tests multiple

diff --git a/packages/jest-cli/src/__tests__/__snapshots__/snapshot_interactive_mode.test.js.snap b/packages/jest-cli/src/__tests__/__snapshots__/snapshot_interactive_mode.test.js.snap
@@ -1,36 +1,308 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SnapshotInteractiveMode updateWithResults last test success, trigger end of interactive mode 1`] = `"TEST RESULTS CONTENTS"`;
+exports[`SnapshotInteractiveMode skip 1 test, then quit 1`] = `
+"[MOCK - cursorUp]
+[MOCK - eraseDown]
+
+<bold>Interactive Snapshot Progress</>
+ › <bold><dim>1 snapshot remaining<bold></>
+
+<bold>Watch Usage</>
+<dim> › Press </>u<dim> to update failing snapshots for this test.</>
+<dim> › Press </>s<dim> to skip the current test.</>
+<dim> › Press </>q<dim> to quit Interactive Snapshot Mode.</>
+<dim> › Press </>Enter<dim> to trigger a test run.</>
+"
+`;
+
+exports[`SnapshotInteractiveMode skip 1 test, then quit 2`] = `
+"[MOCK - eraseDown]
+
+<bold>Interactive Snapshot Result</>
+ › <bold><dim>1 snapshot reviewed<bold></>, <bold><yellow>1 snapshot skipped</></>
+
+<bold>Watch Usage</>
+<dim> › Press </>r<dim> to restart Interactive Snapshot Mode.</>
+<dim> › Press </>q<dim> to quit Interactive Snapshot Mode.</>
+"
+`;
+
+exports[`SnapshotInteractiveMode skip 1 test, then restart 1`] = `
+"[MOCK - cursorUp]
+[MOCK - eraseDown]
+
+<bold>Interactive Snapshot Progress</>
+ › <bold><dim>1 snapshot remaining<bold></>
+
+<bold>Watch Usage</>
+<dim> › Press </>u<dim> to update failing snapshots for this test.</>
+<dim> › Press </>s<dim> to skip the current test.</>
+<dim> › Press </>q<dim> to quit Interactive Snapshot Mode.</>
+<dim> › Press </>Enter<dim> to trigger a test run.</>
+"
+`;
+
+exports[`SnapshotInteractiveMode skip 1 test, then restart 2`] = `
+"[MOCK - eraseDown]
+
+<bold>Interactive Snapshot Result</>
+ › <bold><dim>1 snapshot reviewed<bold></>, <bold><yellow>1 snapshot skipped</></>
+
+<bold>Watch Usage</>
+<dim> › Press </>r<dim> to restart Interactive Snapshot Mode.</>
+<dim> › Press </>q<dim> to quit Interactive Snapshot Mode.</>
+"
+`;
+
+exports[`SnapshotInteractiveMode skip 1 test, then restart 3`] = `
+"[MOCK - cursorUp]
+[MOCK - eraseDown]
+
+<bold>Interactive Snapshot Progress</>
+ › <bold><dim>1 snapshot remaining<bold></>
+
+<bold>Watch Usage</>
+<dim> › Press </>u<dim> to update failing snapshots for this test.</>
+<dim> › Press </>s<dim> to skip the current test.</>
+<dim> › Press </>q<dim> to quit Interactive Snapshot Mode.</>
+<dim> › Press </>Enter<dim> to trigger a test run.</>
+"
+`;
+
+exports[`SnapshotInteractiveMode skip 1 test, update 1 test, then finish and restart 1`] = `
+"[MOCK - cursorUp]
+[MOCK - eraseDown]
+
+<bold>Interactive Snapshot Progress</>
+ › <bold><dim>2 snapshots remaining<bold></>
+
+<bold>Watch Usage</>
+<dim> › Press </>u<dim> to update failing snapshots for this test.</>
+<dim> › Press </>s<dim> to skip the current test.</>
+<dim> › Press </>q<dim> to quit Interactive Snapshot Mode.</>
+<dim> › Press </>Enter<dim> to trigger a test run.</>
+"
+`;
+
+exports[`SnapshotInteractiveMode skip 1 test, update 1 test, then finish and restart 2`] = `
+"[MOCK - cursorUp]
+[MOCK - eraseDown]
+
+<bold>Interactive Snapshot Progress</>
+ › <bold><dim>1 snapshot remaining<bold></>, <bold><yellow>1 snapshot skipped</></>
+
+<bold>Watch Usage</>
+<dim> › Press </>u<dim> to update failing snapshots for this test.</>
+<dim> › Press </>s<dim> to skip the current test.</>
+<dim> › Press </>q<dim> to quit Interactive Snapshot Mode.</>
+<dim> › Press </>Enter<dim> to trigger a test run.</>
+"
+`;
+
+exports[`SnapshotInteractiveMode skip 1 test, update 1 test, then finish and restart 3`] = `
+"[MOCK - eraseDown]
+
+<bold>Interactive Snapshot Result</>
+ › <bold><dim>2 snapshots reviewed<bold></>, <bold><green>1 snapshot updated</></>, <bold><yellow>1 snapshot skipped</></>
+
+<bold>Watch Usage</>
+<dim> › Press </>r<dim> to restart Interactive Snapshot Mode.</>
+<dim> › Press </>q<dim> to quit Interactive Snapshot Mode.</>
+"
+`;
+
+exports[`SnapshotInteractiveMode skip 1 test, update 1 test, then finish and restart 4`] = `
+"[MOCK - cursorUp]
+[MOCK - eraseDown]
+
+<bold>Interactive Snapshot Progress</>
+ › <bold><dim>1 snapshot remaining<bold></>
+
+<bold>Watch Usage</>
+<dim> › Press </>u<dim> to update failing snapshots for this test.</>
+<dim> › Press </>s<dim> to skip the current test.</>
+<dim> › Press </>q<dim> to quit Interactive Snapshot Mode.</>
+<dim> › Press </>Enter<dim> to trigger a test run.</>
+"
+`;
+
+exports[`SnapshotInteractiveMode skip 2 tests, then finish and restart 1`] = `
+"[MOCK - cursorUp]
+[MOCK - eraseDown]
+
+<bold>Interactive Snapshot Progress</>
+ › <bold><dim>2 snapshots remaining<bold></>
+
+<bold>Watch Usage</>
+<dim> › Press </>u<dim> to update failing snapshots for this test.</>
+<dim> › Press </>s<dim> to skip the current test.</>
+<dim> › Press </>q<dim> to quit Interactive Snapshot Mode.</>
+<dim> › Press </>Enter<dim> to trigger a test run.</>
+"
+`;
+
+exports[`SnapshotInteractiveMode skip 2 tests, then finish and restart 2`] = `
+"[MOCK - cursorUp]
+[MOCK - eraseDown]
+
+<bold>Interactive Snapshot Progress</>
+ › <bold><dim>1 snapshot remaining<bold></>, <bold><yellow>1 snapshot skipped</></>
+
+<bold>Watch Usage</>
+<dim> › Press </>u<dim> to update failing snapshots for this test.</>
+<dim> › Press </>s<dim> to skip the current test.</>
+<dim> › Press </>q<dim> to quit Interactive Snapshot Mode.</>
+<dim> › Press </>Enter<dim> to trigger a test run.</>
+"
+`;
+
+exports[`SnapshotInteractiveMode skip 2 tests, then finish and restart 3`] = `
+"[MOCK - eraseDown]
+
+<bold>Interactive Snapshot Result</>
+ › <bold><dim>2 snapshots reviewed<bold></>, <bold><yellow>2 snapshots skipped</></>
 
-exports[`SnapshotInteractiveMode updateWithResults overlay handle progress UI 1`] = `
-"TEST RESULTS CONTENTS
-[MOCK - cursorUp]
+<bold>Watch Usage</>
+<dim> › Press </>r<dim> to restart Interactive Snapshot Mode.</>
+<dim> › Press </>q<dim> to quit Interactive Snapshot Mode.</>
+"
+`;
+
+exports[`SnapshotInteractiveMode skip 2 tests, then finish and restart 4`] = `
+"[MOCK - cursorUp]
 [MOCK - eraseDown]
 
 <bold>Interactive Snapshot Progress</>
- › <bold><red>2 suites failed</></>, <bold><green>1 suite passed</></>
+ › <bold><dim>2 snapshots remaining<bold></>
 
 <bold>Watch Usage</>
 <dim> › Press </>u<dim> to update failing snapshots for this test.</>
-<dim> › Press </>s<dim> to skip the current test suite.</>
-<dim> › Press </>q<dim> to quit Interactive Snapshot Update Mode.</>
+<dim> › Press </>s<dim> to skip the current test.</>
+<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 - cursorUp]
+exports[`SnapshotInteractiveMode update 1 test, skip 1 test, then finish and restart 1`] = `
+"[MOCK - cursorUp]
 [MOCK - eraseDown]
 
 <bold>Interactive Snapshot Progress</>
- › <bold><red>1 suite failed</></>
+ › <bold><dim>2 snapshots remaining<bold></>
 
 <bold>Watch Usage</>
 <dim> › Press </>u<dim> to update failing snapshots for this test.</>
-<dim> › Press </>q<dim> to quit Interactive Snapshot Update Mode.</>
+<dim> › Press </>s<dim> to skip the current test.</>
+<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"`;
+exports[`SnapshotInteractiveMode update 1 test, skip 1 test, then finish and restart 2`] = `
+"[MOCK - cursorUp]
+[MOCK - eraseDown]
+
+<bold>Interactive Snapshot Progress</>
+ › <bold><dim>1 snapshot remaining<bold></>, <bold><green>1 snapshot updated</></>
+
+<bold>Watch Usage</>
+<dim> › Press </>u<dim> to update failing snapshots for this test.</>
+<dim> › Press </>s<dim> to skip the current test.</>
+<dim> › Press </>q<dim> to quit Interactive Snapshot Mode.</>
+<dim> › Press </>Enter<dim> to trigger a test run.</>
+"
+`;
+
+exports[`SnapshotInteractiveMode update 1 test, skip 1 test, then finish and restart 3`] = `
+"[MOCK - eraseDown]
+
+<bold>Interactive Snapshot Result</>
+ › <bold><dim>2 snapshots reviewed<bold></>, <bold><green>1 snapshot updated</></>, <bold><yellow>1 snapshot skipped</></>
+
+<bold>Watch Usage</>
+<dim> › Press </>r<dim> to restart Interactive Snapshot Mode.</>
+<dim> › Press </>q<dim> to quit Interactive Snapshot Mode.</>
+"
+`;
+
+exports[`SnapshotInteractiveMode update 1 test, skip 1 test, then finish and restart 4`] = `
+"[MOCK - cursorUp]
+[MOCK - eraseDown]
+
+<bold>Interactive Snapshot Progress</>
+ › <bold><dim>1 snapshot remaining<bold></>
+
+<bold>Watch Usage</>
+<dim> › Press </>u<dim> to update failing snapshots for this test.</>
+<dim> › Press </>s<dim> to skip the current test.</>
+<dim> › Press </>q<dim> to quit Interactive Snapshot Mode.</>
+<dim> › Press </>Enter<dim> to trigger a test run.</>
+"
+`;
+
+exports[`SnapshotInteractiveMode update 1 test, then finish and return 1`] = `
+"[MOCK - cursorUp]
+[MOCK - eraseDown]
+
+<bold>Interactive Snapshot Progress</>
+ › <bold><dim>1 snapshot remaining<bold></>
+
+<bold>Watch Usage</>
+<dim> › Press </>u<dim> to update failing snapshots for this test.</>
+<dim> › Press </>s<dim> to skip the current test.</>
+<dim> › Press </>q<dim> to quit Interactive Snapshot Mode.</>
+<dim> › Press </>Enter<dim> to trigger a test run.</>
+"
+`;
+
+exports[`SnapshotInteractiveMode update 1 test, then finish and return 2`] = `
+"[MOCK - eraseDown]
+
+<bold>Interactive Snapshot Result</>
+ › <bold><dim>1 snapshot reviewed<bold></>, <bold><green>1 snapshot updated</></>
+
+<bold>Watch Usage</>
+<dim> › Press </>Enter<dim> to return to watch mode.</>
+"
+`;
+
+exports[`SnapshotInteractiveMode update 2 tests, then finish and return 1`] = `
+"[MOCK - cursorUp]
+[MOCK - eraseDown]
+
+<bold>Interactive Snapshot Progress</>
+ › <bold><dim>2 snapshots remaining<bold></>
+
+<bold>Watch Usage</>
+<dim> › Press </>u<dim> to update failing snapshots for this test.</>
+<dim> › Press </>s<dim> to skip the current test.</>
+<dim> › Press </>q<dim> to quit Interactive Snapshot Mode.</>
+<dim> › Press </>Enter<dim> to trigger a test run.</>
+"
+`;
+
+exports[`SnapshotInteractiveMode update 2 tests, then finish and return 2`] = `
+"[MOCK - cursorUp]
+[MOCK - eraseDown]
+
+<bold>Interactive Snapshot Progress</>
+ › <bold><dim>1 snapshot remaining<bold></>, <bold><green>1 snapshot updated</></>
+
+<bold>Watch Usage</>
+<dim> › Press </>u<dim> to update failing snapshots for this test.</>
+<dim> › Press </>s<dim> to skip the current test.</>
+<dim> › Press </>q<dim> to quit Interactive Snapshot Mode.</>
+<dim> › Press </>Enter<dim> to trigger a test run.</>
+"
+`;
+
+exports[`SnapshotInteractiveMode update 2 tests, then finish and return 3`] = `
+"[MOCK - eraseDown]
+
+<bold>Interactive Snapshot Result</>
+ › <bold><dim>2 snapshots reviewed<bold></>, <bold><green>2 snapshots updated</></>
+
+<bold>Watch Usage</>
+<dim> › Press </>Enter<dim> to return to watch mode.</>
+"
+`;