📎 Add WebSocket mock

frontend/playwright/data/logged-in-user/get-builtin-templates-empty.json

@@ -0,0 +1 @@
+[]

frontend/playwright/helpers/MockRPC.js

@@ -0,0 +1,8 @@
+export const interceptRPC = (page, path, jsonFilename) =>
+  page.route(`**/api/rpc/command/${path}`, (route) =>
+    route.fulfill({
+      status: 200,
+      contentType: "application/transit+json",
+      path: `playwright/fixtures/${jsonFilename}`,
+    })
+  );

frontend/playwright/helpers/MockWebSocket.js

@@ -0,0 +1,81 @@
+export class MockWebSocket extends EventTarget {
+  static #mocks = new Map();
+
+  static async init(page) {
+    await page.exposeFunction('MockWebSocket$$constructor', (url, protocols) => {
+      console.log('MockWebSocket$$constructor', MockWebSocket, url, protocols)
+      const webSocket = new MockWebSocket(page, url, protocols);
+      this.#mocks.set(url, webSocket);
+    });
+    await page.exposeFunction('MockWebSocket$$spyMessage', (url, data) => {
+      console.log('MockWebSocket$$spyMessage', url, data)
+      this.#mocks.get(url).dispatchEvent(new MessageEvent('message', { data }))
+    });
+    await page.exposeFunction('MockWebSocket$$spyClose', (url, code, reason) => {
+      console.log('MockWebSocket$$spyClose', url, code, reason)
+      this.#mocks.get(url).dispatchEvent(new CloseEvent('close', { code, reason }))
+    });
+    await page.addInitScript({ path: "playwright/scripts/MockWebSocket.js" });
+  }
+
+  static waitForURL(url) {
+    return new Promise((resolve) => {
+      let intervalID = setInterval(() => {
+        for (const [wsURL, ws] of this.#mocks) {
+          console.log(wsURL)
+          if (wsURL.includes(url)) {
+            clearInterval(intervalID);
+            return resolve(ws);
+          }
+        }
+      }, 30)
+    })
+  }
+
+  #page = null
+  #url
+  #protocols
+
+  // spies.
+  #spyClose = null
+  #spyMessage = null
+
+  constructor(page, url, protocols) {
+    super()
+    this.#page = page
+    this.#url = url
+    this.#protocols = protocols
+  }
+
+  mockOpen(options) {
+    return this.#page.evaluate((options) => {
+      WebSocket.getByURL(url).mockOpen(options)
+    }, options)
+  }
+
+  mockMessage(data) {
+    return this.#page.evaluate((data) => {
+      WebSocket.getByURL(url).mockMessage(data)
+    }, data)
+  }
+
+  mockClose() {
+    return this.#page.evaluate(() => {
+      WebSocket.getByURL(url).mockClose()
+    })
+  }
+
+  spyClose(fn) {
+    if (typeof fn !== 'function') {
+      throw new TypeError('Invalid callback')
+    }
+    this.#spyClose = fn
+  }
+
+  spyMessage(fn) {
+    if (typeof fn !== 'function') {
+      throw new TypeError('Invalid callback')
+    }
+    this.#spyMessage = fn
+  }
+}

frontend/playwright/helpers/index.js

@@ -1,14 +0,0 @@
-export const interceptRPC = async (page, path, jsonFilename, options = {}) => {
-  const interceptConfig = {
-    status: 200,
-    ...options,
-  };
-
-  await page.route(`**/api/rpc/command/${path}`, async (route) => {
-    await route.fulfill({
-      ...interceptConfig,
-      contentType: "application/transit+json",
-      path: `playwright/data/${jsonFilename}`,
-    });
-  });
-};

frontend/playwright/login.spec.js

