Merge pull request #28764 from storybookjs/kasper/introduce-run

Core: Introduce run over play in portable stories, and revert back play changes of 8.2
(cherry picked from commit 3b65e72)

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

@@ -89,25 +89,8 @@ export function composeStory<TRenderer extends Renderer = Renderer, TArgs extend
     normalizedComponentAnnotations
   );
 
-  // TODO: Remove this in 9.0
-  // We can only use the renderToCanvas definition of the default config when testingLibraryRender is set
-  // This makes sure, that when the user doesn't do this, and doesn't provide its own renderToCanvas definition,
-  // we fall back to the < 8.1 behavior of the play function.
-
-  const fallback =
-    defaultConfig &&
-    !globalProjectAnnotations?.testingLibraryRender &&
-    !projectAnnotations?.testingLibraryRender;
-
   const normalizedProjectAnnotations = normalizeProjectAnnotations<TRenderer>(
-    composeConfigs([
-      {
-        ...defaultConfig,
-        renderToCanvas: fallback ? undefined : defaultConfig?.renderToCanvas,
-      },
-      globalProjectAnnotations,
-      projectAnnotations ?? {},
-    ])
+    composeConfigs([defaultConfig ?? {}, globalProjectAnnotations, projectAnnotations ?? {}])
   );
 
   const story = prepareStory<TRenderer>(
@@ -130,7 +113,7 @@ export function composeStory<TRenderer extends Renderer = Renderer, TArgs extend
       loaded: {},
       abortSignal: new AbortController().signal,
       step: (label, play) => story.runStep(label, play, context),
-      canvasElement: globalThis?.document?.body,
+      canvasElement: null!,
       canvas: {} as Canvas,
       ...story,
       context: null!,
@@ -149,6 +132,7 @@ export function composeStory<TRenderer extends Renderer = Renderer, TArgs extend
             id: story.id,
             name: story.name,
             tags: story.tags,
+            showMain: () => {},
             showError: (error) => {},
             showException: (error) => {},
             forceRemount: true,
@@ -171,28 +155,23 @@ export function composeStory<TRenderer extends Renderer = Renderer, TArgs extend
 
   let loadedContext: StoryContext<TRenderer> | undefined;
 
-  // TODO: Remove in 9.0
-  const backwardsCompatiblePlay = async (
-    extraContext?: Partial<StoryContext<TRenderer, Partial<TArgs>>>
-  ) => {
+  const play = async (extraContext?: Partial<StoryContext<TRenderer, Partial<TArgs>>>) => {
     const context = initializeContext();
+    context.canvasElement ??= globalThis?.document?.body;
     if (loadedContext) {
       context.loaded = loadedContext.loaded;
     }
     Object.assign(context, extraContext);
     return story.playFunction!(context);
   };
-  const newPlay = (extraContext?: Partial<StoryContext<TRenderer, Partial<TArgs>>>) => {
+
+  const run = (extraContext?: Partial<StoryContext<TRenderer, Partial<TArgs>>>) => {
     const context = initializeContext();
     Object.assign(context, extraContext);
-    return playStory(story, context);
+    return runStory(story, context);
   };
-  const playFunction =
-    !story.renderToCanvas && story.playFunction
-      ? backwardsCompatiblePlay
-      : !story.renderToCanvas && !story.playFunction
-        ? undefined
-        : newPlay;
+
+  const playFunction = story.playFunction ? play : undefined;
 
   const composedStory: ComposedStoryFn<TRenderer, Partial<TArgs>> = Object.assign(
     function storyFn(extraArgs?: Partial<TArgs>) {
@@ -226,6 +205,7 @@ export function composeStory<TRenderer extends Renderer = Renderer, TArgs extend
       parameters: story.parameters as Parameters,
       argTypes: story.argTypes as StrictArgTypes<TArgs>,
       play: playFunction!,
+      run,
       tags: story.tags,
     }
   );
@@ -325,13 +305,24 @@ export function createPlaywrightTest<TFixture extends { extend: any }>(
 
 // TODO At some point this function should live in prepareStory and become the core of StoryRender.render as well.
 // Will make a follow up PR for that
-async function playStory<TRenderer extends Renderer>(
+async function runStory<TRenderer extends Renderer>(
   story: PreparedStory<TRenderer>,
   context: StoryContext<TRenderer>
 ) {
   for (const callback of [...cleanups].reverse()) await callback();
   cleanups.length = 0;
 
+  if (!context.canvasElement) {
+    const container = document.createElement('div');
+    globalThis?.document?.body?.appendChild(container);
+    context.canvasElement = container;
+    cleanups.push(() => {
+      if (globalThis?.document?.body?.contains(container)) {
+        globalThis?.document?.body?.removeChild(container);
+      }
+    });
+  }
+
   context.loaded = await story.applyLoaders(context);
   if (context.abortSignal.aborted) return;
 

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

@@ -44,7 +44,8 @@ export type ComposedStoryFn<
 > = PartialArgsStoryFn<TRenderer, TArgs> & {
   args: TArgs;
   id: StoryId;
-  play: (context?: Partial<StoryContext<TRenderer, Partial<TArgs>>>) => Promise<void>;
+  play?: (context?: Partial<StoryContext<TRenderer, Partial<TArgs>>>) => Promise<void>;
+  run: (context?: Partial<StoryContext<TRenderer, Partial<TArgs>>>) => Promise<void>;
   load: () => Promise<void>;
   storyName: string;
   parameters: Parameters;

code/renderers/react/src/__test__/portable-stories.test.tsx

@@ -53,7 +53,7 @@ describe('renders', () => {
   });
 
   it('should render component mounted in play function', async () => {
-    await MountInPlayFunction.play();
+    await MountInPlayFunction.run();
 
     expect(screen.getByTestId('spy-data').textContent).toEqual('mockFn return value');
     expect(screen.getByTestId('loaded-data').textContent).toEqual('loaded data');
@@ -65,7 +65,7 @@ describe('renders', () => {
     expect(getByTestId('spy-data').textContent).toEqual('mockFn return value');
     expect(getByTestId('loaded-data').textContent).toEqual('loaded data');
     // spy assertions happen in the play function and should work
-    await LoaderStory.play!();
+    await LoaderStory.run!();
   });
 });
 
@@ -125,7 +125,7 @@ describe('CSF3', () => {
 
   it('renders with play function without canvas element', async () => {
     const CSF3InputFieldFilled = composeStory(stories.CSF3InputFieldFilled, stories.default);
-    await CSF3InputFieldFilled.play();
+    await CSF3InputFieldFilled.run();
 
     const input = screen.getByTestId('input') as HTMLInputElement;
     expect(input.value).toEqual('Hello world!');
@@ -138,7 +138,7 @@ describe('CSF3', () => {
     console.log(div.tagName);
     document.body.appendChild(div);
 
-    await CSF3InputFieldFilled.play({ canvasElement: div });
+    await CSF3InputFieldFilled.run({ canvasElement: div });
 
     const input = screen.getByTestId('input') as HTMLInputElement;
     expect(input.value).toEqual('Hello world!');
@@ -185,6 +185,6 @@ const testCases = Object.values(composeStories(stories)).map(
 );
 it.each(testCases)('Renders %s story', async (_storyName, Story) => {
   if (_storyName === 'CSF2StoryWithLocale') return;
-  await Story.play();
+  await Story.run();
   expect(document.body).toMatchSnapshot();
 });

code/renderers/react/src/portable-stories.tsx

@@ -45,11 +45,16 @@ export function setProjectAnnotations(
 // This will not be necessary once we have auto preset loading
 export const INTERNAL_DEFAULT_PROJECT_ANNOTATIONS: ProjectAnnotations<ReactRenderer> = {
   ...reactProjectAnnotations,
-  renderToCanvas: ({
-    storyContext: { context, unboundStoryFn: Story, testingLibraryRender: render, canvasElement },
-  }) => {
-    if (render == null) throw new TestingLibraryMustBeConfiguredError();
-    const { unmount } = render(<Story {...context} />, { baseElement: context.canvasElement });
+  renderToCanvas: (renderContext, canvasElement) => {
+    if (renderContext.storyContext.testingLibraryRender == null) {
+      throw new TestingLibraryMustBeConfiguredError();
+      // Enable for 8.3
+      // return reactProjectAnnotations.renderToCanvas(renderContext, canvasElement);
+    }
+    const {
+      storyContext: { context, unboundStoryFn: Story, testingLibraryRender: render },
+    } = renderContext;
+    const { unmount } = render(<Story {...context} />, { container: context.canvasElement });
     return unmount;
   },
 };