From 11d1e031e5b824e54b30c553593dbb2865b8b455 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Thu, 5 Oct 2023 17:16:31 +0200 Subject: [PATCH 1/8] use @storybook/test in CLI templates --- code/frameworks/angular/template/cli/Page.stories.ts | 9 ++++++++- code/frameworks/nextjs/template/cli/js/Page.stories.js | 9 ++++++++- .../nextjs/template/cli/ts-3-8/Page.stories.ts | 9 ++++++++- .../nextjs/template/cli/ts-4-9/Page.stories.ts | 9 ++++++++- code/lib/cli/src/generators/baseGenerator.ts | 9 ++++++++- code/renderers/html/template/cli/js/Page.stories.js | 9 ++++++++- code/renderers/html/template/cli/ts-3-8/Page.stories.ts | 9 ++++++++- code/renderers/html/template/cli/ts-4-9/Page.stories.ts | 9 ++++++++- code/renderers/preact/template/cli/Page.stories.jsx | 9 ++++++++- code/renderers/react/template/cli/js/Page.stories.js | 9 ++++++++- code/renderers/react/template/cli/ts-3-8/Page.stories.ts | 9 ++++++++- code/renderers/react/template/cli/ts-4-9/Page.stories.ts | 9 ++++++++- code/renderers/svelte/template/cli/js/Page.stories.js | 9 ++++++++- .../renderers/svelte/template/cli/ts-3-8/Page.stories.ts | 9 ++++++++- .../renderers/svelte/template/cli/ts-4-9/Page.stories.ts | 9 ++++++++- code/renderers/vue/template/cli/Page.stories.js | 9 ++++++++- code/renderers/vue3/template/cli/js/Page.stories.js | 9 ++++++++- code/renderers/vue3/template/cli/ts-3-8/Page.stories.ts | 9 ++++++++- code/renderers/vue3/template/cli/ts-4-9/Page.stories.ts | 9 ++++++++- 19 files changed, 152 insertions(+), 19 deletions(-) diff --git a/code/frameworks/angular/template/cli/Page.stories.ts b/code/frameworks/angular/template/cli/Page.stories.ts index e7f3c0e9a3b6..9d751ca18cb7 100644 --- a/code/frameworks/angular/template/cli/Page.stories.ts +++ b/code/frameworks/angular/template/cli/Page.stories.ts @@ -1,7 +1,7 @@ import type { Meta, StoryObj } from '@storybook/angular'; import { moduleMetadata } from '@storybook/angular'; -import { within, userEvent } from '@storybook/testing-library'; import { CommonModule } from '@angular/common'; +import { within, userEvent, expect } from '@storybook/test'; import Button from './button.component'; import Header from './header.component'; @@ -41,6 +41,13 @@ export const LoggedIn: Story = { const loginButton = await canvas.getByRole('button', { name: /Log in/i, }); + await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); + await expect(loginButton).not.toBeInTheDocument(); + + const logoutButton = await canvas.getByRole('button', { + name: /Log out/i, + }); + await expect(logoutButton).toBeInTheDocument(); }, }; diff --git a/code/frameworks/nextjs/template/cli/js/Page.stories.js b/code/frameworks/nextjs/template/cli/js/Page.stories.js index 5bd1d6eba765..84ab959afa1d 100644 --- a/code/frameworks/nextjs/template/cli/js/Page.stories.js +++ b/code/frameworks/nextjs/template/cli/js/Page.stories.js @@ -1,4 +1,4 @@ -import { within, userEvent } from '@storybook/testing-library'; +import { within, userEvent, expect } from '@storybook/test'; import { Page } from './Page'; export default { @@ -19,6 +19,13 @@ export const LoggedIn = { const loginButton = await canvas.getByRole('button', { name: /Log in/i, }); + await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); + await expect(loginButton).not.toBeInTheDocument(); + + const logoutButton = await canvas.getByRole('button', { + name: /Log out/i, + }); + await expect(logoutButton).toBeInTheDocument(); }, }; diff --git a/code/frameworks/nextjs/template/cli/ts-3-8/Page.stories.ts b/code/frameworks/nextjs/template/cli/ts-3-8/Page.stories.ts index 0e48941ab149..3f319abbf9b9 100644 --- a/code/frameworks/nextjs/template/cli/ts-3-8/Page.stories.ts +++ b/code/frameworks/nextjs/template/cli/ts-3-8/Page.stories.ts @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { within, userEvent } from '@storybook/testing-library'; +import { within, userEvent, expect } from '@storybook/test'; import { Page } from './Page'; @@ -24,6 +24,13 @@ export const LoggedIn: Story = { const loginButton = await canvas.getByRole('button', { name: /Log in/i, }); + await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); + await expect(loginButton).not.toBeInTheDocument(); + + const logoutButton = await canvas.getByRole('button', { + name: /Log out/i, + }); + await expect(logoutButton).toBeInTheDocument(); }, }; diff --git a/code/frameworks/nextjs/template/cli/ts-4-9/Page.stories.ts b/code/frameworks/nextjs/template/cli/ts-4-9/Page.stories.ts index 69852a2bdc00..307fc90db7c3 100644 --- a/code/frameworks/nextjs/template/cli/ts-4-9/Page.stories.ts +++ b/code/frameworks/nextjs/template/cli/ts-4-9/Page.stories.ts @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { within, userEvent } from '@storybook/testing-library'; +import { within, userEvent, expect } from '@storybook/test'; import { Page } from './Page'; @@ -24,6 +24,13 @@ export const LoggedIn: Story = { const loginButton = await canvas.getByRole('button', { name: /Log in/i, }); + await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); + await expect(loginButton).not.toBeInTheDocument(); + + const logoutButton = await canvas.getByRole('button', { + name: /Log out/i, + }); + await expect(logoutButton).toBeInTheDocument(); }, }; diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/cli/src/generators/baseGenerator.ts index 48b2f8affd5b..a7bdb1764668 100644 --- a/code/lib/cli/src/generators/baseGenerator.ts +++ b/code/lib/cli/src/generators/baseGenerator.ts @@ -251,7 +251,14 @@ export async function baseGenerator( if (hasInteractiveStories(rendererId)) { addons.push('@storybook/addon-interactions'); - addonPackages.push('@storybook/addon-interactions', '@storybook/testing-library@^0.2.0-next.0'); + addonPackages.push('@storybook/addon-interactions'); + + // TODO: migrate template stories in solid and qwik to use @storybook/test + if (['solid', 'qwik'].includes(rendererId)) { + addonPackages.push('@storybook/testing-library'); + } else { + addonPackages.push('@storybook/test'); + } } const files = await fse.readdir(process.cwd()); diff --git a/code/renderers/html/template/cli/js/Page.stories.js b/code/renderers/html/template/cli/js/Page.stories.js index a80a4c4a9d24..120f07681696 100644 --- a/code/renderers/html/template/cli/js/Page.stories.js +++ b/code/renderers/html/template/cli/js/Page.stories.js @@ -1,4 +1,4 @@ -import { within, userEvent } from '@storybook/testing-library'; +import { within, userEvent, expect } from '@storybook/test'; import { createPage } from './Page'; export default { @@ -19,6 +19,13 @@ export const LoggedIn = { const loginButton = await canvas.getByRole('button', { name: /Log in/i, }); + await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); + await expect(loginButton).not.toBeInTheDocument(); + + const logoutButton = await canvas.getByRole('button', { + name: /Log out/i, + }); + await expect(logoutButton).toBeInTheDocument(); }, }; diff --git a/code/renderers/html/template/cli/ts-3-8/Page.stories.ts b/code/renderers/html/template/cli/ts-3-8/Page.stories.ts index 04b893f795fc..ceacaf6c12c9 100644 --- a/code/renderers/html/template/cli/ts-3-8/Page.stories.ts +++ b/code/renderers/html/template/cli/ts-3-8/Page.stories.ts @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from '@storybook/html'; -import { within, userEvent } from '@storybook/testing-library'; +import { within, userEvent, expect } from '@storybook/test'; import { createPage } from './Page'; const meta: Meta = { @@ -22,6 +22,13 @@ export const LoggedIn: StoryObj = { const loginButton = await canvas.getByRole('button', { name: /Log in/i, }); + await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); + await expect(loginButton).not.toBeInTheDocument(); + + const logoutButton = await canvas.getByRole('button', { + name: /Log out/i, + }); + await expect(logoutButton).toBeInTheDocument(); }, }; diff --git a/code/renderers/html/template/cli/ts-4-9/Page.stories.ts b/code/renderers/html/template/cli/ts-4-9/Page.stories.ts index 6de6300e49a0..436435bb69fe 100644 --- a/code/renderers/html/template/cli/ts-4-9/Page.stories.ts +++ b/code/renderers/html/template/cli/ts-4-9/Page.stories.ts @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from '@storybook/html'; -import { within, userEvent } from '@storybook/testing-library'; +import { within, userEvent, expect } from '@storybook/test'; import { createPage } from './Page'; const meta = { @@ -22,6 +22,13 @@ export const LoggedIn: StoryObj = { const loginButton = await canvas.getByRole('button', { name: /Log in/i, }); + await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); + await expect(loginButton).not.toBeInTheDocument(); + + const logoutButton = await canvas.getByRole('button', { + name: /Log out/i, + }); + await expect(logoutButton).toBeInTheDocument(); }, }; diff --git a/code/renderers/preact/template/cli/Page.stories.jsx b/code/renderers/preact/template/cli/Page.stories.jsx index d49ca397aaee..f5a5dd3c333f 100644 --- a/code/renderers/preact/template/cli/Page.stories.jsx +++ b/code/renderers/preact/template/cli/Page.stories.jsx @@ -1,4 +1,4 @@ -import { within, userEvent } from '@storybook/testing-library'; +import { within, userEvent, expect } from '@storybook/test'; import { Page } from './Page'; @@ -20,6 +20,13 @@ export const LoggedIn = { const loginButton = await canvas.getByRole('button', { name: /Log in/i, }); + await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); + await expect(loginButton).not.toBeInTheDocument(); + + const logoutButton = await canvas.getByRole('button', { + name: /Log out/i, + }); + await expect(logoutButton).toBeInTheDocument(); }, }; diff --git a/code/renderers/react/template/cli/js/Page.stories.js b/code/renderers/react/template/cli/js/Page.stories.js index 7467c98cf48a..f839ec1ada96 100644 --- a/code/renderers/react/template/cli/js/Page.stories.js +++ b/code/renderers/react/template/cli/js/Page.stories.js @@ -1,4 +1,4 @@ -import { within, userEvent } from '@storybook/testing-library'; +import { within, userEvent, expect } from '@storybook/test'; import { Page } from './Page'; @@ -20,6 +20,13 @@ export const LoggedIn = { const loginButton = await canvas.getByRole('button', { name: /Log in/i, }); + await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); + await expect(loginButton).not.toBeInTheDocument(); + + const logoutButton = await canvas.getByRole('button', { + name: /Log out/i, + }); + await expect(logoutButton).toBeInTheDocument(); }, }; diff --git a/code/renderers/react/template/cli/ts-3-8/Page.stories.ts b/code/renderers/react/template/cli/ts-3-8/Page.stories.ts index 52c4cb406233..7bf85faefe95 100644 --- a/code/renderers/react/template/cli/ts-3-8/Page.stories.ts +++ b/code/renderers/react/template/cli/ts-3-8/Page.stories.ts @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { within, userEvent } from '@storybook/testing-library'; +import { within, userEvent, expect } from '@storybook/test'; import { Page } from './Page'; @@ -24,6 +24,13 @@ export const LoggedIn: Story = { const loginButton = await canvas.getByRole('button', { name: /Log in/i, }); + await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); + await expect(loginButton).not.toBeInTheDocument(); + + const logoutButton = await canvas.getByRole('button', { + name: /Log out/i, + }); + await expect(logoutButton).toBeInTheDocument(); }, }; diff --git a/code/renderers/react/template/cli/ts-4-9/Page.stories.ts b/code/renderers/react/template/cli/ts-4-9/Page.stories.ts index 69852a2bdc00..307fc90db7c3 100644 --- a/code/renderers/react/template/cli/ts-4-9/Page.stories.ts +++ b/code/renderers/react/template/cli/ts-4-9/Page.stories.ts @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { within, userEvent } from '@storybook/testing-library'; +import { within, userEvent, expect } from '@storybook/test'; import { Page } from './Page'; @@ -24,6 +24,13 @@ export const LoggedIn: Story = { const loginButton = await canvas.getByRole('button', { name: /Log in/i, }); + await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); + await expect(loginButton).not.toBeInTheDocument(); + + const logoutButton = await canvas.getByRole('button', { + name: /Log out/i, + }); + await expect(logoutButton).toBeInTheDocument(); }, }; diff --git a/code/renderers/svelte/template/cli/js/Page.stories.js b/code/renderers/svelte/template/cli/js/Page.stories.js index 9c6008b4c705..d72b78c5ce9e 100644 --- a/code/renderers/svelte/template/cli/js/Page.stories.js +++ b/code/renderers/svelte/template/cli/js/Page.stories.js @@ -1,4 +1,4 @@ -import { within, userEvent } from '@storybook/testing-library'; +import { within, userEvent, expect } from '@storybook/test'; import Page from './Page.svelte'; @@ -20,6 +20,13 @@ export const LoggedIn = { const loginButton = await canvas.getByRole('button', { name: /Log in/i, }); + await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); + await expect(loginButton).not.toBeInTheDocument(); + + const logoutButton = await canvas.getByRole('button', { + name: /Log out/i, + }); + await expect(logoutButton).toBeInTheDocument(); }, }; diff --git a/code/renderers/svelte/template/cli/ts-3-8/Page.stories.ts b/code/renderers/svelte/template/cli/ts-3-8/Page.stories.ts index 3aba1302bf24..6596fe91c6e7 100644 --- a/code/renderers/svelte/template/cli/ts-3-8/Page.stories.ts +++ b/code/renderers/svelte/template/cli/ts-3-8/Page.stories.ts @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from '@storybook/svelte'; -import { within, userEvent } from '@storybook/testing-library'; +import { within, userEvent, expect } from '@storybook/test'; import Page from './Page.svelte'; @@ -24,6 +24,13 @@ export const LoggedIn: Story = { const loginButton = await canvas.getByRole('button', { name: /Log in/i, }); + await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); + await expect(loginButton).not.toBeInTheDocument(); + + const logoutButton = await canvas.getByRole('button', { + name: /Log out/i, + }); + await expect(logoutButton).toBeInTheDocument(); }, }; diff --git a/code/renderers/svelte/template/cli/ts-4-9/Page.stories.ts b/code/renderers/svelte/template/cli/ts-4-9/Page.stories.ts index 78665a28bfae..434e0f19865a 100644 --- a/code/renderers/svelte/template/cli/ts-4-9/Page.stories.ts +++ b/code/renderers/svelte/template/cli/ts-4-9/Page.stories.ts @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from '@storybook/svelte'; -import { within, userEvent } from '@storybook/testing-library'; +import { within, userEvent, expect } from '@storybook/test'; import Page from './Page.svelte'; @@ -24,6 +24,13 @@ export const LoggedIn: Story = { const loginButton = await canvas.getByRole('button', { name: /Log in/i, }); + await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); + await expect(loginButton).not.toBeInTheDocument(); + + const logoutButton = await canvas.getByRole('button', { + name: /Log out/i, + }); + await expect(logoutButton).toBeInTheDocument(); }, }; diff --git a/code/renderers/vue/template/cli/Page.stories.js b/code/renderers/vue/template/cli/Page.stories.js index 8bd022352948..9dbb953e19ee 100644 --- a/code/renderers/vue/template/cli/Page.stories.js +++ b/code/renderers/vue/template/cli/Page.stories.js @@ -1,4 +1,4 @@ -import { within, userEvent } from '@storybook/testing-library'; +import { within, userEvent, expect } from '@storybook/test'; import MyPage from './Page.vue'; export default { @@ -22,6 +22,13 @@ export const LoggedIn = { const loginButton = await canvas.getByRole('button', { name: /Log in/i, }); + await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); + await expect(loginButton).not.toBeInTheDocument(); + + const logoutButton = await canvas.getByRole('button', { + name: /Log out/i, + }); + await expect(logoutButton).toBeInTheDocument(); }, }; diff --git a/code/renderers/vue3/template/cli/js/Page.stories.js b/code/renderers/vue3/template/cli/js/Page.stories.js index f11ff44e5bdf..bb8d599f5ab8 100644 --- a/code/renderers/vue3/template/cli/js/Page.stories.js +++ b/code/renderers/vue3/template/cli/js/Page.stories.js @@ -1,4 +1,4 @@ -import { within, userEvent } from '@storybook/testing-library'; +import { within, userEvent, expect } from '@storybook/test'; import MyPage from './Page.vue'; export default { @@ -25,6 +25,13 @@ export const LoggedIn = { const loginButton = await canvas.getByRole('button', { name: /Log in/i, }); + await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); + await expect(loginButton).not.toBeInTheDocument(); + + const logoutButton = await canvas.getByRole('button', { + name: /Log out/i, + }); + await expect(logoutButton).toBeInTheDocument(); }, }; diff --git a/code/renderers/vue3/template/cli/ts-3-8/Page.stories.ts b/code/renderers/vue3/template/cli/ts-3-8/Page.stories.ts index 1ac73cf4433d..6302490699ae 100644 --- a/code/renderers/vue3/template/cli/ts-3-8/Page.stories.ts +++ b/code/renderers/vue3/template/cli/ts-3-8/Page.stories.ts @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from '@storybook/vue3'; -import { within, userEvent } from '@storybook/testing-library'; +import { within, userEvent, expect } from '@storybook/test'; import MyPage from './Page.vue'; const meta: Meta = { @@ -27,7 +27,14 @@ export const LoggedIn: Story = { const loginButton = await canvas.getByRole('button', { name: /Log in/i, }); + await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); + await expect(loginButton).not.toBeInTheDocument(); + + const logoutButton = await canvas.getByRole('button', { + name: /Log out/i, + }); + await expect(logoutButton).toBeInTheDocument(); }, }; diff --git a/code/renderers/vue3/template/cli/ts-4-9/Page.stories.ts b/code/renderers/vue3/template/cli/ts-4-9/Page.stories.ts index e9988015819d..e72ad9467508 100644 --- a/code/renderers/vue3/template/cli/ts-4-9/Page.stories.ts +++ b/code/renderers/vue3/template/cli/ts-4-9/Page.stories.ts @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from '@storybook/vue3'; -import { within, userEvent } from '@storybook/testing-library'; +import { within, userEvent, expect } from '@storybook/test'; import MyPage from './Page.vue'; const meta = { @@ -27,7 +27,14 @@ export const LoggedIn: Story = { const loginButton = await canvas.getByRole('button', { name: /Log in/i, }); + await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); + await expect(loginButton).not.toBeInTheDocument(); + + const logoutButton = await canvas.getByRole('button', { + name: /Log out/i, + }); + await expect(logoutButton).toBeInTheDocument(); }, }; From 76c3821987ecdf77b02271af92cece4b3c706f5c Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 31 Oct 2023 08:58:58 +0100 Subject: [PATCH 2/8] Remove await from getByX --- code/frameworks/angular/template/cli/Page.stories.ts | 4 ++-- code/frameworks/nextjs/template/cli/js/Page.stories.js | 4 ++-- code/frameworks/nextjs/template/cli/ts-3-8/Page.stories.ts | 4 ++-- code/frameworks/nextjs/template/cli/ts-4-9/Page.stories.ts | 4 ++-- code/renderers/html/template/cli/js/Page.stories.js | 4 ++-- code/renderers/html/template/cli/ts-3-8/Page.stories.ts | 4 ++-- code/renderers/html/template/cli/ts-4-9/Page.stories.ts | 4 ++-- code/renderers/preact/template/cli/Page.stories.jsx | 4 ++-- code/renderers/react/template/cli/js/Page.stories.js | 4 ++-- code/renderers/react/template/cli/ts-3-8/Page.stories.ts | 4 ++-- code/renderers/react/template/cli/ts-4-9/Page.stories.ts | 4 ++-- code/renderers/svelte/template/cli/js/Page.stories.js | 4 ++-- code/renderers/svelte/template/cli/ts-3-8/Page.stories.ts | 4 ++-- code/renderers/svelte/template/cli/ts-4-9/Page.stories.ts | 4 ++-- code/renderers/vue/template/cli/Page.stories.js | 4 ++-- code/renderers/vue3/template/cli/js/Page.stories.js | 4 ++-- code/renderers/vue3/template/cli/ts-3-8/Page.stories.ts | 4 ++-- code/renderers/vue3/template/cli/ts-4-9/Page.stories.ts | 4 ++-- 18 files changed, 36 insertions(+), 36 deletions(-) diff --git a/code/frameworks/angular/template/cli/Page.stories.ts b/code/frameworks/angular/template/cli/Page.stories.ts index 9d751ca18cb7..497bd8052f84 100644 --- a/code/frameworks/angular/template/cli/Page.stories.ts +++ b/code/frameworks/angular/template/cli/Page.stories.ts @@ -38,14 +38,14 @@ export const LoggedIn: Story = { }), play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const loginButton = await canvas.getByRole('button', { + const loginButton = canvas.getByRole('button', { name: /Log in/i, }); await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); await expect(loginButton).not.toBeInTheDocument(); - const logoutButton = await canvas.getByRole('button', { + const logoutButton = canvas.getByRole('button', { name: /Log out/i, }); await expect(logoutButton).toBeInTheDocument(); diff --git a/code/frameworks/nextjs/template/cli/js/Page.stories.js b/code/frameworks/nextjs/template/cli/js/Page.stories.js index 84ab959afa1d..0a7648b9cfff 100644 --- a/code/frameworks/nextjs/template/cli/js/Page.stories.js +++ b/code/frameworks/nextjs/template/cli/js/Page.stories.js @@ -16,14 +16,14 @@ export const LoggedOut = {}; export const LoggedIn = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const loginButton = await canvas.getByRole('button', { + const loginButton = canvas.getByRole('button', { name: /Log in/i, }); await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); await expect(loginButton).not.toBeInTheDocument(); - const logoutButton = await canvas.getByRole('button', { + const logoutButton = canvas.getByRole('button', { name: /Log out/i, }); await expect(logoutButton).toBeInTheDocument(); diff --git a/code/frameworks/nextjs/template/cli/ts-3-8/Page.stories.ts b/code/frameworks/nextjs/template/cli/ts-3-8/Page.stories.ts index 3f319abbf9b9..2b9a68ff66d6 100644 --- a/code/frameworks/nextjs/template/cli/ts-3-8/Page.stories.ts +++ b/code/frameworks/nextjs/template/cli/ts-3-8/Page.stories.ts @@ -21,14 +21,14 @@ export const LoggedOut: Story = {}; export const LoggedIn: Story = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const loginButton = await canvas.getByRole('button', { + const loginButton = canvas.getByRole('button', { name: /Log in/i, }); await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); await expect(loginButton).not.toBeInTheDocument(); - const logoutButton = await canvas.getByRole('button', { + const logoutButton = canvas.getByRole('button', { name: /Log out/i, }); await expect(logoutButton).toBeInTheDocument(); diff --git a/code/frameworks/nextjs/template/cli/ts-4-9/Page.stories.ts b/code/frameworks/nextjs/template/cli/ts-4-9/Page.stories.ts index 307fc90db7c3..fd8facd04fdc 100644 --- a/code/frameworks/nextjs/template/cli/ts-4-9/Page.stories.ts +++ b/code/frameworks/nextjs/template/cli/ts-4-9/Page.stories.ts @@ -21,14 +21,14 @@ export const LoggedOut: Story = {}; export const LoggedIn: Story = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const loginButton = await canvas.getByRole('button', { + const loginButton = canvas.getByRole('button', { name: /Log in/i, }); await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); await expect(loginButton).not.toBeInTheDocument(); - const logoutButton = await canvas.getByRole('button', { + const logoutButton = canvas.getByRole('button', { name: /Log out/i, }); await expect(logoutButton).toBeInTheDocument(); diff --git a/code/renderers/html/template/cli/js/Page.stories.js b/code/renderers/html/template/cli/js/Page.stories.js index 120f07681696..73a84bf127cc 100644 --- a/code/renderers/html/template/cli/js/Page.stories.js +++ b/code/renderers/html/template/cli/js/Page.stories.js @@ -16,14 +16,14 @@ export const LoggedOut = {}; export const LoggedIn = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const loginButton = await canvas.getByRole('button', { + const loginButton = canvas.getByRole('button', { name: /Log in/i, }); await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); await expect(loginButton).not.toBeInTheDocument(); - const logoutButton = await canvas.getByRole('button', { + const logoutButton = canvas.getByRole('button', { name: /Log out/i, }); await expect(logoutButton).toBeInTheDocument(); diff --git a/code/renderers/html/template/cli/ts-3-8/Page.stories.ts b/code/renderers/html/template/cli/ts-3-8/Page.stories.ts index ceacaf6c12c9..a33f0f42dd03 100644 --- a/code/renderers/html/template/cli/ts-3-8/Page.stories.ts +++ b/code/renderers/html/template/cli/ts-3-8/Page.stories.ts @@ -19,14 +19,14 @@ export const LoggedOut: StoryObj = {}; export const LoggedIn: StoryObj = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const loginButton = await canvas.getByRole('button', { + const loginButton = canvas.getByRole('button', { name: /Log in/i, }); await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); await expect(loginButton).not.toBeInTheDocument(); - const logoutButton = await canvas.getByRole('button', { + const logoutButton = canvas.getByRole('button', { name: /Log out/i, }); await expect(logoutButton).toBeInTheDocument(); diff --git a/code/renderers/html/template/cli/ts-4-9/Page.stories.ts b/code/renderers/html/template/cli/ts-4-9/Page.stories.ts index 436435bb69fe..57ce12297cbc 100644 --- a/code/renderers/html/template/cli/ts-4-9/Page.stories.ts +++ b/code/renderers/html/template/cli/ts-4-9/Page.stories.ts @@ -19,14 +19,14 @@ export const LoggedOut: StoryObj = {}; export const LoggedIn: StoryObj = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const loginButton = await canvas.getByRole('button', { + const loginButton = canvas.getByRole('button', { name: /Log in/i, }); await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); await expect(loginButton).not.toBeInTheDocument(); - const logoutButton = await canvas.getByRole('button', { + const logoutButton = canvas.getByRole('button', { name: /Log out/i, }); await expect(logoutButton).toBeInTheDocument(); diff --git a/code/renderers/preact/template/cli/Page.stories.jsx b/code/renderers/preact/template/cli/Page.stories.jsx index f5a5dd3c333f..6d9c52b0a6e1 100644 --- a/code/renderers/preact/template/cli/Page.stories.jsx +++ b/code/renderers/preact/template/cli/Page.stories.jsx @@ -17,14 +17,14 @@ export const LoggedOut = {}; export const LoggedIn = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const loginButton = await canvas.getByRole('button', { + const loginButton = canvas.getByRole('button', { name: /Log in/i, }); await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); await expect(loginButton).not.toBeInTheDocument(); - const logoutButton = await canvas.getByRole('button', { + const logoutButton = canvas.getByRole('button', { name: /Log out/i, }); await expect(logoutButton).toBeInTheDocument(); diff --git a/code/renderers/react/template/cli/js/Page.stories.js b/code/renderers/react/template/cli/js/Page.stories.js index f839ec1ada96..4bb0393feebe 100644 --- a/code/renderers/react/template/cli/js/Page.stories.js +++ b/code/renderers/react/template/cli/js/Page.stories.js @@ -17,14 +17,14 @@ export const LoggedOut = {}; export const LoggedIn = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const loginButton = await canvas.getByRole('button', { + const loginButton = canvas.getByRole('button', { name: /Log in/i, }); await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); await expect(loginButton).not.toBeInTheDocument(); - const logoutButton = await canvas.getByRole('button', { + const logoutButton = canvas.getByRole('button', { name: /Log out/i, }); await expect(logoutButton).toBeInTheDocument(); diff --git a/code/renderers/react/template/cli/ts-3-8/Page.stories.ts b/code/renderers/react/template/cli/ts-3-8/Page.stories.ts index 7bf85faefe95..ace70e3a8a60 100644 --- a/code/renderers/react/template/cli/ts-3-8/Page.stories.ts +++ b/code/renderers/react/template/cli/ts-3-8/Page.stories.ts @@ -21,14 +21,14 @@ export const LoggedOut: Story = {}; export const LoggedIn: Story = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const loginButton = await canvas.getByRole('button', { + const loginButton = canvas.getByRole('button', { name: /Log in/i, }); await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); await expect(loginButton).not.toBeInTheDocument(); - const logoutButton = await canvas.getByRole('button', { + const logoutButton = canvas.getByRole('button', { name: /Log out/i, }); await expect(logoutButton).toBeInTheDocument(); diff --git a/code/renderers/react/template/cli/ts-4-9/Page.stories.ts b/code/renderers/react/template/cli/ts-4-9/Page.stories.ts index 307fc90db7c3..fd8facd04fdc 100644 --- a/code/renderers/react/template/cli/ts-4-9/Page.stories.ts +++ b/code/renderers/react/template/cli/ts-4-9/Page.stories.ts @@ -21,14 +21,14 @@ export const LoggedOut: Story = {}; export const LoggedIn: Story = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const loginButton = await canvas.getByRole('button', { + const loginButton = canvas.getByRole('button', { name: /Log in/i, }); await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); await expect(loginButton).not.toBeInTheDocument(); - const logoutButton = await canvas.getByRole('button', { + const logoutButton = canvas.getByRole('button', { name: /Log out/i, }); await expect(logoutButton).toBeInTheDocument(); diff --git a/code/renderers/svelte/template/cli/js/Page.stories.js b/code/renderers/svelte/template/cli/js/Page.stories.js index d72b78c5ce9e..67b13d887ddb 100644 --- a/code/renderers/svelte/template/cli/js/Page.stories.js +++ b/code/renderers/svelte/template/cli/js/Page.stories.js @@ -17,14 +17,14 @@ export const LoggedOut = {}; export const LoggedIn = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const loginButton = await canvas.getByRole('button', { + const loginButton = canvas.getByRole('button', { name: /Log in/i, }); await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); await expect(loginButton).not.toBeInTheDocument(); - const logoutButton = await canvas.getByRole('button', { + const logoutButton = canvas.getByRole('button', { name: /Log out/i, }); await expect(logoutButton).toBeInTheDocument(); diff --git a/code/renderers/svelte/template/cli/ts-3-8/Page.stories.ts b/code/renderers/svelte/template/cli/ts-3-8/Page.stories.ts index 6596fe91c6e7..e8f70551c573 100644 --- a/code/renderers/svelte/template/cli/ts-3-8/Page.stories.ts +++ b/code/renderers/svelte/template/cli/ts-3-8/Page.stories.ts @@ -21,14 +21,14 @@ export const LoggedOut: Story = {}; export const LoggedIn: Story = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const loginButton = await canvas.getByRole('button', { + const loginButton = canvas.getByRole('button', { name: /Log in/i, }); await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); await expect(loginButton).not.toBeInTheDocument(); - const logoutButton = await canvas.getByRole('button', { + const logoutButton = canvas.getByRole('button', { name: /Log out/i, }); await expect(logoutButton).toBeInTheDocument(); diff --git a/code/renderers/svelte/template/cli/ts-4-9/Page.stories.ts b/code/renderers/svelte/template/cli/ts-4-9/Page.stories.ts index 434e0f19865a..8d38e4dfc284 100644 --- a/code/renderers/svelte/template/cli/ts-4-9/Page.stories.ts +++ b/code/renderers/svelte/template/cli/ts-4-9/Page.stories.ts @@ -21,14 +21,14 @@ export const LoggedOut: Story = {}; export const LoggedIn: Story = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const loginButton = await canvas.getByRole('button', { + const loginButton = canvas.getByRole('button', { name: /Log in/i, }); await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); await expect(loginButton).not.toBeInTheDocument(); - const logoutButton = await canvas.getByRole('button', { + const logoutButton = canvas.getByRole('button', { name: /Log out/i, }); await expect(logoutButton).toBeInTheDocument(); diff --git a/code/renderers/vue/template/cli/Page.stories.js b/code/renderers/vue/template/cli/Page.stories.js index 9dbb953e19ee..656b562859de 100644 --- a/code/renderers/vue/template/cli/Page.stories.js +++ b/code/renderers/vue/template/cli/Page.stories.js @@ -19,14 +19,14 @@ export const LoggedOut = {}; export const LoggedIn = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const loginButton = await canvas.getByRole('button', { + const loginButton = canvas.getByRole('button', { name: /Log in/i, }); await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); await expect(loginButton).not.toBeInTheDocument(); - const logoutButton = await canvas.getByRole('button', { + const logoutButton = canvas.getByRole('button', { name: /Log out/i, }); await expect(logoutButton).toBeInTheDocument(); diff --git a/code/renderers/vue3/template/cli/js/Page.stories.js b/code/renderers/vue3/template/cli/js/Page.stories.js index bb8d599f5ab8..2a84357b2b0b 100644 --- a/code/renderers/vue3/template/cli/js/Page.stories.js +++ b/code/renderers/vue3/template/cli/js/Page.stories.js @@ -22,14 +22,14 @@ export const LoggedIn = { }), play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const loginButton = await canvas.getByRole('button', { + const loginButton = canvas.getByRole('button', { name: /Log in/i, }); await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); await expect(loginButton).not.toBeInTheDocument(); - const logoutButton = await canvas.getByRole('button', { + const logoutButton = canvas.getByRole('button', { name: /Log out/i, }); await expect(logoutButton).toBeInTheDocument(); diff --git a/code/renderers/vue3/template/cli/ts-3-8/Page.stories.ts b/code/renderers/vue3/template/cli/ts-3-8/Page.stories.ts index 6302490699ae..94c9dfa755a3 100644 --- a/code/renderers/vue3/template/cli/ts-3-8/Page.stories.ts +++ b/code/renderers/vue3/template/cli/ts-3-8/Page.stories.ts @@ -24,14 +24,14 @@ type Story = StoryObj; export const LoggedIn: Story = { play: async ({ canvasElement }: any) => { const canvas = within(canvasElement); - const loginButton = await canvas.getByRole('button', { + const loginButton = canvas.getByRole('button', { name: /Log in/i, }); await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); await expect(loginButton).not.toBeInTheDocument(); - const logoutButton = await canvas.getByRole('button', { + const logoutButton = canvas.getByRole('button', { name: /Log out/i, }); await expect(logoutButton).toBeInTheDocument(); diff --git a/code/renderers/vue3/template/cli/ts-4-9/Page.stories.ts b/code/renderers/vue3/template/cli/ts-4-9/Page.stories.ts index e72ad9467508..61685e156666 100644 --- a/code/renderers/vue3/template/cli/ts-4-9/Page.stories.ts +++ b/code/renderers/vue3/template/cli/ts-4-9/Page.stories.ts @@ -24,14 +24,14 @@ type Story = StoryObj; export const LoggedIn: Story = { play: async ({ canvasElement }: any) => { const canvas = within(canvasElement); - const loginButton = await canvas.getByRole('button', { + const loginButton = canvas.getByRole('button', { name: /Log in/i, }); await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); await expect(loginButton).not.toBeInTheDocument(); - const logoutButton = await canvas.getByRole('button', { + const logoutButton = canvas.getByRole('button', { name: /Log out/i, }); await expect(logoutButton).toBeInTheDocument(); From b4fb3b08b3d88561ab02e2bffb81ed798667a563 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 31 Oct 2023 10:12:30 +0100 Subject: [PATCH 3/8] Fix types --- code/lib/test/src/expect.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/code/lib/test/src/expect.ts b/code/lib/test/src/expect.ts index d277380a3596..5a3fb334afd4 100644 --- a/code/lib/test/src/expect.ts +++ b/code/lib/test/src/expect.ts @@ -15,13 +15,12 @@ import { setState, } from '@vitest/expect'; import * as matchers from '@testing-library/jest-dom/matchers'; -import type { TestingLibraryMatchers } from '@testing-library/jest-dom/types/matchers'; import type { PromisifyObject } from './utils'; // We only expose the jest compatible API for now export interface Assertion extends PromisifyObject>, - TestingLibraryMatchers, Promise> { + matchers.TestingLibraryMatchers, Promise> { toHaveBeenCalledOnce(): Promise; toSatisfy(matcher: (value: E) => boolean, message?: string): Promise; resolves: Assertion; From 4647e9f2be40ffa212702f82b27e7a9435e39544 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 31 Oct 2023 10:49:58 +0100 Subject: [PATCH 4/8] Reformat --- code/frameworks/angular/template/cli/Page.stories.ts | 8 ++------ code/frameworks/nextjs/template/cli/js/Page.stories.js | 8 ++------ .../frameworks/nextjs/template/cli/ts-3-8/Page.stories.ts | 8 ++------ .../frameworks/nextjs/template/cli/ts-4-9/Page.stories.ts | 8 ++------ code/renderers/html/template/cli/js/Page.stories.js | 8 ++------ code/renderers/html/template/cli/ts-3-8/Page.stories.ts | 8 ++------ code/renderers/html/template/cli/ts-4-9/Page.stories.ts | 8 ++------ code/renderers/preact/template/cli/Page.stories.jsx | 8 ++------ code/renderers/react/template/cli/js/Page.stories.js | 8 ++------ code/renderers/react/template/cli/ts-3-8/Page.stories.ts | 8 ++------ code/renderers/react/template/cli/ts-4-9/Page.stories.ts | 8 ++------ code/renderers/svelte/template/cli/js/Page.stories.js | 8 ++------ code/renderers/svelte/template/cli/ts-3-8/Page.stories.ts | 8 ++------ code/renderers/svelte/template/cli/ts-4-9/Page.stories.ts | 8 ++------ code/renderers/vue/template/cli/Page.stories.js | 8 ++------ code/renderers/vue3/template/cli/js/Page.stories.js | 8 ++------ code/renderers/vue3/template/cli/ts-3-8/Page.stories.ts | 8 ++------ code/renderers/vue3/template/cli/ts-4-9/Page.stories.ts | 8 ++------ 18 files changed, 36 insertions(+), 108 deletions(-) diff --git a/code/frameworks/angular/template/cli/Page.stories.ts b/code/frameworks/angular/template/cli/Page.stories.ts index 497bd8052f84..a21cdf7d8304 100644 --- a/code/frameworks/angular/template/cli/Page.stories.ts +++ b/code/frameworks/angular/template/cli/Page.stories.ts @@ -38,16 +38,12 @@ export const LoggedIn: Story = { }), play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const loginButton = canvas.getByRole('button', { - name: /Log in/i, - }); + const loginButton = canvas.getByRole('button', { name: /Log in/i }); await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); await expect(loginButton).not.toBeInTheDocument(); - const logoutButton = canvas.getByRole('button', { - name: /Log out/i, - }); + const logoutButton = canvas.getByRole('button', { name: /Log out/i }); await expect(logoutButton).toBeInTheDocument(); }, }; diff --git a/code/frameworks/nextjs/template/cli/js/Page.stories.js b/code/frameworks/nextjs/template/cli/js/Page.stories.js index 0a7648b9cfff..f339fa246d39 100644 --- a/code/frameworks/nextjs/template/cli/js/Page.stories.js +++ b/code/frameworks/nextjs/template/cli/js/Page.stories.js @@ -16,16 +16,12 @@ export const LoggedOut = {}; export const LoggedIn = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const loginButton = canvas.getByRole('button', { - name: /Log in/i, - }); + const loginButton = canvas.getByRole('button', { name: /Log in/i }); await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); await expect(loginButton).not.toBeInTheDocument(); - const logoutButton = canvas.getByRole('button', { - name: /Log out/i, - }); + const logoutButton = canvas.getByRole('button', { name: /Log out/i }); await expect(logoutButton).toBeInTheDocument(); }, }; diff --git a/code/frameworks/nextjs/template/cli/ts-3-8/Page.stories.ts b/code/frameworks/nextjs/template/cli/ts-3-8/Page.stories.ts index 2b9a68ff66d6..c072a1cc43ed 100644 --- a/code/frameworks/nextjs/template/cli/ts-3-8/Page.stories.ts +++ b/code/frameworks/nextjs/template/cli/ts-3-8/Page.stories.ts @@ -21,16 +21,12 @@ export const LoggedOut: Story = {}; export const LoggedIn: Story = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const loginButton = canvas.getByRole('button', { - name: /Log in/i, - }); + const loginButton = canvas.getByRole('button', { name: /Log in/i }); await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); await expect(loginButton).not.toBeInTheDocument(); - const logoutButton = canvas.getByRole('button', { - name: /Log out/i, - }); + const logoutButton = canvas.getByRole('button', { name: /Log out/i }); await expect(logoutButton).toBeInTheDocument(); }, }; diff --git a/code/frameworks/nextjs/template/cli/ts-4-9/Page.stories.ts b/code/frameworks/nextjs/template/cli/ts-4-9/Page.stories.ts index fd8facd04fdc..622858e72e7f 100644 --- a/code/frameworks/nextjs/template/cli/ts-4-9/Page.stories.ts +++ b/code/frameworks/nextjs/template/cli/ts-4-9/Page.stories.ts @@ -21,16 +21,12 @@ export const LoggedOut: Story = {}; export const LoggedIn: Story = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const loginButton = canvas.getByRole('button', { - name: /Log in/i, - }); + const loginButton = canvas.getByRole('button', { name: /Log in/i }); await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); await expect(loginButton).not.toBeInTheDocument(); - const logoutButton = canvas.getByRole('button', { - name: /Log out/i, - }); + const logoutButton = canvas.getByRole('button', { name: /Log out/i }); await expect(logoutButton).toBeInTheDocument(); }, }; diff --git a/code/renderers/html/template/cli/js/Page.stories.js b/code/renderers/html/template/cli/js/Page.stories.js index 73a84bf127cc..fcab88181bee 100644 --- a/code/renderers/html/template/cli/js/Page.stories.js +++ b/code/renderers/html/template/cli/js/Page.stories.js @@ -16,16 +16,12 @@ export const LoggedOut = {}; export const LoggedIn = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const loginButton = canvas.getByRole('button', { - name: /Log in/i, - }); + const loginButton = canvas.getByRole('button', { name: /Log in/i }); await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); await expect(loginButton).not.toBeInTheDocument(); - const logoutButton = canvas.getByRole('button', { - name: /Log out/i, - }); + const logoutButton = canvas.getByRole('button', { name: /Log out/i }); await expect(logoutButton).toBeInTheDocument(); }, }; diff --git a/code/renderers/html/template/cli/ts-3-8/Page.stories.ts b/code/renderers/html/template/cli/ts-3-8/Page.stories.ts index a33f0f42dd03..0c2e79e8e907 100644 --- a/code/renderers/html/template/cli/ts-3-8/Page.stories.ts +++ b/code/renderers/html/template/cli/ts-3-8/Page.stories.ts @@ -19,16 +19,12 @@ export const LoggedOut: StoryObj = {}; export const LoggedIn: StoryObj = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const loginButton = canvas.getByRole('button', { - name: /Log in/i, - }); + const loginButton = canvas.getByRole('button', { name: /Log in/i }); await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); await expect(loginButton).not.toBeInTheDocument(); - const logoutButton = canvas.getByRole('button', { - name: /Log out/i, - }); + const logoutButton = canvas.getByRole('button', { name: /Log out/i }); await expect(logoutButton).toBeInTheDocument(); }, }; diff --git a/code/renderers/html/template/cli/ts-4-9/Page.stories.ts b/code/renderers/html/template/cli/ts-4-9/Page.stories.ts index 57ce12297cbc..c64a88fbb84f 100644 --- a/code/renderers/html/template/cli/ts-4-9/Page.stories.ts +++ b/code/renderers/html/template/cli/ts-4-9/Page.stories.ts @@ -19,16 +19,12 @@ export const LoggedOut: StoryObj = {}; export const LoggedIn: StoryObj = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const loginButton = canvas.getByRole('button', { - name: /Log in/i, - }); + const loginButton = canvas.getByRole('button', { name: /Log in/i }); await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); await expect(loginButton).not.toBeInTheDocument(); - const logoutButton = canvas.getByRole('button', { - name: /Log out/i, - }); + const logoutButton = canvas.getByRole('button', { name: /Log out/i }); await expect(logoutButton).toBeInTheDocument(); }, }; diff --git a/code/renderers/preact/template/cli/Page.stories.jsx b/code/renderers/preact/template/cli/Page.stories.jsx index 6d9c52b0a6e1..bcc1bfa8ec74 100644 --- a/code/renderers/preact/template/cli/Page.stories.jsx +++ b/code/renderers/preact/template/cli/Page.stories.jsx @@ -17,16 +17,12 @@ export const LoggedOut = {}; export const LoggedIn = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const loginButton = canvas.getByRole('button', { - name: /Log in/i, - }); + const loginButton = canvas.getByRole('button', { name: /Log in/i }); await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); await expect(loginButton).not.toBeInTheDocument(); - const logoutButton = canvas.getByRole('button', { - name: /Log out/i, - }); + const logoutButton = canvas.getByRole('button', { name: /Log out/i }); await expect(logoutButton).toBeInTheDocument(); }, }; diff --git a/code/renderers/react/template/cli/js/Page.stories.js b/code/renderers/react/template/cli/js/Page.stories.js index 4bb0393feebe..204189f6d21d 100644 --- a/code/renderers/react/template/cli/js/Page.stories.js +++ b/code/renderers/react/template/cli/js/Page.stories.js @@ -17,16 +17,12 @@ export const LoggedOut = {}; export const LoggedIn = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const loginButton = canvas.getByRole('button', { - name: /Log in/i, - }); + const loginButton = canvas.getByRole('button', { name: /Log in/i }); await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); await expect(loginButton).not.toBeInTheDocument(); - const logoutButton = canvas.getByRole('button', { - name: /Log out/i, - }); + const logoutButton = canvas.getByRole('button', { name: /Log out/i }); await expect(logoutButton).toBeInTheDocument(); }, }; diff --git a/code/renderers/react/template/cli/ts-3-8/Page.stories.ts b/code/renderers/react/template/cli/ts-3-8/Page.stories.ts index ace70e3a8a60..adbab5d615f2 100644 --- a/code/renderers/react/template/cli/ts-3-8/Page.stories.ts +++ b/code/renderers/react/template/cli/ts-3-8/Page.stories.ts @@ -21,16 +21,12 @@ export const LoggedOut: Story = {}; export const LoggedIn: Story = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const loginButton = canvas.getByRole('button', { - name: /Log in/i, - }); + const loginButton = canvas.getByRole('button', { name: /Log in/i }); await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); await expect(loginButton).not.toBeInTheDocument(); - const logoutButton = canvas.getByRole('button', { - name: /Log out/i, - }); + const logoutButton = canvas.getByRole('button', { name: /Log out/i }); await expect(logoutButton).toBeInTheDocument(); }, }; diff --git a/code/renderers/react/template/cli/ts-4-9/Page.stories.ts b/code/renderers/react/template/cli/ts-4-9/Page.stories.ts index fd8facd04fdc..622858e72e7f 100644 --- a/code/renderers/react/template/cli/ts-4-9/Page.stories.ts +++ b/code/renderers/react/template/cli/ts-4-9/Page.stories.ts @@ -21,16 +21,12 @@ export const LoggedOut: Story = {}; export const LoggedIn: Story = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const loginButton = canvas.getByRole('button', { - name: /Log in/i, - }); + const loginButton = canvas.getByRole('button', { name: /Log in/i }); await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); await expect(loginButton).not.toBeInTheDocument(); - const logoutButton = canvas.getByRole('button', { - name: /Log out/i, - }); + const logoutButton = canvas.getByRole('button', { name: /Log out/i }); await expect(logoutButton).toBeInTheDocument(); }, }; diff --git a/code/renderers/svelte/template/cli/js/Page.stories.js b/code/renderers/svelte/template/cli/js/Page.stories.js index 67b13d887ddb..a4492ae66631 100644 --- a/code/renderers/svelte/template/cli/js/Page.stories.js +++ b/code/renderers/svelte/template/cli/js/Page.stories.js @@ -17,16 +17,12 @@ export const LoggedOut = {}; export const LoggedIn = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const loginButton = canvas.getByRole('button', { - name: /Log in/i, - }); + const loginButton = canvas.getByRole('button', { name: /Log in/i }); await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); await expect(loginButton).not.toBeInTheDocument(); - const logoutButton = canvas.getByRole('button', { - name: /Log out/i, - }); + const logoutButton = canvas.getByRole('button', { name: /Log out/i }); await expect(logoutButton).toBeInTheDocument(); }, }; diff --git a/code/renderers/svelte/template/cli/ts-3-8/Page.stories.ts b/code/renderers/svelte/template/cli/ts-3-8/Page.stories.ts index e8f70551c573..82e49cd3be09 100644 --- a/code/renderers/svelte/template/cli/ts-3-8/Page.stories.ts +++ b/code/renderers/svelte/template/cli/ts-3-8/Page.stories.ts @@ -21,16 +21,12 @@ export const LoggedOut: Story = {}; export const LoggedIn: Story = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const loginButton = canvas.getByRole('button', { - name: /Log in/i, - }); + const loginButton = canvas.getByRole('button', { name: /Log in/i }); await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); await expect(loginButton).not.toBeInTheDocument(); - const logoutButton = canvas.getByRole('button', { - name: /Log out/i, - }); + const logoutButton = canvas.getByRole('button', { name: /Log out/i }); await expect(logoutButton).toBeInTheDocument(); }, }; diff --git a/code/renderers/svelte/template/cli/ts-4-9/Page.stories.ts b/code/renderers/svelte/template/cli/ts-4-9/Page.stories.ts index 8d38e4dfc284..d7e97628ea24 100644 --- a/code/renderers/svelte/template/cli/ts-4-9/Page.stories.ts +++ b/code/renderers/svelte/template/cli/ts-4-9/Page.stories.ts @@ -21,16 +21,12 @@ export const LoggedOut: Story = {}; export const LoggedIn: Story = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const loginButton = canvas.getByRole('button', { - name: /Log in/i, - }); + const loginButton = canvas.getByRole('button', { name: /Log in/i }); await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); await expect(loginButton).not.toBeInTheDocument(); - const logoutButton = canvas.getByRole('button', { - name: /Log out/i, - }); + const logoutButton = canvas.getByRole('button', { name: /Log out/i }); await expect(logoutButton).toBeInTheDocument(); }, }; diff --git a/code/renderers/vue/template/cli/Page.stories.js b/code/renderers/vue/template/cli/Page.stories.js index 656b562859de..5e9b6ffa7318 100644 --- a/code/renderers/vue/template/cli/Page.stories.js +++ b/code/renderers/vue/template/cli/Page.stories.js @@ -19,16 +19,12 @@ export const LoggedOut = {}; export const LoggedIn = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const loginButton = canvas.getByRole('button', { - name: /Log in/i, - }); + const loginButton = canvas.getByRole('button', { name: /Log in/i }); await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); await expect(loginButton).not.toBeInTheDocument(); - const logoutButton = canvas.getByRole('button', { - name: /Log out/i, - }); + const logoutButton = canvas.getByRole('button', { name: /Log out/i }); await expect(logoutButton).toBeInTheDocument(); }, }; diff --git a/code/renderers/vue3/template/cli/js/Page.stories.js b/code/renderers/vue3/template/cli/js/Page.stories.js index 2a84357b2b0b..3c4ce9312539 100644 --- a/code/renderers/vue3/template/cli/js/Page.stories.js +++ b/code/renderers/vue3/template/cli/js/Page.stories.js @@ -22,16 +22,12 @@ export const LoggedIn = { }), play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const loginButton = canvas.getByRole('button', { - name: /Log in/i, - }); + const loginButton = canvas.getByRole('button', { name: /Log in/i }); await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); await expect(loginButton).not.toBeInTheDocument(); - const logoutButton = canvas.getByRole('button', { - name: /Log out/i, - }); + const logoutButton = canvas.getByRole('button', { name: /Log out/i }); await expect(logoutButton).toBeInTheDocument(); }, }; diff --git a/code/renderers/vue3/template/cli/ts-3-8/Page.stories.ts b/code/renderers/vue3/template/cli/ts-3-8/Page.stories.ts index 94c9dfa755a3..c26e06d2d0de 100644 --- a/code/renderers/vue3/template/cli/ts-3-8/Page.stories.ts +++ b/code/renderers/vue3/template/cli/ts-3-8/Page.stories.ts @@ -24,16 +24,12 @@ type Story = StoryObj; export const LoggedIn: Story = { play: async ({ canvasElement }: any) => { const canvas = within(canvasElement); - const loginButton = canvas.getByRole('button', { - name: /Log in/i, - }); + const loginButton = canvas.getByRole('button', { name: /Log in/i }); await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); await expect(loginButton).not.toBeInTheDocument(); - const logoutButton = canvas.getByRole('button', { - name: /Log out/i, - }); + const logoutButton = canvas.getByRole('button', { name: /Log out/i }); await expect(logoutButton).toBeInTheDocument(); }, }; diff --git a/code/renderers/vue3/template/cli/ts-4-9/Page.stories.ts b/code/renderers/vue3/template/cli/ts-4-9/Page.stories.ts index 61685e156666..2bf745b21f21 100644 --- a/code/renderers/vue3/template/cli/ts-4-9/Page.stories.ts +++ b/code/renderers/vue3/template/cli/ts-4-9/Page.stories.ts @@ -24,16 +24,12 @@ type Story = StoryObj; export const LoggedIn: Story = { play: async ({ canvasElement }: any) => { const canvas = within(canvasElement); - const loginButton = canvas.getByRole('button', { - name: /Log in/i, - }); + const loginButton = canvas.getByRole('button', { name: /Log in/i }); await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); await expect(loginButton).not.toBeInTheDocument(); - const logoutButton = canvas.getByRole('button', { - name: /Log out/i, - }); + const logoutButton = canvas.getByRole('button', { name: /Log out/i }); await expect(logoutButton).toBeInTheDocument(); }, }; From 1c00b8c78678572d7af58e58f3f5f5087ec13ca3 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 31 Oct 2023 11:55:24 +0100 Subject: [PATCH 5/8] Fix type --- code/lib/test/src/expect.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/code/lib/test/src/expect.ts b/code/lib/test/src/expect.ts index 5a3fb334afd4..7e8b9d95cf03 100644 --- a/code/lib/test/src/expect.ts +++ b/code/lib/test/src/expect.ts @@ -17,10 +17,11 @@ import { import * as matchers from '@testing-library/jest-dom/matchers'; import type { PromisifyObject } from './utils'; +type Matchers = PromisifyObject> & + matchers.TestingLibraryMatchers, Promise>; + // We only expose the jest compatible API for now -export interface Assertion - extends PromisifyObject>, - matchers.TestingLibraryMatchers, Promise> { +export interface Assertion extends Matchers { toHaveBeenCalledOnce(): Promise; toSatisfy(matcher: (value: E) => boolean, message?: string): Promise; resolves: Assertion; From b5c6a2d7d8c8b78d20f09982477a368bfb2ff76c Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 31 Oct 2023 14:23:58 +0100 Subject: [PATCH 6/8] Rollback extra code in preact --- code/renderers/preact/template/cli/Page.stories.jsx | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/code/renderers/preact/template/cli/Page.stories.jsx b/code/renderers/preact/template/cli/Page.stories.jsx index bcc1bfa8ec74..46669ac1c89d 100644 --- a/code/renderers/preact/template/cli/Page.stories.jsx +++ b/code/renderers/preact/template/cli/Page.stories.jsx @@ -1,4 +1,4 @@ -import { within, userEvent, expect } from '@storybook/test'; +import { within, userEvent } from '@storybook/test'; import { Page } from './Page'; @@ -17,12 +17,9 @@ export const LoggedOut = {}; export const LoggedIn = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const loginButton = canvas.getByRole('button', { name: /Log in/i }); - await expect(loginButton).toBeInTheDocument(); + const loginButton = await canvas.getByRole('button', { + name: /Log in/i, + }); await userEvent.click(loginButton); - await expect(loginButton).not.toBeInTheDocument(); - - const logoutButton = canvas.getByRole('button', { name: /Log out/i }); - await expect(logoutButton).toBeInTheDocument(); }, }; From c33b7240042f5b3979ff432ff40fb63ffc0ceed6 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 31 Oct 2023 14:41:49 +0100 Subject: [PATCH 7/8] Fix e2e tests --- code/e2e-tests/addon-interactions.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/e2e-tests/addon-interactions.spec.ts b/code/e2e-tests/addon-interactions.spec.ts index 981c5bf678a6..d77ef67beeca 100644 --- a/code/e2e-tests/addon-interactions.spec.ts +++ b/code/e2e-tests/addon-interactions.spec.ts @@ -29,7 +29,7 @@ test.describe('addon-interactions', () => { await expect(welcome).toContainText('Welcome, Jane Doe!'); const interactionsTab = await page.locator('#tabbutton-storybook-interactions-panel'); - await expect(interactionsTab).toContainText(/(1)/); + await expect(interactionsTab).toContainText(/(\d)/); await expect(interactionsTab).toBeVisible(); const panel = sbPage.panelContent(); @@ -37,7 +37,7 @@ test.describe('addon-interactions', () => { await expect(panel).toContainText(/userEvent.click/); await expect(panel).toBeVisible(); - const done = await panel.locator('[data-testid=icon-done]'); + const done = await panel.locator('[data-testid=icon-done]').nth(0); await expect(done).toBeVisible(); }); From b7f73a1b1b8f02b7f82ee9a21b6a21496dde3cf4 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 1 Nov 2023 11:27:43 +0100 Subject: [PATCH 8/8] Dedupe aria-query until v10 of @testing-library/jest-dom is released: https://github.com/testing-library/dom-testing-library/releases/tag/v10.0.0-alpha.2 --- code/package.json | 1 + code/yarn.lock | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/code/package.json b/code/package.json index d742d3ab90b5..323c5ebbe927 100644 --- a/code/package.json +++ b/code/package.json @@ -80,6 +80,7 @@ ], "resolutions": { "@playwright/test": "1.36.0", + "@testing-library/jest-dom/aria-query": "5.1.3", "@typescript-eslint/eslint-plugin": "^5.45.0", "@typescript-eslint/experimental-utils": "^5.45.0", "@typescript-eslint/parser": "^5.45.0", diff --git a/code/yarn.lock b/code/yarn.lock index c450dcda37e2..224d55ee40c9 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -11597,7 +11597,7 @@ __metadata: languageName: node linkType: hard -"aria-query@npm:^5.0.0, aria-query@npm:^5.1.3, aria-query@npm:^5.3.0": +"aria-query@npm:^5.1.3, aria-query@npm:^5.3.0": version: 5.3.0 resolution: "aria-query@npm:5.3.0" dependencies: