diff --git a/frontend/playwright/data/render-wasm/penguins.jpg b/frontend/playwright/data/render-wasm/assets/penguins.jpg similarity index 100% rename from frontend/playwright/data/render-wasm/penguins.jpg rename to frontend/playwright/data/render-wasm/assets/penguins.jpg diff --git a/frontend/playwright/ui/pages/WasmWorkspacePage.js b/frontend/playwright/ui/pages/WasmWorkspacePage.js index 1aa3502fe..d5a0ebbc9 100644 --- a/frontend/playwright/ui/pages/WasmWorkspacePage.js +++ b/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() { - // FIXME: temp workaround. We will need to wait for set-objects to fully finish + async waitForFirstRender() { 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; + }); } } diff --git a/frontend/playwright/ui/render-wasm-specs/shapes.spec.js b/frontend/playwright/ui/render-wasm-specs/shapes.spec.js index f3c9b0962..27272b2b7 100644 --- a/frontend/playwright/ui/render-wasm-specs/shapes.spec.js +++ b/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(); }); diff --git a/frontend/src/app/render_wasm/api.cljs b/frontend/src/app/render_wasm/api.cljs index 92bb97577..e73c11ddb 100644 --- a/frontend/src/app/render_wasm/api.cljs +++ b/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)] - (->> (rx/from pending) - (rx/mapcat (fn [callback] (callback))) - (rx/reduce conj []) - (rx/subs! (fn [_] - (clear-drawing-cache) - (request-render "set-objects")))))) + (let [event (js/CustomEvent. "wasm:set-objects-finished") + pending (-> (d/index-by :key :callback pending) vals)] + (if (not-empty? pending) + (->> (rx/from pending) + (rx/mapcat (fn [callback] (callback))) + (rx/reduce conj []) + (rx/subs! (fn [_] + (clear-drawing-cache) + (request-render "set-objects") + (.dispatchEvent ^js js/document event)))) + (.dispatchEvent ^js js/document event)))) (defn process-object [shape]