Addon A11y: Refactor results handling and update configuration manage…

…ment in TestManager
storybookjs · Dec 16, 2024 · da4209e · da4209e
1 parent 6717ac8
commit da4209e
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 20 deletions.
diff --git a/code/addons/test/src/components/TestProviderRender.tsx b/code/addons/test/src/components/TestProviderRender.tsx
@@ -136,12 +136,14 @@ export const TestProviderRender: FC<
       return 'unknown';
     }
 
-    if (!a11yResults) {
+    const definedA11yResults = a11yResults.filter(Boolean);
+
+    if (!definedA11yResults || definedA11yResults.length === 0) {
       return 'unknown';
     }
 
-    const failed = a11yResults.some((result) => result?.status === 'failed');
-    const warning = a11yResults.some((result) => result?.status === 'warning');
+    const failed = definedA11yResults.some((result) => result?.status === 'failed');
+    const warning = definedA11yResults.some((result) => result?.status === 'warning');
 
     if (failed) {
       return 'negative';
@@ -152,9 +154,15 @@ export const TestProviderRender: FC<
     return 'positive';
   }, [state.running, isA11yAddon, config.a11y, a11yResults]);
 
-  const a11yNotPassedAmount = a11yResults?.filter(
-    (result) => result?.status === 'failed' || result?.status === 'warning'
-  ).length;
+  const a11yNotPassedAmount = state.config?.a11y
+    ? a11yResults?.filter((result) => result?.status === 'failed' || result?.status === 'warning')
+        .length
+    : undefined;
+
+  const a11ySkippedAmount =
+    state.running || !state?.details.config?.a11y || !state.config.a11y
+      ? null
+      : a11yResults?.filter((result) => !result).length;
 
   const storyId = entryId?.includes('--') ? entryId : undefined;
   const results = (state.details?.testResults || [])
@@ -324,7 +332,11 @@ export const TestProviderRender: FC<
           )}
           {isA11yAddon && (
             <ListItem
-              title={<ItemTitle enabled={config.a11y}>Accessibility</ItemTitle>}
+              title={
+                <ItemTitle enabled={config.a11y}>
+                  Accessibility {a11ySkippedAmount ? `(${a11ySkippedAmount} skipped)` : ''}
+                </ItemTitle>
+              }
               onClick={
                 (a11yStatus === 'negative' || a11yStatus === 'warning') && a11yResults.length
                   ? () => {

diff --git a/code/addons/test/src/constants.ts b/code/addons/test/src/constants.ts
@@ -19,6 +19,7 @@ export interface Config {
 
 export type Details = {
   testResults: TestResult[];
+  config: Config;
   coverageSummary?: {
     status: 'positive' | 'warning' | 'negative' | 'unknown';
     percentage: number;

diff --git a/code/addons/test/src/node/reporter.ts b/code/addons/test/src/node/reporter.ts
@@ -173,6 +173,7 @@ export class StorybookReporter implements Reporter {
       } as TestingModuleProgressReportProgress,
       details: {
         testResults,
+        config: this.testManager.config,
       },
     };
   }

diff --git a/code/addons/test/src/node/test-manager.ts b/code/addons/test/src/node/test-manager.ts
@@ -18,9 +18,11 @@ import { VitestManager } from './vitest-manager';
 export class TestManager {
   vitestManager: VitestManager;
 
-  watchMode = false;
-
-  coverage = false;
+  config = {
+    watchMode: false,
+    coverage: false,
+    a11y: false,
+  };
 
   constructor(
     private channel: Channel,
@@ -44,13 +46,17 @@ export class TestManager {
       return;
     }
 
+    this.config = {
+      ...this.config,
+      ...payload.config,
+    } satisfies Config;
+
     process.env.VITEST_STORYBOOK_CONFIG = JSON.stringify(payload.config);
 
-    if (this.coverage !== payload.config.coverage) {
-      this.coverage = payload.config.coverage;
+    if (this.config.coverage !== payload.config.coverage) {
       try {
         await this.vitestManager.restartVitest({
-          coverage: this.coverage,
+          coverage: this.config.coverage,
         });
       } catch (e) {
         const isV8 = e.message?.includes('@vitest/coverage-v8');
@@ -69,7 +75,7 @@ export class TestManager {
     if (payload.providerId !== TEST_PROVIDER_ID) {
       return;
     }
-    this.watchMode = payload.watchMode;
+    this.config.watchMode = payload.watchMode;
 
     if (payload.config) {
       this.handleConfigChange({
@@ -78,14 +84,14 @@ export class TestManager {
       });
     }
 
-    if (this.coverage) {
+    if (this.config.coverage) {
       try {
         if (payload.watchMode) {
           // if watch mode is toggled on and coverage is already enabled, restart vitest without coverage to automatically disable it
           await this.vitestManager.restartVitest({ coverage: false });
         } else {
           // if watch mode is toggled off and coverage is already enabled, restart vitest with coverage to automatically re-enable it
-          await this.vitestManager.restartVitest({ coverage: this.coverage });
+          await this.vitestManager.restartVitest({ coverage: this.config.coverage });
         }
       } catch (e) {
         this.reportFatalError('Failed to change watch mode while coverage was enabled', e);
@@ -111,7 +117,7 @@ export class TestManager {
         as a coverage report for a subset of stories is not useful.
       */
       const temporarilyDisableCoverage =
-        this.coverage && !this.watchMode && (payload.storyIds ?? []).length > 0;
+        this.config.coverage && !this.config.watchMode && (payload.storyIds ?? []).length > 0;
       if (temporarilyDisableCoverage) {
         await this.vitestManager.restartVitest({
           coverage: false,
@@ -124,7 +130,7 @@ export class TestManager {
 
       if (temporarilyDisableCoverage) {
         // Re-enable coverage if it was temporarily disabled because of a subset of stories was run
-        await this.vitestManager.restartVitest({ coverage: this.coverage });
+        await this.vitestManager.restartVitest({ coverage: this.config.coverage });
       }
     } catch (e) {
       this.reportFatalError('Failed to run tests', e);

diff --git a/code/addons/test/src/node/vitest-manager.ts b/code/addons/test/src/node/vitest-manager.ts
@@ -193,7 +193,7 @@ export class VitestManager {
           this.filterStories(story, spec.moduleId, { include, exclude, skip })
         );
         if (matches.length) {
-          if (!this.testManager.watchMode) {
+          if (!this.testManager.config.watchMode) {
             // Clear the file cache if watch mode is not enabled
             this.updateLastChanged(spec.moduleId);
           }
@@ -314,7 +314,7 @@ export class VitestManager {
 
     // when watch mode is disabled, don't trigger any tests (below)
     // but still invalidate the cache for the changed file, which is handled above
-    if (!this.testManager.watchMode) {
+    if (!this.testManager.config.watchMode) {
       return;
     }
     await this.runAffectedTests(file);