remove waitFor in storybook

opengovsg · Dec 30, 2024 · fa59f2e · fa59f2e
1 parent b7f73e2
commit fa59f2e
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 111 deletions.
diff --git a/apps/studio/src/stories/Flows/CreateCollectionItemFlow.stories.tsx b/apps/studio/src/stories/Flows/CreateCollectionItemFlow.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react"
-import { userEvent, waitFor, within } from "@storybook/test"
+import { userEvent, within } from "@storybook/test"
 import { collectionHandlers } from "tests/msw/handlers/collection"
 import { meHandlers } from "tests/msw/handlers/me"
 import { pageHandlers } from "tests/msw/handlers/page"
@@ -55,14 +55,11 @@ type Story = StoryObj<typeof meta>
 
 export const SelectLayout: Story = {
   play: async ({ canvasElement }) => {
-    await waitFor(async () => {
-      const screen = within(canvasElement)
-      await userEvent.click(
-        screen.getByRole("button", {
-          name: "Add new item",
-        }),
-      )
+    const screen = within(canvasElement)
+    const button = await screen.findByRole("button", {
+      name: "Add new item",
     })
+    await userEvent.click(button)
   },
 }
 

diff --git a/apps/studio/src/stories/Flows/CreateNewPageFlow.stories.tsx b/apps/studio/src/stories/Flows/CreateNewPageFlow.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react"
-import { userEvent, waitFor, within } from "@storybook/test"
+import { userEvent, within } from "@storybook/test"
 import { meHandlers } from "tests/msw/handlers/me"
 import { pageHandlers } from "tests/msw/handlers/page"
 import { resourceHandlers } from "tests/msw/handlers/resource"
@@ -43,21 +43,18 @@ type Story = StoryObj<typeof meta>
 
 export const SelectPageLayout: Story = {
   play: async ({ canvasElement }) => {
-    await waitFor(async () => {
-      // Used to navigate to components rendered in portals, like menus.
-      const rootScreen = within(canvasElement.ownerDocument.body)
-      const screen = within(canvasElement)
-      await userEvent.click(
-        screen.getByRole("button", {
-          name: "Create new...",
-        }),
-      )
-      await userEvent.click(
-        rootScreen.getByRole("menuitem", {
-          name: /page/i,
-        }),
-      )
+    const rootScreen = within(canvasElement.ownerDocument.body)
+    const screen = within(canvasElement)
+
+    const button = await screen.findByRole("button", {
+      name: "Create new...",
+    })
+    await userEvent.click(button)
+
+    const menuItem = await rootScreen.findByRole("menuitem", {
+      name: /page/i,
     })
+    await userEvent.click(menuItem)
   },
 }
 
@@ -67,13 +64,12 @@ export const EnterPageDetails: Story = {
     const screen = within(canvasElement.ownerDocument.body)
     await SelectPageLayout.play?.(context)
 
-    await userEvent.click(
-      screen.getByRole("button", { name: /next: page title and url/i }),
-    )
+    const button = await screen.findByRole("button", {
+      name: /next: page title and url/i,
+    })
+    await userEvent.click(button)
 
-    await userEvent.type(
-      screen.getByLabelText(/page title/i),
-      "My_new page WITH w@eird characters!",
-    )
+    const input = await screen.findByLabelText(/page title/i)
+    await userEvent.type(input, "My_new page WITH w@eird characters!")
   },
 }
diff --git a/apps/studio/src/stories/Page/EditPage/EditArticlePage.stories.tsx b/apps/studio/src/stories/Page/EditPage/EditArticlePage.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react"
-import { userEvent, waitFor, within } from "@storybook/test"
+import { userEvent, within } from "@storybook/test"
 import { ResourceState } from "~prisma/generated/generatedEnums"
 import { meHandlers } from "tests/msw/handlers/me"
 import { pageHandlers } from "tests/msw/handlers/page"
@@ -58,22 +58,18 @@ export const Default: Story = {}
 export const EditFixedBlockState: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
-
-    await waitFor(async () => {
-      await userEvent.click(
-        canvas.getByRole("button", { name: /Article page header/i }),
-      )
+    const button = await canvas.findByRole("button", {
+      name: /Article page header/i,
     })
+    await userEvent.click(button)
   },
 }
 
 export const AddBlock: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
-
-    await waitFor(async () => {
-      await userEvent.click(canvas.getByRole("button", { name: /add block/i }))
-    })
+    const button = await canvas.findByRole("button", { name: /add block/i })
+    await userEvent.click(button)
   },
 }
 

diff --git a/apps/studio/src/stories/Page/EditPage/EditCollectionLink.stories.tsx b/apps/studio/src/stories/Page/EditPage/EditCollectionLink.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react"
-import { userEvent, waitFor, within } from "@storybook/test"
+import { userEvent, within } from "@storybook/test"
 import { ResourceState } from "~prisma/generated/generatedEnums"
 import { collectionHandlers } from "tests/msw/handlers/collection"
 import { meHandlers } from "tests/msw/handlers/me"
@@ -88,12 +88,9 @@ export const WithModal: Story = {
   play: async (context) => {
     const { canvasElement } = context
     const screen = within(canvasElement)
-
-    await waitFor(
-      async () =>
-        await userEvent.click(
-          screen.getByRole("button", { name: /Link something.../i }),
-        ),
-    )
+    const button = await screen.findByRole("button", {
+      name: /Link something.../i,
+    })
+    await userEvent.click(button)
   },
 }
diff --git a/apps/studio/src/stories/Page/EditPage/EditContentPage.stories.tsx b/apps/studio/src/stories/Page/EditPage/EditContentPage.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react"
-import { userEvent, waitFor, within } from "@storybook/test"
+import { userEvent, within } from "@storybook/test"
 import { ResourceState } from "~prisma/generated/generatedEnums"
 import { meHandlers } from "tests/msw/handlers/me"
 import { pageHandlers } from "tests/msw/handlers/page"
@@ -58,22 +58,18 @@ export const Default: Story = {}
 export const EditFixedBlockState: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
-
-    await waitFor(async () => {
-      await userEvent.click(
-        canvas.getByRole("button", { name: /Content page header/i }),
-      )
+    const button = await canvas.findByRole("button", {
+      name: /Content page header/i,
     })
+    await userEvent.click(button)
   },
 }
 
 export const AddBlock: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
-
-    await waitFor(async () => {
-      await userEvent.click(canvas.getByRole("button", { name: /add block/i }))
-    })
+    const button = await canvas.findByRole("button", { name: /add block/i })
+    await userEvent.click(button)
   },
 }
 

