Fix flaky test

storybookjs · May 15, 2024 · 9ed099a · 9ed099a
1 parent 38d635c
commit 9ed099a
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 49 deletions.
diff --git a/app/note/edit/[id]/page.stories.tsx b/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)
  },
 }
diff --git a/components/note-ui.stories.tsx b/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)