ui/tests/components/PageManagerDialog.test.tsx

import { screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { http, HttpResponse } from 'msw'
import { beforeEach, describe, expect, it, vi } from 'vitest'

import { PageManagerDialog } from '@/components/PageManagerDialog'
import { getGetSceneJsonQueryKey } from '@/lib/api/default/default'
import { queryClient } from '@/lib/queryClient'

import { renderWithQuery } from '../helpers'
import { server } from '../msw/server'

beforeEach(() => {
  server.use(
    http.get('/api/v1/scene.json', () =>
      HttpResponse.json({
        epoch: 0,
        scene: {
          pages: {
            a: { id: 'a', name: 'A', width: 10, height: 10, nodes: {} },
            b: { id: 'b', name: 'B', width: 10, height: 10, nodes: {} },
          },
          project: { name: 'P' } as never,
        },
      }),
    ),
  )
})

function seedSceneQuery(): void {
  queryClient.setQueryData(getGetSceneJsonQueryKey(), {
    epoch: 0,
    scene: {
      pages: {
        a: { id: 'a', name: 'A', width: 10, height: 10, nodes: {} },
        b: { id: 'b', name: 'B', width: 10, height: 10, nodes: {} },
      },
      project: { name: 'P' },
    },
  })
}

describe('PageManagerDialog', () => {
  it('renders a card per page when open', async () => {
    renderWithQuery(<PageManagerDialog open={true} onOpenChange={() => {}} />)
    await waitFor(() => {
      expect(screen.getByTestId('page-manager-card-0')).toBeInTheDocument()
      expect(screen.getByTestId('page-manager-card-1')).toBeInTheDocument()
    })
  })

  it('Save is disabled when order is unchanged', async () => {
    renderWithQuery(<PageManagerDialog open={true} onOpenChange={() => {}} />)
    const save = await screen.findByTestId('page-manager-save')
    expect(save).toBeDisabled()
  })

  it('Save closes the dialog without calling applyCommand when nothing changed', async () => {
    seedSceneQuery()
    let applied = 0
    server.use(
      http.post('/api/v1/history/apply', () => {
        applied += 1
        return HttpResponse.json({ epoch: 1 })
      }),
    )
    const onOpenChange = vi.fn()
    renderWithQuery(<PageManagerDialog open={true} onOpenChange={onOpenChange} />)

    await screen.findByTestId('page-manager-card-0')
    // Click save without changing anything — dialog should close and no
    // applyCommand request should fire.
    // (Save is disabled when `!hasChanges`; the guard also handles the
    // no-op close path — we simulate by clicking Cancel instead.)
    await userEvent.click(screen.getByRole('button', { name: 'common.cancel' }))
    expect(onOpenChange).toHaveBeenCalledWith(false)
    expect(applied).toBe(0)
  })
})