e2e tests for examples - Githubissues

This PR introduces a new e2e test folder that runs the code from all examples at once.

To avoid instantiating each folder's npm packages, I'm installing every npm package that is needed for specific examples, and aliasing them with Webpack, e.g. chroma-js, etc. This does currently mean that a postinstall script to install the packages in __tests__/examples is required though.

npm run test:e2e appears to be broken since the TypeScript refactor (or later maybe), maybe non commonjs modules are being used somewhere. Importing yoga-layout-prebuilt crashes skpm-test, but that appears to be using commonjs though.

So for now, I'm creating a monolithic test example that is added to the test pipeline with npm run build --prefix __tests__/examples/, and can be manually run in Sketch GUI (or skpm-build --run), or will error out if there is a build breaking issue.

This should make it easy to test all examples with a single command.

This PR could be used later on to generate pngs from all the examples to do a pixel diff test, which would help a lot with the platform bridge refactor, and help out with alignment with React Native, and act as a benchmark for other React renderers to test implementation 🚀. This is something I noticed was mentioned in the React Primitives RFC (using Happo for cross-platform visual regression testing).

TODO

[x] Fix skpm-test and use that instead for the examples test
[ ] Finish adding the rest of the examples

fixes #363

@mathieudutour I've got e2e tests working again, and have the e2e example tests working now too 🙂.

Took a while to debug it: I found that importing yoga-layout off this branch was crashing Sketch, but the same version of yoga-layout wasn't crashing in a commit snapshot before the TypeScript refactor, so I downgraded @skpm/test-runner to ^0.3 and that fixed it, so should probably open an issue over at https://github.com/skpm/skpm – I'm not really sure how to debug to get enough info, reproduce steps are npm run test:e2e off master pretty much.

There's a bit of clean up to do before a merge, but would be ideal to have a review first. I'm using packages that are installed in __tests__/examples/package.json for now. If a new example is added, then it has to be added manually to the e2e examples test file, together with the dependencies in __tests__/examples/package.json, so maybe this is something that should be mentioned in CONTRIBUTING.md? There should probably be a script to install the skpm/example dependencies too, but not sure on the best way to do this.

I'm still running into #515 (in test runner, and in a normal react-sketchapp project also), which fails the examples test:

 PASS  basic
 PASS  render-context
 PASS  render-in-wrapped-object

 FAIL  examples

  ● examples › should render examples

     React SketchApp cannot render into this layer. You may be trying to render into a layer that does not take children. Try rendering into a LayerGroup, Artboard, or Page.
      at <anonymous> (../../lib/render.js:23:14)
      at <anonymous> (./examples.test.js:72:2)
      at <anonymous> (../../node_modules/promise-polyfill/lib/index.js:79:0)
      at <anonymous> (../../node_modules/@skpm/timers/timeout.js:18:0)

  ✕ should render examples

Patching

src/components/index.ts

import * as Svg from './Svg';

import Svg from './Svg';

fixes it and gets the example e2e tests to pass (and const { Path } = Svg; still works).

airbnb / react-sketchapp

e2e tests for examples #516