Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[charts] Setup playwright for E2E testing #13696

Closed
wants to merge 11 commits into from

Conversation

JCQuintas
Copy link
Member

@JCQuintas JCQuintas commented Jul 1, 2024

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

@JCQuintas JCQuintas added test core Infrastructure work going on behind the scenes component: charts This is the name of the generic UI component, not the React module! labels Jul 1, 2024
@JCQuintas JCQuintas self-assigned this Jul 1, 2024
@JCQuintas JCQuintas force-pushed the setup-playwright-for-charts branch from 67317f4 to 011946f Compare July 1, 2024 19:34
@mui-bot
Copy link

mui-bot commented Jul 1, 2024

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

Generated by 🚫 dangerJS against 2a59048

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jul 2, 2024
Copy link

github-actions bot commented Jul 2, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: charts This is the name of the generic UI component, not the React module! core Infrastructure work going on behind the scenes PR: out-of-date The pull request has merge conflicts and can't be merged test
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants