#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')
+  })
+})

frontend/src/lib/api.test.ts

@@ -0,0 +1,96 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const mocks = vi.hoisted (() => {
+  const client = {
+    delete: vi.fn (),
+    get:    vi.fn (),
+    patch:  vi.fn (),
+    post:   vi.fn (),
+    put:    vi.fn (),
+  }
+
+  return {
+    client,
+    isAxiosError: vi.fn (),
+  }
+})
+
+vi.mock ('axios', () => ({
+  default: {
+    create:       vi.fn (() => mocks.client),
+    isAxiosError: mocks.isAxiosError,
+  },
+}))
+
+vi.mock ('@/config', () => ({
+  API_BASE_URL: '/api',
+}))
+
+describe ('api helpers', () => {
+  beforeEach (() => {
+    vi.clearAllMocks ()
+    localStorage.clear ()
+  })
+
+  it ('adds the transfer code header and camelizes get responses', async () => {
+    localStorage.setItem ('user_code', 'abc123')
+    mocks.client.get.mockResolvedValueOnce ({
+      data: { post_id: 1, nested_value: { created_at: 'now' } },
+    })
+
+    const { apiGet } = await import ('@/lib/api')
+    const data = await apiGet<{ postId: number; nestedValue: { createdAt: string } }> (
+        '/posts/1',
+        { headers: { 'X-Extra': '1' }, params: { page: 2 } },
+    )
+
+    expect (mocks.client.get).toHaveBeenCalledWith (
+        '/posts/1',
+        {
+          headers: { 'X-Transfer-Code': 'abc123', 'X-Extra': '1' },
+          params:  { page: 2 },
+        },
+    )
+    expect (data).toEqual ({ postId: 1, nestedValue: { createdAt: 'now' } })
+  })
+
+  it ('passes an empty body for post-like requests when body is omitted', async () => {
+    mocks.client.patch.mockResolvedValueOnce ({ data: { ok_value: true } })
+
+    const { apiPatch } = await import ('@/lib/api')
+    const data = await apiPatch<{ okValue: boolean }> ('/posts/1')
+
+    expect (mocks.client.patch).toHaveBeenCalledWith (
+        '/posts/1',
+        {},
+        { headers: { 'X-Transfer-Code': '' } },
+    )
+    expect (data.okValue).toBe (true)
+  })
+
+  it ('does not camelize blob responses', async () => {
+    const blob = new Blob (['csv'])
+    mocks.client.get.mockResolvedValueOnce ({ data: blob })
+
+    const { apiGet } = await import ('@/lib/api')
+    const data = await apiGet<Blob> ('/exports', { responseType: 'blob' })
+
+    expect (data).toBe (blob)
+  })
+
+  it ('delegates deletes and exposes axios error detection', async () => {
+    const err = new Error ('bad')
+    mocks.client.delete.mockResolvedValueOnce ({})
+    mocks.isAxiosError.mockReturnValueOnce (true)
+
+    const { apiDelete, isApiError } = await import ('@/lib/api')
+    await apiDelete ('/posts/1')
+
+    expect (mocks.client.delete).toHaveBeenCalledWith (
+        '/posts/1',
+        { headers: { 'X-Transfer-Code': '' } },
+    )
+    expect (isApiError (err)).toBe (true)
+    expect (mocks.isAxiosError).toHaveBeenCalledWith (err)
+  })
+})

frontend/src/lib/posts.test.ts

@@ -0,0 +1,117 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { fetchPostChanges, fetchPosts, toggleViewedFlg, updatePost } from '@/lib/posts'
+
+import type { FetchPostsParams } from '@/types'
+
+const api = vi.hoisted (() => ({
+  apiDelete: vi.fn (),
+  apiGet:    vi.fn (),
+  apiPost:   vi.fn (),
+  apiPut:    vi.fn (),
+}))
+
+vi.mock ('@/lib/api', () => api)
+
+const baseParams: FetchPostsParams = {
+  url:                 '',
+  title:               '',
+  tags:                '',
+  match:               'all',
+  originalCreatedFrom: '',
+  originalCreatedTo:   '',
+  createdFrom:         '',
+  createdTo:           '',
+  updatedFrom:         '',
+  updatedTo:           '',
+  page:                1,
+  limit:               20,
+  order:               'updated_at:desc',
+}
+
+describe ('posts API functions', () => {
+  beforeEach (() => {
+    vi.clearAllMocks ()
+  })
+
+  it ('maps post search parameters to backend snake_case names', async () => {
+    api.apiGet.mockResolvedValueOnce ({ posts: [], count: 0 })
+
+    await fetchPosts ({
+      ...baseParams,
+      title:               'title',
+      tags:                'a b',
+      originalCreatedFrom: '2026-01-01',
+      updatedTo:           '2026-02-01',
+    })
+
+    expect (api.apiGet).toHaveBeenCalledWith (
+        '/posts',
+        {
+          params: {
+            title:                 'title',
+            tags:                  'a b',
+            match:                 'all',
+            original_created_from: '2026-01-01',
+            updated_to:            '2026-02-01',
+            page:                  1,
+            limit:                 20,
+            order:                 'updated_at:desc',
+          },
+        },
+    )
+  })
+
+  it ('updates posts with version and merge controls', async () => {
+    api.apiPut.mockResolvedValueOnce ({ id: 5 })
+
+    await updatePost (
+        {
+          id:                    5,
+          title:                 'new title',
+          tags:                  'tag',
+          parentPostIds:         '1 2',
+          originalCreatedFrom:   null,
+          originalCreatedBefore: '2026-01-02T00:00:00Z',
+        },
+        { baseVersionNo: 7, force: true, merge: false },
+    )
+
+    expect (api.apiPut).toHaveBeenCalledWith (
+        '/posts/5',
+        {
+          title:                   'new title',
+          tags:                    'tag',
+          parent_post_ids:         '1 2',
+          original_created_from:   null,
+          original_created_before: '2026-01-02T00:00:00Z',
+        },
+        {
+          params: {
+            base_version_no: '7',
+            force:           '1',
+            merge:           '0',
+          },
+        },
+    )
+  })
+
+  it ('uses the viewed endpoint method matching the requested state', async () => {
+    await toggleViewedFlg ('9', true)
+    await toggleViewedFlg ('9', false)
+
+    expect (api.apiPost).toHaveBeenCalledWith ('/posts/9/viewed')
+    expect (api.apiDelete).toHaveBeenCalledWith ('/posts/9/viewed')
+  })
+
+  it ('keeps optional post history filters out when blank', async () => {
+    api.apiGet.mockResolvedValueOnce ({ versions: [], count: 0 })
+
+    await fetchPostChanges ({ page: 2, limit: 50 })
+
+    expect (api.apiGet).toHaveBeenCalledWith (
+        '/posts/versions',
+        { params: { page: 2, limit: 50 } },
+    )
+  })
+})

frontend/src/lib/prefetchers.test.ts

