diff --git a/code/addons/test/src/components/TestProviderRender.tsx b/code/addons/test/src/components/TestProviderRender.tsx index 35c7eb4b8a9e..3342579f0382 100644 --- a/code/addons/test/src/components/TestProviderRender.tsx +++ b/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 ( @@ -244,6 +252,16 @@ export const TestProviderRender: FC< { + const firstNotPassed = results.find( + (r) => r.status === 'failed' || r.status === 'warning' + ); + openPanel(firstNotPassed.storyId, PANEL_ID); + } + : null + } icon={ state.crashed ? ( @@ -278,6 +296,20 @@ export const TestProviderRender: FC< {isA11yAddon && ( { + 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={} right={a11yNotPassedAmount || null} /> diff --git a/code/addons/test/src/manager.tsx b/code/addons/test/src/manager.tsx index c5c4b9f21402..4db0c5defcbd 100644 --- a/code/addons/test/src/manager.tsx +++ b/code/addons/test/src/manager.tsx @@ -28,7 +28,7 @@ const statusMap: Record = { 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; + ]; }) ) ) diff --git a/code/addons/test/src/node/reporter.ts b/code/addons/test/src/node/reporter.ts index 8e4c9bf4f681..b81bd1c0b48b 100644 --- a/code/addons/test/src/node/reporter.ts +++ b/code/addons/test/src/node/reporter.ts @@ -27,7 +27,7 @@ export type TestResultResult = reports: Report[]; } | { - status: Extract; + status: Extract; storyId: string; duration: number; testRunId: string; @@ -39,7 +39,7 @@ export type TestResult = { results: TestResultResult[]; startTime: number; endTime: number; - status: Extract; + status: Extract; message?: string; };