Calculate the diff for chai errors

storybookjs · Oct 10, 2023 · fb84613 · fb84613
1 parent 2b9981a
commit fb84613
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 4 deletions.
diff --git a/code/addons/interactions/src/components/Interaction.tsx b/code/addons/interactions/src/components/Interaction.tsx
@@ -4,7 +4,7 @@ import { type Call, CallStates, type ControlStates } from '@storybook/instrument
 import { styled, typography } from '@storybook/theming';
 import { transparentize } from 'polished';
 
-import { MatcherResult } from './MatcherResult';
+import { Expected, MatcherResult, Received } from './MatcherResult';
 import { MethodCall } from './MethodCall';
 import { StatusIcon } from './StatusIcon';
 
@@ -120,6 +120,29 @@ const Exception = ({ exception }: { exception: Call['exception'] }) => {
   return (
     <RowMessage>
       <pre>{paragraphs[0]}</pre>
+
+      {exception.showDiff && exception.diff ? (
+        <>
+          <br />
+          <MatcherResult message={exception.diff} style={{ padding: 0 }} />
+        </>
+      ) : (
+        <pre>
+          <br />
+          {exception.expected && (
+            <>
+              Expected: <Expected value={exception.expected} />
+              <br />
+            </>
+          )}
+          {exception.actual && (
+            <>
+              Received: <Received value={exception.actual} />
+              <br />
+            </>
+          )}
+        </pre>
+      )}
       {more && <p>See the full stack trace in the browser console.</p>}
     </RowMessage>
   );

diff --git a/code/addons/interactions/src/components/MatcherResult.tsx b/code/addons/interactions/src/components/MatcherResult.tsx
@@ -45,14 +45,21 @@ export const Expected = ({ value, parsed }: { value: any; parsed?: boolean }) =>
   return <StyledExpected>{value}</StyledExpected>;
 };
 
-export const MatcherResult = ({ message }: { message: string }) => {
+export const MatcherResult = ({
+  message,
+  style = {},
+}: {
+  message: string;
+  style?: React.CSSProperties;
+}) => {
   const lines = message.split('\n');
   return (
     <pre
       style={{
         margin: 0,
         padding: '8px 10px 8px 36px',
         fontSize: typography.size.s1,
+        ...style,
       }}
     >
       {lines.flatMap((line: string, index: number) => {

diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json
@@ -48,7 +48,9 @@
     "@storybook/client-logger": "workspace:*",
     "@storybook/core-events": "workspace:*",
     "@storybook/global": "^5.0.0",
-    "@storybook/preview-api": "workspace:*"
+    "@storybook/preview-api": "workspace:*",
+    "@vitest/utils": "^0.34.6",
+    "util": "^0.12.4"
   },
   "devDependencies": {
     "typescript": "~4.9.3"

diff --git a/code/lib/instrumenter/src/instrumenter.ts b/code/lib/instrumenter/src/instrumenter.ts
@@ -10,6 +10,7 @@ import {
   STORY_RENDER_PHASE_CHANGED,
 } from '@storybook/core-events';
 import { global } from '@storybook/global';
+import { processError } from '@vitest/utils/error';
 
 import type { Call, CallRef, ControlStates, LogItem, Options, State, SyncPayload } from './types';
 import { CallStates } from './types';
@@ -466,7 +467,16 @@ export class Instrumenter {
     const handleException = (e: any) => {
       if (e instanceof Error) {
         const { name, message, stack, callId = call.id } = e as Error & { callId: Call['id'] };
-        const exception = { name, message, stack, callId };
+
+        // This will calculate the diff for chai errors
+        const {
+          showDiff = undefined,
+          diff = undefined,
+          actual = undefined,
+          expected = undefined,
+        } = processError(e);
+
+        const exception = { name, message, stack, callId, showDiff, diff, actual, expected };
         this.update({ ...info, status: CallStates.ERROR, exception });
 
         // Always track errors to their originating call.

diff --git a/code/lib/instrumenter/src/types.ts b/code/lib/instrumenter/src/types.ts
@@ -16,6 +16,10 @@ export interface Call {
     message: Error['message'];
     stack: Error['stack'];
     callId: Call['id'];
+    showDiff?: boolean;
+    diff?: string;
+    actual?: unknown;
+    expected?: unknown;
   };
 }
 

diff --git a/code/yarn.lock b/code/yarn.lock
@@ -7118,7 +7118,9 @@ __metadata:
     "@storybook/core-events": "workspace:*"
     "@storybook/global": ^5.0.0
     "@storybook/preview-api": "workspace:*"
+    "@vitest/utils": ^0.34.6
     typescript: ~4.9.3
+    util: ^0.12.4
   languageName: unknown
   linkType: soft
 
@@ -10252,6 +10254,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vitest/utils@npm:^0.34.6":
+  version: 0.34.7
+  resolution: "@vitest/utils@npm:0.34.7"
+  dependencies:
+    diff-sequences: ^29.4.3
+    loupe: ^2.3.6
+    pretty-format: ^29.5.0
+  checksum: 5f26ec5b4a53709a50efdb57aa753e8090b3411e888774f67a0d192eb7f046ed5fcc6884eb3d6275d2674926e724b731e8d28cd3cea96a7f3d27462a0d44af9e
+  languageName: node
+  linkType: hard
+
 "@volar/language-core@npm:1.10.1, @volar/language-core@npm:~1.10.0":
   version: 1.10.1
   resolution: "@volar/language-core@npm:1.10.1"