elastic / elastic-charts

https://elastic.github.io/elastic-charts/storybook
Other
368 stars 116 forks source link

[test] Code coverage from VRTs #1209

Open markov00 opened 3 years ago

markov00 commented 3 years ago

As discussed multiple times, we should check the level of code coverage reached by our VRTs. There are multiple reasons for that:

Caveats: tracking the code coverage is easy for unit tests, but can be hard if the code runs on a browser. From the last Jest-Puppeteer doc:

Generating code coverage for test files using Puppeteer is currently not possible if your test uses page.$eval, page.$$eval or page.evaluate as the passed function is executed outside of Jest's scope. Check out issue #7962 on GitHub for a workaround.

It looks possible in Playwright but testing code needs to be adapted a bit

Possible alternative: on a VRT we are testing a specific example at a time checking if the visual output is correct. The example (chart configuration) is available as Storybook story, and is basically a simple React component. What if we have a side set of "unit tests" that picks up the example component and just check for the chart rendering status? Doing that we can use the jest code coverage better, with much more precision than the one created via Playwright/Puppeteer because we don't have to go directly through a browser, but just the jest environment.

markov00 commented 1 year ago

Adding here a bunch of docs that could be helpful: The official playwright coverage docs https://playwright.dev/docs/api/class-coverage

A but outdated example on how to use coverage tes (current instabul API have changed) https://github.com/microsoft/playwright/discussions/14415#discussioncomment-2977900

The previous example should probably be possible if we serialize the reusability of pages like it is written here: https://playwright.dev/docs/test-retries#reuse-single-page-between-tests