CSF3: Rename setup to play

examples/official-storybook/stories/demo/setup.stories.tsx

@@ -9,8 +9,8 @@ export default {
   component: Input,
 };
 
-export const WithSetup = {
-  setup: async () => {
+export const WithPlay = {
+  play: async () => {
     const inputs = screen.getAllByTestId('test-input');
     for (let i = 0; i < inputs.length; i += 1) {
       // eslint-disable-next-line no-await-in-loop

examples/react-ts/src/AccountForm.stories.tsx

@@ -22,33 +22,33 @@ export const Standard = {
 
 export const StandardEmailFilled = {
   ...Standard,
-  setup: () => userEvent.type(screen.getByTestId('email'), 'michael@chromatic.com'),
+  play: () => userEvent.type(screen.getByTestId('email'), 'michael@chromatic.com'),
 };
 
 export const StandardEmailFailed = {
   ...Standard,
-  setup: () => {
-    userEvent.type(screen.getByTestId('email'), 'michael@chromatic.com.com@com');
-    userEvent.type(screen.getByTestId('password1'), 'testpasswordthatwontfail');
-    userEvent.click(screen.getByTestId('submit'));
+  play: async () => {
+    await userEvent.type(screen.getByTestId('email'), 'michael@chromatic.com.com@com');
+    await userEvent.type(screen.getByTestId('password1'), 'testpasswordthatwontfail');
+    await userEvent.click(screen.getByTestId('submit'));
   },
 };
 
 export const StandardPasswordFailed = {
   ...Standard,
-  setup: () => {
-    StandardEmailFilled.setup();
-    userEvent.type(screen.getByTestId('password1'), 'asdf');
-    userEvent.click(screen.getByTestId('submit'));
+  play: async () => {
+    await StandardEmailFilled.play();
+    await userEvent.type(screen.getByTestId('password1'), 'asdf');
+    await userEvent.click(screen.getByTestId('submit'));
   },
 };
 
 export const StandardFailHover = {
   ...StandardPasswordFailed,
-  setup: async () => {
-    await StandardPasswordFailed.setup();
+  play: async () => {
+    await StandardPasswordFailed.play();
     await sleep(100);
-    userEvent.hover(screen.getByTestId('password-error-info'));
+    await userEvent.hover(screen.getByTestId('password-error-info'));
   },
 };
 
@@ -58,34 +58,34 @@ export const Verification = {
 
 export const VerificationPasssword1 = {
   ...Verification,
-  setup: () => {
-    StandardEmailFilled.setup();
-    userEvent.type(screen.getByTestId('password1'), 'asdfasdf');
-    userEvent.click(screen.getByTestId('submit'));
+  play: async () => {
+    await StandardEmailFilled.play();
+    await userEvent.type(screen.getByTestId('password1'), 'asdfasdf');
+    await userEvent.click(screen.getByTestId('submit'));
   },
 };
 
 export const VerificationPasswordMismatch = {
   ...Verification,
-  setup: () => {
-    StandardEmailFilled.setup();
-    userEvent.type(screen.getByTestId('password1'), 'asdfasdf');
-    userEvent.type(screen.getByTestId('password2'), 'asdf1234');
-    userEvent.click(screen.getByTestId('submit'));
+  play: async () => {
+    await StandardEmailFilled.play();
+    await userEvent.type(screen.getByTestId('password1'), 'asdfasdf');
+    await userEvent.type(screen.getByTestId('password2'), 'asdf1234');
+    await userEvent.click(screen.getByTestId('submit'));
   },
 };
 
 const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));
 
 export const VerificationSuccess = {
   ...Verification,
-  setup: async () => {
-    await StandardEmailFilled.setup();
+  play: async () => {
+    await StandardEmailFilled.play();
     await sleep(1000);
     await userEvent.type(screen.getByTestId('password1'), 'asdfasdf', { delay: 50 });
     await sleep(1000);
     await userEvent.type(screen.getByTestId('password2'), 'asdfasdf', { delay: 50 });
     await sleep(1000);
-    userEvent.click(screen.getByTestId('submit'));
+    await userEvent.click(screen.getByTestId('submit'));
   },
 };

examples/react-ts/src/button.stories.tsx

@@ -23,10 +23,10 @@ export const StoryNoRender = {
   args: { label: 'magic!' },
 };
 
-export const StoryWithSetup = {
-  args: { label: 'setup' },
-  setup: () => {
-    console.log('setup!!');
+export const StoryWithPlay = {
+  args: { label: 'play' },
+  play: () => {
+    console.log('play!!');
     userEvent.click(screen.getByRole('button'));
   },
 };

lib/client-api/src/story_store.ts

@@ -570,9 +570,9 @@ export default class StoryStore {
       initialArgsBeforeEnhancers
     );
 
-    const runSetupFunction = async () => {
-      const { setup } = combinedParameters as { setup?: () => any };
-      return setup ? setup() : undefined;
+    const runPlayFunction = async () => {
+      const { play } = combinedParameters as { play?: () => any };
+      return play ? play() : undefined;
     };
 
     _stories[id] = {
@@ -582,7 +582,7 @@ export default class StoryStore {
       getDecorated,
       getOriginal,
       applyLoaders,
-      runSetupFunction,
+      runPlayFunction,
       storyFn,
       unboundStoryFn,
 

lib/client-api/src/types.ts

@@ -59,7 +59,7 @@ export type StoreItem = StoryIdentifier & {
   getDecorated: () => StoryFn<any>;
   getOriginal: () => StoryFn<any>;
   applyLoaders: () => Promise<StoryContext>;
-  runSetupFunction: () => Promise<any>;
+  runPlayFunction: () => Promise<any>;
   storyFn: StoryFn<any>;
   unboundStoryFn: StoryFn<any>;
   hooks: HooksContext;

lib/codemod/src/transforms/__tests__/csf-2-to-3.test.ts

@@ -38,7 +38,7 @@ describe('csf-2-to-3', () => {
           export const A = () => <Cat />;
           A.storyName = 'foo';
           A.parameters = { bar: 2 };
-          A.setup = () => {};
+          A.play = () => {};
         `)
       ).toMatchInlineSnapshot(`
         export default {
@@ -50,7 +50,7 @@ describe('csf-2-to-3', () => {
           parameters: {
             bar: 2,
           },
-          setup: () => {},
+          play: () => {},
         };
       `);
     });

lib/core-client/src/preview/StoryRenderer.test.ts

@@ -127,14 +127,14 @@ describe('core.preview.StoryRenderer', () => {
     expect(onStoryRendered).toHaveBeenCalledWith('a--1');
   });
 
-  it('calls setup functions on render', async () => {
+  it('calls play functions on render', async () => {
     const { render, channel, storyStore, renderer } = prepareRenderer();
 
     const onStoryRendered = jest.fn();
     channel.on(STORY_RENDERED, onStoryRendered);
 
-    const setup = jest.fn();
-    addAndSelectStory(storyStore, 'a', '1', { p: 'q', setup });
+    const play = jest.fn();
+    addAndSelectStory(storyStore, 'a', '1', { p: 'q', play });
 
     await renderer.renderCurrentStory(false);
     expect(render).toHaveBeenCalled();
@@ -151,7 +151,7 @@ describe('core.preview.StoryRenderer', () => {
     await Promise.resolve(null);
 
     expect(onStoryRendered).toHaveBeenCalledWith('a--1');
-    expect(setup).toHaveBeenCalled();
+    expect(play).toHaveBeenCalled();
   });
 
   describe('loaders', () => {

lib/core-client/src/preview/StoryRenderer.tsx

@@ -278,12 +278,12 @@ export class StoryRenderer {
   }) {
     if (getDecorated) {
       try {
-        const { applyLoaders, runSetupFunction, unboundStoryFn, forceRender } = context;
+        const { applyLoaders, runPlayFunction, unboundStoryFn, forceRender } = context;
         const storyContext = await applyLoaders();
         const storyFn = () => unboundStoryFn(storyContext);
         await this.render({ ...context, storyContext, storyFn });
         if (isCsf3Enabled() && !forceRender) {
-          await runSetupFunction();
+          await runPlayFunction();
         }
         this.channel.emit(Events.STORY_RENDERED, id);
       } catch (err) {

lib/core-client/src/preview/normalizeStory.test.ts

@@ -36,7 +36,7 @@ describe('normalizeStory', () => {
               "args": Object {},
               "decorators": Array [],
               "loaders": Array [],
-              "setup": undefined,
+              "play": undefined,
             },
             "storyFn": [Function],
           }
@@ -96,26 +96,26 @@ describe('normalizeStory', () => {
         });
       });
 
-      describe('setup function', () => {
+      describe('play function', () => {
         it('no render function', () => {
           const storyObj = {};
           const meta = { title: 'title' };
           const normalized = normalizeV3('storyExport', storyObj, meta, globalRender);
-          expect(normalized.parameters.setup).toBeUndefined();
+          expect(normalized.parameters.play).toBeUndefined();
         });
 
         it('user-provided story render function', () => {
-          const storyObj = { setup: () => 'story' };
-          const meta = { title: 'title', setup: () => 'meta' };
+          const storyObj = { play: () => 'story' };
+          const meta = { title: 'title', play: () => 'meta' };
           const normalized = normalizeV3('storyExport', storyObj, meta, globalRender);
-          expect(normalized.parameters.setup).toBe(storyObj.setup);
+          expect(normalized.parameters.play).toBe(storyObj.play);
         });
 
         it('user-provided meta render function', () => {
           const storyObj = {};
-          const meta = { title: 'title', setup: () => 'meta' };
+          const meta = { title: 'title', play: () => 'meta' };
           const normalized = normalizeV3('storyExport', storyObj, meta, globalRender);
-          expect(normalized.parameters.setup).toBe(meta.setup);
+          expect(normalized.parameters.play).toBe(meta.play);
         });
       });
 
@@ -133,7 +133,7 @@ describe('normalizeStory', () => {
                 "args": Object {},
                 "decorators": Array [],
                 "loaders": Array [],
-                "setup": undefined,
+                "play": undefined,
               },
               "storyFn": "global-render",
             }
@@ -168,7 +168,7 @@ describe('normalizeStory', () => {
                 "loaders": Array [
                   [Function],
                 ],
-                "setup": undefined,
+                "play": undefined,
                 "storyParam": "val",
               },
               "storyFn": "global-render",
@@ -196,7 +196,7 @@ describe('normalizeStory', () => {
                 "args": Object {},
                 "decorators": Array [],
                 "loaders": Array [],
-                "setup": undefined,
+                "play": undefined,
               },
               "storyFn": "global-render",
             }

lib/core-client/src/preview/normalizeStory.ts

@@ -69,7 +69,7 @@ export const normalizeV3 = (key: string, storyExport: any, meta: any, globalRend
 
   const {
     render,
-    setup,
+    play,
     parameters: storyParams,
     decorators = [],
     loaders = [],
@@ -87,7 +87,7 @@ export const normalizeV3 = (key: string, storyExport: any, meta: any, globalRend
     loaders,
     args,
     argTypes,
-    setup: setup || meta.setup,
+    play: play || meta.play,
   };
 
   return {