Merge branch 'next' into upgrade-vta-3.1.0

storybookjs · Oct 28, 2024 · 5856975 · 5856975
2 parents 02743b3 + e0f2877
commit 5856975
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -7,6 +7,7 @@ import {
   CollapseIcon as CollapseIconSvg,
   ExpandAltIcon,
   StatusFailIcon,
+  StatusPassIcon,
   StatusWarnIcon,
   SyncIcon,
 } from '@storybook/icons';
@@ -224,7 +225,7 @@ const Node = React.memo<NodeProps>(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: <StatusPassIcon color={theme.color.positive} />,
                       error: <StatusFailIcon color={theme.color.negative} />,
                       warn: <StatusWarnIcon color={theme.color.warning} />,
                       pending: <SyncIcon size={12} color={theme.color.defaultText} />,

diff --git 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"