Experiment/add cypress for e2e tests

[tay1orjones]

Closes #8145

• Add and configure Cypress for automated end to end testing
• Add the Cypress eslint plugin
• Add @testing-library/cypress to have a more consistent syntax between jest unit tests and cypress tests.
• Include cypress-real-events so we can use the Tab key for keyboard navigation testing.
• Add and configure Percy snapshots in CI only.
• Add simple e2e test file for Accordion for proof of concept

From the original issue - this integration considers the following:

How simple is it to author tests?

• I think it's pretty easy, it's very similar syntax to jest tests. The assertion syntax is a bit different though.

How simple is it for tests to run in CI?

• Fairly simple. ci-checks runs a yarn lerna run command in the root package.json, which runs yarn command for cypress in packages/react. We only attach Percy to report snaps to their external service in CI (not locally)

Does running cypress dramatically increase CI time?

• Locally this single test takes 52s to complete

How simple is it to bring in styles for our components?

• Pretty simple, just import them at the top of the test file. The webpack config file is used by cypress to bring it all in.

Changelog

New

• add cypress automated end-to-end testing

Testing / Reviewing

• CI should pass, snaps should be reported to the Percy dashboard.
• Cypress command should succeed locally

[netlify]

Deploy preview for carbon-elements ready!

Built with commit 18b87f2

https://deploy-preview-8282--carbon-elements.netlify.app

[netlify]

Deploy preview for carbon-components-react ready!

Built with commit 18b87f2

https://deploy-preview-8282--carbon-components-react.netlify.app

[joshblack]

Getting this right now when running the tests:

Is it missing our babel-plugin-dev-expression, I guess?

[dakahn]

installed, built and tests ran great 🟢 👍🏽

[joshblack]

@tay1orjones how does the authoring experience work with the update? I had assumed it was yarn cypress open but wanted to check. When I use that command I end up seeing this in the GUI:

Locally this single test takes 52s to complete

Also ooof, that's rough. I assume most of the time is to compile our code with the dev server from webpack that is used by cypress to test?

[tay1orjones]

@joshblack This uses the "Component Test Runner" which they've separated from the standard runner. It's what allows us to mount() a component vs having to spin up a dev server and cy.visit(url). So the commands are different:

• yarn cypress open-ct
• yarn cypress run-ct

I assume most of the time is to compile our code with the dev server from webpack that is used by cypress to test?

I think it's actually been reduced since I updated to the new version of cypress! I don't see a total time output on the console, but the compile time is listed at 22.24s. The tests themselves are super quick:

Accordion
    ✓ should render (151ms)
    ✓ should tab between items and open on space (477ms)

Also there is video recording processing, 2s of the overall time. We might be able to turn that off in CI via a flag. Same with screenshots.

[tay1orjones]

Just pushed an update to turn off video and snaps in CI on the yarn test:e2e:cypress command.

I spoke too soon on the time reduction, lerna still reports total time of 44.2s to complete the command. So roughly half the time appears to be webpack compilation.

[joshblack]

Thanks @tay1orjones! That makes a ton of sense.

[tay1orjones]

@joshblack I updated the command naming/syntax based on your suggestions 👍

[tw15egan]

This is really great! I changed the test to output the video and everything worked as expected

[tay1orjones]

@tw15egan Awesome! You can also run the tests with GUI for debugging/authoring with cypress open-ct

[tay1orjones]

@tw15egan @joshblack let me know if there's any other concerns here 👀

Otherwise I think this one might be set 👍 just need another approve

[tw15egan]

Ship it! 👍🏻 ✅