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

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

@@ -23,9 +23,8 @@ 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 { type Config, type Details, PANEL_ID } from '../constants';
 import { type TestStatus } from '../node/reporter';
 import { Description } from './Description';
 import { TestStatusIcon } from './TestStatusIcon';
@@ -145,6 +144,12 @@ export const TestProviderRender: FC<
 
   const status = (state.failed ? 'failed' : results[0]?.status) || 'unknown';
 
+  const openTestsPanel = (id: string) => {
+    api.selectStory(id);
+    api.setSelectedPanel(PANEL_ID);
+    api.togglePanel(true);
+  };
+
   return (
     <Container {...props}>
       <Heading>
@@ -244,6 +249,11 @@ export const TestProviderRender: FC<
         <Extras>
           <ListItem
             title="Component tests"
+            onClick={
+              (status === 'failed' || status === 'warning') && results[0]
+                ? () => openTestsPanel(results[0].storyId)
+                : null
+            }
             icon={
               state.crashed ? (
                 <TestStatusIcon status="critical" aria-label="status: crashed" />

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