🐛 Fix mocking websockets when running multiple tests

frontend/playwright.config.js

@@ -18,7 +18,7 @@ export default defineConfig({
   /* Retry on CI only */
   retries: process.env.CI ? 2 : 0,
   /* Opt out of parallel tests on CI. */
-  workers: process.env.CI ? 1 : 1,
+  workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: "html",
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */

frontend/playwright/helpers/MockWebSocketHelper.js

@@ -2,17 +2,19 @@ export class MockWebSocketHelper extends EventTarget {
   static #mocks = new Map();
 
   static async init(page) {
-    await page.exposeFunction("MockWebSocket$$constructor", (url, protocols) => {
+    this.#mocks = new Map();
-      const webSocket = new MockWebSocketHelper(page, url, protocols);
+
+    await page.exposeFunction("onMockWebSocketConstructor", (url) => {
+      const webSocket = new MockWebSocketHelper(page, url);
       this.#mocks.set(url, webSocket);
     });
-    await page.exposeFunction("MockWebSocket$$spyMessage", (url, data) => {
+    await page.exposeFunction("onMockWebSocketSpyMessage", (url, data) => {
       if (!this.#mocks.has(url)) {
         throw new Error(`WebSocket with URL ${url} not found`);
       }
       this.#mocks.get(url).dispatchEvent(new MessageEvent("message", { data }));
     });
-    await page.exposeFunction("MockWebSocket$$spyClose", (url, code, reason) => {
+    await page.exposeFunction("onMockWebSocketSpyClose", (url, code, reason) => {
       if (!this.#mocks.has(url)) {
         throw new Error(`WebSocket with URL ${url} not found`);
       }
@@ -36,39 +38,52 @@ export class MockWebSocketHelper extends EventTarget {
 
   #page = null;
   #url;
-  #protocols;
 
   constructor(page, url, protocols) {
     super();
     this.#page = page;
     this.#url = url;
-    this.#protocols = protocols;
   }
 
   mockOpen(options) {
-    return this.#page.evaluate(({ url, options }) => {
+    return this.#page.evaluate(
-      if (typeof WebSocket.getByURL !== 'function') {
+      ({ url, options }) => {
-        throw new Error('WebSocket.getByURL is not a function. Did you forget to call MockWebSocket.init(page)?')
+        if (typeof WebSocket.getByURL !== "function") {
-      }
+          throw new Error(
-      WebSocket.getByURL(url).mockOpen(options);
+            "WebSocket.getByURL is not a function. Did you forget to call MockWebSocket.init(page)?",
-    }, { url: this.#url, options });
+          );
+        }
+        WebSocket.getByURL(url).mockOpen(options);
+      },
+      { url: this.#url, options },
+    );
   }
 
   mockMessage(data) {
-    return this.#page.evaluate(({ url, data }) => {
+    return this.#page.evaluate(
-      if (typeof WebSocket.getByURL !== 'function') {
+      ({ url, data }) => {
-        throw new Error('WebSocket.getByURL is not a function. Did you forget to call MockWebSocket.init(page)?')
+        if (typeof WebSocket.getByURL !== "function") {
-      }
+          throw new Error(
-      WebSocket.getByURL(url).mockMessage(data);
+            "WebSocket.getByURL is not a function. Did you forget to call MockWebSocket.init(page)?",
-    }, { url: this.#url, data });
+          );
+        }
+        WebSocket.getByURL(url).mockMessage(data);
+      },
+      { url: this.#url, data },
+    );
   }
 
   mockClose() {
-    return this.#page.evaluate(({ url }) => {
+    return this.#page.evaluate(
-      if (typeof WebSocket.getByURL !== 'function') {
+      ({ url }) => {
-        throw new Error('WebSocket.getByURL is not a function. Did you forget to call MockWebSocket.init(page)?')
+        if (typeof WebSocket.getByURL !== "function") {
-      }
+          throw new Error(
-      WebSocket.getByURL(url).mockClose();
+            "WebSocket.getByURL is not a function. Did you forget to call MockWebSocket.init(page)?",
-    }, { url: this.#url });
+          );
+        }
+        WebSocket.getByURL(url).mockClose();
+      },
+      { url: this.#url },
+    );
   }
 }

frontend/playwright/scripts/MockWebSocket.js

@@ -46,14 +46,14 @@ window.WebSocket = class MockWebSocket extends EventTarget {
 
     MockWebSocket.#mocks.set(this.#url, this);
 
-    if (typeof window["MockWebSocket$$constructor"] === "function") {
+    if (typeof window["onMockWebSocketConstructor"] === "function") {
-      MockWebSocket$$constructor(this.#url, this.#protocols);
+      onMockWebSocketConstructor(this.#url, this.#protocols);
     }
-    if (typeof window["MockWebSocket$$spyMessage"] === "function") {
+    if (typeof window["onMockWebSocketSpyMessage"] === "function") {
-      this.#spyMessage = MockWebSocket$$spyMessage;
+      this.#spyMessage = onMockWebSocketSpyMessage;
     }
-    if (typeof window["MockWebSocket$$spyClose"] === "function") {
+    if (typeof window["onMockWebSocketSpyClose"] === "function") {
-      this.#spyClose = MockWebSocket$$spyClose;
+      this.#spyClose = onMockWebSocketSpyClose;
     }
   }
 

frontend/playwright/ui/pages/BaseWebSocketPage.js

@@ -8,8 +8,8 @@ export class BaseWebSocketPage extends BasePage {
    * @param {Page} page
    * @returns
    */
-  static initWebSockets(page) {
+  static async initWebSockets(page) {
-    return MockWebSocketHelper.init(page);
+    await MockWebSocketHelper.init(page);
   }
 
   /**

frontend/playwright/ui/specs/workspace.spec.js

@@ -6,7 +6,7 @@ test.beforeEach(async ({ page }) => {
   await WorkspacePage.init(page);
 });
 
-test.skip("User loads worskpace with empty file", async ({ page }) => {
+test("User loads worskpace with empty file", async ({ page }) => {
   const workspacePage = new WorkspacePage(page);
   await workspacePage.setupEmptyFile(page);
 
@@ -15,7 +15,7 @@ test.skip("User loads worskpace with empty file", async ({ page }) => {
   await expect(workspacePage.pageName).toHaveText("Page 1");
 });
 
-test.skip("User receives presence notifications updates in the workspace", async ({ page }) => {
+test("User receives presence notifications updates in the workspace", async ({ page }) => {
   const workspacePage = new WorkspacePage(page);
   await workspacePage.setupEmptyFile();
 
@@ -25,7 +25,7 @@ test.skip("User receives presence notifications updates in the workspace", async
   await expect(page.getByTestId("active-users-list").getByAltText("Princesa Leia")).toHaveCount(2);
 });
 
-test.skip("User draws a rect", async ({ page }) => {
+test("User draws a rect", async ({ page }) => {
   const workspacePage = new WorkspacePage(page);
   await workspacePage.setupEmptyFile();
   await workspacePage.mockRPC("update-file?id=*", "workspace/update-file-create-rect.json");