Skip to content

Commit

Permalink
Merge pull request #15358 from storybookjs/csf3-rename-setup-to-play
Browse files Browse the repository at this point in the history 
CSF3: Rename setup to play
  • Loading branch information
@shilman
shilman committed Jun 25, 2021
2 parents 7e7cb5a + bd90a23 commit 0b81fe1
Show file tree
Hide file tree
Showing 10 changed files with 56 additions and 56 deletions.
4 changes: 2 additions & 2 deletions examples/official-storybook/stories/demo/setup.stories.tsx
View file
Expand Up @@ -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
Expand Down
48 changes: 24 additions & 24 deletions examples/react-ts/src/AccountForm.stories.tsx
View file
Expand Up @@ -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'));
},
};

Expand All @@ -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'));
},
};
8 changes: 4 additions & 4 deletions examples/react-ts/src/button.stories.tsx
View file
Expand Up @@ -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'));
},
};
8 changes: 4 additions & 4 deletions lib/client-api/src/story_store.ts
View file
Expand Up @@ -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] = {
Expand All @@ -582,7 +582,7 @@ export default class StoryStore {
getDecorated,
getOriginal,
applyLoaders,
runSetupFunction,
runPlayFunction,
storyFn,
unboundStoryFn,

Expand Down
2 changes: 1 addition & 1 deletion lib/client-api/src/types.ts
View file
Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions lib/codemod/src/transforms/__tests__/csf-2-to-3.test.ts
View file
Expand Up @@ -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 {
Expand All @@ -50,7 +50,7 @@ describe('csf-2-to-3', () => {
parameters: {
bar: 2,
},
setup: () => {},
play: () => {},
};
`);
});
Expand Down
8 changes: 4 additions & 4 deletions lib/core-client/src/preview/StoryRenderer.test.ts
View file
Expand Up @@ -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();
Expand All @@ -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', () => {
Expand Down
4 changes: 2 additions & 2 deletions lib/core-client/src/preview/StoryRenderer.tsx
View file
Expand Up @@ -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) {
Expand Down
22 changes: 11 additions & 11 deletions lib/core-client/src/preview/normalizeStory.test.ts
View file
Expand Up @@ -36,7 +36,7 @@ describe('normalizeStory', () => {
"args": Object {},
"decorators": Array [],
"loaders": Array [],
"setup": undefined,
"play": undefined,
},
"storyFn": [Function],
}
Expand Down Expand Up @@ -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);
});
});

Expand All @@ -133,7 +133,7 @@ describe('normalizeStory', () => {
"args": Object {},
"decorators": Array [],
"loaders": Array [],
"setup": undefined,
"play": undefined,
},
"storyFn": "global-render",
}
Expand Down Expand Up @@ -168,7 +168,7 @@ describe('normalizeStory', () => {
"loaders": Array [
[Function],
],
"setup": undefined,
"play": undefined,
"storyParam": "val",
},
"storyFn": "global-render",
Expand Down Expand Up @@ -196,7 +196,7 @@ describe('normalizeStory', () => {
"args": Object {},
"decorators": Array [],
"loaders": Array [],
"setup": undefined,
"play": undefined,
},
"storyFn": "global-render",
}
Expand Down
4 changes: 2 additions & 2 deletions lib/core-client/src/preview/normalizeStory.ts
View file
Expand Up @@ -69,7 +69,7 @@ export const normalizeV3 = (key: string, storyExport: any, meta: any, globalRend

const {
render,
setup,
play,
parameters: storyParams,
decorators = [],
loaders = [],
Expand All @@ -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 {
Expand Down

0 comments on commit 0b81fe1

Please sign in to comment.