Fix bug saving a new note

app/actions.ts

@@ -23,11 +23,14 @@ export async function saveNote(
  createdBy: user,
  }
 
- await db.note.upsert({
- where: { id: noteId },
- update: payload,
- create: payload,
- })
+ if (!noteId) {
+ await db.note.create({ data: payload })
+ } else {
+ await db.note.update({
+ where: { id: noteId },
+ data: payload,
+ })
+ }
 
  redirect(`/note/${noteId}`)
 }

app/note/edit/page.stories.tsx

@@ -1,11 +1,11 @@
-import { expect, fireEvent, userEvent, 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 { saveNote, deleteNote } 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,
@@ -43,36 +43,33 @@ type Story = StoryObj<typeof meta>
 
 export const EditNewNote: Story = {}
 
-export const Save: Story = {
- name: 'Save New Flow ▶',
+const waitForRedirect = () =>
+ waitFor(() => expect(getRouter().push).toHaveBeenCalled())
+
+export const SaveNewNote: 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 userEvent.clear(titleInput)
+ await userEvent.type(titleInput, 'New Note Title')
+ await userEvent.type(bodyInput, 'New Note Body')
 
- await step('Clear inputs', async () => {
- await userEvent.clear(titleInput)
- await userEvent.clear(bodyInput)
- })
+ await userEvent.click(
+ await canvas.findByRole('menuitem', { name: /done/i }),
+ )
 
- await step('Edit inputs', async () => {
- await fireEvent.change(titleInput, {
- target: { value: 'New Note Title' },
- })
- await fireEvent.change(bodyInput, { target: { value: 'New Note Body' } })
- })
+ await waitForRedirect()
 
- await step('Save', async () => {
- const saveButton = canvas.getByRole('menuitem', { name: /done/i })
- await userEvent.click(saveButton)
- await expect(saveNote).toHaveBeenCalledOnce()
- await expect(saveNote).toHaveBeenCalledWith(
- undefined,
- 'New Note Title',
- 'New Note Body',
- )
- })
+ await expect(await db.note.findUnique({ where: { id: 3 } })).toEqual(
+ expect.objectContaining({
+ title: 'New Note Title',
+ body: 'New Note Body',
+ }),
+ )
  },
 }