#434

frontend/src/components/counts/CountsControls.test.tsx

@@ -0,0 +1,119 @@
+import { fireEvent, screen } from '@testing-library/react'
+import { useState } from 'react'
+import { describe, expect, it, vi } from 'vitest'
+
+import CountsControls from '@/components/counts/CountsControls'
+import CountsFieldTree from '@/components/counts/CountsFieldTree'
+import { CountsDefinitionContext } from '@/lib/countsDefinitions'
+import { normaliseCountsParams } from '@/lib/counts'
+import { readCountState, setCountState, encodeCountState } from '@/lib/queryState'
+import { postDefinition } from '@/test/fixtures/counts'
+import { renderWithProviders } from '@/test/render'
+
+vi.mock ('@/lib/api', async original => ({
+    ...await original<typeof import ('@/lib/api')> (), apiGet: vi.fn ().mockResolvedValue ([]) }))
+
+const appliedParams = (extra: Record<string, string> = {}) => normaliseCountsParams ('posts',
+    new URLSearchParams ({ mode: 'details', timezone: 'UTC', ...extra }), postDefinition)
+
+const renderControls = (params: URLSearchParams, labelsParams = params.toString ()) => {
+  const execute = vi.fn ()
+  const result = renderWithProviders (
+      <CountsDefinitionContext.Provider value={postDefinition}>
+	<CountsControls resource="posts" applied={params} open setOpen={vi.fn ()}
+	    execute={execute} reorder={vi.fn ()} displayJSON={vi.fn ()}
+	    displayRowNumbers={vi.fn ()} displayThumbnail={vi.fn ()}
+	    conditionLabels={{ tags: { 'internal:7': 'Resolved tag' } }}
+	    conditionLabelsParams={labelsParams}/>
+      </CountsDefinitionContext.Provider>, { route: '/ja/counts/posts' })
+  return { ...result, execute }
+}
+const submit = () => fireEvent.submit (
+    screen.getByRole ('button', { name: '集計実行' }).closest ('form')!)
+
+
+describe ('Counts filter draft', () => {
+  it ('uses labels only for the executed condition set', () => {
+    const params = appliedParams ()
+    setCountState (params, 'conditions', encodeCountState ('conditions', [
+	{ field: 'tags', operator: 'axis_eq', value: 'internal:7' }]))
+    const { execute } = renderControls (params)
+    expect (screen.getByText ('Resolved tag')).toBeInTheDocument ()
+    fireEvent.change (screen.getByRole ('textbox', { name: 'Id.' }), { target: { value: '9' } })
+    expect (screen.queryByText ('Resolved tag')).not.toBeInTheDocument ()
+    expect (screen.getByText ('…')).toBeInTheDocument ()
+    expect (screen.queryByText ('internal:7')).not.toBeInTheDocument ()
+    submit ()
+    expect (readCountState (execute.mock.lastCall![0], 'conditions', []))
+	.toEqual ([{ field: 'tags', operator: 'axis_eq', value: 'internal:7' }])
+  })
+
+  it ('removes a visible drill condition from the submitted URL state', () => {
+    const params = appliedParams ()
+    setCountState (params, 'conditions', encodeCountState ('conditions', [
+	{ field: 'created_at', grain: 'month', operator: 'axis_eq', value: '2026-10' }]))
+    const { execute } = renderControls (params)
+    expect (screen.getByText (/令和8年10月/)).toBeInTheDocument ()
+    fireEvent.click (screen.getByRole ('button', { name: '削除' }))
+    submit ()
+    expect (readCountState (execute.mock.lastCall![0], 'conditions', [])).toEqual ([])
+  })
+
+  it ('opens the existing add dialogue without inserting a condition immediately', () => {
+    const { execute } = renderControls (appliedParams ())
+    fireEvent.click (screen.getByRole ('button', { name: '追加' }))
+    expect (screen.getByRole ('dialog')).toBeInTheDocument ()
+    expect (execute).not.toHaveBeenCalled ()
+    expect (document.querySelectorAll ('[role="dialog"] select.h-11').length).toBeGreaterThan (0)
+    expect (screen.queryByText ('pattern.input')).not.toBeInTheDocument ()
+  })
+
+  it ('retains stable references only for surviving search tokens', () => {
+    const params = appliedParams ({ tags: 'alpha beta' })
+    setCountState (params, 'tag_refs', encodeCountState ('tag_refs', [
+	{ name: 'alpha', tag_id: 7 }, { name: 'beta', external_tag_id: 8 }]))
+    const { execute } = renderControls (params)
+    const tags = screen.getByDisplayValue ('alpha beta')
+    fireEvent.change (tags, { target: { value: 'not:beta gamma alpha' } })
+    submit ()
+    expect (readCountState (execute.mock.lastCall![0], 'tag_refs', [])).toEqual ([
+	{ name: 'alpha', tag_id: 7 }, { name: 'not:beta', external_tag_id: 8, negative: true }])
+    fireEvent.change (tags, { target: { value: 'gamma' } })
+    submit ()
+    expect (readCountState (execute.mock.lastCall![0], 'tag_refs', [])).toEqual ([])
+    expect (execute.mock.lastCall![0].get ('tags')).toBe ('gamma')
+    expect (screen.queryByText (/internal:7|external:8/)).not.toBeInTheDocument ()
+  })
+})
+
+
+const FieldTree = () => {
+  const [params, setParams] = useState (() => appliedParams ({ columns: 'tags',
+      children: 'tags.name_ja' }))
+  return <CountsDefinitionContext.Provider value={postDefinition}>
+    <CountsFieldTree resource="posts" params={params} update={(key, value) => setParams (previous => {
+      const next = new URLSearchParams (previous)
+      next.set (key, value)
+      return next
+    })}/>
+    <output data-testid="fields">{params.toString ()}</output>
+  </CountsDefinitionContext.Provider>
+}
+
+it ('derives mixed parent selection and permits selecting all children again after clearing', () => {
+  renderWithProviders (<FieldTree/>, { route: '/ja/counts/posts' })
+  const parent = screen.getByRole ('checkbox', { name: 'タグ' })
+  expect (parent).toHaveAttribute ('aria-checked', 'mixed')
+  expect (parent).toBeEnabled ()
+  fireEvent.click (parent)
+  expect (parent).toBeChecked ()
+  fireEvent.click (parent)
+  expect (parent).not.toBeChecked ()
+  expect (parent).toBeEnabled ()
+  fireEvent.click (parent)
+  expect (parent).toBeChecked ()
+  const params = new URLSearchParams (screen.getByTestId ('fields').textContent ?? '')
+  expect (params.get ('children')?.split (' ')).toEqual ([
+      'tags.name_ja', 'tags.name_ain', 'tags.aliases_ja', 'tags.aliases_ain'])
+  expect (params.get ('columns')).toBe ('tags')
+})