Addon Test: Make component tests status row link to the story's tests panel

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

@@ -23,9 +23,11 @@ import {
 import { isEqual } from 'es-toolkit';
 import { debounce } from 'es-toolkit/compat';
 
-// Relatively importing from a11y to get the ADDON_ID
-import { ADDON_ID as A11Y_ADDON_ID } from '../../../a11y/src/constants';
-import { type Config, type Details } from '../constants';
+import {
+  ADDON_ID as A11Y_ADDON_ID,
+  PANEL_ID as A11y_ADDON_PANEL_ID,
+} from '../../../a11y/src/constants';
+import { type Config, type Details, PANEL_ID } from '../constants';
 import { type TestStatus } from '../node/reporter';
 import { Description } from './Description';
 import { TestStatusIcon } from './TestStatusIcon';
@@ -145,6 +147,12 @@ export const TestProviderRender: FC<
 
   const status = (state.failed ? 'failed' : results[0]?.status) || 'unknown';
 
+  const openPanel = (id: string, panelId: string) => {
+    api.selectStory(id);
+    api.setSelectedPanel(panelId);
+    api.togglePanel(true);
+  };
+
   return (
     <Container {...props}>
       <Heading>
@@ -244,6 +252,16 @@ export const TestProviderRender: FC<
         <Extras>
           <ListItem
             title="Component tests"
+            onClick={
+              (status === 'failed' || status === 'warning') && results.length
+                ? () => {
+                    const firstNotPassed = results.find(
+                      (r) => r.status === 'failed' || r.status === 'warning'
+                    );
+                    openPanel(firstNotPassed.storyId, PANEL_ID);
+                  }
+                : null
+            }
             icon={
               state.crashed ? (
                 <TestStatusIcon status="critical" aria-label="status: crashed" />
@@ -278,6 +296,20 @@ export const TestProviderRender: FC<
           {isA11yAddon && (
             <ListItem
               title="Accessibility"
+              onClick={
+                (a11yStatus === 'negative' || a11yStatus === 'warning') && a11yResults.length
+                  ? () => {
+                      const firstNotPassed = results.find((r) =>
+                        r.reports
+                          .filter((report) => report.type === 'a11y')
+                          .find(
+                            (report) => report.status === 'failed' || report.status === 'warning'
+                          )
+                      );
+                      openPanel(firstNotPassed.storyId, A11y_ADDON_PANEL_ID);
+                    }
+                  : null
+              }
               icon={<TestStatusIcon status={a11yStatus} aria-label={`status: ${a11yStatus}`} />}
               right={a11yNotPassedAmount || null}
             />

code/addons/test/src/manager.tsx

@@ -28,7 +28,7 @@ const statusMap: Record<TestStatus, API_StatusValue> = {
 addons.register(ADDON_ID, (api) => {
   const storybookBuilder = (globalThis as any).STORYBOOK_BUILDER || '';
   if (storybookBuilder.includes('vite')) {
-    const openAddonPanel = () => {
+    const openTestsPanel = () => {
       api.setSelectedPanel(PANEL_ID);
       api.togglePanel(true);
     };
@@ -94,9 +94,9 @@ addons.register(ADDON_ID, (api) => {
                           ? rest.failureMessages.join('\n')
                           : '',
                       data: { testRunId },
-                      onClick: openAddonPanel,
+                      onClick: openTestsPanel,
                       sidebarContextMenu: false,
-                    } as API_StatusObject,
+                    } satisfies API_StatusObject,
                   ])
               )
             )
@@ -108,12 +108,12 @@ addons.register(ADDON_ID, (api) => {
               update.details.testResults.flatMap((testResult) =>
                 testResult.results
                   .filter(({ storyId }) => storyId)
-                  .map(({ storyId, status, testRunId, reports, ...rest }) => {
+                  .map(({ storyId, testRunId, reports }) => {
                     const a11yReport = reports.find((r: any) => r.type === 'a11y');
                     return [
                       storyId,
                       a11yReport
-                        ? {
+                        ? ({
                             title: 'Accessibility tests',
                             description: '',
                             status: statusMap[a11yReport.status],
@@ -123,9 +123,9 @@ addons.register(ADDON_ID, (api) => {
                               api.togglePanel(true);
                             },
                             sidebarContextMenu: false,
-                          }
+                          } satisfies API_StatusObject)
                         : null,
-                    ] as const;
+                    ];
                   })
               )
             )

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

@@ -27,7 +27,7 @@ export type TestResultResult =
       reports: Report[];
     }
   | {
-      status: Extract<TestStatus, 'failed'>;
+      status: Extract<TestStatus, 'failed' | 'warning'>;
       storyId: string;
       duration: number;
       testRunId: string;
@@ -39,7 +39,7 @@ export type TestResult = {
   results: TestResultResult[];
   startTime: number;
   endTime: number;
-  status: Extract<TestStatus, 'passed' | 'failed'>;
+  status: Extract<TestStatus, 'passed' | 'failed' | 'warning'>;
   message?: string;
 };