Scrum4Me/__tests__/components/backlog/task-panel.test.tsx
Scrum4Me Agent 3a7141114c docs+tests(sort-order): update for code-binding order on stories/tasks
- Rewrite docs/patterns/sort-order.md: float-insertion PBI only; story/task
  sort_order = parseCodeNumber(code), never drag/membership mutated
- Update plan-to-pbi-flow.md: sort_order auto, sprint_id param, priority=label
- Update make-plan.md: priority=label, array order = execution order
- Update rest-contract.md: fix sprint-tasks ordering, remove reorder endpoint
- Add ADR-0011: code is bindende volgordesleutel voor stories/taken
- Regenerate docs/INDEX.md via npm run docs
- Remove reorderStoriesAction/reorderTasksAction mocks from backlog tests
- Remove dnd-kit mocks from task-panel test (panel no longer uses dnd)
- Extend materializeIdeaPlanAction test: assert sort_order=parseCodeNumber(code)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-14 18:13:42 +02:00

115 lines
3.9 KiB
TypeScript

// @vitest-environment jsdom
import { describe, it, expect, vi, beforeEach } from 'vitest'
import { render, screen, fireEvent } from '@testing-library/react'
import { useProductWorkspaceStore } from '@/stores/product-workspace/store'
import type { BacklogTask } from '@/stores/product-workspace/types'
function resetWorkspace() {
useProductWorkspaceStore.setState((s) => {
s.context.activeProduct = null
s.context.activePbiId = null
s.context.activeStoryId = null
s.context.activeTaskId = null
s.entities.pbisById = {}
s.entities.storiesById = {}
s.entities.tasksById = {}
s.relations.pbiIds = []
s.relations.storyIdsByPbi = {}
s.relations.taskIdsByStory = {}
})
}
function setActiveStoryAndTasks(storyId: string | null, tasks: BacklogTask[] = []) {
useProductWorkspaceStore.setState((s) => {
s.context.activeStoryId = storyId
if (storyId) {
s.relations.taskIdsByStory[storyId] = tasks.map((t) => t.id)
for (const task of tasks) s.entities.tasksById[task.id] = task
}
})
}
// Mock next/navigation
const mockPush = vi.fn()
vi.mock('next/navigation', () => ({ useRouter: () => ({ push: mockPush }) }))
vi.mock('sonner', () => ({ toast: { error: vi.fn(), success: vi.fn() } }))
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', code: null, title: 'Eerste taak', description: null, priority: 2, status: 'TO_DO', sort_order: 1, story_id: STORY_ID, created_at: new Date() },
{ id: 'task-2', code: null, 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()
resetWorkspace()
})
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', () => {
setActiveStoryAndTasks(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', () => {
setActiveStoryAndTasks(STORY_ID, TASKS)
renderPanel()
expect(screen.getByText('Eerste taak')).toBeTruthy()
expect(screen.getByText('Tweede taak')).toBeTruthy()
})
it('renders status badges on task cards', () => {
setActiveStoryAndTasks(STORY_ID, TASKS)
renderPanel()
expect(screen.getByText('To Do')).toBeTruthy()
expect(screen.getByText('Bezig')).toBeTruthy()
})
it('task cards are rendered inside a grid container', () => {
setActiveStoryAndTasks(STORY_ID, TASKS)
const { container } = renderPanel()
const grid = container.querySelector('.grid')
expect(grid).toBeTruthy()
})
it('clicking + button calls router.push with newTask params', () => {
setActiveStoryAndTasks(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', () => {
setActiveStoryAndTasks(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', () => {
setActiveStoryAndTasks(STORY_ID, [])
renderPanel(true)
const btn = screen.getAllByText('+ Nieuwe taak')[0].closest('button')
expect(btn).toBeTruthy()
expect((btn as HTMLButtonElement).disabled).toBe(true)
})
})