Change test script to interactive mode

[AWolf81]

At the moment, tests inside Guppy are running once and the user need to re-run manually. As @joshwcomeau mentioned in a comment that's a temporary hack.

It was a good idea from Josh to do this later as this is a pretty large task. But maybe two people could work on this.
One for implementing the UI with jest-stare and the other for parsing/handling the interactive commands. But it's also possible to tackle this with-out splitting - just do it like this: First UI then command handling or start with a minimal temporary UI and work on the business logic first then improve UI.

Is your feature request related to a problem? Please describe.
UX could be better if it would be possible to use interactive mode.

Describe the solution you'd like
By removing line 188 to 190 in task.saga. We're running in interactive mode and the output in a terminal will look like in the following screenshot (ran in a real terminal as the Guppy output seems to be filtered):

Todos
UI

• Remove terminal from test preview as we're rendering everything to the UI
• The status should change if the interactive test is passing to green & on fail to red.
• Extract every info from the terminal output from top down to string Watch usage. Maybe we could also change to a json reporter so it's easier to get the output - not sure if this is working with interactive mode.
• Render the test result - I think we could use jest-stare to render it.
• Show progress bar & expected test time (optional, less important)
• Create a UI element for each command:
  • Run all tests a key
  • Run only failed tests f key
  • Filtering p & t key with a input field
  • Stop tests q key
  • Re-run test enter key
• Use the same keys as keyboard shortcuts so it's possible to trigger them with keyboard.

Command handling

• Create a runTest generator in task.saga that's listening for a Redux action that will pass the command to the test child process. So you have to use take(stdioChannel) and takeEvery(TRIGGER_TEST_COMMAND, handleTestCommand) inside a while(true) loop.
• handleTestCommand will use sendCommandToProcess to send the command passed with the action TRIGGER_TEST_COMMAND to the test child process.

Edge cases

• What happens if a snapshot needs to be updated? Parse the info from the output and display a button & also show a list of snapshot files that are not matching so they can be opened in editor. Jest-stare is already doing a nice diff display - maybe we could display this if we're detecting that a snapshot failed.

[superhawk610]

https://github.com/Raathigesh/majestic looks like a cool Jest front-end that fits better with Guppy's UI out of the box, perhaps another option to consider.

[AWolf81]

Good idea. Maybe we could use it as starting point, inspiration for the UI or directly integrate it. I like the navigation through the test files but I have some points I don't like:

• No progressbar during test run - just indefinite spinners at each test suite (jest console output got a time & progress bar indication)
• Takes pretty long to load (not measured but I think around 5-10 sec. for Guppy tests)

Guppy tests in Majestic

How would we add the testing pane? I think it would be good if we could have a second project page so we're getting more space for the UI. I don't like to add this into the modal or would this fit into the modal?

If we would use Majestic would we create a fork (so we can customize the UI & add features) and launch it with npx https://github.com/forked-majestic? Or should we add it as submodule and run it with-out npx (probably a better dev. experience)? Once the server is started, we could show the Majestic server output in an iframe.