@@ -0,0 +1,112 @@
+import { QueryClient } from '@tanstack/react-query'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { prefetchForURL } from '@/lib/prefetchers'
+
+const postsApi = vi.hoisted (() => ({
+  fetchPost:        vi.fn (),
+  fetchPostChanges: vi.fn (),
+  fetchPosts:       vi.fn (),
+}))
+
+const tagsApi = vi.hoisted (() => ({
+  fetchTag:        vi.fn (),
+  fetchTagByName:  vi.fn (),
+  fetchTagChanges: vi.fn (),
+  fetchTags:       vi.fn (),
+}))
+
+const wikiApi = vi.hoisted (() => ({
+  fetchWikiPage:        vi.fn (),
+  fetchWikiPageByTitle: vi.fn (),
+  fetchWikiPages:       vi.fn (),
+}))
+
+vi.mock ('@/lib/posts', () => postsApi)
+vi.mock ('@/lib/tags', () => tagsApi)
+vi.mock ('@/lib/wiki', () => wikiApi)
+
+const qc = () => new QueryClient ({
+  defaultOptions: { queries: { retry: false } },
+})
+
+describe ('prefetchForURL', () => {
+  beforeEach (() => {
+    vi.clearAllMocks ()
+    postsApi.fetchPosts.mockResolvedValue ({ posts: [], count: 0 })
+    postsApi.fetchPost.mockResolvedValue ({ id: 1 })
+    postsApi.fetchPostChanges.mockResolvedValue ({ versions: [], count: 0 })
+    tagsApi.fetchTags.mockResolvedValue ({ tags: [], count: 0 })
+    tagsApi.fetchTag.mockResolvedValue ({ id: 1 })
+    tagsApi.fetchTagByName.mockResolvedValue (null)
+    tagsApi.fetchTagChanges.mockResolvedValue ({ versions: [], count: 0 })
+    wikiApi.fetchWikiPages.mockResolvedValue ([])
+    wikiApi.fetchWikiPage.mockResolvedValue ({ id: 1 })
+    wikiApi.fetchWikiPageByTitle.mockResolvedValue (null)
+  })
+
+  it ('prefetches post indexes from query parameters', async () => {
+    await prefetchForURL (
+        qc (),
+        'http://localhost/posts?tags=a+b&match=any&page=2&limit=5&order=title%3Aasc',
+    )
+
+    expect (postsApi.fetchPosts).toHaveBeenCalledWith (
+        expect.objectContaining ({
+          tags:  'a b',
+          match: 'any',
+          page:  2,
+          limit: 5,
+          order: 'title:asc',
+        }),
+    )
+  })
+
+  it ('prefetches post detail pages', async () => {
+    await prefetchForURL (qc (), 'http://localhost/posts/12')
+
+    expect (postsApi.fetchPost).toHaveBeenCalledWith ('12')
+  })
+
+  it ('prefetches tag indexes from query parameters', async () => {
+    await prefetchForURL (
+        qc (),
+        'http://localhost/tags?post=9&name=x&category=general&page=4&post_count_lte=10',
+    )
+
+    expect (tagsApi.fetchTags).toHaveBeenCalledWith (
+        expect.objectContaining ({
+          post:         9,
+          name:         'x',
+          category:     'general',
+          page:         4,
+          postCountLTE: 10,
+        }),
+    )
+  })
+
+  it ('prefetches wiki show pages and related tag/post data', async () => {
+    wikiApi.fetchWikiPageByTitle.mockResolvedValueOnce ({
+      id:    3,
+      title: 'Actual',
+      body:  'body',
+    })
+
+    await prefetchForURL (qc (), 'http://localhost/wiki/Alias')
+
+    expect (wikiApi.fetchWikiPageByTitle).toHaveBeenCalledWith ('Alias', { version: undefined })
+    expect (wikiApi.fetchWikiPage).toHaveBeenCalledWith ('3', {})
+    expect (tagsApi.fetchTagByName).toHaveBeenCalledWith ('Actual')
+    expect (postsApi.fetchPosts).toHaveBeenCalledWith (
+        expect.objectContaining ({ tags: 'Actual', limit: 8 }),
+    )
+  })
+
+  it ('ignores routes without a prefetcher', async () => {
+    await prefetchForURL (qc (), 'http://localhost/unknown')
+
+    expect (postsApi.fetchPosts).not.toHaveBeenCalled ()
+    expect (tagsApi.fetchTags).not.toHaveBeenCalled ()
+    expect (wikiApi.fetchWikiPages).not.toHaveBeenCalled ()
+  })
+})

frontend/src/lib/queryKeys.test.ts

@@ -0,0 +1,14 @@
+import { describe, expect, it } from 'vitest'
+
+import { postsKeys, tagsKeys, wikiKeys } from '@/lib/queryKeys'
+
+describe ('query keys', () => {
+  it ('uses stable namespaces for posts, tags, and wiki', () => {
+    expect (postsKeys.show ('3')).toEqual (['posts', '3'])
+    expect (postsKeys.related ('3')).toEqual (['related', '3'])
+    expect (tagsKeys.deerjikists ('7')).toEqual (['tags', 'deerjikists', '7'])
+    expect (wikiKeys.show ('Title', { version: '2' })).toEqual (
+        ['wiki', 'Title', { version: '2' }],
+    )
+  })
+})

frontend/src/lib/remark-wiki-autolink.test.ts

@@ -0,0 +1,68 @@
+import { describe, expect, it } from 'vitest'
+
+import remarkWikiAutolink from '@/lib/remark-wiki-autolink'
+
+import type { Root } from 'mdast'
+
+describe ('remarkWikiAutolink', () => {
+  it ('links matching wiki page names and prefers longer matches', () => {
+    const tree: Root = {
+      type:     'root',
+      children: [{
+        type:     'paragraph',
+        children: [{ type: 'text', value: '虹夏 and 虹' }],
+      }],
+    }
+
+    remarkWikiAutolink (['虹', '虹夏']) (tree)
+
+    expect (tree.children[0]).toMatchObject ({
+      type:     'paragraph',
+      children: [
+        {
+          type:     'link',
+          url:      '/wiki/%E8%99%B9%E5%A4%8F',
+          children: [{ type: 'text', value: '虹夏' }],
+        },
+        { type: 'text', value: ' and ' },
+        {
+          type:     'link',
+          url:      '/wiki/%E8%99%B9',
+          children: [{ type: 'text', value: '虹' }],
+        },
+      ],
+    })
+  })
+
+  it ('does not link text inside existing links or code', () => {
+    const tree: Root = {
+      type:     'root',
+      children: [
+        {
+          type:     'paragraph',
+          children: [{
+            type:     'link',
+            url:      '/existing',
+            children: [{ type: 'text', value: '虹' }],
+          }],
+        },
+        {
+          type:  'code',
+          value: '虹',
+        },
+      ],
+    }
+
+    remarkWikiAutolink (['虹']) (tree)
+
+    expect (tree.children[0]).toMatchObject ({
+      type:     'paragraph',
+      children: [{
+        type:     'link',
+        url:      '/existing',
+        children: [{ type: 'text', value: '虹' }],
+      }],
+    })
+    expect (tree.children[1]).toMatchObject ({ type: 'code', value: '虹' })
+  })
+})

frontend/src/lib/tags.test.ts

@@ -0,0 +1,67 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { fetchTag, fetchTagByName, fetchTags } from '@/lib/tags'
+
+import type { FetchTagsParams } from '@/types'
+
+const api = vi.hoisted (() => ({
+  apiGet: vi.fn (),
+}))
+
+vi.mock ('@/lib/api', () => api)
+
+const baseParams: FetchTagsParams = {
+  post:         null,
+  name:         '',
+  category:     null,
+  postCountGTE: 0,
+  postCountLTE: null,
+  createdFrom:  '',
+  createdTo:    '',
+  updatedFrom:  '',
+  updatedTo:    '',
+  page:         1,
+  limit:        30,
+  order:        'updated_at:desc',
+}
+
+describe ('tags API functions', () => {
+  beforeEach (() => {
+    vi.clearAllMocks ()
+  })
+
+  it ('maps tag filters to backend parameters', async () => {
+    api.apiGet.mockResolvedValueOnce ({ tags: [], count: 0 })
+
+    await fetchTags ({
+      ...baseParams,
+      name:         '虹',
+      category:     'character',
+      postCountGTE: 10,
+      postCountLTE: 20,
+    })
+
+    expect (api.apiGet).toHaveBeenCalledWith (
+        '/tags',
+        {
+          params: {
+            name:           '虹',
+            category:       'character',
+            post_count_gte: 10,
+            post_count_lte: 20,
+            page:           1,
+            limit:          30,
+            order:          'updated_at:desc',
+          },
+        },
+    )
+  })
+
+  it ('returns null when tag fetches fail', async () => {
+    api.apiGet.mockRejectedValueOnce (new Error ('missing'))
+    api.apiGet.mockRejectedValueOnce (new Error ('missing'))
+
+    await expect (fetchTag ('1')).resolves.toBeNull ()
+    await expect (fetchTagByName ('unknown')).resolves.toBeNull ()
+  })
+})

frontend/src/lib/utils.test.ts

