Fix flaky test

Author: kasperpeulen

app/note/edit/[id]/page.stories.tsx

@@ -1,11 +1,11 @@
-import { expect, fireEvent, userEvent, waitFor, within } from '@storybook/test'
+import { expect, userEvent, waitFor, within } from '@storybook/test'
 import { Meta, StoryObj } from '@storybook/react'
 import { cookies } from '@storybook/nextjs/headers.mock'
 import Page from './page'
-import { deleteNote, saveNote } from '#app/actions.mock'
 import { db } from '#lib/db'
 import { createUserCookie, userCookieKey } from '#lib/session'
 import { PageDecorator } from '#.storybook/decorators'
+import { getRouter } from '@storybook/nextjs/navigation.mock'
 
 const meta = {
   component: Page,
@@ -49,43 +49,55 @@ export const UnknownId: Story = {
   args: { params: { id: '999' } },
 }
 
-export const Save: Story = {
-  name: 'Save and Delete Flow ▶',
+const waitForRedirect = () =>
+  waitFor(() => expect(getRouter().push).toHaveBeenCalled())
+
+export const SavingExistingNoteShouldUpdateDBAndRedirect: Story = {
   play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement)
-    const titleInput = await canvas.findByRole('textbox', {
-      name: /Enter a title for your note/i,
-    })
-    const bodyInput = canvas.getByRole('textbox', { name: /body/i })
+    const titleInput = await canvas.findByLabelText(
+      'Enter a title for your note',
+    )
+    const bodyInput = await canvas.findByLabelText(
+      'Enter the body for your note',
+    )
 
-    await step('Clear inputs', async () => {
-      await userEvent.clear(titleInput)
-      await userEvent.clear(bodyInput)
-    })
+    await userEvent.clear(titleInput)
+    await userEvent.type(titleInput, 'Edited Title')
+    await userEvent.clear(bodyInput)
+    await userEvent.type(bodyInput, 'Edited Body')
 
-    await step('Edit inputs', async () => {
-      await fireEvent.change(titleInput, { target: { value: 'Edited Title' } })
-      await fireEvent.change(bodyInput, { target: { value: 'Edited Body' } })
-    })
+    await userEvent.click(
+      await canvas.findByRole('menuitem', { name: /done/i }),
+    )
+    await waitForRedirect()
 
-    await step('Save', async () => {
-      await userEvent.click(
-        await canvas.findByRole('menuitem', { name: /done/i }),
-      )
-      await expect(saveNote).toHaveBeenCalledOnce()
-      await expect(saveNote).toHaveBeenCalledWith(
-        2,
-        'Edited Title',
-        'Edited Body',
-      )
-    })
+    await expect(await db.note.findUnique({ where: { id: 2 } })).toEqual(
+      expect.objectContaining({
+        title: 'Edited Title',
+        body: 'Edited Body',
+      }),
+    )
+  },
+}
 
-    await step('Delete', async () => {
-      await userEvent.click(
-        await canvas.findByRole('menuitem', { name: /delete/i }),
-      )
-      await waitFor(() => expect(deleteNote).toHaveBeenCalledOnce())
-      await expect(deleteNote).toHaveBeenCalledWith(2)
-    })
+export const DeleteNoteRemovesFromDBAndSidebar: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement)
+
+    await expect(
+      await db.note.findMany({ where: { id: 2 } }),
+      'Note with id 2 does exist',
+    ).toHaveLength(1)
+
+    await userEvent.click(
+      await canvas.findByRole('menuitem', { name: /delete/i }),
+    )
+    await waitForRedirect()
+
+    await expect(
+      await db.note.findMany({ where: { id: 2 } }),
+      'Note with id 2 does not exist anymore',
+    ).toHaveLength(0)
   },
 }

components/note-ui.stories.tsx

@@ -10,7 +10,7 @@ const meta = {
   component: NoteUI,
   async beforeEach() {
     cookies().set(userCookieKey, await createUserCookie('storybookjs'))
-  }
+  },
 } satisfies Meta<typeof NoteUI>
 
 export default meta
@@ -35,28 +35,32 @@ export const EditModeFlow: Story = {
   },
   play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement)
-    const titleInput = canvas.getByRole('textbox', { name: /title/i })
-    const bodyInput = canvas.getByRole('textbox', { name: /body/i })
-
-    await step('Clear inputs', async () => {
-      await userEvent.clear(titleInput)
-      await userEvent.clear(bodyInput)
-    })
-
-    await step('Edit inputs', async () => {
-      await fireEvent.change(titleInput, { target: { value: 'Edited Title' } })
-      await fireEvent.change(bodyInput, { target: { value: 'Edited Body' } })
-    })
+    const titleInput = await canvas.findByLabelText(
+      'Enter a title for your note',
+    )
+    const bodyInput = await canvas.findByLabelText(
+      'Enter the body for your note',
+    )
+    await userEvent.clear(titleInput)
+    await userEvent.type(titleInput, 'Edited Title')
+    await userEvent.clear(bodyInput)
+    await userEvent.type(bodyInput, 'Edited Body')
 
     await step('Save flow', async () => {
       const saveButton = await canvas.findByRole('menuitem', { name: /done/i })
       await userEvent.click(saveButton)
       await expect(saveNote).toHaveBeenCalledOnce()
-      await expect(saveNote).toHaveBeenCalledWith(1, 'Edited Title', 'Edited Body')
+      await expect(saveNote).toHaveBeenCalledWith(
+        1,
+        'Edited Title',
+        'Edited Body',
+      )
     })
 
     await step('Delete flow', async () => {
-      const deleteButton = await canvas.findByRole('menuitem', { name: /delete/i })
+      const deleteButton = await canvas.findByRole('menuitem', {
+        name: /delete/i,
+      })
       await userEvent.click(deleteButton)
       await expect(deleteNote).toHaveBeenCalledOnce()
       await expect(deleteNote).toHaveBeenCalledWith(1)