storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.68k stars 9.32k forks source link

[Tracking]: Project Coverage πŸ›‘οΈ #29530

Open JReinhold opened 1 week ago

JReinhold commented 1 week ago

πŸ§‘β€πŸ€β€πŸ§‘ Who: @JReinhold, @ndelangen and @ghengeveld

This is a tracking issue for the Project Coverage πŸ›‘οΈ project. The purpose of this issue is to keep tracking of the overall status of the project and tasks, and plan everything around it. This project is a continuation of #29088 and is related to #29529 and #29531.

⚠️ Problem

It's not immediately clear how much of a project's UI is covered by tests/stories. Storybook can provide that via Vitest's coverage report.

🏁 Goals

  1. Users are able to view project coverage in Storybook.

    1. User should be able to view project test coverage % inside storybook. The coverage % should update every time user does a complete test runs.
    2. User should also be able to view the overall project coverage percentage within storybook, and clicking on the coverage takes you to the Vitest coverage report.
    3. Project coverage should respect the Vitest coverage config.
  2. Document how to use this and integrate with coverage tools, CodeCov, etc.

Image

🚩 Milestones

## Main milestone
- [ ] Add Coverage line to Testing Module UI
- [ ] Enable coverage in Vitest runs when coverage event is sent
- [ ] Respect user's coverage config in their Vitest config
- [ ] Display coverage  percentage in Testing Module UI
- [ ] Create page with Vitest's HTML-based coverage report
- [ ] What about nycrc?