@@ -0,0 +1,69 @@
+import { test, expect } from "@playwright/test";
+import { interceptRPC } from "./helpers/MockRPC";
+import { MockWebSocket } from "./helpers/MockWebSocket";
+
+const setupLoggedOutUser = async (page) => {
+  await interceptRPC(page, "get-profile", "get-profile-anonymous.json");
+  await interceptRPC(page, "login-with-password", "logged-in-user/login-with-password-success.json");
+};
+
+// TODO: maybe Playwright's fixtures are the right way to do this?
+const setupDashboardUser = async (page) => {
+  await interceptRPC(page, "get-profile", "logged-in-user/get-profile-logged-in.json");
+  await interceptRPC(page, "get-teams", "logged-in-user/get-teams-default.json");
+  await interceptRPC(page, "get-font-variants?team-id=*", "logged-in-user/get-font-variants-empty.json");
+  await interceptRPC(page, "get-projects?team-id=*", "logged-in-user/get-projects-default.json");
+  await interceptRPC(page, "get-team-members?team-id=*", "logged-in-user/get-team-members-your-penpot.json");
+  await interceptRPC(page, "get-team-users?team-id=*", "logged-in-user/get-team-users-single-user.json");
+  await interceptRPC(
+    page,
+    "get-unread-comment-threads?team-id=*",
+    "logged-in-user/get-team-users-single-user.json",
+  );
+  await interceptRPC(
+    page,
+    "get-team-recent-files?team-id=*",
+    "logged-in-user/get-team-recent-files-empty.json",
+  );
+  await interceptRPC(
+    page,
+    "get-profiles-for-file-comments",
+    "logged-in-user/get-profiles-for-file-comments-empty.json",
+  );
+  await interceptRPC(
+    page,
+    "get-builtin-templates",
+    "logged-in-user/get-builtin-templates-empty.json",
+  );
+};
+
+test.beforeEach(async ({ page }) => {
+  await MockWebSocket.init(page);
+})
+
+test("Shows login page when going to index and user is logged out", async ({ page }) => {
+  await setupLoggedOutUser(page);
+
+  await page.goto("/");
+
+  await expect(page).toHaveURL(/auth\/login$/);
+  await expect(page.getByText("Log into my account")).toBeVisible();
+});
+
+test("User logs in by filling the login form", async ({ page }) => {
+  await setupLoggedOutUser(page);
+
+  await page.goto("/#/auth/login");
+
+  await setupDashboardUser(page);
+
+  await page.getByLabel("Email").fill("foo@example.com");
+  await page.getByLabel("Password").fill("loremipsum");
+
+  await page.getByRole("button", { name: "Login" }).click();
+
+  const ws = await MockWebSocket.waitForURL('ws://0.0.0.0:3500/ws/notifications');
+  console.log(ws)
+
+  await expect(page).toHaveURL(/dashboard/);
+});

frontend/playwright/scripts/MockWebSocket.js

