Merge branch 'next' into norbert/no-context-in-prod

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!

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!

code/addons/a11y/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "8.5.0-alpha.13",
+  "version": "8.5.0-alpha.14",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",

code/addons/actions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "8.5.0-alpha.13",
+  "version": "8.5.0-alpha.14",
   "description": "Get UI feedback when an action is performed on an interactive element",
   "keywords": [
     "storybook",

code/addons/backgrounds/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "8.5.0-alpha.13",
+  "version": "8.5.0-alpha.14",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",

code/addons/controls/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-controls",
-  "version": "8.5.0-alpha.13",
+  "version": "8.5.0-alpha.14",
   "description": "Interact with component inputs dynamically in the Storybook UI",
   "keywords": [
     "addon",

code/addons/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "8.5.0-alpha.13",
+  "version": "8.5.0-alpha.14",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",

code/addons/essentials/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-essentials",
-  "version": "8.5.0-alpha.13",
+  "version": "8.5.0-alpha.14",
   "description": "Curated addons to bring out the best of Storybook",
   "keywords": [
     "addon",

code/addons/gfm/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-mdx-gfm",
-  "version": "8.5.0-alpha.13",
+  "version": "8.5.0-alpha.14",
   "description": "GitHub Flavored Markdown in Storybook",
   "keywords": [
     "addon",

code/addons/highlight/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-highlight",
-  "version": "8.5.0-alpha.13",
+  "version": "8.5.0-alpha.14",
   "description": "Highlight DOM nodes within your stories",
   "keywords": [
     "storybook-addons",

code/addons/interactions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-interactions",
-  "version": "8.5.0-alpha.13",
+  "version": "8.5.0-alpha.14",
   "description": "Automate, test and debug user interactions",
   "keywords": [
     "storybook-addons",

code/addons/jest/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-jest",
-  "version": "8.5.0-alpha.13",
+  "version": "8.5.0-alpha.14",
   "description": "React storybook addon that show component jest report",
   "keywords": [
     "addon",

code/addons/links/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-links",
-  "version": "8.5.0-alpha.13",
+  "version": "8.5.0-alpha.14",
   "description": "Link stories together to build demos and prototypes with your UI components",
   "keywords": [
     "storybook-addons",

code/addons/measure/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-measure",
-  "version": "8.5.0-alpha.13",
+  "version": "8.5.0-alpha.14",
   "description": "Inspect layouts by visualizing the box model",
   "keywords": [
     "storybook-addons",

code/addons/onboarding/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-onboarding",
-  "version": "8.5.0-alpha.13",
+  "version": "8.5.0-alpha.14",
   "description": "Storybook Addon Onboarding - Introduces a new onboarding experience",
   "keywords": [
     "storybook-addons",

code/addons/outline/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-outline",
-  "version": "8.5.0-alpha.13",
+  "version": "8.5.0-alpha.14",
   "description": "Outline all elements with CSS to help with layout placement and alignment",
   "keywords": [
     "storybook-addons",

code/addons/storysource/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storysource",
-  "version": "8.5.0-alpha.13",
+  "version": "8.5.0-alpha.14",
   "description": "View a story’s source code to see how it works and paste into your app",
   "keywords": [
     "addon",

code/addons/test/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/experimental-addon-test",
-  "version": "8.5.0-alpha.13",
+  "version": "8.5.0-alpha.14",
   "description": "Integrate Vitest with Storybook",
   "keywords": [
     "storybook-addons",
@@ -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": {

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,
+};

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" />}

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;
+  };
 };