diff --git a/examples/official-storybook/stories/demo/setup.stories.tsx b/examples/official-storybook/stories/demo/setup.stories.tsx index 1435c170f077..ade8666b7d76 100644 --- a/examples/official-storybook/stories/demo/setup.stories.tsx +++ b/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 diff --git a/examples/react-ts/src/AccountForm.stories.tsx b/examples/react-ts/src/AccountForm.stories.tsx index 1d0e5513c1e0..11291fec1601 100644 --- a/examples/react-ts/src/AccountForm.stories.tsx +++ b/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,20 +58,20 @@ 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')); }, }; @@ -79,13 +79,13 @@ 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')); }, }; diff --git a/examples/react-ts/src/button.stories.tsx b/examples/react-ts/src/button.stories.tsx index b3ef9f212cae..96119689d07c 100644 --- a/examples/react-ts/src/button.stories.tsx +++ b/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')); }, }; diff --git a/lib/client-api/src/story_store.ts b/lib/client-api/src/story_store.ts index 4fe67ca51c2e..73c8f2bdb908 100644 --- a/lib/client-api/src/story_store.ts +++ b/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, diff --git a/lib/client-api/src/types.ts b/lib/client-api/src/types.ts index 09f39cf7133f..131a6c30e021 100644 --- a/lib/client-api/src/types.ts +++ b/lib/client-api/src/types.ts @@ -59,7 +59,7 @@ export type StoreItem = StoryIdentifier & { getDecorated: () => StoryFn; getOriginal: () => StoryFn; applyLoaders: () => Promise; - runSetupFunction: () => Promise; + runPlayFunction: () => Promise; storyFn: StoryFn; unboundStoryFn: StoryFn; hooks: HooksContext; diff --git a/lib/codemod/src/transforms/__tests__/csf-2-to-3.test.ts b/lib/codemod/src/transforms/__tests__/csf-2-to-3.test.ts index ee992f5ca8c5..5ffa743b98e6 100644 --- a/lib/codemod/src/transforms/__tests__/csf-2-to-3.test.ts +++ b/lib/codemod/src/transforms/__tests__/csf-2-to-3.test.ts @@ -38,7 +38,7 @@ describe('csf-2-to-3', () => { export const A = () => ; 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: () => {}, }; `); }); diff --git a/lib/core-client/src/preview/StoryRenderer.test.ts b/lib/core-client/src/preview/StoryRenderer.test.ts index 3b9be0a5884b..eac53265c3f1 100644 --- a/lib/core-client/src/preview/StoryRenderer.test.ts +++ b/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', () => { diff --git a/lib/core-client/src/preview/StoryRenderer.tsx b/lib/core-client/src/preview/StoryRenderer.tsx index f7aa58d0218b..d76b7fa0993f 100644 --- a/lib/core-client/src/preview/StoryRenderer.tsx +++ b/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) { diff --git a/lib/core-client/src/preview/normalizeStory.test.ts b/lib/core-client/src/preview/normalizeStory.test.ts index 0ef8d443a2a6..ec424dfff2c3 100644 --- a/lib/core-client/src/preview/normalizeStory.test.ts +++ b/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", } diff --git a/lib/core-client/src/preview/normalizeStory.ts b/lib/core-client/src/preview/normalizeStory.ts index 8f0566286725..4090239b1af3 100644 --- a/lib/core-client/src/preview/normalizeStory.ts +++ b/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 {