@startsimpli/ui 0.4.6 → 0.4.8

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

@@ -0,0 +1,305 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { GanttBoardView } from '../GanttBoardView'
+import type { GanttBoardViewProps } from '../GanttBoardView'
+import type { 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 }
+}
+
+const CATEGORY_COLORS: Record<string, string> = {
+  product: '#3b82f6',
+  team: '#a855f7',
+  other: '#6b7280',
+}
+
+function defaultProps(overrides: Partial<GanttBoardViewProps> = {}): GanttBoardViewProps {
+  return {
+    boardColumns: [],
+    boardDragItem: null,
+    setBoardDragItem: jest.fn(),
+    onStatusChange: undefined,
+    categoryColors: CATEGORY_COLORS,
+    handleItemClick: jest.fn(),
+    ...overrides,
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Column rendering
+// ---------------------------------------------------------------------------
+
+describe('GanttBoardView — column rendering', () => {
+  it('renders nothing when boardColumns is empty', () => {
+    const { container } = render(<GanttBoardView {...defaultProps()} />)
+    // The board wrapper div is rendered but contains no column children
+    expect(container.querySelector('.gantt-board-column')).not.toBeInTheDocument()
+  })
+
+  it('renders one column per status', () => {
+    const columns = [
+      { status: 'not_started', items: [] },
+      { status: 'in_progress', items: [] },
+      { status: 'completed', items: [] },
+    ]
+    const { container } = render(<GanttBoardView {...defaultProps({ boardColumns: columns })} />)
+    expect(container.querySelectorAll('.gantt-board-column')).toHaveLength(3)
+  })
+
+  it('renders a status badge in each column header', () => {
+    const columns = [
+      { status: 'not_started', items: [] },
+      { status: 'in_progress', items: [] },
+    ]
+    render(<GanttBoardView {...defaultProps({ boardColumns: columns })} />)
+    // Underscores are replaced with spaces in the badge
+    expect(screen.getByText('not started')).toBeInTheDocument()
+    expect(screen.getByText('in progress')).toBeInTheDocument()
+  })
+
+  it('displays the item count in each column header', () => {
+    const columns = [
+      { status: 'not_started', items: [makeItem({ id: 'a', title: 'Task A', status: 'not_started' })] },
+      { status: 'in_progress', items: [] },
+    ]
+    render(<GanttBoardView {...defaultProps({ boardColumns: columns })} />)
+    // Count badges: '1' for the first column, '0' for the second
+    const counts = screen.getAllByText('1')
+    expect(counts.length).toBeGreaterThanOrEqual(1)
+    expect(screen.getByText('0')).toBeInTheDocument()
+  })
+})
+
+// ---------------------------------------------------------------------------
+// Card rendering
+// ---------------------------------------------------------------------------
+
+describe('GanttBoardView — card rendering', () => {
+  it('renders a card for each item in a column', () => {
+    const columns = [
+      {
+        status: 'in_progress',
+        items: [
+          makeItem({ id: 'a', title: 'Alpha Task', status: 'in_progress' }),
+          makeItem({ id: 'b', title: 'Beta Task', status: 'in_progress' }),
+        ],
+      },
+    ]
+    render(<GanttBoardView {...defaultProps({ boardColumns: columns })} />)
+    expect(screen.getByText('Alpha Task')).toBeInTheDocument()
+    expect(screen.getByText('Beta Task')).toBeInTheDocument()
+  })
+
+  it('renders a category badge on cards that have a category', () => {
+    const columns = [
+      {
+        status: 'in_progress',
+        items: [makeItem({ id: 'a', title: 'Task A', status: 'in_progress', category: 'product' })],
+      },
+    ]
+    render(<GanttBoardView {...defaultProps({ boardColumns: columns })} />)
+    expect(screen.getByText('product')).toBeInTheDocument()
+  })
+
+  it('does not render a category badge when the item has no category', () => {
+    const columns = [
+      {
+        status: 'in_progress',
+        items: [makeItem({ id: 'a', title: 'Task A', status: 'in_progress' })],
+      },
+    ]
+    const { container } = render(<GanttBoardView {...defaultProps({ boardColumns: columns })} />)
+    expect(container.querySelector('.gantt-category-badge')).not.toBeInTheDocument()
+  })
+
+  it('renders the end date on a card when the item has an endDate', () => {
+    // Use local-time ISO string to avoid UTC→local timezone shift
+    const columns = [
+      {
+        status: 'in_progress',
+        items: [makeItem({ id: 'a', title: 'Task A', status: 'in_progress', endDate: '2025-03-15T00:00:00' })],
+      },
+    ]
+    render(<GanttBoardView {...defaultProps({ boardColumns: columns })} />)
+    // date-fns format(new Date('2025-03-15T00:00:00'), 'MMM d') === 'Mar 15'
+    expect(screen.getByText('Mar 15')).toBeInTheDocument()
+  })
+
+  it('does not render an end date when the item has no endDate', () => {
+    const columns = [
+      {
+        status: 'in_progress',
+        items: [{ id: 'a', title: 'No Date Task', status: 'in_progress' }],
+      },
+    ]
+    const { container } = render(<GanttBoardView {...defaultProps({ boardColumns: columns })} />)
+    expect(container.querySelector('.gantt-board-card-date')).not.toBeInTheDocument()
+  })
+
+  it('uses the fallback "other" color when the item category is not in categoryColors', () => {
+    const columns = [
+      {
+        status: 'in_progress',
+        items: [makeItem({ id: 'a', title: 'Task A', status: 'in_progress', category: 'unknown' })],
+      },
+    ]
+    const { container } = render(<GanttBoardView {...defaultProps({ boardColumns: columns })} />)
+    const badge = container.querySelector('.gantt-category-badge') as HTMLElement | null
+    expect(badge).toBeInTheDocument()
+    expect(badge?.style.backgroundColor).toBe('rgb(107, 114, 128)') // #6b7280 in rgb
+  })
+})
+
+// ---------------------------------------------------------------------------
+// Item click
+// ---------------------------------------------------------------------------
+
+describe('GanttBoardView — item click', () => {
+  it('calls handleItemClick when a card is clicked', () => {
+    const handleItemClick = jest.fn()
+    const item = makeItem({ id: 'a', title: 'Clickable', status: 'in_progress' })
+    const columns = [{ status: 'in_progress', items: [item] }]
+    render(<GanttBoardView {...defaultProps({ boardColumns: columns, handleItemClick })} />)
+    fireEvent.click(screen.getByText('Clickable'))
+    expect(handleItemClick).toHaveBeenCalledWith(item)
+  })
+
+  it('calls handleItemClick with the correct item when multiple cards are present', () => {
+    const handleItemClick = jest.fn()
+    const itemA = makeItem({ id: 'a', title: 'Task A', status: 'in_progress' })
+    const itemB = makeItem({ id: 'b', title: 'Task B', status: 'in_progress' })
+    const columns = [{ status: 'in_progress', items: [itemA, itemB] }]
+    render(<GanttBoardView {...defaultProps({ boardColumns: columns, handleItemClick })} />)
+    fireEvent.click(screen.getByText('Task B'))
+    expect(handleItemClick).toHaveBeenCalledWith(itemB)
+  })
+})
+
+// ---------------------------------------------------------------------------
+// Drag and drop
+// ---------------------------------------------------------------------------
+
+describe('GanttBoardView — drag and drop', () => {
+  it('sets boardDragItem when drag starts on a card', () => {
+    const setBoardDragItem = jest.fn()
+    const onStatusChange = jest.fn()
+    const item = makeItem({ id: 'a', title: 'Draggable', status: 'not_started' })
+    const columns = [{ status: 'not_started', items: [item] }]
+    const { container } = render(
+      <GanttBoardView
+        {...defaultProps({ boardColumns: columns, setBoardDragItem, onStatusChange })}
+      />
+    )
+    const card = container.querySelector('.gantt-board-card') as HTMLElement
+    fireEvent.dragStart(card)
+    expect(setBoardDragItem).toHaveBeenCalledWith('a')
+  })
+
+  it('clears boardDragItem when drag ends', () => {
+    const setBoardDragItem = jest.fn()
+    const onStatusChange = jest.fn()
+    const item = makeItem({ id: 'a', title: 'Draggable', status: 'not_started' })
+    const columns = [{ status: 'not_started', items: [item] }]
+    const { container } = render(
+      <GanttBoardView
+        {...defaultProps({ boardColumns: columns, setBoardDragItem, onStatusChange })}
+      />
+    )
+    const card = container.querySelector('.gantt-board-card') as HTMLElement
+    fireEvent.dragEnd(card)
+    expect(setBoardDragItem).toHaveBeenCalledWith(null)
+  })
+
+  it('calls onStatusChange with the new status on drop', () => {
+    const setBoardDragItem = jest.fn()
+    const onStatusChange = jest.fn()
+    const item = makeItem({ id: 'a', title: 'Draggable', status: 'not_started' })
+    const columns = [
+      { status: 'not_started', items: [item] },
+      { status: 'completed', items: [] },
+    ]
+    const { container } = render(
+      <GanttBoardView
+        {...defaultProps({ boardColumns: columns, boardDragItem: 'a', setBoardDragItem, onStatusChange })}
+      />
+    )
+    const targetColumn = container.querySelectorAll('.gantt-board-column')[1] as HTMLElement
+    fireEvent.drop(targetColumn)
+    expect(onStatusChange).toHaveBeenCalledWith('a', 'completed')
+  })
+
+  it('does not call onStatusChange when onStatusChange is not provided', () => {
+    const setBoardDragItem = jest.fn()
+    const item = makeItem({ id: 'a', title: 'Draggable', status: 'not_started' })
+    const columns = [
+      { status: 'not_started', items: [item] },
+      { status: 'completed', items: [] },
+    ]
+    // Should not throw even without onStatusChange
+    const { container } = render(
+      <GanttBoardView
+        {...defaultProps({
+          boardColumns: columns,
+          boardDragItem: 'a',
+          setBoardDragItem,
+          onStatusChange: undefined,
+        })}
+      />
+    )
+    const targetColumn = container.querySelectorAll('.gantt-board-column')[1] as HTMLElement
+    expect(() => fireEvent.drop(targetColumn)).not.toThrow()
+    expect(setBoardDragItem).toHaveBeenCalledWith(null)
+  })
+
+  it('cards are not draggable when onStatusChange is undefined', () => {
+    const item = makeItem({ id: 'a', title: 'Static', status: 'not_started' })
+    const columns = [{ status: 'not_started', items: [item] }]
+    const { container } = render(
+      <GanttBoardView {...defaultProps({ boardColumns: columns, onStatusChange: undefined })} />
+    )
+    const card = container.querySelector('.gantt-board-card') as HTMLElement
+    // draggable attribute should be false (falsy) when onStatusChange is absent
+    expect(card.draggable).toBe(false)
+  })
+
+  it('cards are draggable when onStatusChange is provided', () => {
+    const onStatusChange = jest.fn()
+    const item = makeItem({ id: 'a', title: 'Draggable', status: 'not_started' })
+    const columns = [{ status: 'not_started', items: [item] }]
+    const { container } = render(
+      <GanttBoardView {...defaultProps({ boardColumns: columns, onStatusChange })} />
+    )
+    const card = container.querySelector('.gantt-board-card') as HTMLElement
+    expect(card.draggable).toBe(true)
+  })
+})
+
+// ---------------------------------------------------------------------------
+// Drag-over visual state
+// ---------------------------------------------------------------------------
+
+describe('GanttBoardView — drop-target styling', () => {
+  it('applies gantt-board-drop-target class to all columns when boardDragItem is set', () => {
+    const columns = [
+      { status: 'not_started', items: [] },
+      { status: 'completed', items: [] },
+    ]
+    const { container } = render(
+      <GanttBoardView {...defaultProps({ boardColumns: columns, boardDragItem: 'some-id' })} />
+    )
+    const dropTargets = container.querySelectorAll('.gantt-board-drop-target')
+    expect(dropTargets).toHaveLength(2)
+  })
+
+  it('does not apply gantt-board-drop-target when boardDragItem is null', () => {
+    const columns = [{ status: 'not_started', items: [] }]
+    const { container } = render(
+      <GanttBoardView {...defaultProps({ boardColumns: columns, boardDragItem: null })} />
+    )
+    expect(container.querySelector('.gantt-board-drop-target')).not.toBeInTheDocument()
+  })
+})