@@ -0,0 +1,28 @@
+import { describe, expect, it } from 'vitest'
+
+import { cn, originalCreatedAtString, toDate } from '@/lib/utils'
+
+describe ('utils', () => {
+  it ('converts strings to dates and leaves date instances intact', () => {
+    const date = new Date ('2026-01-02T03:04:05Z')
+
+    expect (toDate ('2026-01-02T03:04:05Z')).toBeInstanceOf (Date)
+    expect (toDate (date)).toBe (date)
+  })
+
+  it ('merges conditional Tailwind classes', () => {
+    const hidden = false
+
+    expect (cn ('p-2', hidden && 'hidden', 'p-4')).toBe ('p-4')
+  })
+
+  it ('renders unknown original creation time ranges', () => {
+    expect (originalCreatedAtString (null, null)).toBe ('年月日不詳')
+    expect (
+        originalCreatedAtString (
+            '2026-01-01T00:00:00+09:00',
+            '2026-01-02T00:00:00+09:00',
+        ),
+    ).toContain ('時刻不詳')
+  })
+})

frontend/src/lib/wiki.test.ts

@@ -0,0 +1,48 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { fetchWikiPage, fetchWikiPageByTitle, fetchWikiPages } from '@/lib/wiki'
+
+const api = vi.hoisted (() => ({
+  apiGet: vi.fn (),
+}))
+
+vi.mock ('@/lib/api', () => api)
+
+describe ('wiki API functions', () => {
+  beforeEach (() => {
+    vi.clearAllMocks ()
+  })
+
+  it ('fetches wiki index and show pages with expected parameters', async () => {
+    api.apiGet.mockResolvedValueOnce ([])
+    api.apiGet.mockResolvedValueOnce ({ id: 1 })
+
+    await fetchWikiPages ({ title: '虹' })
+    await fetchWikiPage ('1', { version: '3' })
+
+    expect (api.apiGet).toHaveBeenNthCalledWith (
+        1,
+        '/wiki',
+        { params: { title: '虹' } },
+    )
+    expect (api.apiGet).toHaveBeenNthCalledWith (
+        2,
+        '/wiki/1',
+        { params: { version: '3' } },
+    )
+  })
+
+  it ('encodes title path segments and returns null on misses', async () => {
+    api.apiGet.mockResolvedValueOnce ({ id: 2 })
+    api.apiGet.mockRejectedValueOnce (new Error ('missing'))
+
+    await fetchWikiPageByTitle ('a/b c', { version: undefined })
+    await expect (fetchWikiPageByTitle ('missing', {})).resolves.toBeNull ()
+
+    expect (api.apiGet).toHaveBeenNthCalledWith (
+        1,
+        '/wiki/title/a%2Fb%20c',
+        { params: { version: undefined } },
+    )
+  })
+})

frontend/src/pages/materials/MaterialBasePage.test.tsx

@@ -0,0 +1,26 @@
+import { screen } from '@testing-library/react'
+import { Route, Routes } from 'react-router-dom'
+import { describe, expect, it, vi } from 'vitest'
+
+import MaterialBasePage from '@/pages/materials/MaterialBasePage'
+import { renderWithProviders } from '@/test/render'
+
+vi.mock ('@/components/MaterialSidebar', () => ({
+  default: () => <aside>Material sidebar</aside>,
+}))
+
+describe ('MaterialBasePage', () => {
+  it ('renders the material sidebar and nested route outlet', () => {
+    renderWithProviders (
+        <Routes>
+          <Route path="/materials" element={<MaterialBasePage/>}>
+            <Route index element={<div>Outlet content</div>}/>
+          </Route>
+        </Routes>,
+        { route: '/materials' },
+    )
+
+    expect (screen.getByText ('Material sidebar')).toBeInTheDocument ()
+    expect (screen.getByText ('Outlet content')).toBeInTheDocument ()
+  })
+})

frontend/src/pages/materials/MaterialDetailPage.test.tsx

@@ -0,0 +1,86 @@
+import { fireEvent, screen, waitFor } from '@testing-library/react'
+import { Route, Routes } from 'react-router-dom'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import MaterialDetailPage from '@/pages/materials/MaterialDetailPage'
+import { buildMaterial, buildTag } from '@/test/factories'
+import { renderWithProviders } from '@/test/render'
+
+const api = vi.hoisted (() => ({
+  apiGet: vi.fn (),
+  apiPut: vi.fn (),
+}))
+
+const wikiApi = vi.hoisted (() => ({
+  fetchWikiPages: vi.fn (),
+}))
+
+const toastApi = vi.hoisted (() => ({
+  toast: vi.fn (),
+}))
+
+vi.mock ('@/lib/api', () => api)
+vi.mock ('@/lib/wiki', () => wikiApi)
+vi.mock ('@/components/ui/use-toast', () => toastApi)
+
+const renderPage = () =>
+  renderWithProviders (
+      <Routes>
+        <Route path="/materials/:id" element={<MaterialDetailPage/>}/>
+      </Routes>,
+      { route: '/materials/8' },
+  )
+
+describe ('MaterialDetailPage', () => {
+  beforeEach (() => {
+    vi.clearAllMocks ()
+    api.apiGet.mockResolvedValue ([])
+    wikiApi.fetchWikiPages.mockResolvedValue ([])
+    vi.stubGlobal ('fetch', vi.fn (async () => ({
+      blob: async () => new Blob (['image'], { type: 'image/png' }),
+    })))
+  })
+
+  it ('loads and displays material detail', async () => {
+    api.apiGet.mockResolvedValueOnce (
+        buildMaterial ({
+          id:          8,
+          tag:         buildTag ({ name: '素材タグ' }),
+          file:        'image.png',
+          contentType: 'image/png',
+        }),
+    )
+
+    renderPage ()
+
+    await waitFor (() => {
+      expect (api.apiGet).toHaveBeenCalledWith ('/materials/8')
+    })
+    expect (await screen.findByAltText ('素材タグ')).toHaveAttribute ('src', 'image.png')
+  })
+
+  it ('submits edited material fields', async () => {
+    api.apiGet.mockResolvedValueOnce (
+        buildMaterial ({ id: 8, tag: buildTag ({ name: 'old' }), url: '' }),
+    )
+    api.apiPut.mockResolvedValueOnce (
+        buildMaterial ({ id: 8, tag: buildTag ({ name: 'new' }) }),
+    )
+
+    renderPage ()
+
+    fireEvent.click (await screen.findByText ('編輯'))
+    const textboxes = screen.getAllByRole ('textbox')
+    fireEvent.change (textboxes[0], { target: { value: 'new' } })
+    fireEvent.change (textboxes[1], { target: { value: 'https://example.com/ref' } })
+    fireEvent.click (screen.getByRole ('button', { name: '更新' }))
+
+    await waitFor (() => {
+      expect (api.apiPut).toHaveBeenCalledWith ('/materials/8', expect.any (FormData))
+    })
+    const formData = api.apiPut.mock.calls[0]?.[1] as FormData
+    expect (formData.get ('tag')).toBe ('new')
+    expect (formData.get ('url')).toBe ('https://example.com/ref')
+    expect (toastApi.toast).toHaveBeenCalledWith ({ title: '更新成功!' })
+  })
+})

frontend/src/pages/materials/MaterialListPage.test.tsx

