#155

frontend/src/components/ErrorScreen.test.tsx

@@ -0,0 +1,32 @@
+import { render, screen } from '@testing-library/react'
+import { HelmetProvider } from 'react-helmet-async'
+import { describe, expect, it } from 'vitest'
+
+import ErrorScreen from '@/components/ErrorScreen'
+
+describe ('ErrorScreen', () => {
+  it.each ([
+    [403, '権限ないよ（笑）'],
+    [404, 'ページないよ（笑）'],
+    [500, '鯖でエラー出たって（嘲笑）'],
+    [503, '鯖死んでるよ（泣）'],
+  ]) ('renders status %s', (status, message) => {
+    render (
+        <HelmetProvider>
+          <ErrorScreen status={status}/>
+        </HelmetProvider>,
+    )
+
+    expect (screen.getByText (String (status))).toBeInTheDocument ()
+    expect (screen.getByText (message)).toBeInTheDocument ()
+    expect (screen.getByAltText ('逃げたギター')).toBeInTheDocument ()
+  })
+
+  it ('throws for unsupported statuses', () => {
+    expect (() => render (
+        <HelmetProvider>
+          <ErrorScreen status={418}/>
+        </HelmetProvider>,
+    )).toThrow ()
+  })
+})

frontend/src/components/MenuSeparator.test.tsx

@@ -0,0 +1,13 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import MenuSeparator from '@/components/MenuSeparator'
+
+describe ('MenuSeparator', () => {
+  it ('renders desktop and mobile separators', () => {
+    render (<MenuSeparator/>)
+
+    expect (screen.getByText ('|')).toHaveClass ('md:inline')
+    expect (document.querySelector ('hr')).toHaveClass ('md:hidden')
+  })
+})

frontend/src/components/PostEditForm.test.tsx

@@ -0,0 +1,69 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import PostEditForm from '@/components/PostEditForm'
+import { buildPost, buildTag } from '@/test/factories'
+
+const postsApi = vi.hoisted (() => ({
+  updatePost: vi.fn (),
+}))
+
+const api = vi.hoisted (() => ({
+  isApiError: vi.fn (() => false),
+}))
+
+const toastApi = vi.hoisted (() => ({
+  toast: vi.fn (),
+}))
+
+vi.mock ('@/lib/posts', () => postsApi)
+vi.mock ('@/lib/api', () => api)
+vi.mock ('@/components/ui/use-toast', () => toastApi)
+vi.mock ('@/components/dialogues/DialogueProvider', () => ({
+  useDialogue: () => ({
+    choice: vi.fn (),
+  }),
+}))
+
+describe ('PostEditForm', () => {
+  it ('submits edited post fields with the current base version', async () => {
+    const onSave = vi.fn ()
+    const post = buildPost ({
+      id:        8,
+      versionNo: 4,
+      title:     'old',
+      tags:      [
+        buildTag ({ name: 'general-tag', category: 'general' }),
+        buildTag ({ id: 2, name: 'nico-tag', category: 'nico' }),
+      ],
+      parentPosts: [buildPost ({ id: 2, title: 'parent' })],
+    })
+    postsApi.updatePost.mockResolvedValueOnce ({
+      ...post,
+      versionNo: 5,
+      title:     'new',
+      tags:      [buildTag ({ name: 'new-tag' })],
+    })
+
+    render (<PostEditForm post={post} onSave={onSave}/>)
+
+    const [title, parentIds] = screen.getAllByRole ('textbox')
+    fireEvent.change (title, { target: { value: 'new' } })
+    fireEvent.change (parentIds, { target: { value: '3 4' } })
+    fireEvent.submit (screen.getByRole ('button', { name: '更新' }).closest ('form')!)
+
+    await waitFor (() => {
+      expect (postsApi.updatePost).toHaveBeenCalledWith (
+          expect.objectContaining ({
+            id:            8,
+            title:         'new',
+            parentPostIds: '3 4',
+            tags:          'general-tag',
+          }),
+          { baseVersionNo: 4 },
+      )
+    })
+    expect (onSave).toHaveBeenCalledWith (expect.objectContaining ({ versionNo: 5 }))
+    expect (toastApi.toast).toHaveBeenCalledWith ({ description: '更新しました．' })
+  })
+})

frontend/src/components/PostEmbed.test.tsx