@@ -0,0 +1,220 @@
+console.log("MockWebSocket mock loaded");
+window.WebSocket = class MockWebSocket extends EventTarget {
+  static CONNECTING = 0;
+  static OPEN = 1;
+  static CLOSING = 2;
+  static CLOSED = 3;
+
+  static #mocks = new Map();
+
+  static getAll() {
+    return this.#mocks.values();
+  }
+
+  static getByURL(url) {
+    return this.#mocks.get(url);
+  }
+
+  #url;
+  #protocols;
+  #protocol = "";
+  #binaryType = "blob";
+  #bufferedAmount = 0;
+  #extensions = "";
+  #readyState = MockWebSocket.CONNECTING;
+
+  #onopen = null;
+  #onerror = null;
+  #onmessage = null;
+  #onclose = null;
+
+  #spyMessage = null;
+  #spyClose = null;
+
+  constructor(url, protocols) {
+    super();
+
+    console.log("MockWebSocket", url, protocols);
+
+    this.#url = url;
+    this.#protocols = protocols || [];
+
+    MockWebSocket.#mocks.set(this.#url, this);
+
+    if (typeof window["MockWebSocket$$constructor"] === "function") {
+      MockWebSocket$$constructor(this.#url, this.#protocols);
+    }
+    if (typeof window["MockWebSocket$$spyMessage"] === "function") {
+      this.#spyMessage = MockWebSocket$$spyMessage;
+    }
+    if (typeof window["MockWebSocket$$spyClose"] === "function") {
+      this.#spyClose = MockWebSocket$$spyClose;
+    }
+  }
+
+  set binaryType(binaryType) {
+    if (!["blob", "arraybuffer"].includes(binaryType)) {
+      return;
+    }
+    this.#binaryType = binaryType;
+  }
+
+  get binaryType() {
+    return this.#binaryType;
+  }
+
+  get bufferedAmount() {
+    return this.#bufferedAmount;
+  }
+
+  get extensions() {
+    return this.#extensions;
+  }
+
+  get readyState() {
+    return this.#readyState;
+  }
+
+  get protocol() {
+    return this.#protocol;
+  }
+
+  get url() {
+    return this.#url;
+  }
+
+  set onopen(callback) {
+    if (callback === null) {
+      this.removeEventListener("open", this.#onopen);
+    } else if (typeof callback === "function") {
+      if (this.#onopen) this.removeEventListener("open", this.#onopen);
+      this.addEventListener("open", callback);
+    }
+    this.#onopen = callback;
+  }
+
+  get onopen() {
+    return this.#onopen;
+  }
+
+  set onerror(callback) {
+    if (callback === null) {
+      this.removeEventListener("error", this.#onerror);
+    } else if (typeof callback === "function") {
+      if (this.#onerror) this.removeEventListener("error", this.#onerror);
+      this.addEventListener("error", callback);
+    }
+    this.#onerror = callback;
+  }
+
+  get onerror() {
+    return this.#onerror;
+  }
+
+  set onmessage(callback) {
+    if (callback === null) {
+      this.removeEventListener("message", this.#onmessage);
+    } else if (typeof callback === "function") {
+      if (this.#onmessage) this.removeEventListener("message", this.#onmessage);
+      this.addEventListener("message", callback);
+    }
+    this.#onmessage = callback;
+  }
+
+  get onmessage() {
+    return this.#onmessage;
+  }
+
+  set onclose(callback) {
+    if (callback === null) {
+      this.removeEventListener("close", this.#onclose);
+    } else if (typeof callback === "function") {
+      if (this.#onclose) this.removeEventListener("close", this.#onclose);
+      this.addEventListener("close", callback);
+    }
+    this.#onclose = callback;
+  }
+
+  get onclose() {
+    return this.#onclose;
+  }
+
+  get mockProtocols() {
+    return this.#protocols;
+  }
+
+  spyClose(callback) {
+    if (typeof callback !== "function") {
+      throw new TypeError("Invalid callback");
+    }
+    this.#spyClose = callback;
+    return this;
+  }
+
+  spyMessage(callback) {
+    if (typeof callback !== "function") {
+      throw new TypeError("Invalid callback");
+    }
+    this.#spyMessage = callback;
+    return this;
+  }
+
+  mockOpen(options) {
+    this.#protocol = options?.protocol || "";
+    this.#extensions = options?.extensions || "";
+    this.#readyState = MockWebSocket.OPEN;
+    this.dispatchEvent(new Event("open"));
+    return this;
+  }
+
+  mockError(error) {
+    this.#readyState = MockWebSocket.CLOSED;
+    this.dispatchEvent(new ErrorEvent("error", { error }));
+    return this;
+  }
+
+  mockMessage(data) {
+    if (this.#readyState !== MockWebSocket.OPEN) {
+      throw new Error("MockWebSocket is not connected");
+    }
+    this.dispatchEvent(new MessageEvent("message", { data }));
+    return this;
+  }
+
+  mockClose(code, reason) {
+    this.#readyState = MockWebSocket.CLOSED;
+    this.dispatchEvent(new CloseEvent("close", { code: code || 1000, reason: reason || "" }));
+    return this;
+  }
+
+  send(data) {
+    console.log(data);
+    if (this.#readyState === MockWebSocket.CONNECTING) {
+      throw new DOMException("InvalidStateError", "MockWebSocket is not connected");
+    }
+    console.log(`MockWebSocket send: ${data}`);
+    this.#spyMessage && this.#spyMessage(this.url, data);
+  }
+
+  close(code, reason) {
+    console.log(code, reason);
+    if (code && !Number.isInteger(code) && code !== 1000 && (code < 3000 || code > 4999)) {
+      throw new DOMException("InvalidAccessError", "Invalid code");
+    }
+
+    if (reason && typeof reason === "string") {
+      const reasonBytes = new TextEncoder().encode(reason);
+      if (reasonBytes.length > 123) {
+        throw new DOMException("SyntaxError", "Reason is too long");
+      }
+    }
+
+    if ([MockWebSocket.CLOSED, MockWebSocket.CLOSING].includes(this.#readyState)) {
+      return;
+    }
+
+    this.#readyState = MockWebSocket.CLOSING;
+    console.log("MockWebSocket close");
+    this.#spyClose && this.#spyClose(this.url, code, reason);
+  }
+}