@@ -0,0 +1,62 @@
+import { screen, waitFor } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import MaterialListPage from '@/pages/materials/MaterialListPage'
+import { buildMaterial, buildTag } from '@/test/factories'
+import { renderWithProviders } from '@/test/render'
+
+const api = vi.hoisted (() => ({
+  apiGet: vi.fn (),
+}))
+
+vi.mock ('@/lib/api', () => api)
+
+describe ('MaterialListPage', () => {
+  it ('shows the empty selection guide without a tag query', () => {
+    renderWithProviders (<MaterialListPage/>, { route: '/materials' })
+
+    expect (screen.getByText ('左のリストから照会したいタグを選択してください。')).toBeInTheDocument ()
+    expect (screen.getByRole ('link', { name: '素材を新規追加する' })).toHaveAttribute (
+        'href',
+        '/materials/new',
+    )
+  })
+
+  it ('loads materials for a tag query', async () => {
+    const tag = {
+      ...buildTag ({
+        id:       4,
+        name:     '素材タグ',
+        category: 'material',
+      }),
+      material: buildMaterial ({ id: 8, contentType: 'image/png', file: 'image.png' }),
+      children: [],
+    }
+    api.apiGet.mockResolvedValueOnce (tag)
+
+    renderWithProviders (<MaterialListPage/>, { route: '/materials?tag=%E7%B4%A0%E6%9D%90' })
+
+    await waitFor (() => {
+      expect (api.apiGet).toHaveBeenCalledWith (
+          '/tags/name/%E7%B4%A0%E6%9D%90/materials',
+      )
+    })
+    expect (await screen.findByRole ('link', { name: '素材タグ' })).toBeInTheDocument ()
+    expect (screen.getByRole ('link', { name: '' })).toHaveAttribute ('href', '/materials/8')
+  })
+
+  it ('offers adding a missing non-meme material', async () => {
+    api.apiGet.mockResolvedValueOnce ({
+      ...buildTag ({ name: '未登録', category: 'material' }),
+      material: null,
+      children: [],
+    })
+
+    renderWithProviders (<MaterialListPage/>, { route: '/materials?tag=x' })
+
+    expect (await screen.findByRole ('link', { name: '追加' })).toHaveAttribute (
+        'href',
+        '/materials/new?tag=%E6%9C%AA%E7%99%BB%E9%8C%B2',
+    )
+  })
+})

frontend/src/pages/materials/MaterialNewPage.test.tsx

@@ -0,0 +1,38 @@
+import { fireEvent, screen, waitFor } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import MaterialNewPage from '@/pages/materials/MaterialNewPage'
+import { renderWithProviders } from '@/test/render'
+
+const api = vi.hoisted (() => ({
+  apiPost: vi.fn (),
+}))
+
+const toastApi = vi.hoisted (() => ({
+  toast: vi.fn (),
+}))
+
+vi.mock ('@/lib/api', () => api)
+vi.mock ('@/components/ui/use-toast', () => toastApi)
+
+describe ('MaterialNewPage', () => {
+  it ('initializes tag from query and submits form data', async () => {
+    api.apiPost.mockResolvedValueOnce ({})
+
+    renderWithProviders (<MaterialNewPage/>, { route: '/materials/new?tag=%E8%99%B9%E5%A4%8F' })
+
+    expect (screen.getAllByRole ('textbox')[0]).toHaveValue ('虹夏')
+    fireEvent.change (screen.getAllByRole ('textbox')[1], {
+      target: { value: 'https://example.com/ref' },
+    })
+    fireEvent.click (screen.getByRole ('button', { name: '追加' }))
+
+    await waitFor (() => {
+      expect (api.apiPost).toHaveBeenCalledWith ('/materials', expect.any (FormData))
+    })
+    const formData = api.apiPost.mock.calls[0]?.[1] as FormData
+    expect (formData.get ('tag')).toBe ('虹夏')
+    expect (formData.get ('url')).toBe ('https://example.com/ref')
+    expect (toastApi.toast).toHaveBeenCalledWith ({ title: '送信成功!' })
+  })
+})

frontend/src/pages/posts/PostDetailPage.test.tsx

@@ -0,0 +1,109 @@
+import { fireEvent, screen, waitFor } from '@testing-library/react'
+import { Route, Routes } from 'react-router-dom'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import PostDetailPage from '@/pages/posts/PostDetailPage'
+import { buildPost, buildUser } from '@/test/factories'
+import { renderWithProviders } from '@/test/render'
+
+import type { ReactNode } from 'react'
+
+const postsApi = vi.hoisted (() => ({
+  fetchPost:       vi.fn (),
+  toggleViewedFlg: vi.fn (),
+}))
+
+const api = vi.hoisted (() => ({
+  isApiError: vi.fn (() => false),
+}))
+
+vi.mock ('@/lib/posts', () => postsApi)
+vi.mock ('@/lib/api', () => api)
+vi.mock ('@/components/PostEmbed', () => ({
+  default: ({ post }: { post: { url: string } }) => <div>Embed:{post.url}</div>,
+}))
+vi.mock ('@/components/TagDetailSidebar', () => ({
+  default: () => <aside>Tag sidebar</aside>,
+}))
+vi.mock ('@/components/PostEditForm', () => ({
+  default: () => <div>Post edit form</div>,
+}))
+vi.mock ('framer-motion', () => ({
+  motion: {
+    div: ({ children }: { children?: ReactNode }) => <div>{children}</div>,
+    main: ({ children }: { children?: ReactNode }) => <main>{children}</main>,
+  },
+}))
+
+const renderPage = (user = buildUser ({ role: 'member' })) =>
+  renderWithProviders (
+      <Routes>
+        <Route path="/posts/:id" element={<PostDetailPage user={user}/>}/>
+      </Routes>,
+      { route: '/posts/9' },
+  )
+
+describe ('PostDetailPage', () => {
+  beforeEach (() => {
+    vi.clearAllMocks ()
+    postsApi.toggleViewedFlg.mockResolvedValue (undefined)
+  })
+
+  it ('loads and displays a post detail', async () => {
+    postsApi.fetchPost.mockResolvedValue (
+        buildPost ({
+          id:            9,
+          url:           'https://example.com/9',
+          related:       [],
+          thumbnail:     null,
+          thumbnailBase: null,
+        }),
+    )
+
+    renderPage ()
+
+    await waitFor (() => {
+      expect (postsApi.fetchPost).toHaveBeenCalledWith ('9')
+    })
+    expect (await screen.findByText ('Embed:https://example.com/9')).toBeInTheDocument ()
+    expect (screen.getByRole ('button', { name: '未閲覧' })).toBeInTheDocument ()
+    expect (screen.getByText ('まだないよ（笑）')).toBeInTheDocument ()
+  })
+
+  it ('toggles viewed state through the mutation', async () => {
+    postsApi.fetchPost.mockResolvedValue (
+        buildPost ({ id: 9, viewed: false, thumbnail: null, thumbnailBase: null }),
+    )
+
+    renderPage ()
+
+    fireEvent.click (await screen.findByRole ('button', { name: '未閲覧' }))
+
+    await waitFor (() => {
+      expect (postsApi.toggleViewedFlg).toHaveBeenCalledWith ('9', true)
+    })
+  })
+
+  it ('shows the edit tab for members', async () => {
+    postsApi.fetchPost.mockResolvedValue (
+        buildPost ({ id: 9, thumbnail: null, thumbnailBase: null }),
+    )
+
+    renderPage (buildUser ({ role: 'member' }))
+
+    fireEvent.click (await screen.findByText ('編輯'))
+
+    expect (screen.getByText ('Post edit form')).toBeInTheDocument ()
+  })
+
+  it ('hides the edit tab for guests', async () => {
+    postsApi.fetchPost.mockResolvedValue (
+        buildPost ({ id: 9, thumbnail: null, thumbnailBase: null }),
+    )
+
+    renderPage (buildUser ({ role: 'guest' }))
+
+    expect (await screen.findByText ('関聯')).toBeInTheDocument ()
+    expect (screen.queryByText ('編輯')).not.toBeInTheDocument ()
+  })
+})

frontend/src/pages/posts/PostDetailPage.tsx

