feat(PBI-80): demo-user mag eigen UI-voorkeuren wijzigen (#194)
* feat(PBI-80): SprintSwitcher demo-fork (ST-1345) Demo-sessies navigeren bij sprint-wissel direct via router.push, zonder de geblokkeerde setActiveSprintAction aan te roepen. De server-action behoudt zijn 403-guard als defense in depth. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * feat(PBI-80): NavBar demo-fork + URL-derived actief product (ST-1346) Demo: product-switch in de NavBar navigeert direct via router.push zonder setActiveProductAction. Voor de weergave (label + dropdown-highlight + nav-links) leiden we voor demo de actieve product af uit pathname, zodat de UI consistent is met de URL — de server-render houdt de seed-default prop maar die wordt voor demo overschreven. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * docs(PBI-80): ADR-0006 addendum + demo-client-state patroon (ST-1347) ADR-0006 krijgt een "Updated 2026-05-12"-sectie die de PBI-80-uitzondering documenteert: client-side UI-prefs (filters, sort, layout, scope-keuze) zijn voor demo toegestaan via in-memory store, terwijl alle data-mutaties three-layer beschermd blijven. Patroon-doc beschrijft wanneer en hoe `isDemo` te gebruiken in nieuwe componenten. CLAUDE.md quickref + docs/INDEX.md ge-update. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Janpeter Visser
GitHub
parent
2bef1a4c20
commit
2b4b5bf719
9 changed files with 667 additions and 8 deletions
138
__tests__/components/shared/nav-bar.test.tsx
Normal file
138
__tests__/components/shared/nav-bar.test.tsx
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
// @vitest-environment jsdom
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
||||
import { render, screen, fireEvent } from '@testing-library/react'
|
||||
import '@testing-library/jest-dom'
|
||||
import React from 'react'
|
||||
|
||||
const pushMock = vi.fn()
|
||||
const refreshMock = vi.fn()
|
||||
const pathnameMock = vi.fn(() => '/dashboard')
|
||||
|
||||
vi.mock('next/navigation', () => ({
|
||||
useRouter: () => ({ push: pushMock, refresh: refreshMock }),
|
||||
usePathname: () => pathnameMock(),
|
||||
}))
|
||||
|
||||
vi.mock('@/actions/active-product', () => ({
|
||||
setActiveProductAction: vi.fn(),
|
||||
}))
|
||||
|
||||
vi.mock('sonner', () => ({
|
||||
toast: { error: vi.fn(), success: vi.fn() },
|
||||
}))
|
||||
|
||||
vi.mock('@/components/ui/dropdown-menu', () => {
|
||||
type Props = React.HTMLAttributes<HTMLDivElement> & {
|
||||
children?: React.ReactNode
|
||||
onClick?: () => void
|
||||
}
|
||||
const PassThrough = ({ children }: Props) => <>{children}</>
|
||||
const Forwarding = ({ children, ...rest }: Props) => <div {...rest}>{children}</div>
|
||||
return {
|
||||
DropdownMenu: PassThrough,
|
||||
DropdownMenuTrigger: Forwarding,
|
||||
DropdownMenuContent: PassThrough,
|
||||
DropdownMenuItem: ({ children, onClick, className }: Props) => (
|
||||
<button type="button" onClick={onClick} className={className} data-testid="dd-item">
|
||||
{children}
|
||||
</button>
|
||||
),
|
||||
DropdownMenuSeparator: () => null,
|
||||
}
|
||||
})
|
||||
|
||||
vi.mock('@/components/ui/tooltip', () => {
|
||||
type Props = { children?: React.ReactNode }
|
||||
const PassThrough = ({ children }: Props) => <>{children}</>
|
||||
return {
|
||||
Tooltip: PassThrough,
|
||||
TooltipContent: PassThrough,
|
||||
TooltipProvider: PassThrough,
|
||||
TooltipTrigger: PassThrough,
|
||||
}
|
||||
})
|
||||
|
||||
vi.mock('@/components/shared/app-icon', () => ({ AppIcon: () => null }))
|
||||
vi.mock('@/components/shared/user-menu', () => ({ UserMenu: () => null }))
|
||||
vi.mock('@/components/shared/notifications-bell', () => ({ NotificationsBell: () => null }))
|
||||
vi.mock('@/components/solo/nav-status-indicators', () => ({
|
||||
SoloNavStatusIndicators: () => null,
|
||||
}))
|
||||
|
||||
import { setActiveProductAction } from '@/actions/active-product'
|
||||
import { toast } from 'sonner'
|
||||
import { NavBar } from '@/components/shared/nav-bar'
|
||||
|
||||
const actionMock = setActiveProductAction as unknown as ReturnType<typeof vi.fn>
|
||||
const toastSuccess = toast.success as unknown as ReturnType<typeof vi.fn>
|
||||
|
||||
const products = [
|
||||
{ id: 'A', name: 'Alpha' },
|
||||
{ id: 'B', name: 'Beta' },
|
||||
]
|
||||
|
||||
function renderNavBar(overrides: { isDemo?: boolean; activeProductId?: string } = {}) {
|
||||
const isDemo = overrides.isDemo ?? false
|
||||
const activeId = overrides.activeProductId ?? 'A'
|
||||
const activeProduct = products.find(p => p.id === activeId) ?? null
|
||||
return render(
|
||||
<NavBar
|
||||
isDemo={isDemo}
|
||||
roles={[]}
|
||||
userId="u1"
|
||||
username="user"
|
||||
email={null}
|
||||
activeProduct={activeProduct}
|
||||
products={products}
|
||||
hasActiveSprint={false}
|
||||
minQuotaPct={100}
|
||||
/>,
|
||||
)
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
actionMock.mockResolvedValue({ success: true })
|
||||
pathnameMock.mockReturnValue('/dashboard')
|
||||
})
|
||||
|
||||
describe('NavBar — product switch', () => {
|
||||
it('demo: clicking another product navigates via router.push without calling the action', () => {
|
||||
renderNavBar({ isDemo: true, activeProductId: 'A' })
|
||||
fireEvent.click(screen.getByText('Beta'))
|
||||
expect(pushMock).toHaveBeenCalledWith('/products/B')
|
||||
expect(actionMock).not.toHaveBeenCalled()
|
||||
expect(toastSuccess).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('non-demo: clicking another product calls setActiveProductAction', async () => {
|
||||
renderNavBar({ isDemo: false, activeProductId: 'A' })
|
||||
fireEvent.click(screen.getByText('Beta'))
|
||||
await Promise.resolve()
|
||||
expect(actionMock).toHaveBeenCalledWith('B')
|
||||
})
|
||||
})
|
||||
|
||||
describe('NavBar — URL-derived active product (demo only)', () => {
|
||||
it('demo: label and dropdown highlight follow pathname, not the activeProduct prop', () => {
|
||||
pathnameMock.mockReturnValue('/products/B/sprint')
|
||||
const { container } = renderNavBar({ isDemo: true, activeProductId: 'A' })
|
||||
const trigger = container.querySelector('[data-debug-id="nav-bar__product-switcher"]')
|
||||
expect(trigger?.textContent).toContain('Beta')
|
||||
expect(trigger?.textContent).not.toContain('Alpha')
|
||||
const items = screen.getAllByTestId('dd-item')
|
||||
const itemB = items.find(el => el.textContent?.includes('Beta'))
|
||||
expect(itemB?.className).toContain('bg-primary-container')
|
||||
const itemA = items.find(el => el.textContent?.includes('Alpha'))
|
||||
expect(itemA?.className ?? '').not.toContain('bg-primary-container')
|
||||
})
|
||||
|
||||
it('non-demo: pathname does NOT override the activeProduct prop', () => {
|
||||
pathnameMock.mockReturnValue('/products/B/sprint')
|
||||
renderNavBar({ isDemo: false, activeProductId: 'A' })
|
||||
// Label still reflects server-rendered activeProduct (Alpha)
|
||||
const items = screen.getAllByTestId('dd-item')
|
||||
const itemA = items.find(el => el.textContent?.includes('Alpha'))
|
||||
expect(itemA?.className).toContain('bg-primary-container')
|
||||
})
|
||||
})
|
||||
125
__tests__/components/shared/sprint-switcher.test.tsx
Normal file
125
__tests__/components/shared/sprint-switcher.test.tsx
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
// @vitest-environment jsdom
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
||||
import { render, screen, fireEvent } from '@testing-library/react'
|
||||
import '@testing-library/jest-dom'
|
||||
import React from 'react'
|
||||
|
||||
const pushMock = vi.fn()
|
||||
const refreshMock = vi.fn()
|
||||
const pathnameMock = vi.fn(() => '/products/p1/sprint')
|
||||
|
||||
vi.mock('next/navigation', () => ({
|
||||
useRouter: () => ({ push: pushMock, refresh: refreshMock }),
|
||||
usePathname: () => pathnameMock(),
|
||||
}))
|
||||
|
||||
vi.mock('@/actions/active-sprint', () => ({
|
||||
setActiveSprintAction: vi.fn(),
|
||||
}))
|
||||
|
||||
vi.mock('sonner', () => ({
|
||||
toast: { error: vi.fn(), success: vi.fn() },
|
||||
}))
|
||||
|
||||
const isDemoMock = { value: false }
|
||||
vi.mock('@/stores/user-settings/store', () => ({
|
||||
useUserSettingsStore: (selector: (s: { context: { isDemo: boolean } }) => unknown) =>
|
||||
selector({ context: { isDemo: isDemoMock.value } }),
|
||||
}))
|
||||
|
||||
vi.mock('@/components/ui/dropdown-menu', () => {
|
||||
type Props = { children?: React.ReactNode; onClick?: () => void; className?: string }
|
||||
const PassThrough = ({ children }: Props) => <>{children}</>
|
||||
return {
|
||||
DropdownMenu: PassThrough,
|
||||
DropdownMenuTrigger: PassThrough,
|
||||
DropdownMenuContent: PassThrough,
|
||||
DropdownMenuItem: ({ children, onClick, className }: Props) => (
|
||||
<button type="button" onClick={onClick} className={className}>
|
||||
{children}
|
||||
</button>
|
||||
),
|
||||
DropdownMenuSeparator: () => null,
|
||||
}
|
||||
})
|
||||
|
||||
vi.mock('@/components/ui/tooltip', () => {
|
||||
type Props = { children?: React.ReactNode }
|
||||
const PassThrough = ({ children }: Props) => <>{children}</>
|
||||
return {
|
||||
Tooltip: PassThrough,
|
||||
TooltipContent: PassThrough,
|
||||
TooltipProvider: PassThrough,
|
||||
TooltipTrigger: PassThrough,
|
||||
}
|
||||
})
|
||||
|
||||
import { setActiveSprintAction } from '@/actions/active-sprint'
|
||||
import { toast } from 'sonner'
|
||||
import { SprintSwitcher } from '@/components/shared/sprint-switcher'
|
||||
|
||||
const actionMock = setActiveSprintAction as unknown as ReturnType<typeof vi.fn>
|
||||
const toastError = toast.error as unknown as ReturnType<typeof vi.fn>
|
||||
const toastSuccess = toast.success as unknown as ReturnType<typeof vi.fn>
|
||||
|
||||
const sprints = [
|
||||
{ id: 's1', code: 'SP-1', sprint_goal: 'Goal 1', status: 'open' as const },
|
||||
{ id: 's2', code: 'SP-2', sprint_goal: 'Goal 2', status: 'open' as const },
|
||||
]
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
isDemoMock.value = false
|
||||
actionMock.mockResolvedValue({ success: true })
|
||||
pathnameMock.mockReturnValue('/products/p1/sprint')
|
||||
})
|
||||
|
||||
describe('SprintSwitcher', () => {
|
||||
it('demo: clicking another sprint navigates via router.push without calling the action', () => {
|
||||
isDemoMock.value = true
|
||||
render(
|
||||
<SprintSwitcher
|
||||
productId="p1"
|
||||
sprints={sprints}
|
||||
activeSprint={sprints[0]}
|
||||
buildingSprintIds={[]}
|
||||
/>,
|
||||
)
|
||||
fireEvent.click(screen.getByText('Goal 2'))
|
||||
expect(pushMock).toHaveBeenCalledWith('/products/p1/sprint/s2')
|
||||
expect(actionMock).not.toHaveBeenCalled()
|
||||
expect(toastError).not.toHaveBeenCalled()
|
||||
expect(toastSuccess).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('non-demo: clicking another sprint calls setActiveSprintAction', async () => {
|
||||
isDemoMock.value = false
|
||||
render(
|
||||
<SprintSwitcher
|
||||
productId="p1"
|
||||
sprints={sprints}
|
||||
activeSprint={sprints[0]}
|
||||
buildingSprintIds={[]}
|
||||
/>,
|
||||
)
|
||||
fireEvent.click(screen.getByText('Goal 2'))
|
||||
// Wait microtask for the transition to flush.
|
||||
await Promise.resolve()
|
||||
expect(actionMock).toHaveBeenCalledWith('p1', 's2')
|
||||
})
|
||||
|
||||
it('clicking the already-active sprint does nothing', () => {
|
||||
isDemoMock.value = true
|
||||
render(
|
||||
<SprintSwitcher
|
||||
productId="p1"
|
||||
sprints={sprints}
|
||||
activeSprint={sprints[0]}
|
||||
buildingSprintIds={[]}
|
||||
/>,
|
||||
)
|
||||
fireEvent.click(screen.getByText('Goal 1'))
|
||||
expect(pushMock).not.toHaveBeenCalled()
|
||||
expect(actionMock).not.toHaveBeenCalled()
|
||||
})
|
||||
})
|
||||
Loading…
Add table
Add a link
Reference in a new issue