Test: Add coverage feature

[ndelangen]

Works on #29530

What I did

Hooked up the coverage frontend to the Vitest backend, adding support for reporting coverage during test runs.

Todo

• Make the coverage status a link to the HTML report

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

name	before	after	diff	z	%
createSize	0 B	0 B	0 B	-	-
generateSize	77.7 MB	77.7 MB	0 B	-0.53	0%
initSize	130 MB	130 MB	985 B	-2.38	0%
diffSize	52.4 MB	52.4 MB	985 B	-2.38	0%
buildSize	6.83 MB	6.83 MB	243 B	1.86	0%
buildSbAddonsSize	1.51 MB	1.51 MB	0 B	0.55	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	1.86 MB	1.86 MB	243 B	1.47	0%
buildSbPreviewSize	271 kB	271 kB	0 B	0.46	0%
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	3.84 MB	3.84 MB	243 B	1.22	0%
buildPreviewSize	3 MB	3 MB	0 B	2.37	0%
testBuildSize	0 B	0 B	0 B	-	-
testBuildSbAddonsSize	0 B	0 B	0 B	-	-
testBuildSbCommonSize	0 B	0 B	0 B	-	-
testBuildSbManagerSize	0 B	0 B	0 B	-	-
testBuildSbPreviewSize	0 B	0 B	0 B	-	-
testBuildStaticSize	0 B	0 B	0 B	-	-
testBuildPrebuildSize	0 B	0 B	0 B	-	-
testBuildPreviewSize	0 B	0 B	0 B	-	-

name	before	after	diff	z	%
createTime	7.5s	26.5s	18.9s	1.55	🔺71.5%
generateTime	21.8s	20.2s	-1s -558ms	-0.39	-7.7%
initTime	15.9s	13.7s	-2s -207ms	-0.44	-16.1%
buildTime	7.8s	8.1s	302ms	-0.81	3.7%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	4.2s	5.1s	861ms	-0.58	16.8%
devManagerResponsive	3.2s	3.9s	711ms	0.36	18.1%
devManagerHeaderVisible	495ms	520ms	25ms	-0.54	4.8%
devManagerIndexVisible	558ms	592ms	34ms	-0.44	5.7%
devStoryVisibleUncached	1.6s	1.3s	-345ms	0.22	-25.6%
devStoryVisible	557ms	590ms	33ms	-0.41	5.6%
devAutodocsVisible	446ms	568ms	122ms	0.12	21.5%
devMDXVisible	477ms	541ms	64ms	-0.15	11.8%
buildManagerHeaderVisible	485ms	519ms	34ms	-0.4	6.6%
buildManagerIndexVisible	499ms	530ms	31ms	-0.43	5.8%
buildStoryVisible	487ms	513ms	26ms	-0.43	5.1%
buildAutodocsVisible	407ms	416ms	9ms	-0.51	2.2%
buildMDXVisible	416ms	407ms	-9ms	-0.52	-2.2%

Greptile Summary

Added coverage reporting functionality to the Storybook test addon, integrating with Vitest to display test coverage metrics in the UI and generate HTML coverage reports.

• Added StorybookCoverageReporter class in code/addons/test/src/node/coverage-reporter.ts to handle coverage metrics and reporting
• Modified TestProviderRender.tsx to display coverage percentage and status in the UI with proper state management
• Added coverage configuration handling in vitest-manager.ts with HTML and Storybook reporter integration
• Added static directory serving in preset.ts to make coverage reports accessible via browser
• Enhanced test manager to properly handle coverage state during watch mode and test runs

_{💡 (5/5) You can turn off certain types of comments like style here!}

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit d4d566a. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 1 target

• nx run-many -t build --parallel=3

---

Sent with 💌 from NxCloud.

[storybook-pr-benchmarking]

Package Benchmarks

^{Commit: d4d566a, ran on 29 November 2024 at 12:58:55 UTC}

The following packages have significant changes to their size or dependencies:

@storybook/experimental-addon-test

	Before	After	Difference
Dependency count	61	61	0
Self size	616 KB	695 KB	🚨 +79 KB 🚨
Dependency size	13.86 MB	13.86 MB	0 B
Bundle Size Analyzer	Link	Link

Copilot reviewed 6 out of 14 changed files in this pull request and generated no suggestions.

Files not reviewed (8)

• code/addons/test/package.json: Language not supported
• code/addons/test/src/constants.ts: Evaluated as low risk
• code/addons/test/src/node/coverage-reporter.ts: Evaluated as low risk
• code/addons/test/src/node/test-manager.ts: Evaluated as low risk
• code/addons/test/src/node/vitest-manager.ts: Evaluated as low risk
• code/addons/test/src/node/vitest.ts: Evaluated as low risk
• code/addons/test/src/preset.ts: Evaluated as low risk
• code/core/src/core-events/data/testing-module.ts: Evaluated as low risk

[greptile-apps]

_{13 file(s) reviewed, 14 comment(s)
Edit PR Review Bot Settings | Greptile}

[JReinhold]

Self-approval is best-approval