135 lines
5.5 KiB
TypeScript
135 lines
5.5 KiB
TypeScript
// @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 }) }))
|
|
|
|
// localStorage mock for StoryPanel sort mode persistence
|
|
const localStorageMock = (() => {
|
|
let store: Record<string, string> = {}
|
|
return {
|
|
getItem: (k: string) => store[k] ?? null,
|
|
setItem: (k: string, v: string) => { store[k] = v },
|
|
removeItem: (k: string) => { delete store[k] },
|
|
clear: () => { store = {} },
|
|
}
|
|
})()
|
|
Object.defineProperty(globalThis, 'localStorage', { value: localStorageMock, writable: true })
|
|
|
|
// Mock server actions
|
|
vi.mock('@/actions/stories', () => ({
|
|
reorderStoriesAction: vi.fn().mockResolvedValue({ success: true }),
|
|
reorderPbisAction: vi.fn().mockResolvedValue({ success: true }),
|
|
updatePbiPriorityAction: vi.fn().mockResolvedValue({ success: true }),
|
|
}))
|
|
vi.mock('@/actions/pbis', () => ({ deletePbiAction: vi.fn().mockResolvedValue({ success: true }) }))
|
|
vi.mock('@/actions/tasks', () => ({ reorderTasksAction: vi.fn().mockResolvedValue({ success: true }) }))
|
|
vi.mock('sonner', () => ({ toast: { error: vi.fn(), success: vi.fn() } }))
|
|
|
|
// Mock dnd-kit
|
|
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,
|
|
}),
|
|
verticalListSortingStrategy: {},
|
|
rectSortingStrategy: {},
|
|
arrayMove: (arr: unknown[]) => arr,
|
|
rectSortingStrategy: {},
|
|
sortableKeyboardCoordinates: {},
|
|
arrayMove: (arr: unknown[]) => arr,
|
|
}))
|
|
vi.mock('@dnd-kit/utilities', () => ({ CSS: { Transform: { toString: () => '' } } }))
|
|
|
|
import { StoryPanel } from '@/components/backlog/story-panel'
|
|
import { TaskPanel } from '@/components/backlog/task-panel'
|
|
|
|
const PRODUCT_ID = 'prod-1'
|
|
const PBI_ID = 'pbi-1'
|
|
const ALT_PBI_ID = 'pbi-2'
|
|
const STORY_ID = 'story-1'
|
|
|
|
const STORIES = [
|
|
{ id: STORY_ID, code: 'ST-1', title: 'Eerste story', description: null, acceptance_criteria: null, priority: 2, status: 'OPEN', pbi_id: PBI_ID, created_at: new Date() },
|
|
]
|
|
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() },
|
|
]
|
|
|
|
function resetStores() {
|
|
useSelectionStore.setState({ selectedPbiId: null, selectedStoryId: null })
|
|
useBacklogStore.setState({
|
|
pbis: [],
|
|
storiesByPbi: { [PBI_ID]: STORIES },
|
|
tasksByStory: { [STORY_ID]: TASKS },
|
|
})
|
|
}
|
|
|
|
describe('Backlog 3-pane integration', () => {
|
|
beforeEach(() => {
|
|
mockPush.mockClear()
|
|
resetStores()
|
|
})
|
|
|
|
it('StoryPanel shows empty state when no PBI selected', () => {
|
|
render(<StoryPanel productId={PRODUCT_ID} isDemo={false} />)
|
|
expect(screen.getByText('Selecteer een PBI om de stories te bekijken.')).toBeTruthy()
|
|
})
|
|
|
|
it('StoryPanel shows stories when PBI is selected', () => {
|
|
useSelectionStore.setState({ selectedPbiId: PBI_ID, selectedStoryId: null })
|
|
render(<StoryPanel productId={PRODUCT_ID} isDemo={false} />)
|
|
expect(screen.getByText('Eerste story')).toBeTruthy()
|
|
})
|
|
|
|
it('clicking a story dispatches selectStory to the store', () => {
|
|
useSelectionStore.setState({ selectedPbiId: PBI_ID, selectedStoryId: null })
|
|
render(<StoryPanel productId={PRODUCT_ID} isDemo={false} />)
|
|
fireEvent.click(screen.getByText('Eerste story'))
|
|
expect(useSelectionStore.getState().selectedStoryId).toBe(STORY_ID)
|
|
})
|
|
|
|
it('cascade-reset: selecting different PBI clears selectedStoryId', () => {
|
|
useSelectionStore.setState({ selectedPbiId: PBI_ID, selectedStoryId: STORY_ID })
|
|
useSelectionStore.getState().selectPbi(ALT_PBI_ID)
|
|
expect(useSelectionStore.getState().selectedStoryId).toBeNull()
|
|
})
|
|
|
|
it('TaskPanel shows tasks after story is selected', () => {
|
|
useSelectionStore.setState({ selectedPbiId: PBI_ID, selectedStoryId: STORY_ID })
|
|
render(<TaskPanel productId={PRODUCT_ID} isDemo={false} closePath={`/products/${PRODUCT_ID}`} />)
|
|
expect(screen.getByText('Eerste taak')).toBeTruthy()
|
|
})
|
|
|
|
it('TaskPanel shows empty state after cascade-reset', () => {
|
|
useSelectionStore.setState({ selectedPbiId: PBI_ID, selectedStoryId: STORY_ID })
|
|
render(<TaskPanel productId={PRODUCT_ID} isDemo={false} closePath={`/products/${PRODUCT_ID}`} />)
|
|
// Reset via selectPbi
|
|
useSelectionStore.getState().selectPbi(ALT_PBI_ID)
|
|
// Re-render reflects new store state
|
|
render(<TaskPanel productId={PRODUCT_ID} isDemo={false} closePath={`/products/${PRODUCT_ID}`} />)
|
|
expect(screen.getAllByText('Selecteer een story om de taken te bekijken.').length).toBeGreaterThan(0)
|
|
})
|
|
|
|
it('selected story card has isSelected highlight class applied', () => {
|
|
useSelectionStore.setState({ selectedPbiId: PBI_ID, selectedStoryId: STORY_ID })
|
|
const { container } = render(<StoryPanel productId={PRODUCT_ID} isDemo={false} />)
|
|
// bg-primary-container is applied when isSelected
|
|
const selected = container.querySelector('.bg-primary-container')
|
|
expect(selected).toBeTruthy()
|
|
})
|
|
})
|