test(backlog): add TaskPanel tests for render states and click handlers

7 cases: no-story empty, no-tasks empty+action, tasks render, + button
router.push, row click router.push, demo disabled button, demo disabled handles.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

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

@@ -0,0 +1,112 @@
+// @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 }) }))
+
+// 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(),
+}))
+vi.mock('@dnd-kit/sortable', () => ({
+  SortableContext: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  useSortable: () => ({
+    attributes: {}, listeners: {}, setNodeRef: vi.fn(),
+    transform: null, transition: undefined, isDragging: false,
+  }),
+  verticalListSortingStrategy: {},
+  sortableKeyboardCoordinates: {},
+}))
+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()
+    // Header + EmptyPanel both render a "Nieuwe taak" button
+    expect(screen.getAllByText('Nieuwe taak').length).toBeGreaterThanOrEqual(1)
+  })
+
+  it('renders task rows 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('clicking + button calls router.push with newTask params', () => {
+    useSelectionStore.setState({ selectedStoryId: STORY_ID, selectedPbiId: null })
+    useBacklogStore.setState({ tasksByStory: { [STORY_ID]: [] } })
+    renderPanel()
+    // The header "Nieuwe taak" button
+    const buttons = screen.getAllByText('Nieuwe taak')
+    fireEvent.click(buttons[0])
+    expect(mockPush).toHaveBeenCalledWith(`${CLOSE_PATH}?newTask=1&storyId=${STORY_ID}`)
+  })
+
+  it('clicking task row 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('drag handles are disabled in demo mode', () => {
+    useSelectionStore.setState({ selectedStoryId: STORY_ID, selectedPbiId: null })
+    useBacklogStore.setState({ tasksByStory: { [STORY_ID]: TASKS } })
+    renderPanel(true)
+    const handles = screen.getAllByLabelText('Versleep om te herordenen')
+    handles.forEach((h) => expect((h as HTMLButtonElement).disabled).toBe(true))
+  })
+})