@@ -44,17 +44,15 @@ const PostDetailPage: FC<Props> = ({ user }) => {
   const [status, setStatus] = useState (200)
 
   const changeViewedFlg = useMutation ({
-      mutationFn: async () => {
-	const cur = qc.getQueryData<Post> (postKey)
-	const next = !(cur?.viewed)
+      mutationFn: async (next: boolean) => {
 	await toggleViewedFlg (postId, next)
 	return next
       },
-      onMutate: async () => {
+      onMutate: async (next: boolean) => {
 	await qc.cancelQueries ({ queryKey: postKey })
 	const prev = qc.getQueryData<Post> (postKey)
 	qc.setQueryData (postKey,
-			 (cur: Post | undefined) => cur ? { ...cur, viewed: !(cur.viewed) } : cur)
+			 (cur: Post | undefined) => cur ? { ...cur, viewed: next } : cur)
 	return { prev }
       },
       onError: (...[, , ctx]) => {
@@ -155,7 +153,7 @@ const PostDetailPage: FC<Props> = ({ user }) => {
 		    ref={embedRef}
 		    post={post}
 		    onLoadComplete={() => embedRef.current?.play ()}/>
-		<Button onClick={() => changeViewedFlg.mutate ()}
+		<Button onClick={() => changeViewedFlg.mutate (!(post.viewed))}
 			disabled={changeViewedFlg.isPending}
 			className={cn ('text-white', viewedClass)}>
 		  {post.viewed ? '閲覧済' : '未閲覧'}

frontend/src/pages/posts/PostListPage.test.tsx

@@ -0,0 +1,74 @@
+import { fireEvent, screen, waitFor } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import PostListPage from '@/pages/posts/PostListPage'
+import { buildPost, buildTag, buildWikiPage } from '@/test/factories'
+import { renderWithProviders } from '@/test/render'
+
+const postsApi = vi.hoisted (() => ({
+  fetchPosts: vi.fn (),
+}))
+
+const wikiApi = vi.hoisted (() => ({
+  fetchWikiPageByTitle: vi.fn (),
+  fetchWikiPages:       vi.fn (),
+}))
+
+vi.mock ('@/lib/posts', () => postsApi)
+vi.mock ('@/lib/wiki', () => wikiApi)
+
+describe ('PostListPage', () => {
+  it ('loads posts from the current query and renders the plaza tab', async () => {
+    const tag = buildTag ({ name: '虹夏' })
+    postsApi.fetchPosts.mockResolvedValueOnce ({
+      posts: [buildPost ({ id: 5, title: '投稿5', tags: [tag] })],
+      count: 1,
+    })
+    wikiApi.fetchWikiPageByTitle.mockResolvedValueOnce (buildWikiPage ({ title: '虹夏' }))
+    wikiApi.fetchWikiPages.mockResolvedValueOnce ([buildWikiPage ({ title: '虹夏' })])
+
+    renderWithProviders (<PostListPage/>, { route: '/posts?tags=%E8%99%B9%E5%A4%8F&page=2' })
+
+    await waitFor (() => {
+      expect (postsApi.fetchPosts).toHaveBeenCalledWith (
+          expect.objectContaining ({
+            tags:  '虹夏',
+            match: 'all',
+            page:  2,
+            limit: 20,
+          }),
+      )
+    })
+    expect (await screen.findByRole ('link', { name: '投稿5' })).toHaveAttribute (
+        'href',
+        '/posts/5',
+    )
+    expect (screen.getByText ('広場')).toBeInTheDocument ()
+  })
+
+  it ('shows the empty state when loading finishes without posts', async () => {
+    postsApi.fetchPosts.mockResolvedValueOnce ({ posts: [], count: 0 })
+
+    renderWithProviders (<PostListPage/>, { route: '/posts' })
+
+    expect (await screen.findByText ('広場には何もありませんよ．')).toBeInTheDocument ()
+  })
+
+  it ('renders the wiki tab for single-tag pages', async () => {
+    postsApi.fetchPosts.mockResolvedValueOnce ({ posts: [], count: 0 })
+    wikiApi.fetchWikiPageByTitle.mockResolvedValueOnce (
+        buildWikiPage ({ title: '虹夏', body: 'Wiki body' }),
+    )
+    wikiApi.fetchWikiPages.mockResolvedValueOnce ([buildWikiPage ({ title: '虹夏' })])
+
+    renderWithProviders (<PostListPage/>, { route: '/posts?tags=%E8%99%B9%E5%A4%8F' })
+
+    fireEvent.click (await screen.findByText ('Wiki'))
+
+    expect (await screen.findByText ('Wiki body')).toBeInTheDocument ()
+    expect (screen.getByRole ('link', { name: 'Wiki を見る' })).toHaveAttribute (
+        'href',
+        '/wiki/%E8%99%B9%E5%A4%8F',
+    )
+  })
+})

frontend/src/pages/posts/PostNewPage.test.tsx

@@ -0,0 +1,58 @@
+import { fireEvent, screen, waitFor } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import PostNewPage from '@/pages/posts/PostNewPage'
+import { buildUser } from '@/test/factories'
+import { renderWithProviders } from '@/test/render'
+
+const api = vi.hoisted (() => ({
+  apiGet:  vi.fn (),
+  apiPost: vi.fn (),
+}))
+
+const toastApi = vi.hoisted (() => ({
+  toast: vi.fn (),
+}))
+
+vi.mock ('@/lib/api', () => api)
+vi.mock ('@/components/ui/use-toast', () => toastApi)
+
+describe ('PostNewPage', () => {
+  it ('blocks guests', () => {
+    renderWithProviders (<PostNewPage user={buildUser ({ role: 'guest' })}/>)
+
+    expect (screen.getByText ('403')).toBeInTheDocument ()
+  })
+
+  it ('submits a new post with manual title and thumbnail settings', async () => {
+    api.apiPost.mockResolvedValueOnce ({})
+    api.apiGet.mockResolvedValue ([])
+
+    renderWithProviders (<PostNewPage user={buildUser ({ role: 'member' })}/>)
+
+    const checkboxes = screen.getAllByRole ('checkbox', { name: '自動' })
+    fireEvent.click (checkboxes[0])
+    fireEvent.click (checkboxes[1])
+
+    const textboxes = screen.getAllByRole ('textbox')
+    fireEvent.change (textboxes[0], { target: { value: 'https://example.com/post' } })
+    fireEvent.change (textboxes[1], { target: { value: '投稿タイトル' } })
+    fireEvent.change (textboxes[2], { target: { value: '1 2' } })
+    fireEvent.change (textboxes[3], { target: { value: 'tag1 tag2' } })
+    fireEvent.click (screen.getByRole ('button', { name: '追加' }))
+
+    await waitFor (() => {
+      expect (api.apiPost).toHaveBeenCalledWith (
+          '/posts',
+          expect.any (FormData),
+          { headers: { 'Content-Type': 'multipart/form-data' } },
+      )
+    })
+    const formData = api.apiPost.mock.calls[0]?.[1] as FormData
+    expect (formData.get ('url')).toBe ('https://example.com/post')
+    expect (formData.get ('title')).toBe ('投稿タイトル')
+    expect (formData.get ('parent_post_ids')).toBe ('1 2')
+    expect (formData.get ('tags')).toBe ('tag1 tag2')
+    expect (toastApi.toast).toHaveBeenCalledWith ({ title: '投稿成功!' })
+  })
+})

frontend/src/pages/posts/PostSearchPage.test.tsx

@@ -0,0 +1,84 @@
+import { fireEvent, screen, waitFor } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import PostSearchPage from '@/pages/posts/PostSearchPage'
+import { buildPost, buildTag } from '@/test/factories'
+import { renderWithProviders } from '@/test/render'
+
+const postsApi = vi.hoisted (() => ({
+  fetchPosts: vi.fn (),
+}))
+
+const api = vi.hoisted (() => ({
+  apiGet: vi.fn (),
+}))
+
+vi.mock ('@/lib/posts', () => postsApi)
+vi.mock ('@/lib/api', () => api)
+
+describe ('PostSearchPage', () => {
+  beforeEach (() => {
+    vi.clearAllMocks ()
+    api.apiGet.mockResolvedValue ([])
+  })
+
+  it ('loads posts from URL search filters', async () => {
+    postsApi.fetchPosts.mockResolvedValueOnce ({
+      posts: [buildPost ({ id: 4, title: '検索対象', tags: [buildTag ({ name: '虹夏' })] })],
+      count: 1,
+    })
+
+    renderWithProviders (
+        <PostSearchPage/>,
+        { route: '/posts/search?title=%E6%A4%9C%E7%B4%A2&tags=x&match=any&page=2' },
+    )
+
+    await waitFor (() => {
+      expect (postsApi.fetchPosts).toHaveBeenCalledWith (
+          expect.objectContaining ({
+            title: '検索',
+            tags:  'x',
+            match: 'any',
+            page:  2,
+          }),
+      )
+    })
+    expect ((await screen.findAllByRole ('link', { name: '検索対象' }))[0]).toHaveAttribute (
+        'href',
+        '/posts/4',
+    )
+  })
+
+  it ('submits form state into a new search', async () => {
+    postsApi.fetchPosts.mockResolvedValue ({ posts: [], count: 0 })
+
+    renderWithProviders (<PostSearchPage/>, { route: '/posts/search' })
+
+    const textboxes = screen.getAllByRole ('textbox')
+    fireEvent.change (textboxes[0], { target: { value: 'title' } })
+    fireEvent.change (textboxes[1], { target: { value: 'https://example.com' } })
+    fireEvent.change (textboxes[2], { target: { value: 'tag' } })
+    fireEvent.click (screen.getByRole ('radio', { name: 'OR' }))
+    fireEvent.click (screen.getByRole ('button', { name: '検索' }))
+
+    await waitFor (() => {
+      expect (postsApi.fetchPosts).toHaveBeenLastCalledWith (
+          expect.objectContaining ({
+            title: 'title',
+            url:   'https://example.com',
+            tags:  'tag',
+            match: 'any',
+            page:  1,
+          }),
+      )
+    })
+  })
+
+  it ('shows the no-result message', async () => {
+    postsApi.fetchPosts.mockResolvedValueOnce ({ posts: [], count: 0 })
+
+    renderWithProviders (<PostSearchPage/>, { route: '/posts/search' })
+
+    expect (await screen.findByText ('結果ないよ（笑）')).toBeInTheDocument ()
+  })
+})

frontend/src/pages/tags/TagDetailPage.test.tsx

@@ -0,0 +1,71 @@
+import { fireEvent, screen, waitFor } from '@testing-library/react'
+import { Route, Routes } from 'react-router-dom'
+import { describe, expect, it, vi } from 'vitest'
+
+import TagDetailPage from '@/pages/tags/TagDetailPage'
+import { buildTag } from '@/test/factories'
+import { renderWithProviders } from '@/test/render'
+
+const tagsApi = vi.hoisted (() => ({
+  fetchTag: vi.fn (),
+}))
+
+const api = vi.hoisted (() => ({
+  apiPut: vi.fn (),
+}))
+
+const toastApi = vi.hoisted (() => ({
+  toast: vi.fn (),
+}))
+
+vi.mock ('@/lib/tags', () => tagsApi)
+vi.mock ('@/lib/api', () => api)
+vi.mock ('@/components/ui/use-toast', () => toastApi)
+
+const renderPage = () =>
+  renderWithProviders (
+      <Routes>
+        <Route path="/tags/:id" element={<TagDetailPage/>}/>
+      </Routes>,
+      { route: '/tags/7' },
+  )
+
+describe ('TagDetailPage', () => {
+  it ('loads and displays an editable tag', async () => {
+    tagsApi.fetchTag.mockResolvedValueOnce (
+        buildTag ({ id: 7, name: '虹夏', category: 'character', aliases: ['drums'] }),
+    )
+
+    renderPage ()
+
+    expect (await screen.findByDisplayValue ('虹夏')).toBeInTheDocument ()
+    expect (screen.getByRole ('combobox')).toHaveValue ('character')
+    expect (screen.getByDisplayValue ('drums')).toBeInTheDocument ()
+  })
+
+  it ('submits edited tag fields', async () => {
+    tagsApi.fetchTag.mockResolvedValueOnce (buildTag ({ id: 7, name: 'old' }))
+    api.apiPut.mockResolvedValueOnce (buildTag ({ id: 7, name: 'new', aliases: ['alias'] }))
+
+    renderPage ()
+
+    const name = await screen.findByDisplayValue ('old')
+    fireEvent.change (name, { target: { value: 'new' } })
+    fireEvent.submit (screen.getByRole ('button', { name: '更新' }).closest ('form')!)
+
+    await waitFor (() => {
+      expect (api.apiPut).toHaveBeenCalledWith ('/tags/7', expect.any (FormData))
+    })
+    const formData = api.apiPut.mock.calls[0]?.[1] as FormData
+    expect (formData.get ('name')).toBe ('new')
+    expect (toastApi.toast).toHaveBeenCalledWith ({ description: '更新しました．' })
+  })
+
+  it ('keeps nico tags disabled', async () => {
+    tagsApi.fetchTag.mockResolvedValueOnce (buildTag ({ category: 'nico' }))
+
+    renderPage ()
+
+    expect (await screen.findByRole ('button', { name: '更新' })).toBeDisabled ()
+  })
+})

frontend/src/pages/tags/TagListPage.test.tsx

@@ -0,0 +1,71 @@
+import { fireEvent, screen, waitFor } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import TagListPage from '@/pages/tags/TagListPage'
+import { buildTag } from '@/test/factories'
+import { renderWithProviders } from '@/test/render'
+
+const tagsApi = vi.hoisted (() => ({
+  fetchTags: vi.fn (),
+}))
+
+vi.mock ('@/lib/tags', () => tagsApi)
+
+describe ('TagListPage', () => {
+  it ('loads tags from URL filters and renders the results table', async () => {
+    tagsApi.fetchTags.mockResolvedValueOnce ({
+      tags: [buildTag ({ id: 7, name: '虹夏', category: 'character', postCount: 99 })],
+      count: 1,
+    })
+
+    renderWithProviders (
+        <TagListPage/>,
+        { route: '/tags?name=%E8%99%B9&category=character&page=3&post_count_gte=5' },
+    )
+
+    await waitFor (() => {
+      expect (tagsApi.fetchTags).toHaveBeenCalledWith (
+          expect.objectContaining ({
+            name:         '虹',
+            category:     'character',
+            page:         3,
+            postCountGTE: 5,
+          }),
+      )
+    })
+    expect (await screen.findByRole ('link', { name: '虹夏' })).toHaveAttribute (
+        'href',
+        '/tags/7',
+    )
+    expect (screen.getAllByText ('キャラクター').length).toBeGreaterThan (0)
+  })
+
+  it ('navigates to a normalized search URL on submit', async () => {
+    tagsApi.fetchTags.mockResolvedValue ({ tags: [], count: 0 })
+
+    renderWithProviders (<TagListPage/>, { route: '/tags' })
+
+    fireEvent.change (screen.getByRole ('textbox'), { target: { value: '虹夏' } })
+    fireEvent.change (screen.getByRole ('combobox'), { target: { value: 'character' } })
+    fireEvent.submit (screen.getByRole ('button', { name: '検索' }).closest ('form')!)
+
+    await waitFor (() => {
+      expect (tagsApi.fetchTags).toHaveBeenLastCalledWith (
+          expect.objectContaining ({
+            name:     '虹夏',
+            category: 'character',
+            page:     1,
+          }),
+      )
+    })
+    expect (screen.getByRole ('textbox')).toHaveValue ('虹夏')
+  })
+
+  it ('shows the no-result message', async () => {
+    tagsApi.fetchTags.mockResolvedValueOnce ({ tags: [], count: 0 })
+
+    renderWithProviders (<TagListPage/>, { route: '/tags' })
+
+    expect (await screen.findByText ('結果ないよ（笑）')).toBeInTheDocument ()
+  })
+})

frontend/src/pages/users/SettingPage.test.tsx

@@ -0,0 +1,54 @@
+import { fireEvent, screen, waitFor } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import SettingPage from '@/pages/users/SettingPage'
+import { buildUser } from '@/test/factories'
+import { renderWithProviders } from '@/test/render'
+
+const api = vi.hoisted (() => ({
+  apiPut: vi.fn (),
+}))
+
+const toastApi = vi.hoisted (() => ({
+  toast: vi.fn (),
+}))
+
+vi.mock ('@/lib/api', () => api)
+vi.mock ('@/components/ui/use-toast', () => toastApi)
+vi.mock ('@/components/users/UserCodeDialogue', () => ({
+  default: () => null,
+}))
+vi.mock ('@/components/users/InheritDialogue', () => ({
+  default: () => null,
+}))
+
+describe ('SettingPage', () => {
+  it ('shows loading when user is absent', () => {
+    renderWithProviders (<SettingPage user={null} setUser={vi.fn ()}/>)
+
+    expect (screen.getByText ('Loading...')).toBeInTheDocument ()
+  })
+
+  it ('updates the current user name', async () => {
+    const user = buildUser ({ id: 11, name: 'old' })
+    const setUser = vi.fn ()
+    api.apiPut.mockResolvedValueOnce ({ ...user, name: 'new' })
+
+    renderWithProviders (<SettingPage user={user} setUser={setUser}/>)
+
+    fireEvent.change (screen.getByRole ('textbox'), { target: { value: 'new' } })
+    fireEvent.click (screen.getByRole ('button', { name: '更新' }))
+
+    await waitFor (() => {
+      expect (api.apiPut).toHaveBeenCalledWith (
+          '/users/11',
+          expect.any (FormData),
+          { headers: { 'Content-Type': 'multipart/form-data' } },
+      )
+    })
+    const formData = api.apiPut.mock.calls[0]?.[1] as FormData
+    expect (formData.get ('name')).toBe ('new')
+    expect (setUser).toHaveBeenCalled ()
+    expect (toastApi.toast).toHaveBeenCalledWith ({ title: '設定を更新しました．' })
+  })
+})

frontend/src/pages/wiki/WikiDiffPage.test.tsx

@@ -0,0 +1,45 @@
+import { screen, waitFor } from '@testing-library/react'
+import { Route, Routes } from 'react-router-dom'
+import { describe, expect, it, vi } from 'vitest'
+
+import WikiDiffPage from '@/pages/wiki/WikiDiffPage'
+import { renderWithProviders } from '@/test/render'
+
+const api = vi.hoisted (() => ({
+  apiGet: vi.fn (),
+}))
+
+vi.mock ('@/lib/api', () => api)
+
+describe ('WikiDiffPage', () => {
+  it ('fetches and renders wiki diff lines', async () => {
+    api.apiGet.mockResolvedValueOnce ({
+      wikiPageId:      3,
+      title:           '差分対象',
+      olderRevisionId: 1,
+      newerRevisionId: 2,
+      diff: [
+        { type: 'context', content: 'same' },
+        { type: 'added', content: 'added line' },
+        { type: 'removed', content: 'removed line' },
+      ],
+    })
+
+    renderWithProviders (
+        <Routes>
+          <Route path="/wiki/:id/diff" element={<WikiDiffPage/>}/>
+        </Routes>,
+        { route: '/wiki/3/diff?from=1&to=2' },
+    )
+
+    await waitFor (() => {
+      expect (api.apiGet).toHaveBeenCalledWith (
+          '/wiki/3/diff',
+          { params: { from: '1', to: '2' } },
+      )
+    })
+    expect (screen.getByText ('差分対象')).toBeInTheDocument ()
+    expect (screen.getByText ('added line')).toHaveClass ('bg-green-200')
+    expect (screen.getByText ('removed line')).toHaveClass ('bg-red-200')
+  })
+})

frontend/src/pages/wiki/WikiEditPage.test.tsx

@@ -0,0 +1,82 @@
+import { fireEvent, screen, waitFor } from '@testing-library/react'
+import { Route, Routes } from 'react-router-dom'
+import { describe, expect, it, vi } from 'vitest'
+
+import WikiEditPage from '@/pages/wiki/WikiEditPage'
+import { buildUser, buildWikiPage } from '@/test/factories'
+import { renderWithProviders } from '@/test/render'
+
+const api = vi.hoisted (() => ({
+  apiGet: vi.fn (),
+  apiPut: vi.fn (),
+}))
+
+const toastApi = vi.hoisted (() => ({
+  toast: vi.fn (),
+}))
+
+vi.mock ('@/lib/api', () => api)
+vi.mock ('@/components/ui/use-toast', () => toastApi)
+vi.mock ('react-markdown-editor-lite', () => ({
+  default: ({ value, onChange }: {
+    value:    string
+    onChange: (event: { text: string }) => void
+  }) => (
+      <textarea
+          aria-label="本文エディタ"
+          value={value}
+          onChange={ev => onChange ({ text: ev.target.value })}/>
+  ),
+}))
+
+const renderPage = (user = buildUser ({ role: 'member' })) =>
+  renderWithProviders (
+      <Routes>
+        <Route path="/wiki/:id/edit" element={<WikiEditPage user={user}/>}/>
+      </Routes>,
+      { route: '/wiki/9/edit' },
+  )
+
+describe ('WikiEditPage', () => {
+  it ('blocks guests', () => {
+    renderPage (buildUser ({ role: 'guest' }))
+
+    expect (screen.getByText ('403')).toBeInTheDocument ()
+  })
+
+  it ('loads the target page for editing', async () => {
+    api.apiGet.mockResolvedValueOnce (buildWikiPage ({ title: '既存', body: '本文' }))
+
+    renderPage ()
+
+    await waitFor (() => {
+      expect (api.apiGet).toHaveBeenCalledWith ('/wiki/9')
+    })
+    expect (screen.getAllByRole ('textbox')[0]).toHaveValue ('既存')
+    expect (screen.getByLabelText ('本文エディタ')).toHaveValue ('本文')
+  })
+
+  it ('submits edited title and body', async () => {
+    api.apiGet.mockResolvedValueOnce (buildWikiPage ({ title: '既存', body: '本文' }))
+    api.apiPut.mockResolvedValueOnce ({})
+
+    renderPage ()
+
+    const title = await screen.findByDisplayValue ('既存')
+    fireEvent.change (title, { target: { value: '更新済み' } })
+    fireEvent.change (screen.getByLabelText ('本文エディタ'), { target: { value: '更新本文' } })
+    fireEvent.click (screen.getByRole ('button', { name: '編輯' }))
+
+    await waitFor (() => {
+      expect (api.apiPut).toHaveBeenCalledWith (
+          '/wiki/9',
+          expect.any (FormData),
+          { headers: { 'Content-Type': 'multipart/form-data' } },
+      )
+    })
+    const formData = api.apiPut.mock.calls[0]?.[1] as FormData
+    expect (formData.get ('title')).toBe ('更新済み')
+    expect (formData.get ('body')).toBe ('更新本文')
+    expect (toastApi.toast).toHaveBeenCalledWith ({ title: '投稿成功!' })
+  })
+})

frontend/src/pages/wiki/WikiNewPage.test.tsx

@@ -0,0 +1,61 @@
+import { fireEvent, screen, waitFor } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import WikiNewPage from '@/pages/wiki/WikiNewPage'
+import { buildUser, buildWikiPage } from '@/test/factories'
+import { renderWithProviders } from '@/test/render'
+
+const api = vi.hoisted (() => ({
+  apiPost: vi.fn (),
+}))
+
+const toastApi = vi.hoisted (() => ({
+  toast: vi.fn (),
+}))
+
+vi.mock ('@/lib/api', () => api)
+vi.mock ('@/components/ui/use-toast', () => toastApi)
+vi.mock ('react-markdown-editor-lite', () => ({
+  default: ({ value, onChange }: {
+    value:    string
+    onChange: (event: { text: string }) => void
+  }) => (
+      <textarea
+          aria-label="本文エディタ"
+          value={value}
+          onChange={ev => onChange ({ text: ev.target.value })}/>
+  ),
+}))
+
+describe ('WikiNewPage', () => {
+  it ('blocks guests', () => {
+    renderWithProviders (<WikiNewPage user={buildUser ({ role: 'guest' })}/>)
+
+    expect (screen.getByText ('403')).toBeInTheDocument ()
+  })
+
+  it ('creates a wiki page from title query and body', async () => {
+    api.apiPost.mockResolvedValueOnce (buildWikiPage ({ title: '作成済み' }))
+
+    renderWithProviders (
+        <WikiNewPage user={buildUser ({ role: 'member' })}/>,
+        { route: '/wiki/new?title=%E4%B8%8B%E6%9B%B8%E3%81%8D' },
+    )
+
+    expect (screen.getAllByRole ('textbox')[0]).toHaveValue ('下書き')
+    fireEvent.change (screen.getByLabelText ('本文エディタ'), { target: { value: '本文' } })
+    fireEvent.click (screen.getByRole ('button', { name: '追加' }))
+
+    await waitFor (() => {
+      expect (api.apiPost).toHaveBeenCalledWith (
+          '/wiki',
+          expect.any (FormData),
+          { headers: { 'Content-Type': 'multipart/form-data' } },
+      )
+    })
+    const formData = api.apiPost.mock.calls[0]?.[1] as FormData
+    expect (formData.get ('title')).toBe ('下書き')
+    expect (formData.get ('body')).toBe ('本文')
+    expect (toastApi.toast).toHaveBeenCalledWith ({ title: '投稿成功!' })
+  })
+})

frontend/src/pages/wiki/WikiSearchPage.test.tsx

@@ -0,0 +1,45 @@
+import { fireEvent, screen, waitFor } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import WikiSearchPage from '@/pages/wiki/WikiSearchPage'
+import { buildWikiPage } from '@/test/factories'
+import { renderWithProviders } from '@/test/render'
+
+const api = vi.hoisted (() => ({
+  apiGet: vi.fn (),
+}))
+
+vi.mock ('@/lib/api', () => api)
+
+describe ('WikiSearchPage', () => {
+  it ('loads initial wiki pages and renders links', async () => {
+    api.apiGet.mockResolvedValueOnce ([buildWikiPage ({ title: '虹夏' })])
+
+    renderWithProviders (<WikiSearchPage/>)
+
+    expect (await screen.findByRole ('link', { name: '虹夏' })).toHaveAttribute (
+        'href',
+        '/wiki/%E8%99%B9%E5%A4%8F',
+    )
+    expect (api.apiGet).toHaveBeenCalledWith ('/wiki', { params: { title: '' } })
+  })
+
+  it ('searches by title on submit', async () => {
+    api.apiGet
+      .mockResolvedValueOnce ([])
+      .mockResolvedValueOnce ([buildWikiPage ({ title: '検索結果' })])
+
+    renderWithProviders (<WikiSearchPage/>)
+
+    fireEvent.change (screen.getAllByRole ('textbox')[0], { target: { value: '検索' } })
+    fireEvent.click (screen.getByRole ('button', { name: '検索' }))
+
+    await waitFor (() => {
+      expect (api.apiGet).toHaveBeenLastCalledWith (
+          '/wiki',
+          { params: { title: '検索' } },
+      )
+    })
+    expect (await screen.findByRole ('link', { name: '検索結果' })).toBeInTheDocument ()
+  })
+})

frontend/src/stores/sharedTransitionStore.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'vitest'
+
+import { useSharedTransitionStore } from '@/stores/sharedTransitionStore'
+
+describe ('useSharedTransitionStore', () => {
+  it ('sets and clears shared ids per location key', () => {
+    useSharedTransitionStore.setState ({ byLocationKey: {} })
+
+    useSharedTransitionStore.getState ().setForLocationKey ('loc-1', 'page-1')
+    useSharedTransitionStore.getState ().setForLocationKey ('loc-2', 'page-2')
+
+    expect (useSharedTransitionStore.getState ().byLocationKey).toEqual ({
+      'loc-1': 'page-1',
+      'loc-2': 'page-2',
+    })
+
+    useSharedTransitionStore.getState ().clearForLocationKey ('loc-1')
+
+    expect (useSharedTransitionStore.getState ().byLocationKey).toEqual ({
+      'loc-2': 'page-2',
+    })
+  })
+})

frontend/src/test/coverage.todo.test.ts

@@ -0,0 +1,9 @@
+import { describe, it } from 'vitest'
+
+describe ('pending high-level browser coverage', () => {
+  it.todo ('covers TheatreDetailPage with timer polling, comment posting, and next-post updates')
+  it.todo ('covers NicoTagListPage linking and pagination against realistic API payloads')
+  it.todo ('covers TagDetailSidebar drag/drop parent-child editing with pointer-event fidelity')
+  it.todo ('covers TopNav desktop and mobile menu flows as browser-level integration tests')
+  it.todo ('covers full App bootstrap for user creation, user verification, and 503 handling')
+})

frontend/src/test/factories.ts

@@ -0,0 +1,74 @@
+import type { Material, Post, Tag, User, WikiPage } from '@/types'
+
+export const buildTag = (overrides: Partial<Tag> = {}): Tag => ({
+  id:             1,
+  name:           'テストタグ',
+  category:       'general',
+  aliases:        [],
+  parents:        [],
+  postCount:      12,
+  createdAt:      '2026-01-02T03:04:05.000Z',
+  updatedAt:      '2026-01-03T03:04:05.000Z',
+  hasWiki:        false,
+  materialId:     null,
+  hasDeerjikists: false,
+  matchedAlias:   null,
+  ...overrides,
+})
+
+export const buildPost = (overrides: Partial<Post> = {}): Post => ({
+  id:                    1,
+  versionNo:             1,
+  url:                   'https://example.com/post/1',
+  title:                 'テスト投稿',
+  thumbnail:             'https://example.com/thumb.jpg',
+  thumbnailBase:         null,
+  tags:                  [buildTag ()],
+  parentPosts:           [],
+  childPosts:            [],
+  siblingPosts:          {},
+  viewed:                false,
+  related:               [],
+  originalCreatedFrom:   null,
+  originalCreatedBefore: null,
+  createdAt:             '2026-01-02T03:04:05.000Z',
+  updatedAt:             '2026-01-03T03:04:05.000Z',
+  uploadedUser:          { id: 1, name: 'tester' },
+  ...overrides,
+})
+
+export const buildUser = (overrides: Partial<User> = {}): User => ({
+  id:              1,
+  name:            'tester',
+  inheritanceCode: 'inherit-code',
+  role:            'member',
+  ...overrides,
+})
+
+export const buildWikiPage = (overrides: Partial<WikiPage> = {}): WikiPage => ({
+  id:            1,
+  title:         'テストWiki',
+  createdUserId: 1,
+  updatedUserId: 1,
+  createdAt:     '2026-01-02T03:04:05.000Z',
+  updatedAt:     '2026-01-03T03:04:05.000Z',
+  body:          '# 本文',
+  revisionId:    10,
+  pred:          null,
+  succ:          null,
+  ...overrides,
+})
+
+export const buildMaterial = (overrides: Partial<Material> = {}): Material => ({
+  id:            1,
+  tag:           buildTag (),
+  file:          null,
+  url:           null,
+  wikiPageBody:  null,
+  contentType:   null,
+  createdAt:     '2026-01-02T03:04:05.000Z',
+  createdByUser: { id: 1, name: 'creator' },
+  updatedAt:     '2026-01-03T03:04:05.000Z',
+  updatedByUser: { id: 2, name: 'updater' },
+  ...overrides,
+})

frontend/src/test/render.tsx

@@ -0,0 +1,35 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { render } from '@testing-library/react'
+import { HelmetProvider } from 'react-helmet-async'
+import { MemoryRouter } from 'react-router-dom'
+
+import type { ReactElement, ReactNode } from 'react'
+
+type Options = {
+  route?: string
+}
+
+export const renderWithProviders = (
+    ui:       ReactElement,
+    options: Options = {},
+) => {
+  const queryClient = new QueryClient ({
+    defaultOptions: {
+      queries: { retry: false },
+    },
+  })
+
+  const Wrapper = ({ children }: { children: ReactNode }) => (
+      <QueryClientProvider client={queryClient}>
+        <HelmetProvider>
+          <MemoryRouter initialEntries={[options.route ?? '/']}>
+            {children}
+          </MemoryRouter>
+        </HelmetProvider>
+      </QueryClientProvider>)
+
+  return {
+    queryClient,
+    ...render (ui, { wrapper: Wrapper }),
+  }
+}

frontend/src/test/setup.ts

@@ -1 +1,20 @@
 import '@testing-library/jest-dom/vitest'
+import { cleanup } from '@testing-library/react'
+import { afterEach } from 'vitest'
+
+afterEach (() => {
+  cleanup ()
+})
+
+Element.prototype.scrollIntoView = function () {
+  ;
+}
+
+window.scroll = function () {
+  ;
+}
+
+window.requestAnimationFrame = callback => {
+  callback (0)
+  return 0
+}