From e33d2c3244b530fc059171ebb752d782f7cdf7d9 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Sat, 8 Oct 2022 15:15:43 +0200 Subject: [PATCH 1/6] improve names used in step function --- .../interactions/template/stories/basics.stories.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/code/addons/interactions/template/stories/basics.stories.ts b/code/addons/interactions/template/stories/basics.stories.ts index 8633beb95512..57af27cc34fa 100644 --- a/code/addons/interactions/template/stories/basics.stories.ts +++ b/code/addons/interactions/template/stories/basics.stories.ts @@ -47,7 +47,7 @@ export const Callback = { export const SyncWaitFor = { play: async ({ canvasElement, step }) => { const canvas = within(canvasElement); - await step('Setup', Callback.play); + await step('Submit form', Callback.play); await waitFor(() => canvas.getByText('Completed!!')); }, }; @@ -55,7 +55,7 @@ export const SyncWaitFor = { export const AsyncWaitFor = { play: async ({ canvasElement, step }) => { const canvas = within(canvasElement); - await step('Setup', Callback.play); + await step('Submit form', Callback.play); await waitFor(async () => canvas.getByText('Completed!!')); }, }; @@ -63,7 +63,7 @@ export const AsyncWaitFor = { export const WaitForElementToBeRemoved = { play: async ({ canvasElement, step }) => { const canvas = within(canvasElement); - await step('Setup', SyncWaitFor.play); + await step('SyncWaitFor play fn', SyncWaitFor.play); await waitForElementToBeRemoved(() => canvas.queryByText('Completed!!'), { timeout: 2000, }); @@ -73,7 +73,7 @@ export const WaitForElementToBeRemoved = { export const WithLoaders = { loaders: [async () => new Promise((resolve) => setTimeout(resolve, 2000))], play: async ({ step }) => { - await step('Setup', Callback.play); + await step('Submit form', Callback.play); }, }; From 74b1afe801ff27ae4b302de5da7491b733e13d68 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Sat, 8 Oct 2022 15:16:13 +0200 Subject: [PATCH 2/6] improve addon-links template stories --- code/addons/links/template/stories/decorator.stories.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/code/addons/links/template/stories/decorator.stories.ts b/code/addons/links/template/stories/decorator.stories.ts index 0feaa2d29276..562633320441 100644 --- a/code/addons/links/template/stories/decorator.stories.ts +++ b/code/addons/links/template/stories/decorator.stories.ts @@ -13,7 +13,7 @@ export const Basic = { args: { content: `
- go to basic + go to other
`, }, @@ -22,7 +22,7 @@ export const Other = { args: { content: `
- to to basic + go to third
`, }, @@ -31,7 +31,7 @@ export const Third = { args: { content: `
- go to other + go to basic
`, }, From d11de13915f55bb60439a3328af2b027a748b89b Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Sat, 8 Oct 2022 15:16:42 +0200 Subject: [PATCH 3/6] set default viewport in addon-viewport template story --- code/addons/viewport/template/stories/parameters.stories.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/code/addons/viewport/template/stories/parameters.stories.ts b/code/addons/viewport/template/stories/parameters.stories.ts index 218395d09ff0..9eb982f1ef74 100644 --- a/code/addons/viewport/template/stories/parameters.stories.ts +++ b/code/addons/viewport/template/stories/parameters.stories.ts @@ -29,6 +29,7 @@ export const Selected = { export const Custom = { parameters: { viewport: { + defaultViewport: 'phone', viewports: { phone: { name: 'Phone Width', From 609f3aba70ef5e03e292341929172588681f5018 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Sat, 8 Oct 2022 15:17:11 +0200 Subject: [PATCH 4/6] upgrade eslint-plugin-storybook --- code/package.json | 2 +- code/yarn.lock | 11 ++++++----- scripts/package.json | 2 +- scripts/yarn.lock | 11 ++++++----- 4 files changed, 14 insertions(+), 12 deletions(-) diff --git a/code/package.json b/code/package.json index 44132e2fa42d..b1fcb3f8563f 100644 --- a/code/package.json +++ b/code/package.json @@ -284,7 +284,7 @@ "eslint": "^7.17.0", "eslint-plugin-import": "^2.22.1", "eslint-plugin-react": "^7.22.0", - "eslint-plugin-storybook": "^0.3.5", + "eslint-plugin-storybook": "^0.6.4", "esm": "^3.2.25", "execa": "^5.0.0", "express": "^4.17.1", diff --git a/code/yarn.lock b/code/yarn.lock index f61abd4ba410..d012f81447eb 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -8660,7 +8660,7 @@ __metadata: eslint: ^7.17.0 eslint-plugin-import: ^2.22.1 eslint-plugin-react: ^7.22.0 - eslint-plugin-storybook: ^0.3.5 + eslint-plugin-storybook: ^0.6.4 esm: ^3.2.25 execa: ^5.0.0 express: ^4.17.1 @@ -20065,16 +20065,17 @@ __metadata: languageName: node linkType: hard -"eslint-plugin-storybook@npm:^0.3.5": - version: 0.3.5 - resolution: "eslint-plugin-storybook@npm:0.3.5" +"eslint-plugin-storybook@npm:^0.6.4": + version: 0.6.4 + resolution: "eslint-plugin-storybook@npm:0.6.4" dependencies: "@storybook/csf": ^0.0.1 "@typescript-eslint/experimental-utils": ^5.3.0 requireindex: ^1.1.0 + ts-dedent: ^2.2.0 peerDependencies: eslint: ">=6" - checksum: 2fef77dc26aa395cf304c53cacd35bae7f677192eb1f681439c2a0154e57b99d376948e0918e4bb7b3c8ca01358aedbbf7bb5bc3b428b37141599abbdd763580 + checksum: c7fcdb663ae3e064b78d743b880545a7dc44d36368e72b1535706401cba65430cd41b5b7d4aa089bb6aab10357a9dcb894d4469fd1b546a043b9078587270f85 languageName: node linkType: hard diff --git a/scripts/package.json b/scripts/package.json index a5f26c4e4439..1ee776cdc8be 100644 --- a/scripts/package.json +++ b/scripts/package.json @@ -112,7 +112,7 @@ "eslint": "^7.17.0", "eslint-plugin-import": "^2.22.1", "eslint-plugin-react": "^7.22.0", - "eslint-plugin-storybook": "^0.3.5", + "eslint-plugin-storybook": "^0.6.4", "execa": "^5.0.0", "express": "^4.17.1", "find-up": "^5.0.0", diff --git a/scripts/yarn.lock b/scripts/yarn.lock index 2c6c89a14b63..b652b44cd6af 100644 --- a/scripts/yarn.lock +++ b/scripts/yarn.lock @@ -3401,7 +3401,7 @@ __metadata: eslint: ^7.17.0 eslint-plugin-import: ^2.22.1 eslint-plugin-react: ^7.22.0 - eslint-plugin-storybook: ^0.3.5 + eslint-plugin-storybook: ^0.6.4 execa: ^5.0.0 express: ^4.17.1 find-up: ^5.0.0 @@ -8495,16 +8495,17 @@ __metadata: languageName: node linkType: hard -"eslint-plugin-storybook@npm:^0.3.5": - version: 0.3.5 - resolution: "eslint-plugin-storybook@npm:0.3.5" +"eslint-plugin-storybook@npm:^0.6.4": + version: 0.6.4 + resolution: "eslint-plugin-storybook@npm:0.6.4" dependencies: "@storybook/csf": ^0.0.1 "@typescript-eslint/experimental-utils": ^5.3.0 requireindex: ^1.1.0 + ts-dedent: ^2.2.0 peerDependencies: eslint: ">=6" - checksum: 2fef77dc26aa395cf304c53cacd35bae7f677192eb1f681439c2a0154e57b99d376948e0918e4bb7b3c8ca01358aedbbf7bb5bc3b428b37141599abbdd763580 + checksum: c7fcdb663ae3e064b78d743b880545a7dc44d36368e72b1535706401cba65430cd41b5b7d4aa089bb6aab10357a9dcb894d4469fd1b546a043b9078587270f85 languageName: node linkType: hard From 90ef1e13781d2e256c488720ba6e1ec00c4321f3 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 10 Oct 2022 10:19:00 +0200 Subject: [PATCH 5/6] fix eslint issues --- .../required_with_context/Async.stories.js | 2 +- .../components/AccountForm.stories.tsx | 42 +++++++++---------- 2 files changed, 20 insertions(+), 24 deletions(-) diff --git a/code/addons/storyshots/storyshots-core/stories/required_with_context/Async.stories.js b/code/addons/storyshots/storyshots-core/stories/required_with_context/Async.stories.js index 9fba2aba3688..f469d8b2a638 100644 --- a/code/addons/storyshots/storyshots-core/stories/required_with_context/Async.stories.js +++ b/code/addons/storyshots/storyshots-core/stories/required_with_context/Async.stories.js @@ -27,7 +27,7 @@ class AsyncTestComponent extends React.Component { export default { title: 'Async', - includeStories: ['withTimeout'], + includeStories: ['WithTimeout'], }; export const WithTimeout = () => ; diff --git a/code/examples/external-docs/components/AccountForm.stories.tsx b/code/examples/external-docs/components/AccountForm.stories.tsx index 46fe06ff649c..ea8e89c33e0e 100644 --- a/code/examples/external-docs/components/AccountForm.stories.tsx +++ b/code/examples/external-docs/components/AccountForm.stories.tsx @@ -1,4 +1,3 @@ -/* eslint-disable storybook/await-interactions */ /* eslint-disable storybook/use-storybook-testing-library */ // @TODO: use addon-interactions and remove the rule disable above import { ComponentStoryObj, ComponentMeta } from '@storybook/react'; @@ -15,21 +14,18 @@ export default { }, } as ComponentMeta; -// export const Standard = (args: any) => ; -// Standard.args = { passwordVerification: false }; -// Standard.play = () => userEvent.type(screen.getByTestId('email'), 'michael@chromatic.com'); +type Story = ComponentStoryObj; -export const Standard: ComponentStoryObj = { - // render: (args: AccountFormProps) => , +export const Standard: Story = { args: { passwordVerification: false }, }; -export const StandardEmailFilled = { +export const StandardEmailFilled: Story = { ...Standard, play: () => userEvent.type(screen.getByTestId('email'), 'michael@chromatic.com'), }; -export const StandardEmailFailed = { +export const StandardEmailFailed: Story = { ...Standard, play: async () => { await userEvent.type(screen.getByTestId('email'), 'michael@chromatic.com.com@com'); @@ -38,10 +34,10 @@ export const StandardEmailFailed = { }, }; -export const StandardPasswordFailed = { +export const StandardPasswordFailed: Story = { ...Standard, - play: async () => { - await StandardEmailFilled.play(); + play: async (context) => { + await StandardEmailFilled.play(context); await userEvent.type(screen.getByTestId('password1'), 'asdf'); await userEvent.click(screen.getByTestId('submit')); }, @@ -49,10 +45,10 @@ export const StandardPasswordFailed = { const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms)); -export const StandardFailHover = { +export const StandardFailHover: Story = { ...StandardPasswordFailed, - play: async () => { - await StandardPasswordFailed.play(); + play: async (context) => { + await StandardPasswordFailed.play(context); await sleep(100); await userEvent.hover(screen.getByTestId('password-error-info')); }, @@ -62,29 +58,29 @@ export const Verification: ComponentStoryObj = { args: { passwordVerification: true }, }; -export const VerificationPasssword1 = { +export const VerificationPasssword1: Story = { ...Verification, - play: async () => { - await StandardEmailFilled.play(); + play: async (context) => { + await StandardEmailFilled.play(context); await userEvent.type(screen.getByTestId('password1'), 'asdfasdf'); await userEvent.click(screen.getByTestId('submit')); }, }; -export const VerificationPasswordMismatch = { +export const VerificationPasswordMismatch: Story = { ...Verification, - play: async () => { - await StandardEmailFilled.play(); + play: async (context) => { + await StandardEmailFilled.play(context); await userEvent.type(screen.getByTestId('password1'), 'asdfasdf'); await userEvent.type(screen.getByTestId('password2'), 'asdf1234'); await userEvent.click(screen.getByTestId('submit')); }, }; -export const VerificationSuccess = { +export const VerificationSuccess: Story = { ...Verification, - play: async () => { - await StandardEmailFilled.play(); + play: async (context) => { + await StandardEmailFilled.play(context); await sleep(1000); await userEvent.type(screen.getByTestId('password1'), 'asdfasdf', { delay: 50 }); await sleep(1000); From bfbd1b7eea6a873b36d3f7ff2e062ea4c7db96cc Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 10 Oct 2022 10:49:05 +0200 Subject: [PATCH 6/6] update snapshots --- .../stories/__snapshots__/storyshot.enzyme.test.js.snap | 6 ++++++ .../stories/__snapshots__/storyshot.shallow.test.js.snap | 6 ++++++ .../__snapshots__/storyshot.shallowWithOptions.test.js.snap | 6 ++++++ .../storyshot.snapshotWithOptionsFunction.test.js.snap | 6 ++++++ 4 files changed, 24 insertions(+) diff --git a/code/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.enzyme.test.js.snap b/code/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.enzyme.test.js.snap index b70c5d9a73f2..555b7d99affa 100644 --- a/code/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.enzyme.test.js.snap +++ b/code/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.enzyme.test.js.snap @@ -53,6 +53,12 @@ exports[`Storyshots Another Button with text 1`] = ` `; +exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = ` + +

+ +`; + exports[`Storyshots Button With Text 1`] = `