use @storybook/test in CLI templates

storybookjs · Oct 27, 2023 · 11d1e03 · 11d1e03
1 parent 4e993be
commit 11d1e03
Show file tree

Hide file tree

Showing 19 changed files with 152 additions and 19 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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<typeof MyPage> = {
@@ -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
@@ -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();
   },
 };