feat(M14): 3-pane backlog — generic SplitPane, BacklogStore, SSE realtime, card-grid TaskPanel (#22)
* feat(split-pane): refactor to generic n-pane SplitPane with cookie persistence New API: panes[], defaultSplit[], cookieKey, tabLabels. Supports arbitrary number of panes with n-1 draggable dividers and JSON cookie persistence. Replaces TriplePane; mobile renders tabs. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(split-pane): migrate callers to new panes[] API Backlog page and sprint board now use generic SplitPane. TriplePane removed; sprint board uses 3-pane with defaultSplit=[28,35,37]. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * test(split-pane): add unit tests for 2/3-pane, cookie-restore, mobile tabs Added jsdom + @testing-library/react devDeps for component testing. 7 cases: render, divider count, cookie restore, invalid cookie fallback, mobile tab render/switch, and no-dividers-on-mobile. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(backlog): add BacklogStore Zustand store with applyChange reducer State: pbis, storiesByPbi, tasksByStory. setInitialData for server hydration; applyChange(entity, op, data) handles I/U/D for SSE events. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(backlog): server-fetch tasks + hydrate BacklogStore on page load Page now fetches tasks parallel to stories and groups by story_id. BacklogHydrationWrapper calls setInitialData on mount so the store is ready for downstream SSE consumers. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(backlog): add EmptyPanel shared component, replace inline empty states EmptyPanel takes title?, message, and optional action with DemoTooltip. Replaces duplicate inline empty-state markup in pbi-list and story-panel. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(backlog): add TaskPanel with sortable rows and TaskDialog wiring Reads selectedStoryId + tasksByStory from stores. DnD reorder via reorderTasksAction. Row click → ?editTask, + button → ?newTask&storyId. DemoTooltip on drag handles and + button. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(backlog): wire TaskPanel + TaskDialog into backlog page 3-pane SplitPane [20,45,35]. searchParams for newTask/editTask. TaskDialog and EditTaskLoader render on ?newTask and ?editTask. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * 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> * feat(backlog): migrate PbiList to store-driven via useBacklogStore Removes pbis prop; reads from useBacklogStore(s => s.pbis) so SSE updates reflect in real-time without prop drilling. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(backlog): migrate StoryPanel to store-driven + selectStory on click Removes storiesByPbi prop; reads from useBacklogStore. Card click now dispatches selectStory(id) + shows isSelected highlight. Edit moved to inline pencil button. page.tsx drops pbis/storiesByPbi props. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * test(backlog): add 3-pane integration tests for click-cascade flow Covers: empty states, PBI→stories, story→tasks, cascade-reset, isSelected highlight. localStorage mocked for sort-mode persistence. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(ST-1115): SSE backlog realtime — endpoint, hook, hydration mount, tests Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(ST-1116): mobile auto-switch tabs + back button in BacklogSplitPane Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * docs(ST-1116): update functional-spec (3-pane backlog + mobile) and architecture (backlog SSE + backlog-store) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(ST-1117): TaskPanel card-grid — BacklogCard + rectSortingStrategy, tests updated Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix(tests): correct PbiStatusApi type and remove duplicate mock keys Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
GitHub
parent
6cd98129f2
commit
8877ea469d
22 changed files with 2474 additions and 305 deletions
85
__tests__/components/backlog/backlog-split-pane.test.tsx
Normal file
85
__tests__/components/backlog/backlog-split-pane.test.tsx
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
// @vitest-environment jsdom
|
||||
import { describe, it, expect, beforeEach } from 'vitest'
|
||||
import { render, screen } from '@testing-library/react'
|
||||
import { useSelectionStore } from '@/stores/selection-store'
|
||||
import { BacklogSplitPane } from '@/components/backlog/backlog-split-pane'
|
||||
|
||||
const PANES = [
|
||||
<div key="a">PBI pane</div>,
|
||||
<div key="b">Stories pane</div>,
|
||||
<div key="c">Tasks pane</div>,
|
||||
]
|
||||
|
||||
function renderPane() {
|
||||
return render(
|
||||
<BacklogSplitPane
|
||||
panes={PANES}
|
||||
defaultSplit={[33, 33, 34]}
|
||||
cookieKey="test-backlog"
|
||||
tabLabels={["PBI's", 'Stories', 'Taken']}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
useSelectionStore.setState({ selectedPbiId: null, selectedStoryId: null })
|
||||
// Force mobile viewport
|
||||
Object.defineProperty(window, 'innerWidth', { writable: true, configurable: true, value: 600 })
|
||||
window.dispatchEvent(new Event('resize'))
|
||||
})
|
||||
|
||||
describe('BacklogSplitPane auto-switch', () => {
|
||||
it('starts on tab 0 with no selection', () => {
|
||||
renderPane()
|
||||
expect(screen.getByText('PBI pane')).toBeTruthy()
|
||||
expect(screen.queryByText('Stories pane')).toBeNull()
|
||||
})
|
||||
|
||||
it('auto-switches to tab 1 when PBI is selected', () => {
|
||||
const { rerender } = renderPane()
|
||||
useSelectionStore.setState({ selectedPbiId: 'pbi-1', selectedStoryId: null })
|
||||
rerender(
|
||||
<BacklogSplitPane
|
||||
panes={PANES}
|
||||
defaultSplit={[33, 33, 34]}
|
||||
cookieKey="test-backlog"
|
||||
tabLabels={["PBI's", 'Stories', 'Taken']}
|
||||
/>
|
||||
)
|
||||
expect(screen.getByText('Stories pane')).toBeTruthy()
|
||||
expect(screen.queryByText('PBI pane')).toBeNull()
|
||||
})
|
||||
|
||||
it('auto-switches to tab 2 when story is selected', () => {
|
||||
const { rerender } = renderPane()
|
||||
useSelectionStore.setState({ selectedPbiId: 'pbi-1', selectedStoryId: 'story-1' })
|
||||
rerender(
|
||||
<BacklogSplitPane
|
||||
panes={PANES}
|
||||
defaultSplit={[33, 33, 34]}
|
||||
cookieKey="test-backlog"
|
||||
tabLabels={["PBI's", 'Stories', 'Taken']}
|
||||
/>
|
||||
)
|
||||
expect(screen.getByText('Tasks pane')).toBeTruthy()
|
||||
expect(screen.queryByText('PBI pane')).toBeNull()
|
||||
})
|
||||
|
||||
it('switches to tab 1 on cascade-reset (story cleared when new PBI selected)', () => {
|
||||
// Start with story selected (tab 2)
|
||||
useSelectionStore.setState({ selectedPbiId: 'pbi-1', selectedStoryId: 'story-1' })
|
||||
const { rerender } = renderPane()
|
||||
|
||||
// Cascade-reset: new PBI → story clears
|
||||
useSelectionStore.setState({ selectedPbiId: 'pbi-2', selectedStoryId: null })
|
||||
rerender(
|
||||
<BacklogSplitPane
|
||||
panes={PANES}
|
||||
defaultSplit={[33, 33, 34]}
|
||||
cookieKey="test-backlog"
|
||||
tabLabels={["PBI's", 'Stories', 'Taken']}
|
||||
/>
|
||||
)
|
||||
expect(screen.getByText('Stories pane')).toBeTruthy()
|
||||
})
|
||||
})
|
||||
133
__tests__/components/backlog/integration.test.tsx
Normal file
133
__tests__/components/backlog/integration.test.tsx
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
// @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: {},
|
||||
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()
|
||||
})
|
||||
})
|
||||
136
__tests__/components/backlog/task-panel.test.tsx
Normal file
136
__tests__/components/backlog/task-panel.test.tsx
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
// @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()
|
||||
})
|
||||
})
|
||||
227
__tests__/components/split-pane.test.tsx
Normal file
227
__tests__/components/split-pane.test.tsx
Normal file
|
|
@ -0,0 +1,227 @@
|
|||
// @vitest-environment jsdom
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
|
||||
import { render, screen, fireEvent } from '@testing-library/react'
|
||||
import { SplitPane } from '@/components/split-pane/split-pane'
|
||||
|
||||
// Helper to set a cookie
|
||||
function setCookie(key: string, value: string) {
|
||||
Object.defineProperty(document, 'cookie', {
|
||||
writable: true,
|
||||
configurable: true,
|
||||
value: `sp:${key}=${encodeURIComponent(value)}`,
|
||||
})
|
||||
}
|
||||
|
||||
function clearCookies() {
|
||||
Object.defineProperty(document, 'cookie', {
|
||||
writable: true,
|
||||
configurable: true,
|
||||
value: '',
|
||||
})
|
||||
}
|
||||
|
||||
describe('SplitPane', () => {
|
||||
beforeEach(() => {
|
||||
clearCookies()
|
||||
// Default: desktop viewport
|
||||
Object.defineProperty(window, 'innerWidth', { writable: true, configurable: true, value: 1440 })
|
||||
window.dispatchEvent(new Event('resize'))
|
||||
})
|
||||
|
||||
afterEach(() => {
|
||||
vi.restoreAllMocks()
|
||||
})
|
||||
|
||||
it('renders 2 panes', () => {
|
||||
render(
|
||||
<SplitPane
|
||||
panes={[<div key="a">Pane A</div>, <div key="b">Pane B</div>]}
|
||||
defaultSplit={[30, 70]}
|
||||
cookieKey="test-2pane"
|
||||
/>
|
||||
)
|
||||
expect(screen.getByText('Pane A')).toBeTruthy()
|
||||
expect(screen.getByText('Pane B')).toBeTruthy()
|
||||
})
|
||||
|
||||
it('renders 3 panes with 2 dividers', () => {
|
||||
const { container } = render(
|
||||
<SplitPane
|
||||
panes={[
|
||||
<div key="a">Left</div>,
|
||||
<div key="b">Middle</div>,
|
||||
<div key="c">Right</div>,
|
||||
]}
|
||||
defaultSplit={[28, 35, 37]}
|
||||
cookieKey="test-3pane"
|
||||
/>
|
||||
)
|
||||
expect(screen.getByText('Left')).toBeTruthy()
|
||||
expect(screen.getByText('Middle')).toBeTruthy()
|
||||
expect(screen.getByText('Right')).toBeTruthy()
|
||||
// 2 dividers: cursor-col-resize elements
|
||||
const dividers = container.querySelectorAll('.cursor-col-resize')
|
||||
expect(dividers).toHaveLength(2)
|
||||
})
|
||||
|
||||
it('restores splits from cookie on mount', () => {
|
||||
const stored = JSON.stringify([40, 60])
|
||||
setCookie('test-restore', stored)
|
||||
|
||||
const { container } = render(
|
||||
<SplitPane
|
||||
panes={[<div key="a">A</div>, <div key="b">B</div>]}
|
||||
defaultSplit={[20, 80]}
|
||||
cookieKey="test-restore"
|
||||
/>
|
||||
)
|
||||
|
||||
// Left pane should have width 40%, not the default 20%
|
||||
const paneDiv = container.querySelector<HTMLElement>('[style*="40%"]')
|
||||
expect(paneDiv).toBeTruthy()
|
||||
})
|
||||
|
||||
it('falls back to defaultSplit when cookie is invalid', () => {
|
||||
setCookie('test-invalid', 'not-valid-json')
|
||||
|
||||
const { container } = render(
|
||||
<SplitPane
|
||||
panes={[<div key="a">A</div>, <div key="b">B</div>]}
|
||||
defaultSplit={[25, 75]}
|
||||
cookieKey="test-invalid"
|
||||
/>
|
||||
)
|
||||
|
||||
const paneDiv = container.querySelector<HTMLElement>('[style*="25%"]')
|
||||
expect(paneDiv).toBeTruthy()
|
||||
})
|
||||
|
||||
it('renders tabs on mobile viewport', () => {
|
||||
Object.defineProperty(window, 'innerWidth', { writable: true, configurable: true, value: 768 })
|
||||
window.dispatchEvent(new Event('resize'))
|
||||
|
||||
render(
|
||||
<SplitPane
|
||||
panes={[<div key="a">Content A</div>, <div key="b">Content B</div>]}
|
||||
defaultSplit={[50, 50]}
|
||||
cookieKey="test-mobile"
|
||||
tabLabels={['Tab A', 'Tab B']}
|
||||
/>
|
||||
)
|
||||
|
||||
expect(screen.getByText('Tab A')).toBeTruthy()
|
||||
expect(screen.getByText('Tab B')).toBeTruthy()
|
||||
// Only first tab content visible by default
|
||||
expect(screen.getByText('Content A')).toBeTruthy()
|
||||
expect(screen.queryByText('Content B')).toBeNull()
|
||||
})
|
||||
|
||||
it('switches tab content on mobile', () => {
|
||||
Object.defineProperty(window, 'innerWidth', { writable: true, configurable: true, value: 600 })
|
||||
window.dispatchEvent(new Event('resize'))
|
||||
|
||||
render(
|
||||
<SplitPane
|
||||
panes={[<div key="a">Content A</div>, <div key="b">Content B</div>]}
|
||||
defaultSplit={[50, 50]}
|
||||
cookieKey="test-mobile-switch"
|
||||
tabLabels={['Tab A', 'Tab B']}
|
||||
/>
|
||||
)
|
||||
|
||||
// Click second tab
|
||||
fireEvent.click(screen.getByText('Tab B'))
|
||||
expect(screen.queryByText('Content A')).toBeNull()
|
||||
expect(screen.getByText('Content B')).toBeTruthy()
|
||||
})
|
||||
|
||||
it('back button not visible on tab 0 in mobile', () => {
|
||||
Object.defineProperty(window, 'innerWidth', { writable: true, configurable: true, value: 600 })
|
||||
window.dispatchEvent(new Event('resize'))
|
||||
|
||||
render(
|
||||
<SplitPane
|
||||
panes={[<div key="a">A</div>, <div key="b">B</div>, <div key="c">C</div>]}
|
||||
defaultSplit={[33, 33, 34]}
|
||||
cookieKey="test-back-hidden"
|
||||
tabLabels={['T1', 'T2', 'T3']}
|
||||
/>
|
||||
)
|
||||
|
||||
// On tab 0, no back button
|
||||
expect(screen.queryByLabelText('Terug')).toBeNull()
|
||||
})
|
||||
|
||||
it('back button visible on tab > 0 and navigates back', () => {
|
||||
Object.defineProperty(window, 'innerWidth', { writable: true, configurable: true, value: 600 })
|
||||
window.dispatchEvent(new Event('resize'))
|
||||
|
||||
render(
|
||||
<SplitPane
|
||||
panes={[<div key="a">A</div>, <div key="b">B</div>, <div key="c">C</div>]}
|
||||
defaultSplit={[33, 33, 34]}
|
||||
cookieKey="test-back-nav"
|
||||
tabLabels={['T1', 'T2', 'T3']}
|
||||
/>
|
||||
)
|
||||
|
||||
// Switch to tab 2
|
||||
fireEvent.click(screen.getByText('T3'))
|
||||
expect(screen.getByText('C')).toBeTruthy()
|
||||
expect(screen.getByLabelText('Terug')).toBeTruthy()
|
||||
|
||||
// Click back → tab 1
|
||||
fireEvent.click(screen.getByLabelText('Terug'))
|
||||
expect(screen.getByText('B')).toBeTruthy()
|
||||
|
||||
// Click back again → tab 0, no back button
|
||||
fireEvent.click(screen.getByLabelText('Terug'))
|
||||
expect(screen.getByText('A')).toBeTruthy()
|
||||
expect(screen.queryByLabelText('Terug')).toBeNull()
|
||||
})
|
||||
|
||||
it('controlled activeTab prop switches the active pane', () => {
|
||||
Object.defineProperty(window, 'innerWidth', { writable: true, configurable: true, value: 600 })
|
||||
window.dispatchEvent(new Event('resize'))
|
||||
|
||||
const { rerender } = render(
|
||||
<SplitPane
|
||||
panes={[<div key="a">A</div>, <div key="b">B</div>, <div key="c">C</div>]}
|
||||
defaultSplit={[33, 33, 34]}
|
||||
cookieKey="test-controlled"
|
||||
tabLabels={['T1', 'T2', 'T3']}
|
||||
activeTab={0}
|
||||
onActiveTabChange={vi.fn()}
|
||||
/>
|
||||
)
|
||||
expect(screen.getByText('A')).toBeTruthy()
|
||||
|
||||
rerender(
|
||||
<SplitPane
|
||||
panes={[<div key="a">A</div>, <div key="b">B</div>, <div key="c">C</div>]}
|
||||
defaultSplit={[33, 33, 34]}
|
||||
cookieKey="test-controlled"
|
||||
tabLabels={['T1', 'T2', 'T3']}
|
||||
activeTab={2}
|
||||
onActiveTabChange={vi.fn()}
|
||||
/>
|
||||
)
|
||||
expect(screen.getByText('C')).toBeTruthy()
|
||||
})
|
||||
|
||||
it('does not render dividers on mobile', () => {
|
||||
Object.defineProperty(window, 'innerWidth', { writable: true, configurable: true, value: 600 })
|
||||
window.dispatchEvent(new Event('resize'))
|
||||
|
||||
const { container } = render(
|
||||
<SplitPane
|
||||
panes={[<div key="a">A</div>, <div key="b">B</div>]}
|
||||
defaultSplit={[50, 50]}
|
||||
cookieKey="test-no-dividers"
|
||||
/>
|
||||
)
|
||||
|
||||
const dividers = container.querySelectorAll('.cursor-col-resize')
|
||||
expect(dividers).toHaveLength(0)
|
||||
})
|
||||
})
|
||||
Loading…
Add table
Add a link
Reference in a new issue