Test: Add coverage feature

code/addons/test/package.json

@@ -48,6 +48,11 @@
       "import": "./dist/vitest-plugin/test-utils.mjs",
       "require": "./dist/vitest-plugin/test-utils.js"
     },
+    "./internal/coverage-reporter": {
+      "types": "./dist/node/coverage-reporter.d.ts",
+      "import": "./dist/node/coverage-reporter.mjs",
+      "require": "./dist/node/coverage-reporter.js"
+    },
     "./preview": {
       "types": "./dist/preview.d.ts",
       "import": "./dist/preview.mjs",
@@ -88,6 +93,7 @@
   "devDependencies": {
     "@devtools-ds/object-inspector": "^1.1.2",
     "@storybook/icons": "^1.2.12",
+    "@types/istanbul-lib-report": "^3.0.3",
     "@types/node": "^22.0.0",
     "@types/semver": "^7",
     "@vitest/browser": "^2.1.3",
@@ -98,6 +104,7 @@
     "execa": "^8.0.1",
     "find-up": "^7.0.0",
     "formik": "^2.2.9",
+    "istanbul-lib-report": "^3.0.1",
     "pathe": "^1.1.2",
     "picocolors": "^1.1.0",
     "react": "^18.2.0",
@@ -146,7 +153,8 @@
       "./src/vitest-plugin/index.ts",
       "./src/vitest-plugin/global-setup.ts",
       "./src/postinstall.ts",
-      "./src/node/vitest.ts"
+      "./src/node/vitest.ts",
+      "./src/node/coverage-reporter.ts"
     ]
   },
   "storybook": {

code/addons/test/src/components/TestProviderRender.tsx

@@ -77,6 +77,7 @@ export const TestProviderRender: FC<{
 
   const title = state.crashed || state.failed ? 'Local tests failed' : 'Run local tests';
   const errorMessage = state.error?.message;
+  const coverage = state.details?.coverage;
 
   const [config, updateConfig] = useConfig(
     api,
@@ -159,8 +160,8 @@ export const TestProviderRender: FC<{
             right={
               <Checkbox
                 type="checkbox"
-                disabled // TODO: Implement coverage
-                checked={config.coverage}
+                checked={state.watching ? false : config.coverage}
+                disabled={state.watching}
                 onChange={() => updateConfig({ coverage: !config.coverage })}
               />
             }
@@ -185,11 +186,24 @@ export const TestProviderRender: FC<{
             title="Component tests"
             icon={<TestStatusIcon status="positive" aria-label="status: passed" />}
           />
-          <ListItem
-            title="Coverage"
-            icon={<TestStatusIcon percentage={60} status="warning" aria-label="status: warning" />}
-            right={`60%`}
-          />
+          {coverage ? (
+            <ListItem
+              title="Coverage"
+              icon={
+                <TestStatusIcon
+                  percentage={coverage.percentage}
+                  status={coverage.status}
+                  aria-label={`status: ${coverage.status}`}
+                />
+              }
+              right={`${coverage.percentage}%`}
+            />
+          ) : (
+            <ListItem
+              title="Coverage"
+              icon={<TestStatusIcon status="unknown" aria-label={`status: unknown`} />}
+            />
+          )}
           <ListItem
             title="Accessibility"
             icon={<TestStatusIcon status="negative" aria-label="status: failed" />}

code/addons/test/src/constants.ts

@@ -10,11 +10,17 @@ export const DOCUMENTATION_LINK = 'writing-tests/test-addon';
 export const DOCUMENTATION_DISCREPANCY_LINK = `${DOCUMENTATION_LINK}#what-happens-when-there-are-different-test-results-in-multiple-environments`;
 export const DOCUMENTATION_FATAL_ERROR_LINK = `${DOCUMENTATION_LINK}#what-happens-if-vitest-itself-has-an-error`;
 
+export const COVERAGE_DIRECTORY = 'coverage';
+
 export interface Config {
   coverage: boolean;
   a11y: boolean;
 }
 
 export type Details = {
   testResults: TestResult[];
+  coverage?: {
+    status: 'positive' | 'warning' | 'negative' | 'unknown';
+    percentage: number;
+  };
 };

code/addons/test/src/node/boot-test-runner.ts

@@ -3,6 +3,7 @@ import { type ChildProcess } from 'node:child_process';
 import type { Channel } from 'storybook/internal/channels';
 import {
   TESTING_MODULE_CANCEL_TEST_RUN_REQUEST,
+  TESTING_MODULE_CONFIG_CHANGE,
   TESTING_MODULE_CRASH_REPORT,
   TESTING_MODULE_RUN_REQUEST,
   TESTING_MODULE_WATCH_MODE_REQUEST,
@@ -43,11 +44,14 @@ const bootTestRunner = async (channel: Channel, initEvent?: string, initArgs?: a
     child?.send({ args, from: 'server', type: TESTING_MODULE_WATCH_MODE_REQUEST });
   const forwardCancel = (...args: any[]) =>
     child?.send({ args, from: 'server', type: TESTING_MODULE_CANCEL_TEST_RUN_REQUEST });
+  const forwardConfigChange = (...args: any[]) =>
+    child?.send({ args, from: 'server', type: TESTING_MODULE_CONFIG_CHANGE });
 
   const killChild = () => {
     channel.off(TESTING_MODULE_RUN_REQUEST, forwardRun);
     channel.off(TESTING_MODULE_WATCH_MODE_REQUEST, forwardWatchMode);
     channel.off(TESTING_MODULE_CANCEL_TEST_RUN_REQUEST, forwardCancel);
+    channel.off(TESTING_MODULE_CONFIG_CHANGE, forwardConfigChange);
     child?.kill();
     child = null;
   };
@@ -86,6 +90,7 @@ const bootTestRunner = async (channel: Channel, initEvent?: string, initArgs?: a
           channel.on(TESTING_MODULE_RUN_REQUEST, forwardRun);
           channel.on(TESTING_MODULE_WATCH_MODE_REQUEST, forwardWatchMode);
           channel.on(TESTING_MODULE_CANCEL_TEST_RUN_REQUEST, forwardCancel);
+          channel.on(TESTING_MODULE_CONFIG_CHANGE, forwardConfigChange);
 
           resolve();
         } else if (result.type === 'error') {

code/addons/test/src/node/coverage-reporter.ts

@@ -0,0 +1,53 @@
+import type { ResolvedCoverageOptions } from 'vitest/node';
+
+import type { ReportNode, Visitor } from 'istanbul-lib-report';
+import { ReportBase } from 'istanbul-lib-report';
+
+import { type Details, TEST_PROVIDER_ID } from '../constants';
+import type { TestManager } from './test-manager';
+
+export type StorybookCoverageReporterOptions = {
+  testManager: TestManager;
+  getCoverageOptions: () => ResolvedCoverageOptions<'v8'>;
+};
+
+export default class StorybookCoverageReporter extends ReportBase implements Partial<Visitor> {
+  #testManager: StorybookCoverageReporterOptions['testManager'];
+
+  #getCoverageOptions: StorybookCoverageReporterOptions['getCoverageOptions'];
+
+  constructor(opts: StorybookCoverageReporterOptions) {
+    super();
+    this.#testManager = opts.testManager;
+    this.#getCoverageOptions = opts.getCoverageOptions;
+  }
+
+  onSummary(node: ReportNode) {
+    if (!node.isRoot()) {
+      return;
+    }
+    const coverageSummary = node.getCoverageSummary(false);
+
+    const percentage = Math.round(coverageSummary.data.statements.pct);
+
+    // Fallback to Vitest's default watermarks https://vitest.dev/config/#coverage-watermarks
+    const [lowWatermark = 50, highWatermark = 80] =
+      this.#getCoverageOptions().watermarks?.statements ?? [];
+
+    const coverageDetails: Details['coverage'] = {
+      percentage,
+      status:
+        percentage < lowWatermark
+          ? 'negative'
+          : percentage < highWatermark
+            ? 'warning'
+            : 'positive',
+    };
+    this.#testManager.sendProgressReport({
+      providerId: TEST_PROVIDER_ID,
+      details: {
+        coverage: coverageDetails,
+      },
+    });
+  }
+}

code/addons/test/src/node/test-manager.ts

@@ -12,22 +12,24 @@ import {
   type TestingModuleWatchModeRequestPayload,
 } from 'storybook/internal/core-events';
 
-import { TEST_PROVIDER_ID } from '../constants';
+import { type Config, TEST_PROVIDER_ID } from '../constants';
 import { VitestManager } from './vitest-manager';
 
 export class TestManager {
   vitestManager: VitestManager;
 
   watchMode = false;
 
+  coverage = false;
+
   constructor(
     private channel: Channel,
     private options: {
       onError?: (message: string, error: Error) => void;
       onReady?: () => void;
     } = {}
   ) {
-    this.vitestManager = new VitestManager(channel, this);
+    this.vitestManager = new VitestManager(this);
 
     this.channel.on(TESTING_MODULE_RUN_REQUEST, this.handleRunRequest.bind(this));
     this.channel.on(TESTING_MODULE_CONFIG_CHANGE, this.handleConfigChange.bind(this));
@@ -37,42 +39,69 @@ export class TestManager {
     this.vitestManager.startVitest().then(() => options.onReady?.());
   }
 
-  async restartVitest(watchMode = false) {
+  async restartVitest({ watchMode, coverage }: { watchMode: boolean; coverage: boolean }) {
     await this.vitestManager.vitest?.runningPromise;
     await this.vitestManager.closeVitest();
-    await this.vitestManager.startVitest(watchMode);
+    await this.vitestManager.startVitest({ watchMode, coverage });
   }
 
-  async handleConfigChange(payload: TestingModuleConfigChangePayload) {
-    // TODO do something with the config
-    const config = payload.config;
+  async handleConfigChange(
+    payload: TestingModuleConfigChangePayload<any, { coverage: boolean; a11y: boolean }>
+  ) {
+    if (payload.providerId !== TEST_PROVIDER_ID) {
+      return;
+    }
+    if (this.coverage !== payload.config.coverage) {
+      try {
+        this.coverage = payload.config.coverage;
+        await this.restartVitest({ watchMode: this.watchMode, coverage: this.coverage });
+      } catch (e) {
+        this.reportFatalError('Failed to change coverage mode', e);
+      }
+    }
   }
 
   async handleWatchModeRequest(payload: TestingModuleWatchModeRequestPayload) {
-    // TODO do something with the config
-    const config = payload.config;
-
     try {
       if (payload.providerId !== TEST_PROVIDER_ID) {
         return;
       }
 
       if (this.watchMode !== payload.watchMode) {
         this.watchMode = payload.watchMode;
-        await this.restartVitest(this.watchMode);
+        await this.restartVitest({ watchMode: this.watchMode, coverage: false });
       }
     } catch (e) {
       this.reportFatalError('Failed to change watch mode', e);
     }
   }
 
-  async handleRunRequest(payload: TestingModuleRunRequestPayload) {
+  async handleRunRequest(payload: TestingModuleRunRequestPayload<Config>) {
     try {
       if (payload.providerId !== TEST_PROVIDER_ID) {
         return;
       }
 
+      const allTestsRun = (payload.storyIds ?? []).length === 0;
+      if (this.coverage) {
+        // If we have coverage enabled and we're running all stories,
+        // we have to restart Vitest AND disable watch mode
+        // otherwise the coverage report will be incorrect.
+
+        // If we're only running a subset of stories, we have to temporarily disable coverage,
+        // as a coverage report for a subset of stories is not useful.
+        await this.restartVitest({
+          watchMode: allTestsRun ? false : this.watchMode,
+          coverage: allTestsRun,
+        });
+      }
+
       await this.vitestManager.runTests(payload);
+
+      if (this.coverage && !allTestsRun) {
+        // Re-enable coverage if it was temporarily disabled because of a subset of stories was run
+        await this.restartVitest({ watchMode: this.watchMode, coverage: this.coverage });
+      }
     } catch (e) {
       this.reportFatalError('Failed to run tests', e);
     }