@startsimpli/ui 0.4.7 → 0.4.8

package/src/components/gantt/__tests__/GanttFilterBar.test.tsx

@@ -0,0 +1,544 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { GanttFilterBar } from '../GanttFilterBar'
+import type { GanttFilterState } from '../types'
+
+// ---------------------------------------------------------------------------
+// Fixtures
+// ---------------------------------------------------------------------------
+
+const emptyFilters: GanttFilterState = {
+  search: '',
+  statuses: [],
+  categories: [],
+  dateRange: { start: null, end: null },
+}
+
+function makeFilters(overrides: Partial<GanttFilterState> = {}): GanttFilterState {
+  return { ...emptyFilters, ...overrides }
+}
+
+const STATUSES = ['not_started', 'in_progress', 'completed']
+const CATEGORIES = ['product', 'team', 'financial']
+
+// ---------------------------------------------------------------------------
+// Search input
+// ---------------------------------------------------------------------------
+
+describe('GanttFilterBar — search input', () => {
+  it('renders a search input with placeholder text', () => {
+    const onFilterChange = jest.fn()
+    render(
+      <GanttFilterBar
+        filters={emptyFilters}
+        onFilterChange={onFilterChange}
+        uniqueStatuses={[]}
+        uniqueCategories={[]}
+      />
+    )
+    expect(screen.getByPlaceholderText('Search items...')).toBeInTheDocument()
+  })
+
+  it('reflects the current search value', () => {
+    const onFilterChange = jest.fn()
+    render(
+      <GanttFilterBar
+        filters={makeFilters({ search: 'hello' })}
+        onFilterChange={onFilterChange}
+        uniqueStatuses={[]}
+        uniqueCategories={[]}
+      />
+    )
+    expect(screen.getByPlaceholderText('Search items...')).toHaveValue('hello')
+  })
+
+  it('calls onFilterChange with updated search when text is typed', () => {
+    const onFilterChange = jest.fn()
+    render(
+      <GanttFilterBar
+        filters={emptyFilters}
+        onFilterChange={onFilterChange}
+        uniqueStatuses={[]}
+        uniqueCategories={[]}
+      />
+    )
+    fireEvent.change(screen.getByPlaceholderText('Search items...'), {
+      target: { value: 'alpha' },
+    })
+    expect(onFilterChange).toHaveBeenCalledTimes(1)
+    expect(onFilterChange).toHaveBeenCalledWith(
+      expect.objectContaining({ search: 'alpha' })
+    )
+  })
+
+  it('preserves existing filter values when search changes', () => {
+    const onFilterChange = jest.fn()
+    const filters = makeFilters({ statuses: ['completed'], search: '' })
+    render(
+      <GanttFilterBar
+        filters={filters}
+        onFilterChange={onFilterChange}
+        uniqueStatuses={STATUSES}
+        uniqueCategories={[]}
+      />
+    )
+    fireEvent.change(screen.getByPlaceholderText('Search items...'), {
+      target: { value: 'new term' },
+    })
+    const called = onFilterChange.mock.calls[0][0] as GanttFilterState
+    expect(called.statuses).toEqual(['completed'])
+    expect(called.search).toBe('new term')
+  })
+})
+
+// ---------------------------------------------------------------------------
+// Status dropdown
+// ---------------------------------------------------------------------------
+
+describe('GanttFilterBar — status dropdown', () => {
+  it('does not render status select when uniqueStatuses is empty', () => {
+    const onFilterChange = jest.fn()
+    render(
+      <GanttFilterBar
+        filters={emptyFilters}
+        onFilterChange={onFilterChange}
+        uniqueStatuses={[]}
+        uniqueCategories={[]}
+      />
+    )
+    // The select for statuses should be absent
+    const selects = screen.queryAllByRole('combobox')
+    expect(selects).toHaveLength(0)
+  })
+
+  it('renders status options for each unique status', () => {
+    const onFilterChange = jest.fn()
+    render(
+      <GanttFilterBar
+        filters={emptyFilters}
+        onFilterChange={onFilterChange}
+        uniqueStatuses={STATUSES}
+        uniqueCategories={[]}
+      />
+    )
+    // The default empty option + one per status
+    const select = screen.getByRole('combobox')
+    expect(select).toBeInTheDocument()
+    expect(screen.getByRole('option', { name: /not started/ })).toBeInTheDocument()
+    expect(screen.getByRole('option', { name: /in progress/ })).toBeInTheDocument()
+    expect(screen.getByRole('option', { name: /completed/ })).toBeInTheDocument()
+  })
+
+  it('shows active count in the status label when statuses are selected', () => {
+    const onFilterChange = jest.fn()
+    render(
+      <GanttFilterBar
+        filters={makeFilters({ statuses: ['completed', 'in_progress'] })}
+        onFilterChange={onFilterChange}
+        uniqueStatuses={STATUSES}
+        uniqueCategories={[]}
+      />
+    )
+    expect(screen.getByRole('option', { name: /Status \(2\)/ })).toBeInTheDocument()
+  })
+
+  it('calls onFilterChange with the new status added when a status is selected', () => {
+    const onFilterChange = jest.fn()
+    render(
+      <GanttFilterBar
+        filters={emptyFilters}
+        onFilterChange={onFilterChange}
+        uniqueStatuses={STATUSES}
+        uniqueCategories={[]}
+      />
+    )
+    fireEvent.change(screen.getByRole('combobox'), { target: { value: 'completed' } })
+    const called = onFilterChange.mock.calls[0][0] as GanttFilterState
+    expect(called.statuses).toContain('completed')
+  })
+
+  it('removes a status when it is selected a second time (toggle off)', () => {
+    const onFilterChange = jest.fn()
+    // Start with 'completed' already active
+    render(
+      <GanttFilterBar
+        filters={makeFilters({ statuses: ['completed'] })}
+        onFilterChange={onFilterChange}
+        uniqueStatuses={STATUSES}
+        uniqueCategories={[]}
+      />
+    )
+    fireEvent.change(screen.getByRole('combobox'), { target: { value: 'completed' } })
+    const called = onFilterChange.mock.calls[0][0] as GanttFilterState
+    expect(called.statuses).not.toContain('completed')
+  })
+
+  it('does not call onFilterChange when the empty placeholder option is selected', () => {
+    const onFilterChange = jest.fn()
+    render(
+      <GanttFilterBar
+        filters={emptyFilters}
+        onFilterChange={onFilterChange}
+        uniqueStatuses={STATUSES}
+        uniqueCategories={[]}
+      />
+    )
+    fireEvent.change(screen.getByRole('combobox'), { target: { value: '' } })
+    expect(onFilterChange).not.toHaveBeenCalled()
+  })
+})
+
+// ---------------------------------------------------------------------------
+// Category dropdown
+// ---------------------------------------------------------------------------
+
+describe('GanttFilterBar — category dropdown', () => {
+  it('does not render category select when uniqueCategories is empty', () => {
+    const onFilterChange = jest.fn()
+    render(
+      <GanttFilterBar
+        filters={emptyFilters}
+        onFilterChange={onFilterChange}
+        uniqueStatuses={[]}
+        uniqueCategories={[]}
+      />
+    )
+    expect(screen.queryAllByRole('combobox')).toHaveLength(0)
+  })
+
+  it('renders a category select with one option per category', () => {
+    const onFilterChange = jest.fn()
+    render(
+      <GanttFilterBar
+        filters={emptyFilters}
+        onFilterChange={onFilterChange}
+        uniqueStatuses={[]}
+        uniqueCategories={CATEGORIES}
+      />
+    )
+    const selects = screen.getAllByRole('combobox')
+    expect(selects).toHaveLength(1)
+    expect(screen.getByRole('option', { name: 'product' })).toBeInTheDocument()
+    expect(screen.getByRole('option', { name: 'team' })).toBeInTheDocument()
+    expect(screen.getByRole('option', { name: 'financial' })).toBeInTheDocument()
+  })
+
+  it('renders both status and category selects when both arrays have values', () => {
+    const onFilterChange = jest.fn()
+    render(
+      <GanttFilterBar
+        filters={emptyFilters}
+        onFilterChange={onFilterChange}
+        uniqueStatuses={STATUSES}
+        uniqueCategories={CATEGORIES}
+      />
+    )
+    expect(screen.getAllByRole('combobox')).toHaveLength(2)
+  })
+
+  it('calls onFilterChange with category added when a category is selected', () => {
+    const onFilterChange = jest.fn()
+    render(
+      <GanttFilterBar
+        filters={emptyFilters}
+        onFilterChange={onFilterChange}
+        uniqueStatuses={[]}
+        uniqueCategories={CATEGORIES}
+      />
+    )
+    fireEvent.change(screen.getByRole('combobox'), { target: { value: 'product' } })
+    const called = onFilterChange.mock.calls[0][0] as GanttFilterState
+    expect(called.categories).toContain('product')
+  })
+
+  it('removes a category when toggled off', () => {
+    const onFilterChange = jest.fn()
+    render(
+      <GanttFilterBar
+        filters={makeFilters({ categories: ['product'] })}
+        onFilterChange={onFilterChange}
+        uniqueStatuses={[]}
+        uniqueCategories={CATEGORIES}
+      />
+    )
+    fireEvent.change(screen.getByRole('combobox'), { target: { value: 'product' } })
+    const called = onFilterChange.mock.calls[0][0] as GanttFilterState
+    expect(called.categories).not.toContain('product')
+  })
+
+  it('shows active count in the category label when categories are selected', () => {
+    const onFilterChange = jest.fn()
+    render(
+      <GanttFilterBar
+        filters={makeFilters({ categories: ['product', 'team'] })}
+        onFilterChange={onFilterChange}
+        uniqueStatuses={[]}
+        uniqueCategories={CATEGORIES}
+      />
+    )
+    expect(screen.getByRole('option', { name: /Category \(2\)/ })).toBeInTheDocument()
+  })
+})
+
+// ---------------------------------------------------------------------------
+// Date range inputs
+// ---------------------------------------------------------------------------
+
+describe('GanttFilterBar — date range inputs', () => {
+  it('renders two date inputs', () => {
+    const onFilterChange = jest.fn()
+    render(
+      <GanttFilterBar
+        filters={emptyFilters}
+        onFilterChange={onFilterChange}
+        uniqueStatuses={[]}
+        uniqueCategories={[]}
+      />
+    )
+    const dateInputs = screen.getAllByDisplayValue('')
+    // Both date inputs start empty plus the search input — filter by type
+    const typedDateInputs = document.querySelectorAll('input[type="date"]')
+    expect(typedDateInputs).toHaveLength(2)
+  })
+
+  it('populates the start date input when dateRange.start is set', () => {
+    const onFilterChange = jest.fn()
+    // Use local-time constructor (year, month-1, day) to avoid UTC→local timezone shift
+    render(
+      <GanttFilterBar
+        filters={makeFilters({ dateRange: { start: new Date(2025, 2, 15), end: null } })}
+        onFilterChange={onFilterChange}
+        uniqueStatuses={[]}
+        uniqueCategories={[]}
+      />
+    )
+    const dateInputs = document.querySelectorAll('input[type="date"]')
+    expect((dateInputs[0] as HTMLInputElement).value).toBe('2025-03-15')
+  })
+
+  it('populates the end date input when dateRange.end is set', () => {
+    const onFilterChange = jest.fn()
+    // Use local-time constructor (year, month-1, day) to avoid UTC→local timezone shift
+    render(
+      <GanttFilterBar
+        filters={makeFilters({ dateRange: { start: null, end: new Date(2025, 5, 30) } })}
+        onFilterChange={onFilterChange}
+        uniqueStatuses={[]}
+        uniqueCategories={[]}
+      />
+    )
+    const dateInputs = document.querySelectorAll('input[type="date"]')
+    expect((dateInputs[1] as HTMLInputElement).value).toBe('2025-06-30')
+  })
+
+  it('calls onFilterChange with updated start date when start input changes', () => {
+    const onFilterChange = jest.fn()
+    render(
+      <GanttFilterBar
+        filters={emptyFilters}
+        onFilterChange={onFilterChange}
+        uniqueStatuses={[]}
+        uniqueCategories={[]}
+      />
+    )
+    const dateInputs = document.querySelectorAll('input[type="date"]')
+    fireEvent.change(dateInputs[0], { target: { value: '2025-01-01' } })
+    const called = onFilterChange.mock.calls[0][0] as GanttFilterState
+    expect(called.dateRange.start).not.toBeNull()
+  })
+
+  it('sets start date to null when start input is cleared', () => {
+    const onFilterChange = jest.fn()
+    render(
+      <GanttFilterBar
+        filters={makeFilters({ dateRange: { start: new Date('2025-01-01'), end: null } })}
+        onFilterChange={onFilterChange}
+        uniqueStatuses={[]}
+        uniqueCategories={[]}
+      />
+    )
+    const dateInputs = document.querySelectorAll('input[type="date"]')
+    fireEvent.change(dateInputs[0], { target: { value: '' } })
+    const called = onFilterChange.mock.calls[0][0] as GanttFilterState
+    expect(called.dateRange.start).toBeNull()
+  })
+})
+
+// ---------------------------------------------------------------------------
+// Clear button
+// ---------------------------------------------------------------------------
+
+describe('GanttFilterBar — clear button', () => {
+  it('does not render the clear button when no filters are active', () => {
+    const onFilterChange = jest.fn()
+    render(
+      <GanttFilterBar
+        filters={emptyFilters}
+        onFilterChange={onFilterChange}
+        uniqueStatuses={[]}
+        uniqueCategories={[]}
+      />
+    )
+    expect(screen.queryByRole('button', { name: 'Clear' })).not.toBeInTheDocument()
+  })
+
+  it('renders the clear button when search is active', () => {
+    const onFilterChange = jest.fn()
+    render(
+      <GanttFilterBar
+        filters={makeFilters({ search: 'foo' })}
+        onFilterChange={onFilterChange}
+        uniqueStatuses={[]}
+        uniqueCategories={[]}
+      />
+    )
+    expect(screen.getByRole('button', { name: 'Clear' })).toBeInTheDocument()
+  })
+
+  it('renders the clear button when a status filter is active', () => {
+    const onFilterChange = jest.fn()
+    render(
+      <GanttFilterBar
+        filters={makeFilters({ statuses: ['completed'] })}
+        onFilterChange={onFilterChange}
+        uniqueStatuses={STATUSES}
+        uniqueCategories={[]}
+      />
+    )
+    expect(screen.getByRole('button', { name: 'Clear' })).toBeInTheDocument()
+  })
+
+  it('renders the clear button when a category filter is active', () => {
+    const onFilterChange = jest.fn()
+    render(
+      <GanttFilterBar
+        filters={makeFilters({ categories: ['product'] })}
+        onFilterChange={onFilterChange}
+        uniqueStatuses={[]}
+        uniqueCategories={CATEGORIES}
+      />
+    )
+    expect(screen.getByRole('button', { name: 'Clear' })).toBeInTheDocument()
+  })
+
+  it('calls onFilterChange with all filters reset when Clear is clicked', () => {
+    const onFilterChange = jest.fn()
+    render(
+      <GanttFilterBar
+        filters={makeFilters({ search: 'foo', statuses: ['completed'], categories: ['product'] })}
+        onFilterChange={onFilterChange}
+        uniqueStatuses={STATUSES}
+        uniqueCategories={CATEGORIES}
+      />
+    )
+    fireEvent.click(screen.getByRole('button', { name: 'Clear' }))
+    expect(onFilterChange).toHaveBeenCalledWith({
+      search: '',
+      statuses: [],
+      categories: [],
+      dateRange: { start: null, end: null },
+    })
+  })
+})
+
+// ---------------------------------------------------------------------------
+// Filter pills
+// ---------------------------------------------------------------------------
+
+describe('GanttFilterBar — filter pills', () => {
+  it('renders a pill for each active status', () => {
+    const onFilterChange = jest.fn()
+    render(
+      <GanttFilterBar
+        filters={makeFilters({ statuses: ['completed', 'in_progress'] })}
+        onFilterChange={onFilterChange}
+        uniqueStatuses={STATUSES}
+        uniqueCategories={[]}
+      />
+    )
+    // Underscores replaced with spaces in pill text
+    expect(screen.getByText('completed')).toBeInTheDocument()
+    expect(screen.getByText('in progress')).toBeInTheDocument()
+  })
+
+  it('renders a pill for each active category', () => {
+    const onFilterChange = jest.fn()
+    render(
+      <GanttFilterBar
+        filters={makeFilters({ categories: ['product', 'team'] })}
+        onFilterChange={onFilterChange}
+        uniqueStatuses={[]}
+        uniqueCategories={CATEGORIES}
+      />
+    )
+    expect(screen.getByText('product')).toBeInTheDocument()
+    expect(screen.getByText('team')).toBeInTheDocument()
+  })
+
+  it('removes a status pill when its dismiss button is clicked', () => {
+    const onFilterChange = jest.fn()
+    render(
+      <GanttFilterBar
+        filters={makeFilters({ statuses: ['completed'] })}
+        onFilterChange={onFilterChange}
+        uniqueStatuses={STATUSES}
+        uniqueCategories={[]}
+      />
+    )
+    // The pill has a button labelled "x" next to the status text
+    const pillButtons = screen.getAllByRole('button')
+    // Filter out the 'Clear' button — this pill is the small x button inside the pill
+    const dismissButtons = pillButtons.filter((btn) => btn.textContent === 'x')
+    expect(dismissButtons).toHaveLength(1)
+    fireEvent.click(dismissButtons[0])
+    const called = onFilterChange.mock.calls[0][0] as GanttFilterState
+    expect(called.statuses).not.toContain('completed')
+  })
+
+  it('removes a category pill when its dismiss button is clicked', () => {
+    const onFilterChange = jest.fn()
+    render(
+      <GanttFilterBar
+        filters={makeFilters({ categories: ['product'] })}
+        onFilterChange={onFilterChange}
+        uniqueStatuses={[]}
+        uniqueCategories={CATEGORIES}
+      />
+    )
+    const dismissButtons = screen.getAllByRole('button').filter((btn) => btn.textContent === 'x')
+    expect(dismissButtons).toHaveLength(1)
+    fireEvent.click(dismissButtons[0])
+    const called = onFilterChange.mock.calls[0][0] as GanttFilterState
+    expect(called.categories).not.toContain('product')
+  })
+
+  it('preserves other pills when one status pill is dismissed', () => {
+    const onFilterChange = jest.fn()
+    render(
+      <GanttFilterBar
+        filters={makeFilters({ statuses: ['completed', 'in_progress'] })}
+        onFilterChange={onFilterChange}
+        uniqueStatuses={STATUSES}
+        uniqueCategories={[]}
+      />
+    )
+    // Two pills rendered — dismiss the first
+    const dismissButtons = screen.getAllByRole('button').filter((btn) => btn.textContent === 'x')
+    fireEvent.click(dismissButtons[0])
+    const called = onFilterChange.mock.calls[0][0] as GanttFilterState
+    expect(called.statuses).toHaveLength(1)
+  })
+
+  it('renders no pills when filters are empty', () => {
+    const onFilterChange = jest.fn()
+    render(
+      <GanttFilterBar
+        filters={emptyFilters}
+        onFilterChange={onFilterChange}
+        uniqueStatuses={STATUSES}
+        uniqueCategories={CATEGORIES}
+      />
+    )
+    const dismissButtons = screen.queryAllByRole('button').filter((btn) => btn.textContent === 'x')
+    expect(dismissButtons).toHaveLength(0)
+  })
+})