feat(notes): add note editor

src/components/NoteEditor.test.tsx

@@ -0,0 +1,73 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import NoteEditor from './NoteEditor'
+import type { Note } from '../types'
+
+const note: Note = { id: 42, title: 'Courses', content: 'Lait\nOeufs' }
+
+const renderEditor = (overrides: Partial<Note> = {}) => {
+  const onUpdate = vi.fn()
+  render(<NoteEditor note={{ ...note, ...overrides }} onUpdate={onUpdate} />)
+  return { onUpdate }
+}
+
+describe('NoteEditor', () => {
+  it('displays the note title and content in read mode', () => {
+    renderEditor()
+
+    expect(screen.getByText('Courses')).toBeInTheDocument()
+    expect(screen.getByText('Lait Oeufs')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Éditer' })).toBeInTheDocument()
+  })
+
+  it('shows placeholders for a note without title or content', () => {
+    renderEditor({ title: '', content: '' })
+
+    expect(screen.getByText('Sans titre')).toBeInTheDocument()
+    expect(screen.getByText('Note vide')).toBeInTheDocument()
+  })
+
+  it('switches to edit mode with prefilled fields', () => {
+    renderEditor()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Éditer' }))
+
+    expect(screen.getByLabelText('Titre')).toHaveValue('Courses')
+    expect(screen.getByLabelText('Contenu')).toHaveValue('Lait\nOeufs')
+    expect(screen.getByRole('button', { name: 'Enregistrer' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Annuler' })).toBeInTheDocument()
+  })
+
+  it('saves edits and calls onUpdate with the updated values', () => {
+    const { onUpdate } = renderEditor()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Éditer' }))
+    fireEvent.change(screen.getByLabelText('Titre'), { target: { value: 'Liste de courses' } })
+    fireEvent.change(screen.getByLabelText('Contenu'), { target: { value: 'Pain' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Enregistrer' }))
+
+    expect(onUpdate).toHaveBeenCalledWith(42, { title: 'Liste de courses', content: 'Pain' })
+    expect(screen.getByRole('button', { name: 'Éditer' })).toBeInTheDocument()
+  })
+
+  it('saves when the form is submitted', () => {
+    const { onUpdate } = renderEditor()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Éditer' }))
+    const form = screen.getByLabelText('Titre').closest('form')!
+    fireEvent.submit(form)
+
+    expect(onUpdate).toHaveBeenCalledWith(42, { title: 'Courses', content: 'Lait\nOeufs' })
+  })
+
+  it('cancels editing without calling onUpdate', () => {
+    const { onUpdate } = renderEditor()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Éditer' }))
+    fireEvent.change(screen.getByLabelText('Titre'), { target: { value: 'Non sauvegardé' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Annuler' }))
+
+    expect(onUpdate).not.toHaveBeenCalled()
+    expect(screen.getByText('Courses')).toBeInTheDocument()
+  })
+})