[charts] Setup playwright for E2E testing

[JCQuintas]

Second test will fail because it requires #13692, also proves it works 😅

Experimental Component Testing

Component testing is currently in experimental mode, we could use something similar to what e2e is doing though, if we deem this is too risky.

The main drawback of component testing is that you can't pass a synchronous function as a prop to a component, because it will be executed in the test environment, not in the browser. You can define your component's "story" in a different file and import it in the test file.

For that we use a *.e2e.stories.tsx file, where we define the stories for the components we want to test.

Reasoning vs RTL

Some of our features use SVG apis that are not available in the JSDOM environment. This is why we use playwright to run the tests in a real browser.

An alternative would be to use svgdom or polyfill everything ourselves.

Why not leverage the current test:e2e:website or test:e2e

:e2e:website seems to test the website itself, and adding tests to the examples could break if we decide to redo or change the examples.

:e2e seems to use mocha as the test runner and has a complex setup, probably was required for an old version of playwright.

Version

Using next because they coincidentally just added touch simulation support, which I needed for the tests 🙃

Running tests

Remember to install the deps and playwright browsers as well.

pnpm test:e2e:charts

or

pnpm test:e2e:charts --ui

CI/CD

• TBD

[mui-bot]

Deploy preview: https://deploy-preview-13696--material-ui-x.netlify.app/

Generated by :no_entry_sign: dangerJS against 2a590488b363aa1d7b32daf4b90459c2b451cf13

[github-actions[bot]]

This pull request has conflicts, please resolve those before we can evaluate the pull request.