diff --git a/apps/studio/src/stories/Page/EditPage/EditHomePage.stories.tsx b/apps/studio/src/stories/Page/EditPage/EditHomePage.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react"
-import { userEvent, waitFor, within } from "@storybook/test"
+import { userEvent, within } from "@storybook/test"
 import { ResourceState } from "~prisma/generated/generatedEnums"
 import { meHandlers } from "tests/msw/handlers/me"
 import { pageHandlers } from "tests/msw/handlers/page"
@@ -56,34 +56,26 @@ export const Default: Story = {}
 export const AddBlock: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
-
-    await waitFor(async () => {
-      await userEvent.click(canvas.getByRole("button", { name: /add block/i }))
-    })
+    const button = await canvas.findByRole("button", { name: /add block/i })
+    await userEvent.click(button)
   },
 }
 
 export const EditHero: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
-
-    await waitFor(async () => {
-      await userEvent.click(
-        canvas.getByRole("button", { name: /hero banner/i }),
-      )
-    })
+    const button = await canvas.findByRole("button", { name: /hero banner/i })
+    await userEvent.click(button)
   },
 }
 
 export const EditKeyStatistics: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
-
-    await waitFor(async () => {
-      await userEvent.click(
-        canvas.getByRole("button", { name: /KeyStatistics Component/i }),
-      )
+    const button = await canvas.findByRole("button", {
+      name: /KeyStatistics Component/i,
     })
+    await userEvent.click(button)
   },
 }
 
@@ -105,14 +97,15 @@ export const NestedState: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
 
