Scrum4Me/__tests__/components/backlog/task-panel.test.tsx

// @vitest-environment jsdom
import { describe, it, expect, vi, beforeEach } from 'vitest'
import { render, screen, fireEvent } from '@testing-library/react'
import { useSelectionStore } from '@/stores/selection-store'
import { useBacklogStore } from '@/stores/backlog-store'

// Mock next/navigation
const mockPush = vi.fn()
vi.mock('next/navigation', () => ({ useRouter: () => ({ push: mockPush }) }))

// Mock reorderTasksAction
vi.mock('@/actions/tasks', () => ({ reorderTasksAction: vi.fn().mockResolvedValue({ success: true }) }))
vi.mock('sonner', () => ({ toast: { error: vi.fn(), success: vi.fn() } }))

// Mock dnd-kit to avoid jsdom drag complexity
vi.mock('@dnd-kit/core', () => ({
  DndContext: ({ children }: { children: React.ReactNode }) => <>{children}</>,
  PointerSensor: class {},
  KeyboardSensor: class {},
  useSensor: vi.fn(),
  useSensors: vi.fn(() => []),
  closestCenter: vi.fn(),
  DragOverlay: () => null,
}))
vi.mock('@dnd-kit/sortable', () => ({
  SortableContext: ({ children }: { children: React.ReactNode }) => <>{children}</>,
  useSortable: () => ({
    attributes: {}, listeners: {}, setNodeRef: vi.fn(),
    transform: null, transition: undefined, isDragging: false,
  }),
  rectSortingStrategy: {},
  sortableKeyboardCoordinates: {},
  arrayMove: (arr: unknown[], from: number, to: number) => {
    const next = [...arr]
    next.splice(from, 1)
    next.splice(to, 0, arr[from])
    return next
  },
}))
vi.mock('@dnd-kit/utilities', () => ({ CSS: { Transform: { toString: () => '' } } }))

import { TaskPanel } from '@/components/backlog/task-panel'

const PRODUCT_ID = 'prod-1'
const STORY_ID = 'story-1'
const CLOSE_PATH = `/products/${PRODUCT_ID}`

const TASKS = [
  { id: 'task-1', title: 'Eerste taak', description: null, priority: 2, status: 'TO_DO', sort_order: 1, story_id: STORY_ID, created_at: new Date() },
  { id: 'task-2', title: 'Tweede taak', description: null, priority: 3, status: 'IN_PROGRESS', sort_order: 2, story_id: STORY_ID, created_at: new Date() },
]

function renderPanel(isDemo = false) {
  return render(<TaskPanel productId={PRODUCT_ID} isDemo={isDemo} closePath={CLOSE_PATH} />)
}

describe('TaskPanel', () => {
  beforeEach(() => {
    mockPush.mockClear()
    useSelectionStore.setState({ selectedStoryId: null, selectedPbiId: null })
    useBacklogStore.setState({ pbis: [], storiesByPbi: {}, tasksByStory: {} })
  })

  it('shows empty state when no story is selected', () => {
    renderPanel()
    expect(screen.getByText('Selecteer een story om de taken te bekijken.')).toBeTruthy()
  })

  it('shows empty state with action when story selected but no tasks', () => {
    useSelectionStore.setState({ selectedStoryId: STORY_ID, selectedPbiId: null })
    useBacklogStore.setState({ tasksByStory: { [STORY_ID]: [] } })
    renderPanel()
    expect(screen.getByText('Nog geen taken voor deze story.')).toBeTruthy()
    expect(screen.getAllByText('+ Nieuwe taak').length).toBeGreaterThanOrEqual(1)
  })

  it('renders task cards when tasks are present', () => {
    useSelectionStore.setState({ selectedStoryId: STORY_ID, selectedPbiId: null })
    useBacklogStore.setState({ tasksByStory: { [STORY_ID]: TASKS } })
    renderPanel()
    expect(screen.getByText('Eerste taak')).toBeTruthy()
    expect(screen.getByText('Tweede taak')).toBeTruthy()
  })

  it('renders status badges on task cards', () => {
    useSelectionStore.setState({ selectedStoryId: STORY_ID, selectedPbiId: null })
    useBacklogStore.setState({ tasksByStory: { [STORY_ID]: TASKS } })
    renderPanel()
    expect(screen.getByText('To Do')).toBeTruthy()
    expect(screen.getByText('Bezig')).toBeTruthy()
  })

  it('task cards are rendered inside a grid container', () => {
    useSelectionStore.setState({ selectedStoryId: STORY_ID, selectedPbiId: null })
    useBacklogStore.setState({ tasksByStory: { [STORY_ID]: TASKS } })
    const { container } = renderPanel()
    const grid = container.querySelector('.grid')
    expect(grid).toBeTruthy()
  })

  it('clicking + button calls router.push with newTask params', () => {
    useSelectionStore.setState({ selectedStoryId: STORY_ID, selectedPbiId: null })
    useBacklogStore.setState({ tasksByStory: { [STORY_ID]: [] } })
    renderPanel()
    const buttons = screen.getAllByText('+ Nieuwe taak')
    fireEvent.click(buttons[0])
    expect(mockPush).toHaveBeenCalledWith(`${CLOSE_PATH}?newTask=1&storyId=${STORY_ID}`)
  })

  it('clicking task card calls router.push with editTask param', () => {
    useSelectionStore.setState({ selectedStoryId: STORY_ID, selectedPbiId: null })
    useBacklogStore.setState({ tasksByStory: { [STORY_ID]: TASKS } })
    renderPanel()
    fireEvent.click(screen.getByText('Eerste taak'))
    expect(mockPush).toHaveBeenCalledWith(`${CLOSE_PATH}?editTask=task-1`)
  })

  it('+ button is disabled in demo mode', () => {
    useSelectionStore.setState({ selectedStoryId: STORY_ID, selectedPbiId: null })
    useBacklogStore.setState({ tasksByStory: { [STORY_ID]: [] } })
    renderPanel(true)
    const btn = screen.getAllByText('+ Nieuwe taak')[0].closest('button')
    expect(btn).toBeTruthy()
    expect((btn as HTMLButtonElement).disabled).toBe(true)
  })

  it('cards have no drag listeners in demo mode (whole-card drag disabled)', () => {
    useSelectionStore.setState({ selectedStoryId: STORY_ID, selectedPbiId: null })
    useBacklogStore.setState({ tasksByStory: { [STORY_ID]: TASKS } })
    // In demo mode, listeners ({} from useSortable mock) are not spread onto the card.
    // The mock always returns empty listeners, so we just verify the cards render without error.
    renderPanel(true)
    expect(screen.getByText('Eerste taak')).toBeTruthy()
    expect(screen.getByText('Tweede taak')).toBeTruthy()
  })
})