Test: E2E tests for new Component Testing features

.circleci/config.yml

@@ -757,6 +757,10 @@ jobs:
           name: Run E2E tests
           command: yarn playwright-e2e
           working_directory: test-storybooks/portable-stories-kitchen-sink/react
+      - run:
+          name: Run Vitest
+          command: yarn vitest-skip-fail-on-purpose
+          working_directory: test-storybooks/portable-stories-kitchen-sink/react
       - store_test_results:
           path: test-results
       - store_artifacts:

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

@@ -307,14 +307,19 @@ export const TestProviderRender: FC<
               href={'/coverage/index.html'}
               // @ts-expect-error ListItem doesn't include all anchor attributes in types, but it is an achor element
               target="_blank"
+              aria-label="Open coverage report"
               icon={
                 <TestStatusIcon
                   percentage={coverageSummary.percentage}
                   status={coverageSummary.status}
                   aria-label={`status: ${coverageSummary.status}`}
                 />
               }
-              right={`${coverageSummary.percentage}%`}
+              right={
+                <span aria-label={`${coverageSummary.percentage} percent coverage`}>
+                  {coverageSummary.percentage} %
+                </span>
+              }
             />
           ) : (
             <ListItem

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

@@ -8,7 +8,7 @@ import type { TestManager } from './test-manager';
 
 export type StorybookCoverageReporterOptions = {
   testManager: TestManager;
-  coverageOptions: ResolvedCoverageOptions<'v8'>;
+  coverageOptions: ResolvedCoverageOptions<'v8'> | undefined;
 };
 
 export default class StorybookCoverageReporter extends ReportBase implements Partial<Visitor> {
@@ -32,7 +32,7 @@ export default class StorybookCoverageReporter extends ReportBase implements Par
 
     // Fallback to Vitest's default watermarks https://vitest.dev/config/#coverage-watermarks
     const [lowWatermark = 50, highWatermark = 80] =
-      this.#coverageOptions.watermarks?.statements ?? [];
+      this.#coverageOptions?.watermarks?.statements ?? [];
 
     const coverageDetails: Details['coverageSummary'] = {
       percentage,

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

@@ -52,7 +52,7 @@ export class VitestManager {
       join(packageDir, 'dist/node/coverage-reporter.js'),
       {
         testManager: this.testManager,
-        coverageOptions: this.vitest?.config?.coverage as ResolvedCoverageOptions<'v8'>,
+        coverageOptions: this.vitest?.config?.coverage as ResolvedCoverageOptions<'v8'> | undefined,
       },
     ];
     const coverageOptions = (

test-storybooks/portable-stories-kitchen-sink/react/.storybook/aliased.ts

@@ -0,0 +1,4 @@
+// This file is used to test that viteFinal is correctly loaded in Vitest
+// main.ts defines this file as a resolve alias, which is used in the ViteFinalTest story
+
+export const aliasedFunction = () => true;

test-storybooks/portable-stories-kitchen-sink/react/.storybook/main.ts

@@ -1,4 +1,5 @@
 import type { StorybookConfig } from "@storybook/react-vite";
+import { join } from 'path';
 
 const config: StorybookConfig = {
   stories: ["../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
@@ -32,5 +33,18 @@ const config: StorybookConfig = {
       border: 1px solid red;
     }
   </style>`,
+  staticDirs: [{ from: './test-static-dirs', to:'test-static-dirs' }],
+  viteFinal: (config) => {
+    return {
+      ...config,
+      resolve: {
+        ...config.resolve,
+        alias: {
+          ...config.resolve?.alias,
+          'test-alias': join(__dirname, 'aliased.ts'),
+        },
+      }
+    };
+  },
 };
 export default config;

test-storybooks/portable-stories-kitchen-sink/react/.storybook/test-static-dirs/static.js

@@ -0,0 +1,3 @@
+// This file is used to test that staticDirs are correctly loaded in Vitest
+
+export const staticFunction = () => true;