workinf_Blender_Wasm/web/tests/e2e/wbv2-grease-pencil-layer-frame-production.spec.ts

import crypto from "node:crypto";
import fs from "node:fs";
import path from "node:path";
import { expect, test } from "@playwright/test";

const root = path.resolve(import.meta.dirname, "../../..");
const fixture = fs.readFileSync(path.join(root, "tests/files/web/modifier_grease_pencil_scene.blend"));
const fixtureSha256 = crypto.createHash("sha256").update(fixture).digest("hex");

test("WBV2-P1114-000 preserves Grease Pencil layer and frame transactions", async ({ page }) => {
  test.setTimeout(180_000);
  await page.goto("/");
  const result = await page.evaluate(async (input) => {
    const { WebEngineClient } = await import("/src/engine-client/WebEngineClient.ts");
    const client = new WebEngineClient({ timeoutMs: 60_000 });
    const reopenedClient = new WebEngineClient({ timeoutMs: 60_000 });
    const state = (snapshot: any, dataId: string) => {
      const data = snapshot.greasePencils?.find((entry: any) => entry.id === dataId);
      if (!data) throw new Error(`Grease Pencil missing: ${dataId}`);
      return { revision: snapshot.revision, layerIds: data.layers.map((layer: any) => layer.id), frames: data.layers.flatMap((layer: any) => layer.frames.map((frame: any) => ({ layerId: layer.id, frame: frame.frame, drawingId: frame.drawing.id }))) };
    };
    try {
      const opened = await client.openBlend(Uint8Array.from(input.bytes).buffer);
      const data = opened.snapshot.greasePencils?.[0];
      const layer = data?.layers?.[0];
      const drawingFrame = layer?.frames?.[0];
      if (!data || !layer || !drawingFrame) throw new Error("Grease Pencil fixture is incomplete");
      const dataId = data.id as string;
      const before = state(opened.snapshot, dataId);
      const created = await client.applyCommand({ type: "createGreasePencilLayer", dataId, name: "Browser Draft" } as any);
      const createdLayer = created.snapshot.greasePencils?.find((entry: any) => entry.id === dataId)?.layers.find((entry: any) => entry.name === "Browser Draft");
      if (!createdLayer) throw new Error("created Grease Pencil layer was not returned");
      const afterCreate = state(created.snapshot, dataId);
      const createUndo = await client.applyCommand({ type: "undo" } as any);
      const createRedo = await client.applyCommand({ type: "redo" } as any);
      const movedLayer = await client.applyCommand({ type: "moveGreasePencilLayer", schemaVersion: 1, baseRevision: createRedo.snapshot.revision, dataId, layerId: createdLayer.id, direction: "BOTTOM" } as any);
      const moveUndo = await client.applyCommand({ type: "undo" } as any);
      const moveRedo = await client.applyCommand({ type: "redo" } as any);
      const inserted = await client.applyCommand({ type: "insertGreasePencilFrame", dataId, layerId: layer.id, frame: 12, duration: 0 } as any);
      const insertedFrame = inserted.snapshot.greasePencils?.find((entry: any) => entry.id === dataId)?.layers.find((entry: any) => entry.id === layer.id)?.frames.find((entry: any) => entry.frame === 12);
      if (!insertedFrame) throw new Error("inserted Grease Pencil frame was not returned");
      const moved = await client.applyCommand({ type: "moveGreasePencilFrame", schemaVersion: 1, dataId, layerId: layer.id, frame: 12, targetFrame: 20, drawingId: insertedFrame.drawing.id, baseRevision: inserted.snapshot.revision } as any);
      const movedState = state(moved.snapshot, dataId);
      const removedFrame = await client.applyCommand({ type: "removeGreasePencilFrame", dataId, layerId: layer.id, frame: 20 } as any);
      const removedLayer = await client.applyCommand({ type: "removeGreasePencilLayer", dataId, layerId: createdLayer.id } as any);
      const malformed = await client.applyCommand({ type: "insertGreasePencilFrame", dataId, layerId: layer.id, frame: 1, duration: 0 } as any).then(() => ({ code: "NO_ERROR" })).catch((error: any) => ({ code: error?.code, message: error?.message }));
      const afterMalformed = state((await client.snapshot()).snapshot, dataId);
      const saved = await client.saveBlend();
      const reopened = await reopenedClient.openBlend(saved.slice(0));
      const afterReopen = state(reopened.snapshot, dataId);
      return { fixtureSha256: input.fixtureSha256, dataId, layerId: layer.id, before, afterCreate, createUndo: state(createUndo.snapshot, dataId), createRedo: state(createRedo.snapshot, dataId), movedLayer: state(movedLayer.snapshot, dataId), moveUndo: state(moveUndo.snapshot, dataId), moveRedo: state(moveRedo.snapshot, dataId), inserted: state(inserted.snapshot, dataId), moved: movedState, removedFrame: state(removedFrame.snapshot, dataId), removedLayer: state(removedLayer.snapshot, dataId), malformed, afterMalformed, afterReopen, savedSha256: await crypto.subtle.digest("SHA-256", saved).then((hash) => Array.from(new Uint8Array(hash), (byte) => byte.toString(16).padStart(2, "0")).join("")) };
    }
    catch (error: any) { return { error: { code: error?.code, message: error?.message, detail: String(error) } } as any; }
    finally { client.terminate(); reopenedClient.terminate(); }
  }, { bytes: Array.from(fixture), fixtureSha256 });
  fs.mkdirSync(path.join(root, "tests/golden/WBV2-P1114-000"), { recursive: true });
  fs.writeFileSync(path.join(root, "tests/golden/WBV2-P1114-000/grease-pencil-layer-frame-production.json"), `${JSON.stringify({ schemaVersion: 1, task: "WBV2-P1114-000", operation: "GREASE_PENCIL_LAYER_FRAME_MAIN_CHROMIUM", browser: "chromium", queueMutation: false, ...result }, null, 2)}\n`);
  expect(result.error).toBeUndefined();
  expect(result.fixtureSha256).toBe(fixtureSha256);
  expect(result.afterCreate.layerIds.length).toBe(result.before.layerIds.length + 1);
  expect(result.createUndo.layerIds).toEqual(result.before.layerIds);
  expect(result.createRedo.layerIds).toEqual(result.afterCreate.layerIds);
  expect(result.movedLayer.layerIds.at(-1)).toBe(result.afterCreate.layerIds[0]);
  expect(result.moveUndo.layerIds).toEqual(result.afterCreate.layerIds);
  expect(result.moveRedo.layerIds).toEqual(result.movedLayer.layerIds);
  expect(result.inserted.frames.some((frame: any) => frame.frame === 12)).toBe(true);
  expect(result.moved.frames.some((frame: any) => frame.frame === 20)).toBe(true);
  expect(result.removedFrame.frames.some((frame: any) => frame.frame === 20)).toBe(false);
  expect(result.removedLayer.layerIds).toEqual(result.before.layerIds);
  expect(result.malformed.code).not.toBe("NO_ERROR");
  expect(result.afterMalformed.frames).toEqual(result.removedLayer.frames);
  expect(result.afterReopen).toEqual({ ...result.removedLayer, revision: 1 });
  expect(result.savedSha256).not.toBe(fixtureSha256);
});