Scrum4Me/__tests__/components/backlog/backlog-split-pane.test.tsx
Madhura68 3e86a8d5c9 feat(ST-1116): mobile auto-switch tabs + back button in BacklogSplitPane
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-30 17:53:38 +02:00

85 lines
2.7 KiB
TypeScript

// @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()
})
})