🔧 Set up playwright project for render wasm

frontend/.gitignore

@@ -11,3 +11,4 @@ node_modules/
 /blob-report/
 /playwright/.cache/
 /playwright/**/visual-specs/**/*.png
+/playwright/**/render-wasm-specs/**/*.png

frontend/playwright.config.js

@@ -53,6 +53,18 @@ export default defineConfig({
         toHaveScreenshot: { maxDiffPixelRatio: 0.005 },
       },
     },
+    {
+      name: "render-wasm",
+      use: {
+        ...devices["Desktop Chrome"],
+        viewport: { width: 1920, height: 1080 }, // Add custom viewport size
+        deviceScaleFactor: 2,
+      },
+      testDir: "./playwright/ui/render-wasm-specs",
+      expect: {
+        toHaveScreenshot: { maxDiffPixelRatio: 0.005 },
+      },
+    },
   ],
 
   /* Run your local dev server before starting the tests */

frontend/playwright/ui/pages/BasePage.js

@@ -23,6 +23,29 @@ export class BasePage {
     );
   }
 
+  static async mockAsset(page, assetId, assetFilename, options) {
+    const url = `**/assets/by-file-media-id/${assetId}`;
+
+    return page.route(url, (route) =>
+      route.fulfill({
+        path: `playwright/data/${assetFilename}`,
+        status: 200,
+        ...options,
+      }),
+    );
+  }
+
+  static async mockConfigFlags(page, flags) {
+    const url = "**/js/config.js?ts=*";
+    return await page.route(url, (route) =>
+      route.fulfill({
+        status: 200,
+        contentType: "application/javascript",
+        body: `var penpotFlags = "${flags.join(" ")}";`,
+      }),
+    );
+  }
+
   #page = null;
 
   constructor(page) {
@@ -38,14 +61,11 @@ export class BasePage {
   }
 
   async mockConfigFlags(flags) {
-    const url = "**/js/config.js?ts=*";
-    return await this.page.route(url, (route) =>
-      route.fulfill({
-        status: 200,
-        contentType: "application/javascript",
-        body: `var penpotFlags = "${flags.join(" ")}";`,
-      }),
-    );
+    return BasePage.mockConfigFlags(this.page, flags);
+  }
+
+  async mockAsset(assetId, assetFilename, options) {
+    return BasePage.mockAsset(this.page, assetId, assetFilename, options);
   }
 }
 

frontend/playwright/ui/pages/WasmWorkspacePage.js

@@ -0,0 +1,24 @@
+import { expect } from "@playwright/test";
+import { WorkspacePage } from "./WorkspacePage";
+
+export class WasmWorkspacePage extends WorkspacePage {
+  static async init(page) {
+    await super.init(page);
+    await WorkspacePage.mockConfigFlags(page, [
+      "enable-feature-render-wasm",
+      "enable-render-wasm-dpr",
+    ]);
+  }
+
+  constructor(page) {
+    super(page);
+    this.canvas = page.getByTestId("canvas-wasm-shapes");
+  }
+
+  async waitForCanvasRender() {
+    // FIXME: temp workaround. We will need to wait for set-objects to fully finish
+    await expect(this.pageName).toHaveText("Page 1");
+    await this.canvas.waitFor({ state: "visible" });
+    await this.page.waitForTimeout(3000);
+  }
+}

frontend/playwright/ui/pages/WorkspacePage.js

@@ -178,6 +178,10 @@ export class WorkspacePage extends BaseWebSocketPage {
     );
   }
 
+  async mockGetFile(jsonFile) {
+    await this.mockRPC(/get\-file\?/, jsonFile);
+  }
+
   async setupFileWithComments() {
     await this.mockRPC(
       "get-comment-threads?file-id=*",

frontend/playwright/ui/render-wasm-specs/shapes.spec.js

@@ -0,0 +1,50 @@
+import { test, expect } from "@playwright/test";
+import { WasmWorkspacePage } from "../pages/WasmWorkspacePage";
+
+test.beforeEach(async ({ page }) => {
+  await WasmWorkspacePage.init(page);
+  await WasmWorkspacePage.mockConfigFlags(page, [
+    "enable-feature-render-wasm",
+    "enable-render-wasm-dpr",
+  ]);
+});
+
+test("Renders a file with basic shapes, boards and groups", async ({
+  page,
+}) => {
+  const workspace = new WasmWorkspacePage(page);
+  await workspace.setupEmptyFile();
+  await workspace.mockGetFile("render-wasm/get-file-shapes-groups-boards.json");
+
+  await workspace.goToWorkspace({
+    id: "53a7ff09-2228-81d3-8006-4b5eac177245",
+    pageId: "53a7ff09-2228-81d3-8006-4b5eac177246",
+  });
+  await workspace.waitForCanvasRender();
+
+  await expect(workspace.canvas).toHaveScreenshot();
+});
+
+test("Renders a file with solid, gradient and image fills", async ({
+  page,
+}) => {
+  const workspace = new WasmWorkspacePage(page);
+  await workspace.setupEmptyFile();
+  await workspace.mockAsset(
+    "1ebcea38-f1bf-8101-8006-4c8fd68e7c84",
+    "render-wasm/penguins.jpg",
+  );
+  await workspace.mockAsset(
+    "1ebcea38-f1bf-8101-8006-4c8f579da49c",
+    "render-wasm/penguins.jpg",
+  );
+  await workspace.mockGetFile("render-wasm/get-file-shapes-fills.json");
+
+  await workspace.goToWorkspace({
+    id: "1ebcea38-f1bf-8101-8006-4c8ec4a9bffe",
+    pageId: "1ebcea38-f1bf-8101-8006-4c8ec4a9bfff",
+  });
+  await workspace.waitForCanvasRender();
+
+  await expect(workspace.canvas).toHaveScreenshot();
+});

frontend/src/app/main/ui/workspace/viewport_wasm.cljs

@@ -361,6 +361,7 @@
                                          :viewport-ref viewport-ref}])]
 
      [:canvas {:id "render"
+               :data-testid "canvas-wasm-shapes"
                :ref canvas-ref
                :class (stl/css :render-shapes)
                :key (dm/str "render" page-id)