Merge pull request #29752 from storybookjs/version-non-patch-from-8.5…

….0-alpha.13 Release: Prerelease 8.5.0-alpha.14
storybookjs · Nov 30, 2024 · fe4330b · fe4330b
2 parents d3bc3ff + 742ddd2
commit fe4330b
Show file tree

Hide file tree

Showing 26 changed files with 487 additions and 89 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,12 @@
+## 8.4.6
+
+- Addon Test: Use pathe for better windows support - [#29676](https://github.com/storybookjs/storybook/pull/29676), thanks @yannbf!
+- Angular: Default to standalone components in Angular v19 - [#29677](https://github.com/storybookjs/storybook/pull/29677), thanks @ingowagner!
+- Frameworks: Add Vite 6 support - [#29710](https://github.com/storybookjs/storybook/pull/29710), thanks @yannbf!
+- Portable stories: Support multiple annotation notations from preview - [#29733](https://github.com/storybookjs/storybook/pull/29733), thanks @yannbf!
+- React: Upgrade react-docgen-typescript to support Vite 6 - [#29724](https://github.com/storybookjs/storybook/pull/29724), thanks @yannbf!
+- Svelte: Support `@sveltejs/vite-plugin-svelte` v5 - [#29731](https://github.com/storybookjs/storybook/pull/29731), thanks @JReinhold!
+
 ## 8.4.5
 
 - Angular: Support v19 - [#29659](https://github.com/storybookjs/storybook/pull/29659), thanks @leosvelperez!

diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md
@@ -1,3 +1,8 @@
+## 8.5.0-alpha.14
+
+- RNW-Vite: Add built-in Flow support - [#29756](https://github.com/storybookjs/storybook/pull/29756), thanks @dannyhw!
+- Test: Add coverage feature - [#29713](https://github.com/storybookjs/storybook/pull/29713), thanks @ndelangen!
+
 ## 8.5.0-alpha.13
 
 - Portable stories: Support multiple annotation notations from preview - [#29733](https://github.com/storybookjs/storybook/pull/29733), thanks @yannbf!

diff --git a/code/addons/test/package.json b/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",
@@ -87,7 +92,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 +103,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 +152,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": {

diff --git a/code/addons/test/src/components/TestProviderRender.stories.tsx b/code/addons/test/src/components/TestProviderRender.stories.tsx
@@ -124,29 +124,83 @@ export const Running: Story = {
   },
 };
 
-export const EnableA11y: Story = {
+export const Watching: Story = {
+  args: {
+    state: {
+      ...config,
+      ...baseState,
+      watching: true,
+    },
+  },
+};
+
+export const WithCoverageNegative: Story = {
   args: {
     state: {
       ...config,
       ...baseState,
       details: {
         testResults: [],
+        coverageSummary: {
+          percentage: 20,
+          status: 'negative',
+        },
       },
       config: {
-        a11y: true,
-        coverage: false,
+        a11y: false,
+        coverage: true,
       },
     },
   },
 };
 
-export const EnableEditing: Story = {
+export const WithCoverageWarning: Story = {
   args: {
     state: {
       ...config,
       ...baseState,
+      details: {
+        testResults: [],
+        coverageSummary: {
+          percentage: 50,
+          status: 'warning',
+        },
+      },
       config: {
-        a11y: true,
+        a11y: false,
+        coverage: true,
+      },
+    },
+  },
+};
+
+export const WithCoveragePositive: Story = {
+  args: {
+    state: {
+      ...config,
+      ...baseState,
+      details: {
+        testResults: [],
+        coverageSummary: {
+          percentage: 80,
+          status: 'positive',
+        },
+      },
+      config: {
+        a11y: false,
+        coverage: true,
+      },
+    },
+  },
+};
+
+export const Editing: Story = {
+  args: {
+    state: {
+      ...config,
+      ...baseState,
+      config: {
+        a11y: false,
         coverage: false,
       },
       details: {
@@ -161,3 +215,21 @@ export const EnableEditing: Story = {
     screen.getByLabelText(/Open settings/).click();
   },
 };
+
+export const EditingAndWatching: Story = {
+  args: {
+    state: {
+      ...config,
+      ...baseState,
+      watching: true,
+      config: {
+        a11y: true,
+        coverage: true, // should be automatically disabled in the UI
+      },
+      details: {
+        testResults: [],
+      },
+    },
+  },
+  play: Editing.play,
+};
diff --git a/code/addons/test/src/components/TestProviderRender.tsx b/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 coverageSummary = state.details?.coverageSummary;
 
   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,27 @@ 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%`}
-          />
+          {coverageSummary ? (
+            <ListItem
+              title="Coverage"
+              href={'/coverage/index.html'}
+              // @ts-expect-error ListItem doesn't include all anchor attributes in types, but it is an achor element
+              target="_blank"
+              icon={
+                <TestStatusIcon
+                  percentage={coverageSummary.percentage}
+                  status={coverageSummary.status}
+                  aria-label={`status: ${coverageSummary.status}`}
+                />
+              }
+              right={`${coverageSummary.percentage}%`}
+            />
+          ) : (
+            <ListItem
+              title="Coverage"
+              icon={<TestStatusIcon status="unknown" aria-label={`status: unknown`} />}
+            />
+          )}
           <ListItem
             title="Accessibility"
             icon={<TestStatusIcon status="negative" aria-label="status: failed" />}

diff --git a/code/addons/test/src/constants.ts b/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[];
+  coverageSummary?: {
+    status: 'positive' | 'warning' | 'negative' | 'unknown';
+    percentage: number;
+  };
 };
diff --git a/code/addons/test/src/node/boot-test-runner.ts b/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') {

diff --git a/code/addons/test/src/node/coverage-reporter.ts b/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;
+  coverageOptions: ResolvedCoverageOptions<'v8'>;
+};
+
+export default class StorybookCoverageReporter extends ReportBase implements Partial<Visitor> {
+  #testManager: StorybookCoverageReporterOptions['testManager'];
+
+  #coverageOptions: StorybookCoverageReporterOptions['coverageOptions'];
+
+  constructor(opts: StorybookCoverageReporterOptions) {
+    super();
+    this.#testManager = opts.testManager;
+    this.#coverageOptions = opts.coverageOptions;
+  }
+
+  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.#coverageOptions.watermarks?.statements ?? [];
+
+    const coverageDetails: Details['coverageSummary'] = {
+      percentage,
+      status:
+        percentage < lowWatermark
+          ? 'negative'
+          : percentage < highWatermark
+            ? 'warning'
+            : 'positive',
+    };
+    this.#testManager.sendProgressReport({
+      providerId: TEST_PROVIDER_ID,
+      details: {
+        coverageSummary: coverageDetails,
+      },
+    });
+  }
+}