Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Interactive Snapshot Update mode #3831

Merged
merged 14 commits into from
Jan 11, 2018
Merged

Interactive Snapshot Update mode #3831

merged 14 commits into from
Jan 11, 2018

Conversation

genintho
Copy link
Contributor

Fix #1798

This pull request is introducing a new option in jest watch mode allowing people to update the failed snapshot of one test suite at a time.

http://g.recordit.co/0vJJvBDofA.gif

It seems possible to update only the snapshot of 1 test, but I want to make sure my approach is correct.

I am having trouble to finish the tests for this change, especially the modification of watch.js. I tried to inspired myself from the packages/jest-cli/src/__tests__/watch-filename-pattern-mode-test.js file, but I would appreciate some advice. The file watch-snapshot-interactive-test.js is left in a "work in progress state".

@thymikee
Copy link
Collaborator

This is great ❤️. Can't wait to lay my eyes on the implementation and post some feedback.

@genintho
Copy link
Contributor Author

Can't wait for the feedback.

@cpojer cpojer requested a review from thymikee June 27, 2017 08:31
@@ -0,0 +1,138 @@
/**
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This will need Facebook's copyright header. Can you copy it from other files?

@@ -48,6 +50,11 @@ const watch = (
const prompt = new Prompt();
const testPathPatternPrompt = new TestPathPatternPrompt(pipe, prompt);
const testNamePatternPrompt = new TestNamePatternPrompt(pipe, prompt);

const snapshotInteracticeMode = new SnapshotInteractiveMode(pipe);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

typo: snapshotInteracticeMode -> snapshotInteractiveMode

snapshotInteracticeMode.run(
failedSnapshotTestPaths,
(path: string, jestRunnerOptions: Object) => {
updateRunnerPatternMatching('watch', '', path, jestRunnerOptions);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

jestRunnerOptions -> runnerOptions

this._pipe.write(ansiEscapes.cursorSavePosition);
this._pipe.write(ansiEscapes.cursorTo(0, 0));

const title = rightPad(' -> Interactive Snapshot Update Activated <-');
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why rightPad? You can offset this from left by 4 spaces. Also I'd rename this to just:
Interactive Snapshot Update Mode

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, this text appears in "random" position.

screen shot 2017-06-29 at 13 32 10

Can we put it on top? Or even resign, as we have information about Interactive Snapshot Progress below.

'\n' + chalk.bold('Watch Usage'),
chalk.dim(' \u203A Press ') +
'u' +
chalk.dim(' to update failing snapshots.'),
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd rather like something more descriptive:
Press u to update failing snapshots for this test.

chalk.dim(' to skip the current snapshot..')
: '',
chalk.dim(' \u203A Press ') +
'q' +
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change to Esc, like we do in Pattern Mode

const messages = [
'\n' + chalk.bold('Interactive Snapshot Progress'),
' \u203A ' + stats,
'\n' + chalk.bold('Watch Usage'),
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change to Interactive Snapshot Mode Usage

this._testFilePaths.length > 1
? chalk.dim(' \u203A Press ') +
's' +
chalk.dim(' to skip the current snapshot..')
Copy link
Collaborator

@thymikee thymikee Jun 29, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove the extra dot

: '',
chalk.dim(' \u203A Press ') +
'q' +
chalk.dim(' to quit interactive snapshot mode.'),
Copy link
Collaborator

@thymikee thymikee Jun 29, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

to quit Interactive Snapshot Update Mode

case KEYS.ESCAPE:
this.abort();
break;

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we remove these newlines?

this._run({});
break;
default:
console.log('got key event', key);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove this.

Copy link
Collaborator

@thymikee thymikee left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey, this looks like a good start.
I've left some comments on how we can improve this.
I still need to think about if this approach is correct, but we'll probably need another watch refactor, as it's becoming a mess.

@@ -126,10 +133,20 @@ const watch = (
results => {
isRunning = false;
hasSnapshotFailure = !!results.snapshot.failure;
failedSnapshotTestPaths = getFailedSnapshotTests(results);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This function filters the test paths based on failed snapshot flag, that's why this tool now works on per file basis.
We could get each test using similar logic as coded in testNamePatternPrompt. You should be able to reuse it and feed this to snapshotInteractiveMode.

@genintho
Copy link
Contributor Author

genintho commented Aug 8, 2017

@thymikee
I am getting this error while testing my branch

TypeError: Watcher is not a constructor
    at createWatcher (/Users/xt-pro/Dev/jest/packages/jest-haste-map/build/index.js:597:23)
    at Array.map (native)
    at HasteMap._watch (/Users/xt-pro/Dev/jest/packages/jest-haste-map/build/index.js:744:25)
    at _buildPromise._buildFileMap.then.then.hasteMap (/Users/xt-pro/Dev/jest/packages/jest-haste-map/build/index.js:276:21)
    at <anonymous>

Do you know by any chance what would create it? Thanks

@SimenB
Copy link
Member

SimenB commented Oct 30, 2017

I'd love to have it merged. CI is green, so it might be enough to just rebase it. I can have a look this evening

@genintho
Copy link
Contributor Author

genintho commented Oct 30, 2017

The error I commented about above is still happening for me. Not sure what can cause it ATM.

@SimenB
Copy link
Member

SimenB commented Oct 30, 2017

Can you rebase and push?

@cpojer
Copy link
Member

cpojer commented Dec 15, 2017

Hey everyone! What is the status of this? A lot of people would love to have this feature but the PR is stale and needs a bunch of rebases.

@phra
Copy link
Contributor

phra commented Dec 19, 2017

this would be awesome to have! i can maybe rebase the branch and try to fix the conflicts.. is someone already working on this? maybe @genintho ?

 Conflicts:
	packages/jest-cli/src/constants.js
	packages/jest-cli/src/lib/terminal_utils.js
	packages/jest-cli/src/watch.js
	packages/jest-util/src/index.js
@genintho
Copy link
Contributor Author

Rebase done,
I can not make the following test pass,

 FAIL  integration_tests/__tests__/timeouts.test.js (9.343s)
  ● exceeds the timeout
  ● does not exceed the timeout

@SimenB
Copy link
Member

SimenB commented Dec 20, 2017

@genintho CI is green, thanks for rebasing!

@thymikee could you review again?

Only thing I see is missing update to the changelog, code itself LGTM. I'm not familiar with the watch part of the codebase, though (I probably should sit down and try to learn it)

@genintho
Copy link
Contributor Author

@SimenB If you could test the code changes too, that would be appreciated.

@genintho
Copy link
Contributor Author

I guess this needs to be re-implemented to be a plugin for the watch mode?

@thymikee
Copy link
Collaborator

Not necessarily I'd say. Btw, I'm keeping testing this feature on my little to-do list, it's just postponed a bit because of holiday.

@SimenB
Copy link
Member

SimenB commented Dec 23, 2017

If it can be implemented as a plugin, that would be preferable. But it's not a necessity for merge, I'd say 🙂

Copy link
Collaborator

@thymikee thymikee left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left some comments, only couple of them need to be addressed, but generally it looks good and works well 👍

.gitignore Outdated
@@ -27,3 +27,6 @@ lerna-debug.log
npm-debug.log
npm-debug.log*
yarn-error.log*

# JetBrains IDE
.idea/*
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should probably be a part of your global gitignore, but I'm not against leaving this here


_drawUIOverlay() {
this._pipe.write(ansiEscapes.scrollDown);
this._pipe.write(ansiEscapes.scrollDown);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any reason why do we have to scroll down? Removing these 2 lines leaves the functionality unchanged on iTerm and macOS Terminal.

chalk.dim(' to trigger a test run.'),
];

this._pipe.write(messages.filter(message => !!message).join('\n') + '\n');
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: you can do messages.filter(Boolean), not an issue though

return;
}

this._testFilePaths.shift();
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a reminder, than shifting is slower than poping from an array, but the difference would be unnoticeable here (unless you have 10k failing tests you want to go one by one)

@@ -60,6 +61,8 @@ export default function watch(
const prompt = new Prompt();
const testPathPatternPrompt = new TestPathPatternPrompt(outputStream, prompt);
const testNamePatternPrompt = new TestNamePatternPrompt(outputStream, prompt);
const snapshotInteracticeMode = new SnapshotInteractiveMode(outputStream);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

typo: snapshotInteractiveMode

@@ -0,0 +1,60 @@
import getFailedSnapshotTests from '../get_failed_snapshot_tests';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing a license not with @flow pragma

@@ -0,0 +1,135 @@
const chalk = require('chalk');
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing a license not with @flow pragma

@cpojer
Copy link
Member

cpojer commented Jan 6, 2018

@genintho thanks for sticking with us for such a long time, we are sorry for not being able to get to this earlier. Do you mind making a final iteration based on @thymikee's comments so we can merge this and ship this for all Jest users? Thanks!

Copy link
Collaborator

@thymikee thymikee left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mjesun update the snapshots and you should be good to merge this :)

@cpojer
Copy link
Member

cpojer commented Jan 11, 2018

Awesome! So excited to see this. Let's merge it, publish 22.1.0 and make some tweets about this!

@genintho
Copy link
Contributor Author

@mjesun thank you for taking the time to fix the issues. I was planning do it this week end.

@mjesun
Copy link
Contributor

mjesun commented Jan 11, 2018

You're welcome! ☺️Thanks for taking the time to implement the feature, it's a really cool one!

Copy link
Member

@SimenB SimenB left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is missing documentation (and an entry in the changelog).

Code LGTM 🙂

EDIT: It doesn't seem like we have much docs about the watch mode, that's kinda sad

@cpojer cpojer merged commit 2dd69b9 into jestjs:master Jan 11, 2018
@cpojer
Copy link
Member

cpojer commented Jan 11, 2018

@SimenB I merged this because the PR was in progess for 6 months and I don't want to get it stale again. I filed a task to track docs+changelog updates.

@genintho @mjesun would either of you be able to work on this in a new PR? It's this task: #5288

rickhanlonii pushed a commit that referenced this pull request Feb 10, 2018
* add changelog record for #3831

* nicer description

* new section in snapshot doc about interactive mode

* optimized screen shot

* document itself in changelog

* replace png by gif

* fix description

* typos

* Move changelog update to master

* Updates to changelog language

* Minor language updates

* rm "the"

* s/file/suite
@genintho genintho deleted the snap-interactive-up branch June 2, 2018 03:43
@github-actions
Copy link

This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators May 12, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

CLI Mode where snapshots must be approved before they are saved
8 participants