Madhura68
47d57a0963
Bottom-fixed nav-bar met 3 lucide-iconen (ListTree/Activity/Settings). Verbergt Backlog/Solo-tabs als activeProductId null is. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
57 lines
2.2 KiB
TypeScript
57 lines
2.2 KiB
TypeScript
// @vitest-environment jsdom
|
|
import { describe, it, expect, vi } from 'vitest'
|
|
import { render, screen } from '@testing-library/react'
|
|
import { MobileTabBar } from '@/components/mobile/mobile-tab-bar'
|
|
|
|
let pathname = '/m/products/p1'
|
|
vi.mock('next/navigation', () => ({
|
|
usePathname: () => pathname,
|
|
}))
|
|
|
|
function setPathname(p: string) { pathname = p }
|
|
|
|
describe('MobileTabBar', () => {
|
|
it('toont 3 tabs als activeProductId aanwezig is', () => {
|
|
setPathname('/m/products/p1')
|
|
render(<MobileTabBar activeProductId="p1" />)
|
|
expect(screen.getByLabelText('Backlog')).toBeTruthy()
|
|
expect(screen.getByLabelText('Solo')).toBeTruthy()
|
|
expect(screen.getByLabelText('Settings')).toBeTruthy()
|
|
})
|
|
|
|
it('toont alleen Settings als activeProductId null is', () => {
|
|
setPathname('/m/settings')
|
|
render(<MobileTabBar activeProductId={null} />)
|
|
expect(screen.queryByLabelText('Backlog')).toBeNull()
|
|
expect(screen.queryByLabelText('Solo')).toBeNull()
|
|
expect(screen.getByLabelText('Settings')).toBeTruthy()
|
|
})
|
|
|
|
it('Backlog-tab is aria-current op /m/products/[id]', () => {
|
|
setPathname('/m/products/p1')
|
|
render(<MobileTabBar activeProductId="p1" />)
|
|
expect(screen.getByLabelText('Backlog').getAttribute('aria-current')).toBe('page')
|
|
expect(screen.getByLabelText('Solo').getAttribute('aria-current')).toBeNull()
|
|
})
|
|
|
|
it('Solo-tab is aria-current op /m/products/[id]/solo', () => {
|
|
setPathname('/m/products/p1/solo')
|
|
render(<MobileTabBar activeProductId="p1" />)
|
|
expect(screen.getByLabelText('Solo').getAttribute('aria-current')).toBe('page')
|
|
expect(screen.getByLabelText('Backlog').getAttribute('aria-current')).toBeNull()
|
|
})
|
|
|
|
it('Settings-tab is aria-current op /m/settings', () => {
|
|
setPathname('/m/settings')
|
|
render(<MobileTabBar activeProductId="p1" />)
|
|
expect(screen.getByLabelText('Settings').getAttribute('aria-current')).toBe('page')
|
|
})
|
|
|
|
it('tap-targets >=44x44 (h-14 = 56px breedtevulling per tab)', () => {
|
|
setPathname('/m/products/p1')
|
|
render(<MobileTabBar activeProductId="p1" />)
|
|
const tab = screen.getByLabelText('Backlog')
|
|
expect(tab.className).toContain('h-14')
|
|
expect(tab.className).toContain('flex-1')
|
|
})
|
|
})
|