Merge pull request #19879 from storybookjs/chore_docs_snippets_remove…

…_screen_refs Chore: (Docs) Interaction tests docs updates for CSF 3
storybookjs · Nov 17, 2022 · 1dbd012 · 1dbd012
2 parents c8e52a0 + 202154d
commit 1dbd012
Show file tree

Hide file tree

Showing 56 changed files with 519 additions and 316 deletions.
diff --git a/docs/snippets/angular/login-form-with-play-function.ts.mdx b/docs/snippets/angular/login-form-with-play-function.ts.mdx
@@ -23,9 +23,12 @@ type Story = StoryObj<LoginForm>;
 
 export const EmptyForm: Story = {};
 
+/*
+ * See https://storybook.js.org/docs/7.0/angular/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
 export const FilledForm: Story = {
   play: async ({ canvasElement }) => {
-    // Starts querying the component from its root element
     const canvas = within(canvasElement);
 
     // 👇 Simulate interactions with the component

diff --git a/docs/snippets/angular/my-component-play-function-alt-queries.ts.mdx b/docs/snippets/angular/my-component-play-function-alt-queries.ts.mdx
@@ -3,7 +3,7 @@
 
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { screen, userEvent } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent.component';
 
@@ -19,10 +19,16 @@ const meta: Meta<MyComponent> = {
 export default meta;
 type Story = StoryObj<MyComponent>;
 
+/*
+ * See https://storybook.js.org/docs/7.0/angular/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
 export const ExampleWithRole: Story = {
-  play: async () => {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
     // See https://storybook.js.org/docs/7.0/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    await userEvent.click(screen.getByRole('button', { name: / button label/i }));
+    await userEvent.click(canvas.getByRole('button', { name: / button label/i }));
   },
 };
 ```
diff --git a/docs/snippets/angular/my-component-play-function-composition.ts.mdx b/docs/snippets/angular/my-component-play-function-composition.ts.mdx
@@ -3,7 +3,7 @@
 
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { screen, userEvent } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent.component';
 
@@ -19,24 +19,34 @@ const meta: Meta<MyComponent> = {
 export default meta;
 type Story = StoryObj<MyComponent>;
 
+/*
+ * See https://storybook.js.org/docs/7.0/angular/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
 export const FirstStory: Story = {
-  play: async () => {
-    userEvent.type(screen.getByTestId('an-element'), 'example-value');
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    userEvent.type(canvas.getByTestId('an-element'), 'example-value');
   },
 };
 
 export const SecondStory: Story = {
-  play: async () => {
-    await userEvent.type(screen.getByTestId('other-element'), 'another value');
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await userEvent.type(canvas.getByTestId('other-element'), 'another value');
   },
 };
 
 export const CombinedStories: Story = {
-  play: async () => {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
     // Runs the FirstStory and Second story play function before running this story's play function
-    await FirstStory.play();
-    await SecondStory.play();
-    await userEvent.type(screen.getByTestId('another-element'), 'random value');
+    await FirstStory.play({ canvasElement });
+    await SecondStory.play({ canvasElement });
+    await userEvent.type(canvas.getByTestId('another-element'), 'random value');
   },
 };
 ```
diff --git a/docs/snippets/angular/my-component-play-function-query-findby.ts.mdx b/docs/snippets/angular/my-component-play-function-query-findby.ts.mdx
@@ -3,7 +3,7 @@
 
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { screen, userEvent } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent.component';
 
@@ -19,12 +19,18 @@ const meta: Meta<MyComponent> = {
 export default meta;
 type Story = StoryObj<MyComponent>;
 
+/*
+ * See https://storybook.js.org/docs/7.0/angular/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
 export const AsyncExample: Story = {
-  play: async () => {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
     // Other steps
 
     // Waits for the component to be rendered before querying the element
-    await screen.findByRole('button', { name: / button label/i }));
+    await canvas.findByRole('button', { name: / button label/i }));
   },
 };
 ```
diff --git a/docs/snippets/angular/my-component-play-function-waitfor.ts.mdx b/docs/snippets/angular/my-component-play-function-waitfor.ts.mdx
@@ -3,7 +3,7 @@
 
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { screen, userEvent, waitFor } from '@storybook/testing-library';
+import { userEvent, waitFor, within } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent.component';
 
@@ -19,9 +19,15 @@ const meta: Meta<MyComponent> = {
 export default meta;
 type Story = StoryObj<MyComponent>;
 
+/*
+ * See https://storybook.js.org/docs/7.0/angular/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
 export const ExampleAsyncStory: Story = {
-  play: async () => {
-    const Input = screen.getByLabelText('Username', {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const Input = canvas.getByLabelText('Username', {
       selector: 'input',
     });
 
@@ -30,11 +36,11 @@ export const ExampleAsyncStory: Story = {
     });
 
     // See https://storybook.js.org/docs/7.0/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    const Submit = screen.getByRole('button');
+    const Submit = canvas.getByRole('button');
     await userEvent.click(Submit);
 
     await waitFor(async () => {
-      await userEvent.hover(screen.getByTestId('error'));
+      await userEvent.hover(canvas.getByTestId('error'));
     });
   },
 };

diff --git a/docs/snippets/angular/my-component-play-function-with-clickevent.ts.mdx b/docs/snippets/angular/my-component-play-function-with-clickevent.ts.mdx
@@ -3,7 +3,7 @@
 
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { fireEvent, screen, userEvent } from '@storybook/testing-library';
+import { fireEvent, userEvent, within } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent.component';
 
@@ -19,17 +19,25 @@ const meta: Meta<MyComponent> = {
 export default meta;
 type Story = StoryObj<MyComponent>;
 
+/*
+ * See https://storybook.js.org/docs/7.0/angular/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
 export const ClickExample: Story = {
-  play: async () => {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
     // See https://storybook.js.org/docs/7.0/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    await userEvent.click(screen.getByRole('button'));
+    await userEvent.click(canvas.getByRole('button'));
   },
 };
 
 export const FireEventExample: Story = {
-  play: async () => {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
     // See https://storybook.js.org/docs/7.0/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    await fireEvent.click(screen.getByTestId('data-testid'));
+    await fireEvent.click(canvas.getByTestId('data-testid'));
   },
 };
 ```
diff --git a/docs/snippets/angular/my-component-play-function-with-delay.ts.mdx b/docs/snippets/angular/my-component-play-function-with-delay.ts.mdx
@@ -3,7 +3,7 @@
 
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { screen, userEvent } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent.component';
 
@@ -19,16 +19,22 @@ const meta: Meta<MyComponent> = {
 export default meta;
 type Story = StoryObj<MyComponent>;
 
+/*
+ * See https://storybook.js.org/docs/7.0/angular/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
 export const DelayedStory: Story = {
-  play: async () => {
-    const exampleElement = screen.getByLabelText('example-element');
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const exampleElement = canvas.getByLabelText('example-element');
 
     // The delay option set the ammount of milliseconds between characters being typed
     await userEvent.type(exampleElement, 'random string', {
       delay: 100,
     });
 
-    const AnotherExampleElement = screen.getByLabelText('another-example-element');
+    const AnotherExampleElement = canvas.getByLabelText('another-example-element');
     await userEvent.type(AnotherExampleElement, 'another random string', {
       delay: 100,
     });

diff --git a/docs/snippets/angular/my-component-play-function-with-selectevent.ts.mdx b/docs/snippets/angular/my-component-play-function-with-selectevent.ts.mdx
@@ -3,7 +3,7 @@
 
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { screen, userEvent } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent.component';
 
@@ -24,9 +24,15 @@ function sleep(ms: number) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
+/*
+ * See https://storybook.js.org/docs/7.0/angular/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
 export const ExampleChangeEvent: Story = {
-  play: async () => {
-    const select = screen.getByRole('listbox');
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const select = canvas.getByRole('listbox');
 
     await userEvent.selectOptions(select, ['One Item']);
     await sleep(2000);

diff --git a/docs/snippets/angular/register-component-with-play-function.ts.mdx b/docs/snippets/angular/register-component-with-play-function.ts.mdx
@@ -3,7 +3,7 @@
 
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { screen, userEvent } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 
 import { RegistrationForm } from './RegistrationForm.component';
 
@@ -19,25 +19,31 @@ const meta: Meta<RegistrationForm> = {
 export default meta;
 type Story = StoryObj<RegistrationForm>;
 
+/*
+ * See https://storybook.js.org/docs/7.0/angular/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
 export const FilledForm: Story = {
-  play: async () => {
-    const emailInput = screen.getByLabelText('email', {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const emailInput = canvas.getByLabelText('email', {
       selector: 'input',
     });
 
     await userEvent.type(emailInput, '[email protected]', {
       delay: 100,
     });
 
-    const passwordInput = screen.getByLabelText('password', {
+    const passwordInput = canvas.getByLabelText('password', {
       selector: 'input',
     });
 
     await userEvent.type(passwordInput, 'ExamplePassword', {
       delay: 100,
     });
     // See https://storybook.js.org/docs/7.0/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    const submitButton = screen.getByRole('button');
+    const submitButton = canvas.getByRole('button');
 
     await userEvent.click(submitButton);
   },

diff --git a/docs/snippets/react/login-form-with-play-function.js.mdx b/docs/snippets/react/login-form-with-play-function.js.mdx
@@ -18,9 +18,12 @@ export default {
 
 export const EmptyForm = {};
 
+/*
+ * See https://storybook.js.org/docs/7.0/react/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
 export const FilledForm = {
   play: async ({ canvasElement }) => {
-    // Starts querying the component from its root element
     const canvas = within(canvasElement);
 
     // 👇 Simulate interactions with the component

diff --git a/docs/snippets/react/login-form-with-play-function.ts.mdx b/docs/snippets/react/login-form-with-play-function.ts.mdx
@@ -23,9 +23,12 @@ type Story = StoryObj<typeof LoginForm>;
 
 export const EmptyForm: Story = {};
 
+/*
+ * See https://storybook.js.org/docs/7.0/react/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
 export const FilledForm: Story = {
   play: async ({ canvasElement }) => {
-    // Starts querying the component from its root element
     const canvas = within(canvasElement);
 
     // 👇 Simulate interactions with the component

diff --git a/docs/snippets/react/my-component-play-function-alt-queries.js.mdx b/docs/snippets/react/my-component-play-function-alt-queries.js.mdx
@@ -1,7 +1,7 @@
 ```js
 // MyComponent.stories.js|jsx
 
-import { screen, userEvent } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent';
 
@@ -14,10 +14,15 @@ export default {
   component: MyComponent,
 };
 
+/* See https://storybook.js.org/docs/7.0/react/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
 export const ExampleWithRole = {
-  play: async () => {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
     // See https://storybook.js.org/docs/7.0/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    await userEvent.click(screen.getByRole('button', { name: / button label/i }));
+    await userEvent.click(canvas.getByRole('button', { name: / button label/i }));
   },
 };
 ```
diff --git a/docs/snippets/react/my-component-play-function-alt-queries.ts.mdx b/docs/snippets/react/my-component-play-function-alt-queries.ts.mdx
@@ -3,7 +3,7 @@
 
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { screen, userEvent } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent';
 
@@ -19,10 +19,15 @@ const meta: Meta<typeof MyComponent> = {
 export default meta;
 type Story = StoryObj<typeof MyComponent>;
 
+/* See https://storybook.js.org/docs/7.0/react/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
 export const ExampleWithRole: Story = {
-  play: async () => {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
     // See https://storybook.js.org/docs/7.0/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    await userEvent.click(screen.getByRole('button', { name: / button label/i }));
+    await userEvent.click(canvas.getByRole('button', { name: / button label/i }));
   },
 };
 ```