JavaScript Tests, Take 1.

[swissspidy]

This PR aims to make the current JavaScript code base more testable, while also adding some initial tests to prove that the setup is working. There's still lots to do. Mainly:

• Test and verify webpack configuration
  This PR also affects non-Stories components, so we need to double-check whether it works and makes sense.
• Maybe reorganize components some more.
  Ideally, shared components like the featured image notice stuff is in a common directory, instead of in only amp-stories or block-editor. See also Improve featured image notices #2038.
• Make sure Jest works (!)
  There are currently some issues, see Update to Babel 7.4 and core-js 3 WordPress/gutenberg#15139, https://wordpress.slack.com/archives/C02QB2JS7/p1556031641343900, Include examples of tests WordPress/gutenberg-examples#26.
  Might need a second pair of eyes from Gutenberg devs.

Testing Instructions

The two main things to test here are:

1. Make sure everything in the admin still works: toggling error details, block validation, the stories editor. (Manual testing)
2. Ensuring the unit tests are running. (Run npm run test:js)

Note: right now, the unit test part is a bit more complex at the moment because the new Gutenberg packages haven't been published on npm yet.

In order to prevent any errors and make sure that all the tests run smoothly, you need to perform the following tasks:

1. Clone https://github.com/WordPress/gutenberg/ and build it.

2. Go to each of these folders and run npm link inside them:

   • packages/babel-preset-default
   • packages/block-editor
   • packages/blocks
   • packages/compose
   • packages/data
   • packages/element
   • packages/hooks
   • packages/i18n
   • packages/wordcount

   So basically this: (cd packages/compose && npm link); (cd packages/blocks && npm link); ...)

3. Check out this PR branch locally

4. Run npm link for all these packages.
   Basically this: npm link @wordpress/compose; npm link @wordpress/blocks; npm link @wordpress/i18n; ...

5. Finally, run npm run test:js

The result should look like this:

Test Suites: 1 failed, 18 passed, 19 total
Tests:       5 failed, 56 passed, 61 total
Snapshots:   1 file removed, 6 passed, 6 total
Time:        25.028s, estimated 36s

(Yes, there are currently some failing tests; see below for the reason)

To do (ideally in some follow-up PRs)

• See how to best mock select() calls in tests as the current approach does not seem to be working in the test/reducer.js.
• Add some more unit tests where applicable
  This is more of an ongoing process
• Refine E2E test setup and add some initial E2E tests
• Run tests on Travis
  Once all tests are green, otherwise it's just gonna be a sad experience 🙂

See #2121.

[swissspidy]

There's some progress upstream!

WordPress/gutenberg#15246 has been merged, and WordPress/gutenberg#15139 is close to being merged as well.

Once that is done, and new package versions have been released, there should be no more transpiler errors when running tests.

[kienstra]

Looks Good

Hi @swissspidy,
This looks good, as far as I know about JavaScript testing (much less than you) 😄

The results are similar to the ones a few days ago, though like you mentioned, I didn't run npm link to use local packages.

[miina]

Seems to work as expected, based on the description.

[swissspidy]

Wow, 90 seconds is a lot 😬 It should actually be more like 1/10th of that...

That sounds like Jest does transpile all the Gutenberg packages when running the tests or something. Hope that is just because of the npm link stuff. I'll keep an eye on it and if it's still an issue after the next Gutenberg release, I am going to have a look what can be improved there.

[swissspidy]

Unless there are any objections, I am going to merge this later the day.

[miina]

Wow, 90 seconds is a lot 😬 It should actually be more like 1/10th of that...

@swissspidy Just for information that my computer has been having some serious thinking (and other) issues lately so it's likely my local issue only if it works OK for you -- I'll get a new one soon and then can check again.