@@ -0,0 +1,63 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import PostEmbed from '@/components/PostEmbed'
+import { buildPost } from '@/test/factories'
+
+const dialogue = vi.hoisted (() => ({
+  confirm: vi.fn (),
+}))
+
+vi.mock ('@/components/dialogues/DialogueProvider', () => ({
+  useDialogue: () => dialogue,
+}))
+
+vi.mock ('@/components/NicoViewer', () => ({
+  default: ({ id }: { id: string }) => <div>Nico:{id}</div>,
+}))
+
+vi.mock ('react-youtube', () => ({
+  default: ({ videoId }: { videoId: string }) => <div>YouTube:{videoId}</div>,
+}))
+
+describe ('PostEmbed', () => {
+  beforeEach (() => {
+    vi.clearAllMocks ()
+  })
+
+  it ('embeds nicovideo watch URLs', () => {
+    render (<PostEmbed post={buildPost ({ url: 'https://www.nicovideo.jp/watch/sm12345' })}/>)
+
+    expect (screen.getByText ('Nico:sm12345')).toBeInTheDocument ()
+  })
+
+  it ('embeds x/twitter status URLs', () => {
+    render (<PostEmbed post={buildPost ({ url: 'https://x.com/someone/status/12345' })}/>)
+
+    expect (screen.getByRole ('link', { name: '@someone' })).toBeInTheDocument ()
+  })
+
+  it ('embeds youtube watch URLs', () => {
+    render (<PostEmbed post={buildPost ({ url: 'https://www.youtube.com/watch?v=abc123' })}/>)
+
+    expect (screen.getByText ('YouTube:abc123')).toBeInTheDocument ()
+  })
+
+  it ('asks before framing unknown external pages', async () => {
+    dialogue.confirm.mockResolvedValueOnce (true)
+    render (
+        <PostEmbed
+            post={buildPost ({ url: 'https://example.com/page', title: 'external' })}/>,
+    )
+
+    fireEvent.click (screen.getByRole ('link', { name: '外部ページを表示' }))
+
+    await waitFor (() => {
+      expect (dialogue.confirm).toHaveBeenCalled ()
+    })
+    expect (await screen.findByTitle ('external')).toHaveAttribute (
+        'src',
+        'https://example.com/page',
+    )
+  })
+})

frontend/src/components/PostFormTagsArea.test.tsx

@@ -0,0 +1,34 @@
+import { fireEvent, screen, waitFor } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import PostFormTagsArea from '@/components/PostFormTagsArea'
+import { buildTag } from '@/test/factories'
+import { renderWithProviders } from '@/test/render'
+
+const api = vi.hoisted (() => ({
+  apiGet: vi.fn (),
+}))
+
+vi.mock ('@/lib/api', () => api)
+
+describe ('PostFormTagsArea', () => {
+  it ('updates text and fetches autocomplete for the selected token', async () => {
+    const setTags = vi.fn ()
+    api.apiGet.mockResolvedValueOnce ([buildTag ({ name: '虹夏', postCount: 3 })])
+
+    renderWithProviders (<PostFormTagsArea tags="虹" setTags={setTags}/>)
+
+    const textarea = screen.getByRole ('textbox')
+    fireEvent.focus (textarea)
+    fireEvent.select (textarea, { target: { selectionStart: 1, selectionEnd: 1 } })
+    fireEvent.change (textarea, { target: { value: '虹夏' } })
+
+    await waitFor (() => {
+      expect (api.apiGet).toHaveBeenCalledWith (
+          '/tags/autocomplete',
+          { params: { q: '虹', nico: '0' } },
+      )
+    })
+    expect (setTags).toHaveBeenCalledWith ('虹夏')
+  })
+})

frontend/src/components/PostList.test.tsx

