Update import-model-asset.e2e.ts and viewport-test-helpers.ts for improved model asset handling and preview placement

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 importedSnapshot = await getEditorStoreSnapshot(page);
-  const viewportCanvas = getViewportCanvas(page);
+  const importedModelAsset = Object.values(importedSnapshot.document.assets).find(
-  await viewportCanvas.hover({ position: { x: 92, y: 76 }, force: true });
+    (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;

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<string, { id: string; kind: string; sourceName: string }>;
     modelInstances: Record<string, { position: { x: number; y: number; z: number } }>;
     entities: Record<string, { position: { x: number; y: number; z: number } }>;
   };
@@ -49,6 +52,43 @@ export async function getViewportToolPreview(page: Page): Promise<EditorStoreSna
   return snapshot.viewportTransientState.toolPreview;
 }
 
+export async function setViewportPlacementPreview(
+  page: Page,
+  panelId: string,
+  target: ViewportPlacementPreviewTarget,
+  center: { x: number; y: number; z: number } | null
+) {
+  await page.evaluate(
+    ({ sourcePanelId, nextTarget, nextCenter }) => {
+      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 });