🔧 Set up playwright project for render wasm

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=*",