#155

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