feat(notes): require a title to create a note

src/components/NoteEditor.test.tsx

@@ -5,16 +5,30 @@ import type { Note } from '../types'
 
 const note: Note = { id: 42, title: 'Courses', content: 'Lait\nOeufs' }
 
-const renderEditor = (overrides: Partial<Note> = {}) => {
+const renderEdit = (overrides: Partial<Note> = {}) => {
   const onUpdate = vi.fn()
   const onDelete = vi.fn()
-  render(<NoteEditor note={{ ...note, ...overrides }} onUpdate={onUpdate} onDelete={onDelete} />)
+  render(
+    <NoteEditor
+      mode="edit"
+      note={{ ...note, ...overrides }}
+      onUpdate={onUpdate}
+      onDelete={onDelete}
+    />,
+  )
   return { onUpdate, onDelete }
 }
 
-describe('NoteEditor', () => {
+const renderCreate = () => {
+  const onCreate = vi.fn()
+  const onCancelCreate = vi.fn()
+  render(<NoteEditor mode="create" onCreate={onCreate} onCancelCreate={onCancelCreate} />)
+  return { onCreate, onCancelCreate }
+}
+
+describe('NoteEditor in edit mode', () => {
   it('displays the note title and content in read mode', () => {
-    renderEditor()
+    renderEdit()
 
     expect(screen.getByText('Courses')).toBeInTheDocument()
     expect(screen.getByText('Lait Oeufs')).toBeInTheDocument()
@@ -22,14 +36,14 @@ describe('NoteEditor', () => {
   })
 
   it('shows placeholders for a note without title or content', () => {
-    renderEditor({ title: '', content: '' })
+    renderEdit({ title: '', content: '' })
 
     expect(screen.getByText('Sans titre')).toBeInTheDocument()
     expect(screen.getByText('Note vide')).toBeInTheDocument()
   })
 
   it('switches to edit mode with prefilled fields', () => {
-    renderEditor()
+    renderEdit()
 
     fireEvent.click(screen.getByRole('button', { name: 'Éditer' }))
 
@@ -40,7 +54,7 @@ describe('NoteEditor', () => {
   })
 
   it('saves edits and calls onUpdate with the updated values', () => {
-    const { onUpdate } = renderEditor()
+    const { onUpdate } = renderEdit()
 
     fireEvent.click(screen.getByRole('button', { name: 'Éditer' }))
     fireEvent.change(screen.getByLabelText('Titre'), { target: { value: 'Liste de courses' } })
@@ -52,7 +66,7 @@ describe('NoteEditor', () => {
   })
 
   it('saves when the form is submitted', () => {
-    const { onUpdate } = renderEditor()
+    const { onUpdate } = renderEdit()
 
     fireEvent.click(screen.getByRole('button', { name: 'Éditer' }))
     const form = screen.getByLabelText('Titre').closest('form')!
@@ -61,8 +75,43 @@ describe('NoteEditor', () => {
     expect(onUpdate).toHaveBeenCalledWith(42, { title: 'Courses', content: 'Lait\nOeufs' })
   })
 
+  it('trims the title on save', () => {
+    const { onUpdate } = renderEdit()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Éditer' }))
+    fireEvent.change(screen.getByLabelText('Titre'), { target: { value: '  Courses  ' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Enregistrer' }))
+
+    expect(onUpdate).toHaveBeenCalledWith(42, { title: 'Courses', content: 'Lait\nOeufs' })
+  })
+
+  it('refuses saving when the title is empty', () => {
+    const { onUpdate } = renderEdit()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Éditer' }))
+    fireEvent.change(screen.getByLabelText('Titre'), { target: { value: '' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Enregistrer' }))
+
+    expect(onUpdate).not.toHaveBeenCalled()
+    expect(screen.getByText('Le titre est obligatoire.')).toBeInTheDocument()
+    expect(screen.getByLabelText('Titre')).toHaveAttribute('aria-invalid', 'true')
+  })
+
+  it('clears the title error once a title is typed', () => {
+    renderEdit()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Éditer' }))
+    fireEvent.change(screen.getByLabelText('Titre'), { target: { value: '' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Enregistrer' }))
+    expect(screen.getByText('Le titre est obligatoire.')).toBeInTheDocument()
+
+    fireEvent.change(screen.getByLabelText('Titre'), { target: { value: 'Rempli' } })
+
+    expect(screen.queryByText('Le titre est obligatoire.')).not.toBeInTheDocument()
+  })
+
   it('cancels editing without calling onUpdate', () => {
-    const { onUpdate } = renderEditor()
+    const { onUpdate } = renderEdit()
 
     fireEvent.click(screen.getByRole('button', { name: 'Éditer' }))
     fireEvent.change(screen.getByLabelText('Titre'), { target: { value: 'Non sauvegardé' } })
@@ -73,7 +122,7 @@ describe('NoteEditor', () => {
   })
 
   it('opens the delete confirmation when the × button is clicked', () => {
-    renderEditor()
+    renderEdit()
     expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
 
     fireEvent.click(screen.getByRole('button', { name: 'Supprimer la note' }))
@@ -82,7 +131,7 @@ describe('NoteEditor', () => {
   })
 
   it('deletes the note after confirmation', () => {
-    const { onDelete } = renderEditor()
+    const { onDelete } = renderEdit()
 
     fireEvent.click(screen.getByRole('button', { name: 'Supprimer la note' }))
     fireEvent.click(screen.getByRole('button', { name: 'Supprimer' }))
@@ -92,7 +141,7 @@ describe('NoteEditor', () => {
   })
 
   it('does not delete when the confirmation is cancelled', () => {
-    const { onDelete } = renderEditor()
+    const { onDelete } = renderEdit()
 
     fireEvent.click(screen.getByRole('button', { name: 'Supprimer la note' }))
     fireEvent.click(screen.getByRole('button', { name: 'Annuler' }))
@@ -101,3 +150,52 @@ describe('NoteEditor', () => {
     expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
   })
 })
+
+describe('NoteEditor in create mode', () => {
+  it('renders an empty form without read view or delete button', () => {
+    renderCreate()
+
+    expect(screen.getByLabelText('Titre')).toHaveValue('')
+    expect(screen.getByLabelText('Contenu')).toHaveValue('')
+    expect(screen.getByRole('button', { name: 'Enregistrer' })).toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'Éditer' })).not.toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'Supprimer la note' })).not.toBeInTheDocument()
+  })
+
+  it('creates the note with title and content on save', () => {
+    const { onCreate } = renderCreate()
+
+    fireEvent.change(screen.getByLabelText('Titre'), { target: { value: 'Courses' } })
+    fireEvent.change(screen.getByLabelText('Contenu'), { target: { value: 'Lait' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Enregistrer' }))
+
+    expect(onCreate).toHaveBeenCalledWith('Courses', 'Lait')
+  })
+
+  it('trims the title on create', () => {
+    const { onCreate } = renderCreate()
+
+    fireEvent.change(screen.getByLabelText('Titre'), { target: { value: '  Courses  ' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Enregistrer' }))
+
+    expect(onCreate).toHaveBeenCalledWith('Courses', '')
+  })
+
+  it('refuses creation when the title is empty', () => {
+    const { onCreate } = renderCreate()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Enregistrer' }))
+
+    expect(onCreate).not.toHaveBeenCalled()
+    expect(screen.getByText('Le titre est obligatoire.')).toBeInTheDocument()
+  })
+
+  it('cancels creation without creating the note', () => {
+    const { onCreate, onCancelCreate } = renderCreate()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Annuler' }))
+
+    expect(onCreate).not.toHaveBeenCalled()
+    expect(onCancelCreate).toHaveBeenCalled()
+  })
+})