@startsimpli/ui 0.4.7 → 0.4.8

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

@@ -0,0 +1,337 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { GanttListView } from '../GanttListView'
+import type { GanttListViewProps } from '../GanttListView'
+import type { GanttTask, TimelineItem } from '../types'
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function makeItem(overrides: Partial<TimelineItem> & { id: string; title: string; status: string }): TimelineItem {
+  return { startDate: '2025-01-01', endDate: '2025-03-31', ...overrides }
+}
+
+function makeTask(item: TimelineItem, overrides: Partial<GanttTask> = {}): GanttTask {
+  return {
+    item,
+    start: new Date('2025-01-01'),
+    end: new Date('2025-03-31'),
+    progress: 50,
+    timeProgress: 30,
+    depth: 0,
+    hasChildren: false,
+    parentId: null,
+    healthStatus: 'on_track',
+    ...overrides,
+  }
+}
+
+const CATEGORY_COLORS: Record<string, string> = {
+  product: '#3b82f6',
+  team: '#a855f7',
+  other: '#6b7280',
+}
+
+function defaultProps(overrides: Partial<GanttListViewProps> = {}): GanttListViewProps {
+  return {
+    listItems: [],
+    focusedRowIndex: -1,
+    categoryColors: CATEGORY_COLORS,
+    handleItemClick: jest.fn(),
+    ...overrides,
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Header rendering
+// ---------------------------------------------------------------------------
+
+describe('GanttListView — header', () => {
+  it('renders the Title column header', () => {
+    render(<GanttListView {...defaultProps()} />)
+    expect(screen.getByText('Title')).toBeInTheDocument()
+  })
+
+  it('renders the Status column header', () => {
+    render(<GanttListView {...defaultProps()} />)
+    expect(screen.getByText('Status')).toBeInTheDocument()
+  })
+
+  it('renders the Category column header', () => {
+    render(<GanttListView {...defaultProps()} />)
+    expect(screen.getByText('Category')).toBeInTheDocument()
+  })
+
+  it('renders the Dates column header', () => {
+    render(<GanttListView {...defaultProps()} />)
+    expect(screen.getByText('Dates')).toBeInTheDocument()
+  })
+
+  it('renders the Progress column header', () => {
+    render(<GanttListView {...defaultProps()} />)
+    expect(screen.getByText('Progress')).toBeInTheDocument()
+  })
+})
+
+// ---------------------------------------------------------------------------
+// Empty state
+// ---------------------------------------------------------------------------
+
+describe('GanttListView — empty state', () => {
+  it('renders only the header row when listItems is empty', () => {
+    const { container } = render(<GanttListView {...defaultProps()} />)
+    expect(container.querySelectorAll('.gantt-list-row')).toHaveLength(0)
+  })
+})
+
+// ---------------------------------------------------------------------------
+// Row rendering
+// ---------------------------------------------------------------------------
+
+describe('GanttListView — row rendering', () => {
+  it('renders a row for each task', () => {
+    const listItems = [
+      makeTask(makeItem({ id: 'a', title: 'Alpha', status: 'in_progress' })),
+      makeTask(makeItem({ id: 'b', title: 'Beta', status: 'completed' })),
+      makeTask(makeItem({ id: 'c', title: 'Gamma', status: 'not_started' })),
+    ]
+    const { container } = render(<GanttListView {...defaultProps({ listItems })} />)
+    expect(container.querySelectorAll('.gantt-list-row')).toHaveLength(3)
+  })
+
+  it('renders each task title in the list', () => {
+    const listItems = [
+      makeTask(makeItem({ id: 'a', title: 'Alpha Task', status: 'in_progress' })),
+      makeTask(makeItem({ id: 'b', title: 'Beta Task', status: 'completed' })),
+    ]
+    render(<GanttListView {...defaultProps({ listItems })} />)
+    expect(screen.getByText('Alpha Task')).toBeInTheDocument()
+    expect(screen.getByText('Beta Task')).toBeInTheDocument()
+  })
+
+  it('renders a status badge with the task status (underscores replaced with spaces)', () => {
+    const listItems = [
+      makeTask(makeItem({ id: 'a', title: 'Task A', status: 'in_progress' })),
+      makeTask(makeItem({ id: 'b', title: 'Task B', status: 'not_started' })),
+    ]
+    render(<GanttListView {...defaultProps({ listItems })} />)
+    expect(screen.getByText('in progress')).toBeInTheDocument()
+    expect(screen.getByText('not started')).toBeInTheDocument()
+  })
+
+  it('renders a category badge when the task item has a category', () => {
+    const listItems = [
+      makeTask(makeItem({ id: 'a', title: 'Task A', status: 'in_progress', category: 'product' })),
+    ]
+    render(<GanttListView {...defaultProps({ listItems })} />)
+    expect(screen.getByText('product')).toBeInTheDocument()
+  })
+
+  it('does not render a category badge when item has no category', () => {
+    const listItems = [
+      makeTask(makeItem({ id: 'a', title: 'Task A', status: 'in_progress' })),
+    ]
+    const { container } = render(<GanttListView {...defaultProps({ listItems })} />)
+    expect(container.querySelector('.gantt-category-badge')).not.toBeInTheDocument()
+  })
+
+  it('renders a progress percentage text', () => {
+    const listItems = [
+      makeTask(makeItem({ id: 'a', title: 'Task A', status: 'in_progress' }), { progress: 75 }),
+    ]
+    render(<GanttListView {...defaultProps({ listItems })} />)
+    expect(screen.getByText('75%')).toBeInTheDocument()
+  })
+
+  it('renders 0% progress correctly', () => {
+    const listItems = [
+      makeTask(makeItem({ id: 'a', title: 'Task A', status: 'not_started' }), { progress: 0 }),
+    ]
+    render(<GanttListView {...defaultProps({ listItems })} />)
+    expect(screen.getByText('0%')).toBeInTheDocument()
+  })
+
+  it('renders 100% progress correctly', () => {
+    const listItems = [
+      makeTask(makeItem({ id: 'a', title: 'Task A', status: 'completed' }), { progress: 100 }),
+    ]
+    render(<GanttListView {...defaultProps({ listItems })} />)
+    expect(screen.getByText('100%')).toBeInTheDocument()
+  })
+
+  it('renders formatted date range in the Dates column', () => {
+    const listItems = [
+      makeTask(makeItem({ id: 'a', title: 'Task A', status: 'in_progress' }), {
+        // Use local-time constructor to avoid UTC→local timezone offset shifting the day
+        start: new Date(2025, 0, 15),  // Jan 15 2025 local
+        end: new Date(2025, 3, 20),    // Apr 20 2025 local
+      }),
+    ]
+    const { container } = render(<GanttListView {...defaultProps({ listItems })} />)
+    // The dates cell contains the full range as its textContent
+    const datesCell = container.querySelector('.gantt-list-col-dates:not(.gantt-list-header span)')
+    // Find the data row's dates cell (second .gantt-list-col-dates element)
+    const datesCells = container.querySelectorAll('.gantt-list-col-dates')
+    // datesCells[0] is the header "Dates", datesCells[1] is the data row cell
+    const dataCell = datesCells[1] as HTMLElement
+    expect(dataCell.textContent).toMatch(/Jan 15/)
+    expect(dataCell.textContent).toMatch(/Apr 20/)
+  })
+})
+
+// ---------------------------------------------------------------------------
+// Focus state
+// ---------------------------------------------------------------------------
+
+describe('GanttListView — focus state', () => {
+  it('applies gantt-row-focused class to the focused row index', () => {
+    const listItems = [
+      makeTask(makeItem({ id: 'a', title: 'Alpha', status: 'not_started' })),
+      makeTask(makeItem({ id: 'b', title: 'Beta', status: 'in_progress' })),
+    ]
+    const { container } = render(
+      <GanttListView {...defaultProps({ listItems, focusedRowIndex: 1 })} />
+    )
+    const rows = container.querySelectorAll('.gantt-list-row')
+    expect(rows[0]).not.toHaveClass('gantt-row-focused')
+    expect(rows[1]).toHaveClass('gantt-row-focused')
+  })
+
+  it('does not apply gantt-row-focused when focusedRowIndex is -1', () => {
+    const listItems = [
+      makeTask(makeItem({ id: 'a', title: 'Alpha', status: 'not_started' })),
+    ]
+    const { container } = render(
+      <GanttListView {...defaultProps({ listItems, focusedRowIndex: -1 })} />
+    )
+    expect(container.querySelector('.gantt-row-focused')).not.toBeInTheDocument()
+  })
+})
+
+// ---------------------------------------------------------------------------
+// Item click
+// ---------------------------------------------------------------------------
+
+describe('GanttListView — item click', () => {
+  it('calls handleItemClick when a row is clicked', () => {
+    const handleItemClick = jest.fn()
+    const item = makeItem({ id: 'a', title: 'Clickable Task', status: 'in_progress' })
+    const listItems = [makeTask(item)]
+    render(<GanttListView {...defaultProps({ listItems, handleItemClick })} />)
+    fireEvent.click(screen.getByText('Clickable Task'))
+    expect(handleItemClick).toHaveBeenCalledWith(item)
+  })
+
+  it('calls handleItemClick with the correct item when multiple rows exist', () => {
+    const handleItemClick = jest.fn()
+    const itemA = makeItem({ id: 'a', title: 'Task A', status: 'in_progress' })
+    const itemB = makeItem({ id: 'b', title: 'Task B', status: 'completed' })
+    const listItems = [makeTask(itemA), makeTask(itemB)]
+    render(<GanttListView {...defaultProps({ listItems, handleItemClick })} />)
+    fireEvent.click(screen.getByText('Task B'))
+    expect(handleItemClick).toHaveBeenCalledWith(itemB)
+    expect(handleItemClick).toHaveBeenCalledTimes(1)
+  })
+})
+
+// ---------------------------------------------------------------------------
+// Depth indentation
+// ---------------------------------------------------------------------------
+
+describe('GanttListView — depth indentation', () => {
+  it('renders an indent spacer for child tasks (depth > 0)', () => {
+    const listItems = [
+      makeTask(makeItem({ id: 'child', title: 'Child Task', status: 'in_progress' }), { depth: 1 }),
+    ]
+    const { container } = render(<GanttListView {...defaultProps({ listItems })} />)
+    // The indent span has inline style with a calculated width
+    const row = container.querySelector('.gantt-list-row')
+    const indentSpan = row?.querySelector('span[style]')
+    expect(indentSpan).toBeInTheDocument()
+  })
+
+  it('does not render an indent spacer for root tasks (depth 0)', () => {
+    const listItems = [
+      makeTask(makeItem({ id: 'root', title: 'Root Task', status: 'in_progress' }), { depth: 0 }),
+    ]
+    const { container } = render(<GanttListView {...defaultProps({ listItems })} />)
+    const row = container.querySelector('.gantt-list-row')
+    // At depth 0, no inline-block span is injected
+    const titleCell = row?.querySelector('.gantt-list-col-title')
+    // Check that no child span with display:inline-block exists
+    const indentSpans = titleCell?.querySelectorAll('span[style]') ?? []
+    expect(indentSpans).toHaveLength(0)
+  })
+})
+
+// ---------------------------------------------------------------------------
+// Progress bar color
+// ---------------------------------------------------------------------------
+
+describe('GanttListView — progress bar', () => {
+  it('renders the progress fill bar', () => {
+    const listItems = [
+      makeTask(makeItem({ id: 'a', title: 'Task A', status: 'in_progress' }), { progress: 60 }),
+    ]
+    const { container } = render(<GanttListView {...defaultProps({ listItems })} />)
+    const fill = container.querySelector('.gantt-list-progress-fill') as HTMLElement | null
+    expect(fill).toBeInTheDocument()
+    expect(fill?.style.width).toBe('60%')
+  })
+
+  it('uses the on_track health color for the progress fill when healthStatus is on_track', () => {
+    const listItems = [
+      makeTask(makeItem({ id: 'a', title: 'Task A', status: 'in_progress' }), {
+        progress: 50,
+        healthStatus: 'on_track',
+      }),
+    ]
+    const { container } = render(<GanttListView {...defaultProps({ listItems })} />)
+    const fill = container.querySelector('.gantt-list-progress-fill') as HTMLElement | null
+    // on_track color is #22c55e
+    expect(fill?.style.backgroundColor).toBe('rgb(34, 197, 94)')
+  })
+
+  it('uses the at_risk health color when healthStatus is at_risk', () => {
+    const listItems = [
+      makeTask(makeItem({ id: 'a', title: 'Task A', status: 'in_progress' }), {
+        progress: 20,
+        healthStatus: 'at_risk',
+      }),
+    ]
+    const { container } = render(<GanttListView {...defaultProps({ listItems })} />)
+    const fill = container.querySelector('.gantt-list-progress-fill') as HTMLElement | null
+    // at_risk color is #eab308
+    expect(fill?.style.backgroundColor).toBe('rgb(234, 179, 8)')
+  })
+
+  it('uses the blocked health color when healthStatus is blocked', () => {
+    const listItems = [
+      makeTask(makeItem({ id: 'a', title: 'Task A', status: 'blocked' }), {
+        progress: 10,
+        healthStatus: 'blocked',
+      }),
+    ]
+    const { container } = render(<GanttListView {...defaultProps({ listItems })} />)
+    const fill = container.querySelector('.gantt-list-progress-fill') as HTMLElement | null
+    // blocked color is #ef4444
+    expect(fill?.style.backgroundColor).toBe('rgb(239, 68, 68)')
+  })
+})
+
+// ---------------------------------------------------------------------------
+// Category color fallback
+// ---------------------------------------------------------------------------
+
+describe('GanttListView — category color fallback', () => {
+  it('uses the other fallback color for unknown categories', () => {
+    const listItems = [
+      makeTask(makeItem({ id: 'a', title: 'Task A', status: 'in_progress', category: 'unknown_cat' })),
+    ]
+    const { container } = render(<GanttListView {...defaultProps({ listItems })} />)
+    const badge = container.querySelector('.gantt-category-badge') as HTMLElement | null
+    expect(badge).toBeInTheDocument()
+    // '#6b7280' in rgb
+    expect(badge?.style.backgroundColor).toBe('rgb(107, 114, 128)')
+  })
+})