@startsimpli/ui 0.4.7 → 0.4.9

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

@@ -0,0 +1,375 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { GanttTimelineView } from '../GanttTimelineView'
+import type { GanttTimelineViewProps } from '../GanttTimelineView'
+import type { GanttTask, TimelineItem } from '../types'
+import { ZOOM_LEVELS, ROW_HEIGHT } from '../hooks/useGanttState'
+import React from 'react'
+
+// ---------------------------------------------------------------------------
+// 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 {
+  const start = new Date('2025-01-01')
+  const end = new Date('2025-03-31')
+  return {
+    item,
+    start,
+    end,
+    progress: 50,
+    timeProgress: 30,
+    depth: 0,
+    hasChildren: false,
+    parentId: null,
+    healthStatus: 'on_track',
+    ...overrides,
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Minimal default props factory
+// ---------------------------------------------------------------------------
+
+function defaultProps(overrides: Partial<GanttTimelineViewProps> = {}): GanttTimelineViewProps {
+  const ZOOM_INDEX = 3
+  const DAY_WIDTH = ZOOM_LEVELS[ZOOM_INDEX]
+  const startDate = new Date('2025-01-01')
+  const days: Date[] = []
+  for (let i = 0; i < 90; i++) {
+    const d = new Date(startDate)
+    d.setDate(d.getDate() + i)
+    days.push(d)
+  }
+
+  const months = [
+    { month: new Date('2025-01-01'), days: 31, label: 'Jan 2025' },
+    { month: new Date('2025-02-01'), days: 28, label: 'Feb 2025' },
+    { month: new Date('2025-03-01'), days: 31, label: 'Mar 2025' },
+  ]
+
+  const timelineWidth = days.length * DAY_WIDTH
+
+  return {
+    infoColumnWidth: 320,
+    infoColumnLabel: 'Item',
+    showCategory: true,
+    showStatus: true,
+    showFullscreen: false,
+    zoomIndex: ZOOM_INDEX,
+    setZoomIndex: jest.fn(),
+    collapsed: new Set<string>(),
+    mounted: true,
+    dragState: null,
+    focusedRowIndex: -1,
+    dayWidth: DAY_WIDTH,
+    tasks: [],
+    startDate,
+    days,
+    months,
+    timeHeaderUnits: {
+      mode: 'days',
+      units: days.map((day) => ({
+        date: day,
+        width: DAY_WIDTH,
+        label: String(day.getDate()),
+        isWeekend: day.getDay() === 0 || day.getDay() === 6,
+        isToday: false,
+      })),
+    },
+    dependencyPaths: [],
+    timelineWidth,
+    bodyHeight: 0,
+    isFullscreen: false,
+    categoryColors: { product: '#3b82f6', team: '#a855f7', other: '#6b7280' },
+    onDateChange: undefined,
+    bodyScrollRef: { current: null },
+    headerTimelineRef: { current: null },
+    infoColumnRef: { current: null },
+    toggleFullscreen: jest.fn(),
+    handleItemClick: jest.fn(),
+    toggleCollapse: jest.fn(),
+    handleBodyScroll: jest.fn(),
+    getBarPosition: jest.fn().mockReturnValue({ left: 0, width: 100, top: 0, height: 20 }),
+    handleDragStart: jest.fn(),
+    ...overrides,
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Header rendering
+// ---------------------------------------------------------------------------
+
+describe('GanttTimelineView — header', () => {
+  it('renders the info column header with the infoColumnLabel', () => {
+    render(<GanttTimelineView {...defaultProps({ infoColumnLabel: 'Goal' })} />)
+    expect(screen.getByText('Goal')).toBeInTheDocument()
+  })
+
+  it('renders month labels in the timeline header', () => {
+    render(<GanttTimelineView {...defaultProps()} />)
+    expect(screen.getByText('Jan 2025')).toBeInTheDocument()
+    expect(screen.getByText('Feb 2025')).toBeInTheDocument()
+    expect(screen.getByText('Mar 2025')).toBeInTheDocument()
+  })
+
+  it('renders day unit labels in days mode', () => {
+    render(<GanttTimelineView {...defaultProps()} />)
+    // Day 1 label should appear at start
+    const dayOnes = screen.getAllByText('1')
+    expect(dayOnes.length).toBeGreaterThan(0)
+  })
+
+  it('renders week unit labels in weeks mode', () => {
+    const weekUnits = [
+      { startDate: new Date('2025-01-06'), endDate: new Date('2025-01-12'), days: 7, label: 'Jan 6', hasToday: false, width: 56 },
+      { startDate: new Date('2025-01-13'), endDate: new Date('2025-01-19'), days: 7, label: 'Jan 13', hasToday: false, width: 56 },
+    ]
+    render(
+      <GanttTimelineView
+        {...defaultProps({
+          timeHeaderUnits: { mode: 'weeks', units: weekUnits },
+        })}
+      />
+    )
+    expect(screen.getByText('Jan 6')).toBeInTheDocument()
+    expect(screen.getByText('Jan 13')).toBeInTheDocument()
+  })
+})
+
+// ---------------------------------------------------------------------------
+// Zoom controls
+// ---------------------------------------------------------------------------
+
+describe('GanttTimelineView — zoom controls', () => {
+  it('renders zoom out button', () => {
+    render(<GanttTimelineView {...defaultProps()} />)
+    expect(screen.getByRole('button', { name: 'Zoom out' })).toBeInTheDocument()
+  })
+
+  it('renders zoom in button', () => {
+    render(<GanttTimelineView {...defaultProps()} />)
+    expect(screen.getByRole('button', { name: 'Zoom in' })) .toBeInTheDocument()
+  })
+
+  it('disables zoom out button at minimum zoom', () => {
+    render(<GanttTimelineView {...defaultProps({ zoomIndex: 0 })} />)
+    expect(screen.getByRole('button', { name: 'Zoom out' })).toBeDisabled()
+  })
+
+  it('disables zoom in button at maximum zoom', () => {
+    render(<GanttTimelineView {...defaultProps({ zoomIndex: ZOOM_LEVELS.length - 1 })} />)
+    expect(screen.getByRole('button', { name: 'Zoom in' })).toBeDisabled()
+  })
+
+  it('calls setZoomIndex when zoom out is clicked', () => {
+    const setZoomIndex = jest.fn()
+    render(<GanttTimelineView {...defaultProps({ setZoomIndex, zoomIndex: 3 })} />)
+    fireEvent.click(screen.getByRole('button', { name: 'Zoom out' }))
+    expect(setZoomIndex).toHaveBeenCalledTimes(1)
+  })
+
+  it('calls setZoomIndex when zoom in is clicked', () => {
+    const setZoomIndex = jest.fn()
+    render(<GanttTimelineView {...defaultProps({ setZoomIndex, zoomIndex: 3 })} />)
+    fireEvent.click(screen.getByRole('button', { name: 'Zoom in' }))
+    expect(setZoomIndex).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not render fullscreen button when showFullscreen is false', () => {
+    render(<GanttTimelineView {...defaultProps({ showFullscreen: false })} />)
+    expect(screen.queryByRole('button', { name: /fullscreen/i })).not.toBeInTheDocument()
+  })
+
+  it('renders fullscreen button when showFullscreen is true', () => {
+    render(<GanttTimelineView {...defaultProps({ showFullscreen: true })} />)
+    expect(screen.getByRole('button', { name: /fullscreen/i })).toBeInTheDocument()
+  })
+
+  it('calls toggleFullscreen when the fullscreen button is clicked', () => {
+    const toggleFullscreen = jest.fn()
+    render(<GanttTimelineView {...defaultProps({ showFullscreen: true, toggleFullscreen })} />)
+    fireEvent.click(screen.getByRole('button', { name: /fullscreen/i }))
+    expect(toggleFullscreen).toHaveBeenCalledTimes(1)
+  })
+})
+
+// ---------------------------------------------------------------------------
+// Empty state
+// ---------------------------------------------------------------------------
+
+describe('GanttTimelineView — empty state', () => {
+  it('renders no info rows when tasks array is empty', () => {
+    render(<GanttTimelineView {...defaultProps({ tasks: [] })} />)
+    // No gantt-info-row elements means no task title links
+    expect(screen.queryAllByRole('button', { name: /expand|collapse/i })).toHaveLength(0)
+  })
+})
+
+// ---------------------------------------------------------------------------
+// Task bars and info rows
+// ---------------------------------------------------------------------------
+
+describe('GanttTimelineView — task rows', () => {
+  it('renders a row title for each task', () => {
+    const tasks = [
+      makeTask(makeItem({ id: 'a', title: 'Alpha Task', status: 'in_progress' })),
+      makeTask(makeItem({ id: 'b', title: 'Beta Task', status: 'completed' })),
+    ]
+    // Use width <= 80 so bar label is empty (avoids duplicate title text nodes)
+    const getBarPosition = jest.fn().mockReturnValue({ left: 0, width: 80, top: 0, height: 20 })
+    render(<GanttTimelineView {...defaultProps({ tasks, getBarPosition })} />)
+    // Titles appear in the info column
+    expect(screen.getAllByText('Alpha Task').length).toBeGreaterThanOrEqual(1)
+    expect(screen.getAllByText('Beta Task').length).toBeGreaterThanOrEqual(1)
+  })
+
+  it('calls handleItemClick when a row title is clicked', () => {
+    const handleItemClick = jest.fn()
+    const item = makeItem({ id: 'a', title: 'Clickable Task', status: 'not_started' })
+    const tasks = [makeTask(item)]
+    // Use width <= 80 so the bar label renders empty and title only appears in the info row
+    const getBarPosition = jest.fn().mockReturnValue({ left: 0, width: 80, top: 0, height: 20 })
+    const { container } = render(<GanttTimelineView {...defaultProps({ tasks, handleItemClick, getBarPosition })} />)
+    // Target the info-column title span specifically to avoid the bar label span
+    const titleSpan = container.querySelector('.gantt-row-title') as HTMLElement
+    expect(titleSpan).toBeInTheDocument()
+    fireEvent.click(titleSpan)
+    expect(handleItemClick).toHaveBeenCalledWith(item)
+  })
+
+  it('renders a collapse button for tasks that have children', () => {
+    const tasks = [
+      makeTask(makeItem({ id: 'p', title: 'Parent', status: 'in_progress' }), { hasChildren: true }),
+    ]
+    const getBarPosition = jest.fn().mockReturnValue({ left: 0, width: 200, top: 0, height: 20 })
+    render(<GanttTimelineView {...defaultProps({ tasks, getBarPosition })} />)
+    expect(screen.getByRole('button', { name: /collapse/i })).toBeInTheDocument()
+  })
+
+  it('shows expand button for a collapsed parent task', () => {
+    const tasks = [
+      makeTask(makeItem({ id: 'p', title: 'Parent', status: 'in_progress' }), { hasChildren: true }),
+    ]
+    const getBarPosition = jest.fn().mockReturnValue({ left: 0, width: 200, top: 0, height: 20 })
+    render(
+      <GanttTimelineView
+        {...defaultProps({ tasks, collapsed: new Set(['p']), getBarPosition })}
+      />
+    )
+    expect(screen.getByRole('button', { name: 'Expand' })).toBeInTheDocument()
+  })
+
+  it('calls toggleCollapse when the collapse button is clicked', () => {
+    const toggleCollapse = jest.fn()
+    const tasks = [
+      makeTask(makeItem({ id: 'p', title: 'Parent', status: 'in_progress' }), { hasChildren: true }),
+    ]
+    const getBarPosition = jest.fn().mockReturnValue({ left: 0, width: 200, top: 0, height: 20 })
+    render(<GanttTimelineView {...defaultProps({ tasks, toggleCollapse, getBarPosition })} />)
+    fireEvent.click(screen.getByRole('button', { name: 'Collapse' }))
+    expect(toggleCollapse).toHaveBeenCalledWith('p')
+  })
+
+  it('renders category badge when showCategory is true and item has a category', () => {
+    const tasks = [
+      makeTask(makeItem({ id: 'a', title: 'Task A', status: 'in_progress', category: 'product' })),
+    ]
+    const getBarPosition = jest.fn().mockReturnValue({ left: 0, width: 200, top: 0, height: 20 })
+    render(<GanttTimelineView {...defaultProps({ tasks, showCategory: true, getBarPosition })} />)
+    expect(screen.getByText('product')).toBeInTheDocument()
+  })
+
+  it('does not render category badge when showCategory is false', () => {
+    const tasks = [
+      makeTask(makeItem({ id: 'a', title: 'Task A', status: 'in_progress', category: 'product' })),
+    ]
+    const getBarPosition = jest.fn().mockReturnValue({ left: 0, width: 200, top: 0, height: 20 })
+    render(<GanttTimelineView {...defaultProps({ tasks, showCategory: false, getBarPosition })} />)
+    expect(screen.queryByText('product')).not.toBeInTheDocument()
+  })
+
+  it('renders status badge when showStatus is true', () => {
+    const tasks = [
+      makeTask(makeItem({ id: 'a', title: 'Task A', status: 'in_progress' })),
+    ]
+    const getBarPosition = jest.fn().mockReturnValue({ left: 0, width: 200, top: 0, height: 20 })
+    render(<GanttTimelineView {...defaultProps({ tasks, showStatus: true, getBarPosition })} />)
+    expect(screen.getByText('in progress')).toBeInTheDocument()
+  })
+
+  it('does not render status badge when showStatus is false', () => {
+    const tasks = [
+      makeTask(makeItem({ id: 'a', title: 'Task A', status: 'in_progress' })),
+    ]
+    const getBarPosition = jest.fn().mockReturnValue({ left: 0, width: 200, top: 0, height: 20 })
+    render(<GanttTimelineView {...defaultProps({ tasks, showStatus: false, getBarPosition })} />)
+    expect(screen.queryByText('in progress')).not.toBeInTheDocument()
+  })
+
+  it('applies gantt-row-focused class to the focused row', () => {
+    const tasks = [
+      makeTask(makeItem({ id: 'a', title: 'Alpha', status: 'not_started' })),
+      makeTask(makeItem({ id: 'b', title: 'Beta', status: 'not_started' })),
+    ]
+    const getBarPosition = jest.fn().mockReturnValue({ left: 0, width: 200, top: 0, height: 20 })
+    const { container } = render(
+      <GanttTimelineView {...defaultProps({ tasks, focusedRowIndex: 0, getBarPosition })} />
+    )
+    const focusedRows = container.querySelectorAll('.gantt-row-focused')
+    expect(focusedRows).toHaveLength(1)
+  })
+})
+
+// ---------------------------------------------------------------------------
+// Legend
+// ---------------------------------------------------------------------------
+
+describe('GanttTimelineView — legend', () => {
+  it('renders the On Track legend entry', () => {
+    render(<GanttTimelineView {...defaultProps()} />)
+    expect(screen.getByText('On Track')).toBeInTheDocument()
+  })
+
+  it('renders the At Risk legend entry', () => {
+    render(<GanttTimelineView {...defaultProps()} />)
+    expect(screen.getByText('At Risk')).toBeInTheDocument()
+  })
+
+  it('renders the Blocked legend entry', () => {
+    render(<GanttTimelineView {...defaultProps()} />)
+    expect(screen.getByText('Blocked')).toBeInTheDocument()
+  })
+
+  it('renders the Not Started legend entry', () => {
+    render(<GanttTimelineView {...defaultProps()} />)
+    expect(screen.getByText('Not Started')).toBeInTheDocument()
+  })
+})
+
+// ---------------------------------------------------------------------------
+// Dependency paths
+// ---------------------------------------------------------------------------
+
+describe('GanttTimelineView — dependency paths', () => {
+  it('does not render an SVG overlay when dependencyPaths is empty', () => {
+    const { container } = render(<GanttTimelineView {...defaultProps({ dependencyPaths: [] })} />)
+    expect(container.querySelector('.gantt-deps-svg')).not.toBeInTheDocument()
+  })
+
+  it('renders an SVG overlay when dependencyPaths has entries', () => {
+    const tasks = [
+      makeTask(makeItem({ id: 'a', title: 'A', status: 'in_progress' })),
+      makeTask(makeItem({ id: 'b', title: 'B', status: 'not_started' })),
+    ]
+    const getBarPosition = jest.fn().mockReturnValue({ left: 0, width: 100, top: 0, height: 20 })
+    const paths = [{ path: 'M 100 10 C 150 10, 150 46, 200 46', fromId: 'a', toId: 'b' }]
+    const { container } = render(
+      <GanttTimelineView {...defaultProps({ tasks, dependencyPaths: paths, getBarPosition })} />
+    )
+    expect(container.querySelector('.gantt-deps-svg')).toBeInTheDocument()
+  })
+})