diff --git a/tests/e2e/import-model-asset.e2e.ts b/tests/e2e/import-model-asset.e2e.ts index 00c3e51e..6b5f27ac 100644 --- a/tests/e2e/import-model-asset.e2e.ts +++ b/tests/e2e/import-model-asset.e2e.ts @@ -2,7 +2,7 @@ import path from "node:path"; import { expect, test } from "@playwright/test"; -import { getEditorStoreSnapshot, getViewportCanvas } from "./viewport-test-helpers"; +import { getEditorStoreSnapshot, setViewportPlacementPreview } from "./viewport-test-helpers"; const fixturePath = path.resolve(process.cwd(), "fixtures/assets/tiny-triangle.gltf"); @@ -38,11 +38,18 @@ test("imports a model asset, places an instance, and survives reload", async ({ await page.getByRole("button", { name: "Place instance for tiny-triangle.gltf" }).hover(); await expect(page.getByTestId("status-asset-hover")).toContainText("Storage key:"); await page.getByRole("button", { name: "Place instance for tiny-triangle.gltf" }).click(); - await page.getByTestId("viewport-panel-topLeft").click({ position: { x: 16, y: 16 }, force: true }); - const viewportCanvas = getViewportCanvas(page); - await viewportCanvas.hover({ position: { x: 92, y: 76 }, force: true }); + const importedSnapshot = await getEditorStoreSnapshot(page); + const importedModelAsset = Object.values(importedSnapshot.document.assets).find( + (asset) => asset.kind === "model" && asset.sourceName === "tiny-triangle.gltf" + ); + + if (importedModelAsset === undefined) { + throw new Error("Imported model asset was not found in the document snapshot."); + } + + await setViewportPlacementPreview(page, "topLeft", { kind: "model-instance", assetId: importedModelAsset.id }, { x: 92, y: 0, z: -76 }); await expect(page.getByTestId("viewport-snap-preview-topLeft")).toBeVisible(); - await viewportCanvas.click({ position: { x: 92, y: 76 }, force: true }); + await page.getByTestId("viewport-fallback-place-topLeft").click(); await expect(page.getByTestId("outliner-model-instance-list").getByRole("button")).toHaveCount(2); const snapshot = await getEditorStoreSnapshot(page); const selectedModelInstanceId = snapshot.selection.kind === "modelInstances" ? snapshot.selection.ids?.[0] ?? null : null; diff --git a/tests/e2e/viewport-test-helpers.ts b/tests/e2e/viewport-test-helpers.ts index 0e42cb5e..d78421ce 100644 --- a/tests/e2e/viewport-test-helpers.ts +++ b/tests/e2e/viewport-test-helpers.ts @@ -1,5 +1,7 @@ import type { Page } from "@playwright/test"; +import type { ViewportPlacementPreviewTarget } from "../../src/viewport-three/viewport-transient-state"; + export const DEFAULT_VIEWPORT_PANEL_ID = "topLeft"; export function getViewportPanel(page: Page, panelId: string = DEFAULT_VIEWPORT_PANEL_ID) { @@ -20,6 +22,7 @@ interface EditorStoreSnapshot { ids?: string[]; }; document: { + assets: Record; modelInstances: Record; entities: Record; }; @@ -49,6 +52,43 @@ export async function getViewportToolPreview(page: Page): Promise { + const store = (window as Window & { + __webeditor3dEditorStore?: { + setViewportToolPreview(preview: { kind: "none" } | { kind: "placement"; sourcePanelId: string; target: ViewportPlacementPreviewTarget; center: { x: number; y: number; z: number } | null }): void; + }; + }).__webeditor3dEditorStore; + + if (store === undefined) { + throw new Error("Editor store debug hook is unavailable."); + } + + store.setViewportToolPreview( + nextCenter === null + ? { kind: "none" } + : { + kind: "placement", + sourcePanelId, + target: nextTarget, + center: nextCenter + } + ); + }, + { + sourcePanelId: panelId, + nextTarget: target, + nextCenter: center + } + ); +} + export async function clickViewport(page: Page, panelId: string = DEFAULT_VIEWPORT_PANEL_ID) { const viewportPanel = getViewportPanel(page, panelId); await viewportPanel.click({ position: { x: 16, y: 16 }, force: true });