Improve panel opening logic in TestProviderRender for better handling…

… of multiple results
storybookjs · Dec 10, 2024 · a1082cd · a1082cd
1 parent fa52f3b
commit a1082cd
Showing 1 changed file with 18 additions and 4 deletions.
diff --git a/code/addons/test/src/components/TestProviderRender.tsx b/code/addons/test/src/components/TestProviderRender.tsx
@@ -253,8 +253,13 @@ export const TestProviderRender: FC<
           <ListItem
             title="Component tests"
             onClick={
-              (status === 'failed' || status === 'warning') && results.length === 1
-                ? () => openPanel(results[0].storyId, PANEL_ID)
+              (status === 'failed' || status === 'warning') && results.length
+                ? () => {
+                    const firstNotPassed = results.find(
+                      (r) => r.status === 'failed' || r.status === 'warning'
+                    );
+                    openPanel(firstNotPassed.storyId, PANEL_ID);
+                  }
                 : null
             }
             icon={
@@ -292,8 +297,17 @@ export const TestProviderRender: FC<
             <ListItem
               title="Accessibility"
               onClick={
-                (a11yStatus === 'negative' || a11yStatus === 'warning') && results.length === 1
-                  ? () => openPanel(results[0].storyId, A11y_ADDON_PANEL_ID)
+                (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}`} />}