test(components): cover map, collections, settings, journey and admin

2026-10-22 06:56:35 +00:00 · 2026-07-29 09:44:01 +02:00
parent a3b263017f
commit bbb0f93af2
124 changed files with 33011 additions and 95 deletions
@@ -0,0 +1,99 @@
+// FE-W4TLS-001 to FE-W4TLS-007
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, screen, act } from '../../../tests/helpers/render'
+
+vi.mock('../../mobile/components/MDancingTrek', () => ({
+  default: ({ scene, mood, size }: { scene: string; mood: string; size: number }) =>
+    <div data-testid="mascot" data-scene={scene} data-mood={mood} data-size={size} />,
+}))
+
+import TripLoadingSplash from './TripLoadingSplash'
+
+function stubReducedMotion(reduce: boolean) {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    configurable: true,
+    value: vi.fn((query: string) => ({
+      matches: reduce && query.includes('reduced-motion'),
+      media: query,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    })),
+  })
+}
+
+beforeEach(() => {
+  stubReducedMotion(false)
+  vi.useFakeTimers({ shouldAdvanceTime: true })
+})
+
+afterEach(() => {
+  vi.useRealTimers()
+  vi.restoreAllMocks()
+})
+
+describe('TripLoadingSplash', () => {
+  it('FE-W4TLS-001: announces itself as a status region labelled with the trip title', () => {
+    render(<TripLoadingSplash title="Iceland 2026" />)
+    const root = screen.getByRole('status')
+
+    expect(root).toHaveAttribute('aria-label', 'Iceland 2026')
+    expect(screen.getByText('Iceland 2026')).toBeInTheDocument()
+  })
+
+  it('FE-W4TLS-002: falls back to the TREK wordmark without a title', () => {
+    render(<TripLoadingSplash />)
+
+    expect(screen.getByRole('status')).toHaveAttribute('aria-label', 'TREK')
+    expect(screen.getByText('TREK')).toBeInTheDocument()
+  })
+
+  it('FE-W4TLS-003: starts on the packing scene', () => {
+    render(<TripLoadingSplash />)
+
+    expect(screen.getByTestId('mascot')).toHaveAttribute('data-scene', 'packing')
+    expect(screen.getByTestId('mascot')).toHaveAttribute('data-mood', 'happy')
+  })
+
+  it('FE-W4TLS-004: advances through the journey scenes and loops', () => {
+    render(<TripLoadingSplash />)
+
+    act(() => { vi.advanceTimersByTime(1400) })
+    expect(screen.getByTestId('mascot')).toHaveAttribute('data-scene', 'transport')
+
+    act(() => { vi.advanceTimersByTime(1400 * 2) })
+    expect(screen.getByTestId('mascot')).toHaveAttribute('data-scene', 'collections')
+
+    act(() => { vi.advanceTimersByTime(1400) })
+    expect(screen.getByTestId('mascot')).toHaveAttribute('data-scene', 'packing')
+  })
+
+  it('FE-W4TLS-005: widens the beat dot of the active step', () => {
+    const { container } = render(<TripLoadingSplash />)
+    const dots = () => Array.from(container.querySelectorAll('.rounded-full')) as HTMLElement[]
+
+    expect(dots().map(d => d.style.width)).toEqual(['20px', '6px', '6px', '6px'])
+
+    act(() => { vi.advanceTimersByTime(1400) })
+    expect(dots().map(d => d.style.width)).toEqual(['6px', '20px', '6px', '6px'])
+  })
+
+  it('FE-W4TLS-006: parks on the loading-photos step under reduced motion', () => {
+    stubReducedMotion(true)
+    const { container } = render(<TripLoadingSplash />)
+
+    expect(screen.getByTestId('mascot')).toHaveAttribute('data-scene', 'dashboard')
+
+    act(() => { vi.advanceTimersByTime(1400 * 3) })
+    expect(screen.getByTestId('mascot')).toHaveAttribute('data-scene', 'dashboard')
+    expect((container.querySelectorAll('.rounded-full')[2] as HTMLElement).style.width).toBe('20px')
+  })
+
+  it('FE-W4TLS-007: skips the mascot entry animation under reduced motion', () => {
+    stubReducedMotion(true)
+    const { container } = render(<TripLoadingSplash />)
+    const stage = container.querySelector('.m-splash-content > div > div') as HTMLElement
+
+    expect(stage.style.animation).toBe('')
+  })
+})