import { render, waitFor } from "@testing-library/react"; import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; import { createEmptySceneDocument } from "../../src/document/scene-document"; import { ViewportCanvas } from "../../src/viewport-three/ViewportCanvas"; import { createDefaultViewportPanelCameraState, type ViewportPanelCameraState } from "../../src/viewport-three/viewport-layout"; import type { CreationViewportToolPreview, ViewportToolPreview } from "../../src/viewport-three/viewport-transient-state"; const { MockViewportHost, viewportHostInstances } = vi.hoisted(() => { const viewportHostInstances: Array<{ mount: ReturnType; dispose: ReturnType; updateWorld: ReturnType; updateAssets: ReturnType; updateDocument: ReturnType; setViewMode: ReturnType; setDisplayMode: ReturnType; setCameraState: ReturnType; setBrushSelectionChangeHandler: ReturnType; setCameraStateChangeHandler: ReturnType; setCreationPreviewChangeHandler: ReturnType; setCreationCommitHandler: ReturnType; setToolMode: ReturnType; setCreationPreview: ReturnType; focusSelection: ReturnType; }> = []; class MockViewportHost { mount = vi.fn(); dispose = vi.fn(); updateWorld = vi.fn(); updateAssets = vi.fn(); updateDocument = vi.fn(); setViewMode = vi.fn(); setDisplayMode = vi.fn(); setCameraState = vi.fn(); setBrushSelectionChangeHandler = vi.fn(); setCameraStateChangeHandler = vi.fn(); setCreationPreviewChangeHandler = vi.fn(); setCreationCommitHandler = vi.fn(); setToolMode = vi.fn(); setCreationPreview = vi.fn(); focusSelection = vi.fn(); constructor() { viewportHostInstances.push(this); } } return { MockViewportHost, viewportHostInstances }; }); vi.mock("../../src/viewport-three/viewport-host", () => ({ ViewportHost: MockViewportHost })); describe("ViewportCanvas", () => { beforeEach(() => { viewportHostInstances.length = 0; vi.spyOn(HTMLCanvasElement.prototype, "getContext").mockImplementation(() => ({}) as never); }); afterEach(() => { vi.restoreAllMocks(); }); it("wires the creation commit handler into the viewport host", async () => { const sceneDocument = createEmptySceneDocument(); const cameraState = createDefaultViewportPanelCameraState(); const toolPreview: CreationViewportToolPreview = { kind: "create", sourcePanelId: "topLeft", target: { kind: "box-brush" }, center: null }; const onCommitCreation = vi.fn(() => true); const onCameraStateChange = vi.fn((_cameraState: ViewportPanelCameraState) => undefined); const onToolPreviewChange = vi.fn((_toolPreview: ViewportToolPreview) => undefined); const onSelectionChange = vi.fn(); render( ); await waitFor(() => { expect(viewportHostInstances).toHaveLength(1); expect(viewportHostInstances[0].setCreationCommitHandler).toHaveBeenCalledTimes(1); }); const registeredHandler = viewportHostInstances[0].setCreationCommitHandler.mock.calls[0][0] as ( toolPreview: CreationViewportToolPreview ) => boolean; expect(registeredHandler(toolPreview)).toBe(true); expect(onCommitCreation).toHaveBeenCalledWith(toolPreview); }); it("applies and subscribes to persisted camera state through the viewport host", async () => { const sceneDocument = createEmptySceneDocument(); const cameraState = createDefaultViewportPanelCameraState(); const onCameraStateChange = vi.fn((_cameraState: ViewportPanelCameraState) => undefined); render( true)} onCameraStateChange={onCameraStateChange} onToolPreviewChange={vi.fn()} /> ); await waitFor(() => { expect(viewportHostInstances).toHaveLength(1); expect(viewportHostInstances[0].setCameraState).toHaveBeenCalledWith(cameraState); expect(viewportHostInstances[0].setCameraStateChangeHandler).toHaveBeenCalledTimes(1); }); }); });