🔧 Wait for first render using a custom event (visual regression tests)

frontend/playwright/ui/pages/WasmWorkspacePage.js

@@ -8,6 +8,12 @@ export class WasmWorkspacePage extends WorkspacePage {
       "enable-feature-render-wasm",
       "enable-render-wasm-dpr",
     ]);
+
+    await page.addInitScript(() => {
+      document.addEventListener("wasm:set-objects-finished", () => {
+        window.wasmSetObjectsFinished = true;
+      });
+    });
   }
 
   constructor(page) {
@@ -15,10 +21,11 @@ export class WasmWorkspacePage extends WorkspacePage {
     this.canvas = page.getByTestId("canvas-wasm-shapes");
   }
 
-  async waitForCanvasRender() {
+  async waitForFirstRender() {
-    // 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);
+    await this.page.waitForFunction(() => {
+      return window.wasmSetObjectsFinished;
+    });
   }
 }

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

@@ -20,7 +20,7 @@ test("Renders a file with basic shapes, boards and groups", async ({
     id: "53a7ff09-2228-81d3-8006-4b5eac177245",
     pageId: "53a7ff09-2228-81d3-8006-4b5eac177246",
   });
-  await workspace.waitForCanvasRender();
+  await workspace.waitForFirstRender();
 
   await expect(workspace.canvas).toHaveScreenshot();
 });
@@ -32,11 +32,11 @@ test("Renders a file with solid, gradient and image fills", async ({
   await workspace.setupEmptyFile();
   await workspace.mockAsset(
     "1ebcea38-f1bf-8101-8006-4c8fd68e7c84",
-    "render-wasm/penguins.jpg",
+    "render-wasm/assets/penguins.jpg",
   );
   await workspace.mockAsset(
     "1ebcea38-f1bf-8101-8006-4c8f579da49c",
-    "render-wasm/penguins.jpg",
+    "render-wasm/assets/penguins.jpg",
   );
   await workspace.mockGetFile("render-wasm/get-file-shapes-fills.json");
 
@@ -44,7 +44,7 @@ test("Renders a file with solid, gradient and image fills", async ({
     id: "1ebcea38-f1bf-8101-8006-4c8ec4a9bffe",
     pageId: "1ebcea38-f1bf-8101-8006-4c8ec4a9bfff",
   });
-  await workspace.waitForCanvasRender();
+  await workspace.waitForFirstRender();
 
   await expect(workspace.canvas).toHaveScreenshot();
 });

frontend/src/app/render_wasm/api.cljs

@@ -766,13 +766,17 @@
 
 (defn process-pending
   [pending]
-  (when-let [pending (-> (d/index-by :key :callback pending) vals)]
+  (let [event (js/CustomEvent. "wasm:set-objects-finished")
-    (->> (rx/from pending)
+        pending (-> (d/index-by :key :callback pending) vals)]
-         (rx/mapcat (fn [callback] (callback)))
+    (if (not-empty? pending)
-         (rx/reduce conj [])
+      (->> (rx/from pending)
-         (rx/subs! (fn [_]
+           (rx/mapcat (fn [callback] (callback)))
-                     (clear-drawing-cache)
+           (rx/reduce conj [])
-                     (request-render "set-objects"))))))
+           (rx/subs! (fn [_]
+                       (clear-drawing-cache)
+                       (request-render "set-objects")
+                       (.dispatchEvent ^js js/document event))))
+      (.dispatchEvent ^js js/document event))))
 
 (defn process-object
   [shape]