Merge pull request #28093 from storybookjs/version-patch-from-8.1.6

Release: Patch 8.1.7

CHANGELOG.md

@@ -1,3 +1,10 @@
+## 8.1.7
+
+- Addon-actions: Only log spies with names - [#28091](https://github.com/storybookjs/storybook/pull/28091), thanks @kasperpeulen!
+- CLI: Fix typo in React Docgen migration - [#27536](https://github.com/storybookjs/storybook/pull/27536), thanks @jonniebigodes!
+- Portable Stories: Add tags to composed story - [#27708](https://github.com/storybookjs/storybook/pull/27708), thanks @yannbf!
+- Test: Display toHaveBeenCalledWith expected / received values on failure - [#28088](https://github.com/storybookjs/storybook/pull/28088), thanks @kasperpeulen!
+
 ## 8.1.6
 
 - CLI: Only log the UpgradeStorybookToSameVersionError but continue the upgrade as normal - [#27217](https://github.com/storybookjs/storybook/pull/27217), thanks @kasperpeulen!

code/addons/actions/src/loaders.ts

@@ -20,6 +20,7 @@ const logActionsWhenMockCalled: LoaderFunction = (context) => {
     const onMockCall = global.__STORYBOOK_TEST_ON_MOCK_CALL__ as typeof onMockCallType;
     onMockCall((mock, args) => {
       const name = mock.getMockName();
+      if (name === 'spy') return;
 
       // TODO: Make this a configurable API in 8.2
       if (

code/addons/interactions/src/components/Interaction.tsx

@@ -5,12 +5,12 @@ import { styled, typography } from '@storybook/theming';
 import { transparentize } from 'polished';
 
 import { ListUnorderedIcon } from '@storybook/icons';
-import { Expected, MatcherResult, Received } from './MatcherResult';
+import { MatcherResult } from './MatcherResult';
 import { MethodCall } from './MethodCall';
 import { StatusIcon } from './StatusIcon';
 
 import type { Controls } from './InteractionsPanel';
-import { isJestError } from '../utils';
+import { isChaiError, isJestError } from '../utils';
 
 const MethodCallWrapper = styled.div(() => ({
   fontFamily: typography.fonts.mono,
@@ -117,33 +117,23 @@ export const Exception = ({ exception }: { exception: Call['exception'] }) => {
   if (isJestError(exception)) {
     return <MatcherResult {...exception} />;
   }
+  if (isChaiError(exception)) {
+    return (
+      <RowMessage>
+        <MatcherResult
+          message={`${exception.message}${exception.diff ? `\n\n${exception.diff}` : ''}`}
+          style={{ padding: 0 }}
+        />
+        <p>See the full stack trace in the browser console.</p>
+      </RowMessage>
+    );
+  }
+
   const paragraphs = exception.message.split('\n\n');
   const more = paragraphs.length > 1;
   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>
   );

code/addons/interactions/src/components/InteractionsPanel.stories.tsx

@@ -120,11 +120,11 @@ export const Failed: Story = {
   },
 };
 
-export const NoInteractions: Story = {
-  args: {
-    interactions: [],
-  },
-};
+// export const NoInteractions: Story = {
+//   args: {
+//     interactions: [],
+//   },
+// };
 
 export const CaughtException: Story = {
   args: {

code/addons/interactions/src/components/MatcherResult.stories.tsx

@@ -29,53 +29,81 @@ export default {
 export const Expected = {
   args: {
     message: dedent`
-      expect(jest.fn()).lastCalledWith(...expected)
-
-      Expected: {"email": "[email protected]", "password": "testpasswordthatwontfail"}
-
-      Number of calls: 0
+      expected last "spy" call to have been called with [ { …(2) } ]
+      
+      - Expected: 
+      Array [
+        Object {
+          "email": "[email protected]",
+          "password": "testpasswordthatwontfail",
+        },
+      ]
+      
+      + Received: 
+      undefined
     `,
   },
 };
 
 export const ExpectedReceived = {
   args: {
     message: dedent`
-      expect(jest.fn()).toHaveBeenCalledWith(...expected)
-
-      Expected: called with 0 arguments
-      Received: {"email": "[email protected]", "password": "testpasswordthatwontfail"}
-
-      Number of calls: 1
+      expected last "spy" call to have been called with []
+      
+      - Expected
+      + Received
+      
+      - Array []
+      + Array [
+      +   Object {
+      +     "email": "[email protected]",
+      +     "password": "testpasswordthatwontfail",
+      +   },
+      + ]
     `,
   },
 };
 
 export const ExpectedNumberOfCalls = {
   args: {
     message: dedent`
-      expect(jest.fn()).toHaveBeenCalledTimes(expected)
-
-      Expected number of calls: 1
-      Received number of calls: 0
+      expected "spy" to not be called at all, but actually been called 1 times
+      
+      Received: 
+      
+        1st spy call:
+      
+          Array [
+            Object {
+              "email": "[email protected]",
+              "password": "testpasswordthatwontfail",
+            },
+          ]
+      
+      
+      Number of calls: 1
     `,
   },
 };
 
 export const Diff = {
   args: {
     message: dedent`
-      expect(jest.fn()).toHaveBeenCalledWith(...expected)
-
-      - Expected
-      + Received
-
-        Object {
-      -   "email": "[email protected]",
-      +   "email": "[email protected]",
-          "password": "testpasswordthatwontfail",
-        },
-
+      expected "spy" to be called with arguments: [ { …(2) } ]
+      
+      Received: 
+      
+        1st spy call:
+      
+        Array [
+          Object {
+      -     "email": "[email protected]",
+      +     "email": "[email protected]",
+            "password": "testpasswordthatwontfail",
+          },
+        ]
+      
+      
       Number of calls: 1
     `,
   },

code/addons/interactions/src/components/MatcherResult.tsx

@@ -85,7 +85,7 @@ export const MatcherResult = ({
         if (line.match(/^\s*- /)) {
           return [<Expected key={line + index} value={line} />, <br key={`br${index}`} />];
         }
-        if (line.match(/^\s*\+ /)) {
+        if (line.match(/^\s*\+ /) || line.match(/^Received: $/)) {
           return [<Received key={line + index} value={line} />, <br key={`br${index}`} />];
         }
 

code/lib/cli/src/automigrate/fixes/react-docgen.ts

@@ -62,7 +62,7 @@ export const reactDocgen: Fix<Options> = {
       For known "react-docgen" limitations, see: 
       ${chalk.yellow('https://github.com/storybookjs/storybook/issues/26606')}
       
-      Press Y to revert to ${chalk.cyan('react-docgen-typesript')}, press N to use ${chalk.cyan(
+      Press Y to revert to ${chalk.cyan('react-docgen-typescript')}, press N to use ${chalk.cyan(
         'react-docgen'
       )}
     `;

code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts

@@ -23,6 +23,7 @@ describe('composeStory', () => {
       label: 'Hello World',
       primary: true,
     },
+    tags: ['metaTag'],
   };
 
   it('should compose project annotations in all module formats', () => {
@@ -40,15 +41,16 @@ describe('composeStory', () => {
   it('should return story with composed annotations from story, meta and project', () => {
     const decoratorFromProjectAnnotations = vi.fn((StoryFn) => StoryFn());
     const decoratorFromStoryAnnotations = vi.fn((StoryFn) => StoryFn());
-    setProjectAnnotations([
-      {
-        parameters: { injected: true },
-        globalTypes: {
-          locale: { defaultValue: 'en' },
-        },
-        decorators: [decoratorFromProjectAnnotations],
+    const projectAnnotations = {
+      parameters: { injected: true },
+      globalTypes: {
+        locale: { defaultValue: 'en' },
       },
-    ]);
+      decorators: [decoratorFromProjectAnnotations],
+      tags: ['projectTag'],
+    };
+
+    setProjectAnnotations(projectAnnotations);
 
     const Story: Story = {
       render: () => {},
@@ -57,13 +59,15 @@ describe('composeStory', () => {
         secondAddon: true,
       },
       decorators: [decoratorFromStoryAnnotations],
+      tags: ['storyTag'],
     };
 
     const composedStory = composeStory(Story, meta);
     expect(composedStory.args).toEqual({ ...Story.args, ...meta.args });
     expect(composedStory.parameters).toEqual(
       expect.objectContaining({ ...Story.parameters, ...meta.parameters })
     );
+    expect(composedStory.tags).toEqual(['dev', 'test', 'projectTag', 'metaTag', 'storyTag']);
 
     composedStory();
 

code/lib/preview-api/src/modules/store/csf/portable-stories.ts

@@ -172,6 +172,7 @@ export function composeStory<TRenderer extends Renderer = Renderer, TArgs extend
       parameters: story.parameters as Parameters,
       argTypes: story.argTypes as StrictArgTypes<TArgs>,
       play: playFunction as ComposedStoryPlayFn<TRenderer, TArgs> | undefined,
+      tags: story.tags,
     }
   );
 

code/lib/types/src/modules/composedStory.ts

@@ -6,6 +6,7 @@ import type {
   Renderer,
   StoryId,
   StrictArgTypes,
+  Tag,
 } from '@storybook/csf';
 
 import type {
@@ -56,6 +57,7 @@ export type ComposedStoryFn<
   storyName: string;
   parameters: Parameters;
   argTypes: StrictArgTypes<TArgs>;
+  tags: Tag[];
 };
 /**
  * Based on a module of stories, it returns all stories within it, filtering non-stories

code/package.json

@@ -299,5 +299,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "8.1.7"
 }

code/ui/.storybook/main.ts

@@ -30,6 +30,10 @@ const allStories = [
     directory: '../../addons/onboarding/src',
     titlePrefix: '@addons/onboarding',
   },
+  {
+    directory: '../../addons/interactions/src',
+    titlePrefix: '@addons/interactions',
+  },
 ];
 
 /**

docs/versions/latest.json

@@ -1 +1 @@
-{"version":"8.1.6","info":{"plain":"- CLI: Only log the UpgradeStorybookToSameVersionError but continue the upgrade as normal - [#27217](https://github.com/storybookjs/storybook/pull/27217), thanks @kasperpeulen!\n- Core: Replace ip function with a small helper function to address security concerns - [#27529](https://github.com/storybookjs/storybook/pull/27529), thanks @tony19!\n- Tags: Fix unsafe project-level tags lookup - [#27511](https://github.com/storybookjs/storybook/pull/27511), thanks @shilman!\n- Vite: Fix stats-plugin to normalize file names with posix paths - [#27218](https://github.com/storybookjs/storybook/pull/27218), thanks @AlexAtVista!"}}
+{"version":"8.1.7","info":{"plain":"- Addon-actions: Only log spies with names - [#28091](https://github.com/storybookjs/storybook/pull/28091), thanks @kasperpeulen!\n- CLI: Fix typo in React Docgen migration - [#27536](https://github.com/storybookjs/storybook/pull/27536), thanks @jonniebigodes!\n- Portable Stories: Add tags to composed story - [#27708](https://github.com/storybookjs/storybook/pull/27708), thanks @yannbf!\n- Test: Display toHaveBeenCalledWith expected / received values on failure - [#28088](https://github.com/storybookjs/storybook/pull/28088), thanks @kasperpeulen!"}}

docs/versions/next.json

@@ -1 +1 @@
-{"version":"8.2.0-alpha.5","info":{"plain":"- Angular: Fix wrong detection of standalone components - [#27353](https://github.com/storybookjs/storybook/pull/27353), thanks @dario-baumberger!\n- Dependency: Bump Express.js - [#26680](https://github.com/storybookjs/storybook/pull/26680), thanks @valentinpalkovic!\n- Tags: Fix unsafe project-level tags lookup - [#27511](https://github.com/storybookjs/storybook/pull/27511), thanks @shilman!"}}
+{"version":"8.2.0-alpha.6","info":{"plain":"- Addon-actions: Only log spies with names - [#28091](https://github.com/storybookjs/storybook/pull/28091), thanks @kasperpeulen!\n- Build: Change require/import order, so that import has higher prio if both are specified - [#27730](https://github.com/storybookjs/storybook/pull/27730), thanks @kasperpeulen!\n- CLI: Only log the UpgradeStorybookToSameVersionError but continue the upgrade as normal - [#27217](https://github.com/storybookjs/storybook/pull/27217), thanks @kasperpeulen!\n- Core: Replace ip function with a small helper function to address security concerns - [#27529](https://github.com/storybookjs/storybook/pull/27529), thanks @tony19!\n- Portable Stories: Add tags to composed story - [#27708](https://github.com/storybookjs/storybook/pull/27708), thanks @yannbf!\n- Test: Upgrade deps of @storybook/test - [#27862](https://github.com/storybookjs/storybook/pull/27862), thanks @kasperpeulen!\n- Vite: Fix stats-plugin to normalize file names with posix paths - [#27218](https://github.com/storybookjs/storybook/pull/27218), thanks @AlexAtVista!"}}