@@ -0,0 +1,34 @@
+import { fireEvent, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import PostList from '@/components/PostList'
+import { buildPost } from '@/test/factories'
+import { renderWithProviders } from '@/test/render'
+
+describe ('PostList', () => {
+  it ('renders post thumbnails as links to post details', () => {
+    renderWithProviders (
+        <PostList posts={[
+          buildPost ({ id: 1, title: 'First', thumbnail: 'first.jpg' }),
+          buildPost ({ id: 2, title: null, url: 'https://example.com/second' }),
+        ]}/>,
+    )
+
+    expect (screen.getByRole ('link', { name: 'First' })).toHaveAttribute (
+        'href',
+        '/posts/1',
+    )
+    expect (
+        screen.getByRole ('link', { name: 'https://example.com/second' }),
+    ).toHaveAttribute ('href', '/posts/2')
+  })
+
+  it ('calls the optional click handler', () => {
+    const onClick = vi.fn ()
+    renderWithProviders (<PostList posts={[buildPost ()]} onClick={onClick}/>)
+
+    fireEvent.click (screen.getByRole ('link', { name: 'テスト投稿' }))
+
+    expect (onClick).toHaveBeenCalledTimes (1)
+  })
+})

frontend/src/components/PostOriginalCreatedTimeField.test.tsx

@@ -0,0 +1,63 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import PostOriginalCreatedTimeField from '@/components/PostOriginalCreatedTimeField'
+
+describe ('PostOriginalCreatedTimeField', () => {
+  it ('updates from and before values', () => {
+    const setFrom = vi.fn ()
+    const setBefore = vi.fn ()
+
+    render (
+        <PostOriginalCreatedTimeField
+            originalCreatedFrom={null}
+            setOriginalCreatedFrom={setFrom}
+            originalCreatedBefore={null}
+            setOriginalCreatedBefore={setBefore}/>,
+    )
+
+    const inputs = screen.getAllByDisplayValue ('')
+    fireEvent.change (inputs[0], { target: { value: '2026-01-02T03:04' } })
+    fireEvent.change (inputs[1], { target: { value: '2026-01-03T03:04' } })
+
+    expect (setFrom).toHaveBeenCalledWith (expect.any (String))
+    expect (setBefore).toHaveBeenCalledWith (expect.any (String))
+  })
+
+  it ('infers an exclusive before value on blur', () => {
+    const setBefore = vi.fn ()
+
+    render (
+        <PostOriginalCreatedTimeField
+            originalCreatedFrom={null}
+            setOriginalCreatedFrom={vi.fn ()}
+            originalCreatedBefore={null}
+            setOriginalCreatedBefore={setBefore}/>,
+    )
+
+    const input = screen.getAllByDisplayValue ('')[0]
+    fireEvent.blur (input, { target: { value: '2026-01-02T03:04' } })
+
+    expect (setBefore).toHaveBeenCalledWith (expect.any (String))
+  })
+
+  it ('resets both values', () => {
+    const setFrom = vi.fn ()
+    const setBefore = vi.fn ()
+
+    render (
+        <PostOriginalCreatedTimeField
+            originalCreatedFrom="2026-01-01T00:00:00Z"
+            setOriginalCreatedFrom={setFrom}
+            originalCreatedBefore="2026-01-02T00:00:00Z"
+            setOriginalCreatedBefore={setBefore}/>,
+    )
+
+    const buttons = screen.getAllByRole ('button', { name: 'リセット' })
+    fireEvent.click (buttons[0])
+    fireEvent.click (buttons[1])
+
+    expect (setFrom).toHaveBeenCalledWith (null)
+    expect (setBefore).toHaveBeenCalledWith (null)
+  })
+})

frontend/src/components/RouteBlockerOverlay.test.tsx

@@ -0,0 +1,30 @@
+import { render, screen } from '@testing-library/react'
+import { afterEach, describe, expect, it } from 'vitest'
+
+import RouteBlockerOverlay, { useOverlayStore } from '@/components/RouteBlockerOverlay'
+
+describe ('RouteBlockerOverlay', () => {
+  afterEach (() => {
+    useOverlayStore.setState ({ active: false })
+    document.body.style.overflow = ''
+    document.body.removeAttribute ('aria-busy')
+  })
+
+  it ('renders nothing while inactive', () => {
+    useOverlayStore.setState ({ active: false })
+
+    const { container } = render (<RouteBlockerOverlay/>)
+
+    expect (container).toBeEmptyDOMElement ()
+  })
+
+  it ('renders a blocking progressbar and marks the body busy while active', () => {
+    useOverlayStore.setState ({ active: true })
+
+    render (<RouteBlockerOverlay/>)
+
+    expect (screen.getByRole ('progressbar', { name: 'Loading' })).toBeInTheDocument ()
+    expect (document.body).toHaveAttribute ('aria-busy', 'true')
+    expect (document.body.style.overflow).toBe ('hidden')
+  })
+})

frontend/src/components/SortHeader.test.tsx

@@ -0,0 +1,39 @@
+import { screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import SortHeader from '@/components/SortHeader'
+import { renderWithProviders } from '@/test/render'
+
+describe ('SortHeader', () => {
+  it ('toggles the active sort direction and resets the page', () => {
+    renderWithProviders (
+        <SortHeader
+            by="title"
+            label="タイトル"
+            currentOrder="title:asc"
+            defaultDirection={{ title: 'asc' }}/>,
+        { route: '/posts?tags=x&page=4&order=title%3Aasc' },
+    )
+
+    expect (screen.getByRole ('link', { name: 'タイトル ▲' })).toHaveAttribute (
+        'href',
+        '/posts?tags=x&page=1&order=title%3Adesc',
+    )
+  })
+
+  it ('uses default direction for inactive fields', () => {
+    renderWithProviders (
+        <SortHeader
+            by="updated_at"
+            label="更新"
+            currentOrder="title:desc"
+            defaultDirection={{ title: 'asc', updated_at: 'desc' }}/>,
+        { route: '/posts?page=2' },
+    )
+
+    expect (screen.getByRole ('link', { name: '更新' })).toHaveAttribute (
+        'href',
+        '/posts?page=1&order=updated_at%3Adesc',
+    )
+  })
+})

frontend/src/components/TagLink.test.tsx

@@ -0,0 +1,45 @@
+import { screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import TagLink from '@/components/TagLink'
+import { buildTag } from '@/test/factories'
+import { renderWithProviders } from '@/test/render'
+
+describe ('TagLink', () => {
+  it ('links tag names to post search and shows counts', () => {
+    renderWithProviders (
+        <TagLink tag={buildTag ({ name: '虹 夏', postCount: 4 })}/>,
+    )
+
+    expect (screen.getByRole ('link', { name: '虹 夏' })).toHaveAttribute (
+        'href',
+        '/posts?tags=%E8%99%B9+%E5%A4%8F',
+    )
+    expect (screen.getByText ('4')).toBeInTheDocument ()
+  })
+
+  it ('links wiki markers to the correct detail route', () => {
+    renderWithProviders (
+        <TagLink tag={buildTag ({ hasWiki: true, name: 'a/b' })}/>,
+    )
+
+    expect (screen.getByRole ('link', { name: '?' })).toHaveAttribute (
+        'href',
+        '/wiki/a%2Fb',
+    )
+  })
+
+  it ('renders aliases and non-link tags when requested', () => {
+    renderWithProviders (
+        <TagLink
+            tag={buildTag ({ matchedAlias: '別名', name: '正式名' })}
+            linkFlg={false}
+            withWiki={false}
+            withCount={false}/>,
+    )
+
+    expect (screen.getByText ('別名')).toBeInTheDocument ()
+    expect (screen.getByText ('正式名')).toBeInTheDocument ()
+    expect (screen.queryByRole ('link')).not.toBeInTheDocument ()
+  })
+})

frontend/src/components/TagSearchBox.test.tsx

@@ -0,0 +1,30 @@
+import { fireEvent, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import TagSearchBox from '@/components/TagSearchBox'
+import { buildTag } from '@/test/factories'
+import { renderWithProviders } from '@/test/render'
+
+describe ('TagSearchBox', () => {
+  it ('renders suggestions and selects tags on mouse down', () => {
+    const handleSelect = vi.fn ()
+    const tag = buildTag ({ id: 9, name: '候補', postCount: 2 })
+
+    renderWithProviders (
+        <TagSearchBox suggestions={[tag]} activeIndex={0} onSelect={handleSelect}/>,
+    )
+
+    fireEvent.mouseDown (screen.getByText ('候補'))
+
+    expect (handleSelect).toHaveBeenCalledWith (tag)
+    expect (screen.getByText ('2')).toBeInTheDocument ()
+  })
+
+  it ('renders nothing when suggestions are empty', () => {
+    const { container } = renderWithProviders (
+        <TagSearchBox suggestions={[]} activeIndex={-1} onSelect={vi.fn ()}/>,
+    )
+
+    expect (container).toBeEmptyDOMElement ()
+  })
+})

frontend/src/components/TopNavUser.test.tsx

@@ -0,0 +1,29 @@
+import { screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import TopNavUser from '@/components/TopNavUser'
+import { buildUser } from '@/test/factories'
+import { renderWithProviders } from '@/test/render'
+
+describe ('TopNavUser', () => {
+  it ('renders nothing without a user', () => {
+    const { container } = renderWithProviders (<TopNavUser user={null}/>)
+
+    expect (container).toBeEmptyDOMElement ()
+  })
+
+  it ('links named users to settings', () => {
+    renderWithProviders (<TopNavUser user={buildUser ({ name: '山田' })}/>)
+
+    expect (screen.getByRole ('link', { name: '山田' })).toHaveAttribute (
+        'href',
+        '/users/settings',
+    )
+  })
+
+  it ('uses the anonymous display name', () => {
+    renderWithProviders (<TopNavUser user={buildUser ({ name: null })}/>)
+
+    expect (screen.getByRole ('link', { name: '名もなきニジラー' })).toBeInTheDocument ()
+  })
+})

frontend/src/components/TwitterEmbed.test.tsx

@@ -0,0 +1,19 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import TwitterEmbed from '@/components/TwitterEmbed'
+
+describe ('TwitterEmbed', () => {
+  it ('renders tweet and user links', () => {
+    render (<TwitterEmbed userId="user_name" statusId="12345"/>)
+
+    expect (screen.getByRole ('link', { name: '@user_name' })).toHaveAttribute (
+        'href',
+        'https://twitter.com/user_name?ref_src=twsrc%3Etfw',
+    )
+    expect (screen.getByRole ('link', { name: /\d/ })).toHaveAttribute (
+        'href',
+        'https://twitter.com/user_name/status/12345?ref_src=twsrc%5Etfw',
+    )
+  })
+})

frontend/src/components/common/DateTimeField.test.tsx

@@ -0,0 +1,27 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import DateTimeField from '@/components/common/DateTimeField'
+
+describe ('DateTimeField', () => {
+  it ('renders an ISO value as a datetime-local value', () => {
+    render (<DateTimeField aria-label="日時" value="2026-01-02T03:04:05.000Z"/>)
+
+    const input = screen.getByLabelText ('日時')
+
+    expect (input).toHaveValue ('2026-01-02T12:04')
+  })
+
+  it ('reports local changes as ISO strings and empty values as null', () => {
+    const handleChange = vi.fn ()
+    render (<DateTimeField aria-label="日時" onChange={handleChange}/>)
+
+    const input = screen.getByLabelText ('日時')
+    fireEvent.change (input, { target: { value: '2026-01-02T03:04' } })
+    fireEvent.change (input, { target: { value: '' } })
+
+    const first = handleChange.mock.calls[0]?.[0]
+    expect (new Date (first).getFullYear ()).toBe (2026)
+    expect (handleChange).toHaveBeenLastCalledWith (null)
+  })
+})

frontend/src/components/common/Label.test.tsx

@@ -0,0 +1,26 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import Label from '@/components/common/Label'
+
+describe ('Label', () => {
+  it ('renders a plain label', () => {
+    render (<Label>名前</Label>)
+
+    expect (screen.getByText ('名前')).toBeInTheDocument ()
+  })
+
+  it ('renders and toggles the optional checkbox', () => {
+    const handleChange = vi.fn ()
+
+    render (
+        <Label checkBox={{ label: '不明', checked: false, onChange: handleChange }}>
+          日時
+        </Label>,
+    )
+
+    fireEvent.click (screen.getByRole ('checkbox', { name: '不明' }))
+
+    expect (handleChange).toHaveBeenCalledTimes (1)
+  })
+})

frontend/src/components/common/Pagination.test.tsx

@@ -0,0 +1,38 @@
+import { screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import Pagination from '@/components/common/Pagination'
+import { renderWithProviders } from '@/test/render'
+
+describe ('Pagination', () => {
+  it ('builds page links while preserving existing query parameters', () => {
+    renderWithProviders (
+        <Pagination page={3} totalPages={5} siblingCount={1}/>,
+        { route: '/posts?tags=abc&page=3' },
+    )
+
+    expect (screen.getByLabelText ('前のページ')).toHaveAttribute (
+        'href',
+        '/posts?tags=abc&page=2',
+    )
+    expect (screen.getByLabelText ('次のページ')).toHaveAttribute (
+        'href',
+        '/posts?tags=abc&page=4',
+    )
+    expect (screen.getByText ('3')).toHaveAttribute ('aria-current', 'page')
+  })
+
+  it ('does not render active previous and next controls at the edges', () => {
+    const { rerender } = renderWithProviders (
+        <Pagination page={1} totalPages={1}/>,
+        { route: '/tags' },
+    )
+
+    expect (screen.queryByLabelText ('前のページ')).not.toBeInTheDocument ()
+    expect (screen.queryByLabelText ('次のページ')).not.toBeInTheDocument ()
+
+    rerender (<Pagination page={1} totalPages={2}/>)
+
+    expect (screen.getByLabelText ('次のページ')).toHaveAttribute ('href', '/tags?page=2')
+  })
+})

frontend/src/components/common/TabGroup.test.tsx

@@ -0,0 +1,23 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import TabGroup, { Tab } from '@/components/common/TabGroup'
+
+describe ('TabGroup', () => {
+  it ('uses the init tab and switches tabs when clicked', () => {
+    render (
+        <TabGroup>
+          <Tab name="A">Alpha</Tab>
+          <Tab name="B" init>Beta</Tab>
+        </TabGroup>,
+    )
+
+    expect (screen.queryByText ('Alpha')).not.toBeInTheDocument ()
+    expect (screen.getByText ('Beta')).toBeInTheDocument ()
+
+    fireEvent.click (screen.getByText ('A'))
+
+    expect (screen.getByText ('Alpha')).toBeInTheDocument ()
+    expect (screen.queryByText ('Beta')).not.toBeInTheDocument ()
+  })
+})

frontend/src/components/common/TagInput.test.tsx

@@ -0,0 +1,44 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import TagInput from '@/components/common/TagInput'
+import { buildTag } from '@/test/factories'
+
+const api = vi.hoisted (() => ({
+  apiGet: vi.fn (),
+}))
+
+vi.mock ('@/lib/api', () => api)
+
+describe ('TagInput', () => {
+  beforeEach (() => {
+    vi.clearAllMocks ()
+  })
+
+  it ('updates value and fetches autocomplete for the last token', async () => {
+    const setValue = vi.fn ()
+    api.apiGet.mockResolvedValueOnce ([buildTag ({ name: '虹夏', postCount: 2 })])
+
+    render (<TagInput value="ぼっち 虹" setValue={setValue}/>)
+
+    fireEvent.change (screen.getByRole ('textbox'), { target: { value: 'ぼっち 虹夏' } })
+
+    await waitFor (() => {
+      expect (api.apiGet).toHaveBeenCalledWith (
+          '/tags/autocomplete',
+          { params: { q: '虹夏' } },
+      )
+    })
+    expect (setValue).toHaveBeenCalledWith ('ぼっち 虹夏')
+  })
+
+  it ('does not fetch when the last token is blank', () => {
+    const setValue = vi.fn ()
+    render (<TagInput value="" setValue={setValue}/>)
+
+    fireEvent.change (screen.getByRole ('textbox'), { target: { value: ' ' } })
+
+    expect (api.apiGet).not.toHaveBeenCalled ()
+    expect (setValue).toHaveBeenCalledWith (' ')
+  })
+})

frontend/src/components/common/TypographyAndForm.test.tsx

@@ -0,0 +1,39 @@
+import { createRef } from 'react'
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import Form from '@/components/common/Form'
+import SectionTitle from '@/components/common/SectionTitle'
+import SubsectionTitle from '@/components/common/SubsectionTitle'
+import TextArea from '@/components/common/TextArea'
+
+describe ('common typography and form components', () => {
+  it ('renders Form children inside the standard container', () => {
+    render (<Form><span>Content</span></Form>)
+
+    expect (screen.getByText ('Content').parentElement).toHaveClass ('max-w-xl')
+  })
+
+  it ('renders SectionTitle as an h2 and merges custom classes', () => {
+    render (<SectionTitle className="custom">Section</SectionTitle>)
+
+    const heading = screen.getByRole ('heading', { level: 2, name: 'Section' })
+    expect (heading).toHaveClass ('text-xl')
+    expect (heading).toHaveClass ('custom')
+  })
+
+  it ('renders SubsectionTitle as an h3', () => {
+    render (<SubsectionTitle>Subsection</SubsectionTitle>)
+
+    expect (screen.getByRole ('heading', { level: 3, name: 'Subsection' })).toBeInTheDocument ()
+  })
+
+  it ('forwards refs and props to TextArea', () => {
+    const ref = createRef<HTMLTextAreaElement> ()
+
+    render (<TextArea ref={ref} aria-label="Body" defaultValue="text"/>)
+
+    expect (ref.current).toBe (screen.getByLabelText ('Body'))
+    expect (screen.getByLabelText ('Body')).toHaveValue ('text')
+  })
+})