only provide a play function wrapper if it exists

storybookjs · Feb 9, 2024 · 3783493 · 3783493
1 parent 903317b
commit 3783493
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 24 deletions.
diff --git a/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts b/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts
@@ -41,7 +41,7 @@ describe('composeStory', () => {
     };
 
     const composedStory = composeStory(Story, meta);
-    await composedStory.play({ canvasElement: null });
+    await composedStory.play!({ canvasElement: null });
     expect(spy).toHaveBeenCalledWith(
       expect.objectContaining({
         args: {
@@ -52,16 +52,6 @@ describe('composeStory', () => {
     );
   });
 
-  it('should throw when executing the play function but the story does not have one', async () => {
-    const Story = () => {};
-    Story.args = {
-      primary: true,
-    };
-
-    const composedStory = composeStory(Story, meta);
-    expect(composedStory.play({ canvasElement: null })).rejects.toThrow();
-  });
-
   it('should throw an error if Story is undefined', () => {
     expect(() => {
       // @ts-expect-error (invalid input)

diff --git a/code/lib/preview-api/src/modules/store/csf/portable-stories.ts b/code/lib/preview-api/src/modules/store/csf/portable-stories.ts
@@ -101,16 +101,13 @@ export function composeStory<TRenderer extends Renderer = Renderer, TArgs extend
       parameters: story.parameters as Parameters,
       argTypes: story.argTypes as StrictArgTypes<TArgs>,
       id: story.id,
-      play: (async (extraContext: ComposedStoryPlayContext<TRenderer, TArgs>) => {
-        if (story.playFunction === undefined) {
-          throw new Error('The story does not have a play function. Make sure to add one.');
-        }
-
-        await story.playFunction({
-          ...context,
-          ...extraContext,
-        });
-      }) as unknown as ComposedStoryPlayFn<TRenderer, Partial<TArgs>>,
+      play: story.playFunction
+        ? ((async (extraContext: ComposedStoryPlayContext<TRenderer, TArgs>) =>
+            story.playFunction!({
+              ...context,
+              ...extraContext,
+            })) as unknown as ComposedStoryPlayFn<TRenderer, Partial<TArgs>>)
+        : undefined,
     }
   );
 

diff --git a/code/lib/types/src/modules/composedStory.ts b/code/lib/types/src/modules/composedStory.ts
@@ -55,7 +55,7 @@ export type ComposedStoryFn<
   TRenderer extends Renderer = Renderer,
   TArgs = Args,
 > = PartialArgsStoryFn<TRenderer, TArgs> & {
-  play: ComposedStoryPlayFn<TRenderer, TArgs>;
+  play: ComposedStoryPlayFn<TRenderer, TArgs> | undefined;
   args: TArgs;
   id: StoryId;
   storyName: string;

diff --git a/code/renderers/react/src/__test__/portable-stories.test.tsx b/code/renderers/react/src/__test__/portable-stories.test.tsx
@@ -99,7 +99,7 @@ describe('CSF3', () => {
 
     const { container } = render(<CSF3InputFieldFilled />);
 
-    await CSF3InputFieldFilled.play({ canvasElement: container });
+    await CSF3InputFieldFilled.play!({ canvasElement: container });
 
     const input = screen.getByTestId('input') as HTMLInputElement;
     expect(input.value).toEqual('Hello world!');

diff --git a/code/renderers/vue3/src/__tests__/composeStories/portable-stories.test.ts b/code/renderers/vue3/src/__tests__/composeStories/portable-stories.test.ts
@@ -86,7 +86,7 @@ describe('CSF3', () => {
 
     const { container } = render(CSF3InputFieldFilled());
 
-    await CSF3InputFieldFilled.play({ canvasElement: container as HTMLElement });
+    await CSF3InputFieldFilled.play!({ canvasElement: container as HTMLElement });
 
     const input = screen.getByTestId('input') as HTMLInputElement;
     expect(input.value).toEqual('Hello world!');