feat: add reading journal to book detail

Claude-Session: https://claude.ai/code/session_01M9MLit5Ko3X4s7rzC5Kv7X
2026-10-02 14:27:48 -05:00
parent 18bc74f8f9
commit 9e247b6f06
3 changed files with 261 additions and 0 deletions
@@ -0,0 +1,80 @@
+import { screen, within } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import type { Note } from '../api'
+import { dune, renderApp, signedIn } from '../test/helpers'
+
+const older: Note = {
+  id: 11,
+  book_id: 7,
+  body: 'Started reading',
+  created_at: '2026-10-01T10:00:00+00:00',
+  updated_at: '2026-10-01T10:00:00+00:00',
+}
+
+describe('NotesJournal', () => {
+  it('lists entries and adds a new one at the top', async () => {
+    const calls = signedIn({
+      'GET /api/books/7': () => [200, dune],
+      'GET /api/books/7/notes': () => [200, [older]],
+      'POST /api/books/7/notes': ({ body }) => [
+        201,
+        { ...older, id: 12, body: (body as { body: string }).body, created_at: '2026-10-02T10:00:00+00:00', updated_at: '2026-10-02T10:00:00+00:00' },
+      ],
+    })
+    const user = renderApp('/books/7')
+    expect(await screen.findByText('Started reading')).toBeInTheDocument()
+    await user.type(screen.getByLabelText('New journal entry'), 'Loved chapter 3')
+    await user.click(screen.getByRole('button', { name: 'Add entry' }))
+
+    await screen.findByText('Loved chapter 3')
+    const items = screen.getAllByRole('listitem')
+    expect(items[0]).toHaveTextContent('Loved chapter 3')
+    expect(items[1]).toHaveTextContent('Started reading')
+    expect(screen.getByLabelText('New journal entry')).toHaveValue('')
+    expect(calls).toContainEqual({ method: 'POST', path: '/api/books/7/notes', body: { body: 'Loved chapter 3' } })
+  })
+
+  it('edits an entry and marks it edited', async () => {
+    signedIn({
+      'GET /api/books/7': () => [200, dune],
+      'GET /api/books/7/notes': () => [200, [older]],
+      'PATCH /api/notes/11': ({ body }) => [
+        200,
+        { ...older, body: (body as { body: string }).body, updated_at: '2026-10-02T10:00:00+00:00' },
+      ],
+    })
+    const user = renderApp('/books/7')
+    const item = (await screen.findByText('Started reading')).closest('li')!
+    await user.click(within(item).getByRole('button', { name: 'Edit entry' }))
+    const editor = within(item).getByLabelText('Edit entry')
+    await user.clear(editor)
+    await user.type(editor, 'Finished part one')
+    await user.click(within(item).getByRole('button', { name: 'Save' }))
+
+    expect(await within(item).findByText('Finished part one')).toBeInTheDocument()
+    expect(within(item).getByText(/edited/)).toBeInTheDocument()
+  })
+
+  it('deletes an entry', async () => {
+    signedIn({
+      'GET /api/books/7': () => [200, dune],
+      'GET /api/books/7/notes': () => [200, [older]],
+      'DELETE /api/notes/11': () => [204],
+    })
+    const user = renderApp('/books/7')
+    await user.click(await screen.findByRole('button', { name: 'Delete entry' }))
+    expect(await screen.findByText('No entries yet.')).toBeInTheDocument()
+  })
+
+  it('shows the server error when adding fails', async () => {
+    signedIn({
+      'GET /api/books/7': () => [200, dune],
+      'GET /api/books/7/notes': () => [200, []],
+      'POST /api/books/7/notes': () => [400, { error: 'body must be at most 10000 characters', field: 'body' }],
+    })
+    const user = renderApp('/books/7')
+    await user.type(await screen.findByLabelText('New journal entry'), 'x')
+    await user.click(screen.getByRole('button', { name: 'Add entry' }))
+    expect(await screen.findByRole('alert')).toHaveTextContent('body must be at most 10000 characters')
+  })
+})