btrc-hub/frontend/src/components/RouteBlockerOverlay.test.tsx

import { render, screen } from '@testing-library/react'
import { afterEach, describe, expect, it } from 'vitest'

import RouteBlockerOverlay, { useOverlayStore } from '@/components/RouteBlockerOverlay'

describe ('RouteBlockerOverlay', () => {
  afterEach (() => {
    useOverlayStore.setState ({ active: false })
    document.body.style.overflow = ''
    document.body.removeAttribute ('aria-busy')
  })

  it ('renders nothing while inactive', () => {
    useOverlayStore.setState ({ active: false })

    const { container } = render (<RouteBlockerOverlay/>)

    expect (container).toBeEmptyDOMElement ()
  })

  it ('renders a blocking progressbar and marks the body busy while active', () => {
    useOverlayStore.setState ({ active: true })

    render (<RouteBlockerOverlay/>)

    expect (screen.getByRole ('progressbar', { name: 'Loading' })).toBeInTheDocument ()
    expect (document.body).toHaveAttribute ('aria-busy', 'true')
    expect (document.body.style.overflow).toBe ('hidden')
  })
})