-    await waitFor(async () => {
-      await userEvent.click(
-        canvas.getByRole("button", { name: /keystatistics/i }),
-      )
-      await userEvent.click(
-        canvas.getByRole("button", { name: /average all nighters/i }),
-      )
+    const keyStatisticsButton = await canvas.findByRole("button", {
+      name: /keystatistics/i,
     })
+    await userEvent.click(keyStatisticsButton)
+
+    const averageAllNightersButton = await canvas.findByRole("button", {
+      name: /average all nighters/i,
+    })
+    await userEvent.click(averageAllNightersButton)
   },
 }
 
@@ -123,13 +116,12 @@ export const ErrorNestedState: Story = {
     const { canvasElement } = context
     const canvas = within(canvasElement)
 
-    await waitFor(async () => {
-      await userEvent.clear(
-        canvas.getByRole("textbox", { name: /description/i }),
-      )
+    const textbox = await canvas.findByRole("textbox", { name: /description/i })
+    await userEvent.clear(textbox)
 
-      await userEvent.click(canvas.getByLabelText(/return to statistics/i))
-    })
+    const returnToStatisticsButton =
+      await canvas.findByLabelText(/return to statistics/i)
+    await userEvent.click(returnToStatisticsButton)
   },
 }
 
@@ -140,13 +132,11 @@ export const FullscreenPreview: Story = {
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const screen = within(canvasElement.parentElement!)
 
-    await waitFor(async () => {
-      await userEvent.click(
-        canvas.getByRole("button", { name: /default mode/i }),
-      )
+    const button = await canvas.findByRole("button", { name: /default mode/i })
+    await userEvent.click(button)
 
-      await userEvent.click(screen.getByText(/full screen/i))
-    })
+    const text = await screen.findByText(/full screen/i)
+    await userEvent.click(text)
   },
 }
 

diff --git a/apps/studio/src/stories/Page/SitePage.stories.tsx b/apps/studio/src/stories/Page/SitePage.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react"
-import { userEvent, waitFor, within } from "@storybook/test"
+import { userEvent, within } from "@storybook/test"
 import { meHandlers } from "tests/msw/handlers/me"
 import { pageHandlers } from "tests/msw/handlers/page"
 import { resourceHandlers } from "tests/msw/handlers/resource"
@@ -47,25 +47,21 @@ export const Default: Story = {
 
 export const PageResourceMenu: Story = {
   play: async ({ canvasElement }) => {
-    await waitFor(async () => {
-      const screen = within(canvasElement)
-      const pageMenuButton = screen.getByRole("button", {
-        name: "Options for Test page 1",
-      })
-      await userEvent.click(pageMenuButton)
+    const screen = within(canvasElement)
+    const pageMenuButton = await screen.findByRole("button", {
+      name: "Options for Test page 1",
     })
+    await userEvent.click(pageMenuButton)
   },
 }
 
 export const FolderResourceMenu: Story = {
   play: async ({ canvasElement }) => {
-    await waitFor(async () => {
-      const screen = within(canvasElement)
-      const folderMenuButton = screen.getByRole("button", {
-        name: "Options for Test folder 1",
-      })
-      await userEvent.click(folderMenuButton)
+    const screen = within(canvasElement)
+    const folderMenuButton = await screen.findByRole("button", {
+      name: "Options for Test folder 1",
     })
+    await userEvent.click(folderMenuButton)
   },
 }
 

diff --git a/packages/components/src/templates/next/components/internal/Filter/Filter.stories.tsx b/packages/components/src/templates/next/components/internal/Filter/Filter.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react"
 import { useState } from "react"
-import { userEvent, waitFor, within } from "@storybook/test"
+import { userEvent, within } from "@storybook/test"
 
 import { getViewportByMode, withChromaticModes } from "@isomer/storybook-config"
 
@@ -146,11 +146,10 @@ export const MobileFilterDrawer: Story = {
   args: MobileFilterButton.args,
   play: async ({ canvasElement }) => {
     const screen = within(canvasElement)
-    await waitFor(async () => {
-      await userEvent.click(
-        screen.getByRole("button", { name: /filter results/i }),
-      )
+    const button = await screen.findByRole("button", {
+      name: /filter results/i,
     })
+    await userEvent.click(button)
   },
 }