Scrum4Me/__tests__/components/mobile/landscape-guard.test.tsx

// @vitest-environment jsdom
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
import { render, screen, act } from '@testing-library/react'
import { LandscapeGuard } from '@/components/mobile/landscape-guard'

type Listener = (e: MediaQueryListEvent) => void

function mockMatchMedia(initialPortrait: boolean) {
  let matches = initialPortrait
  let listener: Listener | null = null

  const mql = {
    get matches() { return matches },
    media: '(orientation: portrait)',
    onchange: null,
    addEventListener: (_: string, l: Listener) => { listener = l },
    removeEventListener: () => { listener = null },
    addListener: () => {},
    removeListener: () => {},
    dispatchEvent: () => false,
  }

  Object.defineProperty(window, 'matchMedia', {
    writable: true,
    configurable: true,
    value: () => mql,
  })

  return {
    setPortrait(p: boolean) {
      matches = p
      if (listener) listener({ matches: p } as MediaQueryListEvent)
    },
  }
}

describe('LandscapeGuard', () => {
  beforeEach(() => {})

  afterEach(() => {
    vi.restoreAllMocks()
  })

  it('renders children always', () => {
    mockMatchMedia(false)
    render(<LandscapeGuard><div>kids</div></LandscapeGuard>)
    expect(screen.getByText('kids')).toBeTruthy()
  })

  it('shows overlay in portrait', () => {
    mockMatchMedia(true)
    render(<LandscapeGuard><div>kids</div></LandscapeGuard>)
    expect(screen.getByRole('alert').textContent).toContain('Draai je telefoon naar landscape')
    // children blijven in DOM (geen unmount → SSE-streams blijven leven)
    expect(screen.getByText('kids')).toBeTruthy()
  })

  it('hides overlay in landscape', () => {
    mockMatchMedia(false)
    render(<LandscapeGuard><div>kids</div></LandscapeGuard>)
    expect(screen.queryByRole('alert')).toBeNull()
  })

  it('toggles overlay on orientation change', () => {
    const ctl = mockMatchMedia(false)
    render(<LandscapeGuard><div>kids</div></LandscapeGuard>)
    expect(screen.queryByRole('alert')).toBeNull()
    act(() => ctl.setPortrait(true))
    expect(screen.getByRole('alert')).toBeTruthy()
    act(() => ctl.setPortrait(false))
    expect(screen.queryByRole('alert')).toBeNull()
  })
})