diff --git a/code/addons/test/package.json b/code/addons/test/package.json index ebae8b47baa4..0eee7c81a161 100644 --- a/code/addons/test/package.json +++ b/code/addons/test/package.json @@ -103,6 +103,7 @@ "react-dom": "^18.2.0", "semver": "^7.6.3", "slash": "^5.0.0", + "strip-ansi": "^7.1.0", "ts-dedent": "^2.2.0", "typescript": "^5.3.2", "vitest": "^2.1.3" diff --git a/code/addons/test/src/manager.tsx b/code/addons/test/src/manager.tsx index 50c2180fa18d..aeb71ab4aaa0 100644 --- a/code/addons/test/src/manager.tsx +++ b/code/addons/test/src/manager.tsx @@ -152,7 +152,7 @@ addons.register(ADDON_ID, (api) => { .map(({ storyId, status, testRunId, ...rest }) => { if (storyId) { const statusObject: API_StatusObject = { - title: 'Vitest', + title: 'Component tests', status: statusMap[status], description: 'failureMessages' in rest && rest.failureMessages?.length diff --git a/code/addons/test/src/utils.ts b/code/addons/test/src/utils.ts index d80d9f4cdbee..d890c6ec66e6 100644 --- a/code/addons/test/src/utils.ts +++ b/code/addons/test/src/utils.ts @@ -1,6 +1,7 @@ import { type StorybookTheme, useTheme } from 'storybook/internal/theming'; import Filter from 'ansi-to-html'; +import stripAnsi from 'strip-ansi'; export function isTestAssertionError(error: unknown) { return isChaiError(error) || isJestError(error); @@ -22,12 +23,13 @@ export function isJestError(error: unknown) { typeof error === 'object' && 'message' in error && typeof error.message === 'string' && - error.message.startsWith('expect(') + stripAnsi(error.message).startsWith('expect(') ); } export function createAnsiToHtmlFilter(theme: StorybookTheme) { return new Filter({ + escapeXML: true, fg: theme.color.defaultText, bg: theme.background.content, }); diff --git a/code/core/src/manager/components/sidebar/Tree.tsx b/code/core/src/manager/components/sidebar/Tree.tsx index 2cb99d61cdc2..49110a95a721 100644 --- a/code/core/src/manager/components/sidebar/Tree.tsx +++ b/code/core/src/manager/components/sidebar/Tree.tsx @@ -7,6 +7,7 @@ import { CollapseIcon as CollapseIconSvg, ExpandAltIcon, StatusFailIcon, + StatusPassIcon, StatusWarnIcon, SyncIcon, } from '@storybook/icons'; @@ -224,7 +225,7 @@ const Node = React.memo(function Node({ description: value.description, 'aria-label': `Test status for ${value.title}: ${value.status}`, icon: { - success: null, // We don't show a checkmark, to avoid clutter + success: , error: , warn: , pending: , diff --git a/code/yarn.lock b/code/yarn.lock index 09b8d5674729..3dd05cb81d27 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6267,6 +6267,7 @@ __metadata: react-dom: "npm:^18.2.0" semver: "npm:^7.6.3" slash: "npm:^5.0.0" + strip-ansi: "npm:^7.1.0" ts-dedent: "npm:^2.2.0" typescript: "npm:^5.3.2" vitest: "npm:^2.1.3"