♻️ Refactor tests and pages

frontend/playwright/fixtures/login-fixture.js

@@ -0,0 +1,10 @@
+import { test as base } from '@playwright/test'
+
+export const test = base.extend({
+  loginPage: async ({ page }, use) => {
+    const loginPage = new LoginPage(page)
+    await use(loginPage)
+  }
+})
+
+export { expect } from '@playwright/test'

frontend/playwright/helpers/MockAPI.js

@@ -1,17 +0,0 @@
-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}`,
-    }),
-  );
-
-export const interceptRPCByRegex = (page, regex, jsonFilename) =>
-  page.route(regex, (route) =>
-    route.fulfill({
-      status: 200,
-      contentType: "application/transit+json",
-      path: `playwright/fixtures/${jsonFilename}`,
-    }),
-  );

frontend/playwright/helpers/MockWebSocketHelper.js

@@ -1,18 +1,21 @@
-export class MockWebSocket extends EventTarget {
+export class MockWebSocketHelper 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 MockWebSocketHelper(page, 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);
+      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) => {
-      console.log("MockWebSocket$$spyClose", url, code, reason);
+      if (!this.#mocks.has(url)) {
+        throw new Error(`WebSocket with URL ${url} not found`);
+      }
       this.#mocks.get(url).dispatchEvent(new CloseEvent("close", { code, reason }));
     });
     await page.addInitScript({ path: "playwright/scripts/MockWebSocket.js" });
@@ -22,7 +25,6 @@ export class MockWebSocket extends EventTarget {
     return new Promise((resolve) => {
       const intervalID = setInterval(() => {
         for (const [wsURL, ws] of this.#mocks) {
-          console.log('waitForURL', wsURL);
           if (wsURL.includes(url)) {
             clearInterval(intervalID);
             return resolve(ws);

frontend/playwright/helpers/intercepts.js

@@ -1,8 +0,0 @@
-import { interceptRPC } from "./index";
-
-
-export const setupNotLogedIn = async (page) => {
-  await interceptRPC(page, "get-profile", "get-profile-anonymous.json");
-
-};
-

frontend/playwright/login.spec.js

@@ -1,57 +0,0 @@
-import { test, expect } from "@playwright/test";
-import { interceptRPC } from "./helpers/MockAPI";
-
-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("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();
-
-  await expect(page).toHaveURL(/dashboard/);
-});

frontend/playwright/scripts/MockWebSocket.js

@@ -39,7 +39,6 @@ window.WebSocket = class MockWebSocket extends EventTarget {
   #spyClose = null;
 
   constructor(url, protocols) {
-    console.log("🤖 New websocket at", url);
     super();
 
     this.#url = url;
@@ -166,7 +165,6 @@ window.WebSocket = class MockWebSocket extends EventTarget {
   }
 
   mockOpen(options) {
-    console.log("🤖 open mock");
     this.#protocol = options?.protocol || "";
     this.#extensions = options?.extensions || "";
     this.#readyState = MockWebSocket.OPEN;
@@ -181,12 +179,9 @@ window.WebSocket = class MockWebSocket extends EventTarget {
   }
 
   mockMessage(data) {
-    console.log("🤯 mock message");
     if (this.#readyState !== MockWebSocket.OPEN) {
-      console.log("socket is not connected");
       throw new Error("MockWebSocket is not connected");
     }
-    console.log("😰 dispatching `message`", { data });
     this.dispatchEvent(new MessageEvent("message", { data }));
     return this;
   }

frontend/playwright/ui/pages/BasePage.js

@@ -0,0 +1,38 @@
+export class BasePage {
+  static async mockRPC(page, path, jsonFilename, options) {
+    if (!page) {
+      throw new TypeError("Invalid page argument. Must be a Playwright page.");
+    }
+    if (typeof path !== "string" && !(path instanceof RegExp)) {
+      throw new TypeError("Invalid path argument. Must be a string or a RegExp.");
+    }
+    const url = typeof path === "string" ? `**/api/rpc/command/${path}` : path;
+    const interceptConfig = {
+      status: 200,
+      contentType: "application/transit+json",
+      ...options,
+    };
+    return page.route(url, (route) =>
+      route.fulfill({
+        ...interceptConfig,
+        path: `playwright/data/${jsonFilename}`,
+      }),
+    );
+  }
+
+  #page = null;
+
+  constructor(page) {
+    this.#page = page;
+  }
+
+  get page() {
+    return this.#page;
+  }
+
+  async mockRPC(path, jsonFilename, options) {
+    return BasePage.mockRPC(this.page, path, jsonFilename, options);
+  }
+}
+
+export default BasePage;

frontend/playwright/ui/pages/BaseWebSocketPage.js

@@ -0,0 +1,32 @@
+import { MockWebSocketHelper } from "../../helpers/MockWebSocketHelper";
+import BasePage from "./BasePage";
+
+export class BaseWebSocketPage extends BasePage {
+  /**
+   * This should be called on `test.beforeEach`.
+   *
+   * @param {Page} page
+   * @returns
+   */
+  static setupWebSockets(page) {
+    return MockWebSocketHelper.init(page);
+  }
+
+  /**
+   * Returns a promise that resolves when a WebSocket with the given URL is created.
+   *
+   * @param {string} url
+   * @returns {Promise<MockWebSocketHelper>}
+   */
+  async waitForWebSocket(url) {
+    return MockWebSocketHelper.waitForURL(url);
+  }
+
+  /**
+   *
+   * @returns {Promise<MockWebSocketHelper>}
+   */
+  async waitForNotificationsWebSocket() {
+    return this.waitForWebSocket("ws://0.0.0.0:3500/ws/notifications");
+  }
+}

frontend/playwright/ui/pages/LoginPage.js

@@ -0,0 +1,54 @@
+import { BasePage } from "./BasePage";
+
+export class LoginPage extends BasePage {
+  static setupLoggedOutUser(page) {
+    return this.mockRPC(page, "get-profile", "get-profile-anonymous.json");
+  }
+
+  constructor(page) {
+    super(page);
+    this.loginButton = page.getByRole("button", { name: "Login" });
+    this.password = page.getByLabel("Password");
+    this.userName = page.getByLabel("Email");
+    this.message = page.getByText("Email or password is incorrect");
+    this.badLoginMsg = page.getByText("Enter a valid email please");
+    this.initialHeading = page.getByRole("heading", { name: "Log into my account" });
+  }
+
+  async fillEmailAndPasswordInputs(email, password) {
+    await this.userName.fill(email);
+    await this.password.fill(password);
+  }
+
+  async clickLoginButton() {
+    await this.loginButton.click();
+  }
+
+  async setupAllowedUser() {
+    await this.mockRPC("get-profile", "logged-in-user/get-profile-logged-in.json");
+    await this.mockRPC("get-teams", "logged-in-user/get-teams-default.json");
+    await this.mockRPC("get-font-variants?team-id=*", "logged-in-user/get-font-variants-empty.json");
+    await this.mockRPC("get-projects?team-id=*", "logged-in-user/get-projects-default.json");
+    await this.mockRPC("get-team-members?team-id=*", "logged-in-user/get-team-members-your-penpot.json");
+    await this.mockRPC("get-team-users?team-id=*", "logged-in-user/get-team-users-single-user.json");
+    await this.mockRPC(
+      "get-unread-comment-threads?team-id=*",
+      "logged-in-user/get-team-users-single-user.json",
+    );
+    await this.mockRPC("get-team-recent-files?team-id=*", "logged-in-user/get-team-recent-files-empty.json");
+    await this.mockRPC(
+      "get-profiles-for-file-comments",
+      "logged-in-user/get-profiles-for-file-comments-empty.json",
+    );
+  }
+
+  async setupLoginSuccess() {
+    await this.mockRPC("login-with-password", "logged-in-user/login-with-password-success.json");
+  }
+
+  async setupLoginError() {
+    await this.mockRPC("login-with-password", "login-with-password-error.json", { status: 400 });
+  }
+}
+
+export default LoginPage;

frontend/playwright/ui/pages/login-page.js

@@ -1,76 +0,0 @@
-import { interceptRPC } from "../../helpers/index";
-
-class LoginPage {
-  constructor(page) {
-    this.page = page;
-    this.loginButton = page.getByRole("button", { name: "Login" });
-    this.password = page.getByLabel("Password");
-    this.userName = page.getByLabel("Email");
-    this.message = page.getByText("Email or password is incorrect");
-    this.badLoginMsg = page.getByText("Enter a valid email please");
-    this.initialHeading = page.getByRole("heading", { name: "Log into my account" });
-  }
-
-  url() {
-    return this.page.url();
-  }
-
-  context() {
-    return this.page.context();
-  }
-
-  async fillEmailAndPasswordInputs(email, password) {
-    await this.userName.fill(email);
-    await this.password.fill(password);
-  }
-
-  async clickLoginButton() {
-    await this.loginButton.click();
-  }
-
-  async setupAllowedUser() {
-    await interceptRPC(this.page, "get-profile", "logged-in-user/get-profile-logged-in.json");
-    await interceptRPC(this.page, "get-teams", "logged-in-user/get-teams-default.json");
-    await interceptRPC(
-      this.page,
-      "get-font-variants?team-id=*",
-      "logged-in-user/get-font-variants-empty.json",
-    );
-    await interceptRPC(this.page, "get-projects?team-id=*", "logged-in-user/get-projects-default.json");
-    await interceptRPC(
-      this.page,
-      "get-team-members?team-id=*",
-      "logged-in-user/get-team-members-your-penpot.json",
-    );
-    await interceptRPC(
-      this.page,
-      "get-team-users?team-id=*",
-      "logged-in-user/get-team-users-single-user.json",
-    );
-    await interceptRPC(
-      this.page,
-      "get-unread-comment-threads?team-id=*",
-      "logged-in-user/get-team-users-single-user.json",
-    );
-    await interceptRPC(
-      this.page,
-      "get-team-recent-files?team-id=*",
-      "logged-in-user/get-team-recent-files-empty.json",
-    );
-    await interceptRPC(
-      this.page,
-      "get-profiles-for-file-comments",
-      "logged-in-user/get-profiles-for-file-comments-empty.json",
-    );
-  }
-
-  async setupLoginSuccess() {
-    await interceptRPC(this.page, "login-with-password", "logged-in-user/login-with-password-success.json");
-  }
-
-  async setupLoginError() {
-    await interceptRPC(this.page, "login-with-password", "login-with-password-error.json", { status: 400 });
-  }
-}
-
-export default LoginPage;

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

@@ -1,10 +1,8 @@
 import { test, expect } from "@playwright/test";
-import { setupNotLogedIn } from "../../helpers/intercepts";
+import { LoginPage } from "../pages/LoginPage";
-
-import LoginPage from "../pages/login-page";
 
 test.beforeEach(async ({ page }) => {
-  await setupNotLogedIn(page);
+  await LoginPage.setupLoggedOutUser(page);
   await page.goto("/#/auth/login");
 });
 
@@ -13,7 +11,7 @@ test("Shows login page when going to index and user is logged out", async ({ pag
 
   await loginPage.setupAllowedUser();
 
-  await expect(loginPage.url()).toMatch(/auth\/login$/);
+  await expect(loginPage.page).toHaveURL(/auth\/login$/);
   await expect(loginPage.initialHeading).toBeVisible();
 });
 
@@ -37,8 +35,7 @@ test("User logs in by filling the login form", async ({ page }) => {
   await loginPage.clickLoginButton();
 
   await page.waitForURL('**/dashboard/**');
-  await expect(page).toHaveURL(/dashboard/);
+  await expect(loginPage.page).toHaveURL(/dashboard/);
-  // await expect(loginPage.url()).toMatch(/dashboard/);
 });
 
 test("User submits wrong credentials", async ({ page }) => {
@@ -50,5 +47,5 @@ test("User submits wrong credentials", async ({ page }) => {
   await loginPage.clickLoginButton();
 
   await expect(loginPage.message).toBeVisible();
-  await expect(loginPage.url()).toMatch(/auth\/login$/);
+  await expect(loginPage.page).toHaveURL(/auth\/login$/);
 });

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

@@ -0,0 +1,54 @@
+import { test, expect } from "@playwright/test";
+import { BasePage } from "../pages/BasePage";
+import { MockWebSocketHelper } from "../../helpers/MockWebSocketHelper";
+import { presenceFixture } from "../../data/workspace/ws-notifications";
+
+const anyProjectId = "c7ce0794-0992-8105-8004-38e630f7920b";
+const anyFileId = "c7ce0794-0992-8105-8004-38f280443849";
+const anyPageId = "c7ce0794-0992-8105-8004-38f28044384a";
+
+const setupWorkspaceUser = (page) => {
+  BasePage.mockRPC(page, "get-profile", "logged-in-user/get-profile-logged-in.json");
+  BasePage.mockRPC(page, "get-team-users?file-id=*", "logged-in-user/get-team-users-single-user.json");
+  BasePage.mockRPC(page, "get-comment-threads?file-id=*", "workspace/get-comment-threads-empty.json");
+  BasePage.mockRPC(page, "get-project?id=*", "workspace/get-project-default.json");
+  BasePage.mockRPC(page, "get-team?id=*", "workspace/get-team-default.json");
+  BasePage.mockRPC(page, /get\-file\?/, "workspace/get-file-blank.json");
+  BasePage.mockRPC(
+    page,
+    "get-file-object-thumbnails?file-id=*",
+    "workspace/get-file-object-thumbnails-blank.json",
+  );
+  BasePage.mockRPC(
+    page,
+    "get-profiles-for-file-comments?file-id=*",
+    "workspace/get-profile-for-file-comments.json",
+  );
+  BasePage.mockRPC(page, "get-font-variants?team-id=*", "workspace/get-font-variants-empty.json");
+  BasePage.mockRPC(page, "get-file-fragment?file-id=*", "workspace/get-file-fragment-blank.json");
+  BasePage.mockRPC(page, "get-file-libraries?file-id=*", "workspace/get-file-libraries-empty.json");
+};
+
+test.beforeEach(async ({ page }) => {
+  await MockWebSocketHelper.init(page);
+});
+
+test("User loads worskpace with empty file", async ({ page }) => {
+  await setupWorkspaceUser(page);
+
+  await page.goto(`/#/workspace/${anyProjectId}/${anyFileId}?page-id=${anyPageId}`);
+
+  await expect(page.getByTestId("page-name")).toHaveText("Page 1");
+});
+
+test("User receives notifications updates in the workspace", async ({ page }) => {
+  await setupWorkspaceUser(page);
+  await page.goto(`/#/workspace/${anyProjectId}/${anyFileId}?page-id=${anyPageId}`);
+
+  const ws = await MockWebSocketHelper.waitForURL("ws://0.0.0.0:3500/ws/notifications")
+  await ws.mockOpen();
+  await expect(page.getByTestId("page-name")).toHaveText("Page 1");
+  await ws.mockMessage(JSON.stringify(presenceFixture));
+  await expect(page.getByTestId("active-users-list").getByAltText("Princesa Leia")).toHaveCount(2);
+  await ws.mockClose();
+});

frontend/playwright/workspace.spec.js

@@ -1,76 +0,0 @@
-import { test, expect } from "@playwright/test";
-import { interceptRPC, interceptRPCByRegex } from "./helpers/MockAPI";
-import { MockWebSocket } from "./helpers/MockWebSocket";
-import { presenceFixture } from "./fixtures/workspace/ws-notifications";
-
-const anyProjectId = "c7ce0794-0992-8105-8004-38e630f7920b";
-const anyFileId = "c7ce0794-0992-8105-8004-38f280443849";
-const anyPageId = "c7ce0794-0992-8105-8004-38f28044384a";
-
-const setupWorkspaceUser = (page) => {
-  interceptRPC(page, "get-profile", "logged-in-user/get-profile-logged-in.json");
-  interceptRPC(page, "get-team-users?file-id=*", "logged-in-user/get-team-users-single-user.json");
-  interceptRPC(page, "get-comment-threads?file-id=*", "workspace/get-comment-threads-empty.json");
-  interceptRPC(page, "get-project?id=*", "workspace/get-project-default.json");
-  interceptRPC(page, "get-team?id=*", "workspace/get-team-default.json");
-  interceptRPCByRegex(page, /get\-file\?/, "workspace/get-file-blank.json");
-  interceptRPC(
-    page,
-    "get-file-object-thumbnails?file-id=*",
-    "workspace/get-file-object-thumbnails-blank.json",
-  );
-  interceptRPC(
-    page,
-    "get-profiles-for-file-comments?file-id=*",
-    "workspace/get-profile-for-file-comments.json",
-  );
-  interceptRPC(page, "get-font-variants?team-id=*", "workspace/get-font-variants-empty.json");
-  interceptRPC(page, "get-file-fragment?file-id=*", "workspace/get-file-fragment-blank.json");
-  interceptRPC(page, "get-file-libraries?file-id=*", "workspace/get-file-libraries-empty.json");
-};
-
-test.beforeEach(async ({ page }) => {
-  await MockWebSocket.init(page);
-});
-
-test("User loads worskpace with empty file", async ({ page }) => {
-  await setupWorkspaceUser(page);
-
-  await page.goto(`/#/workspace/${anyProjectId}/${anyFileId}?page-id=${anyPageId}`);
-
-  await expect(page.getByTestId("page-name")).toHaveText("Page 1");
-});
-
-test.only("User receives notifications updates in the workspace", async ({ page }) => {
-  await setupWorkspaceUser(page);
-  await page.goto(`/#/workspace/${anyProjectId}/${anyFileId}?page-id=${anyPageId}`);
-
-  const ws = await MockWebSocket.waitForURL("ws://0.0.0.0:3500/ws/notifications")
-  await ws.mockOpen();
-  console.log('JEEEEEE', ws)
-
-  await expect(page.getByTestId("page-name")).toHaveText("Page 1");
-
-  await ws.mockMessage(JSON.stringify(presenceFixture));
-
-  /*
-  await page.evaluate(
-    async ({ presenceFixture }) => {
-      const ws = await WebSocket.waitForURL("ws://0.0.0.0:3500/ws/notifications");
-      ws.mockMessage(JSON.stringify(presenceFixture));
-    },
-    { presenceFixture },
-  );
-  */
-
-  await expect(page.getByTestId("active-users-list").getByAltText("Princesa Leia")).toHaveCount(2);
-
-  await ws.mockClose();
-
-  /*
-  await page.evaluate(async () => {
-    const ws = await WebSocket.waitForURL("ws://0.0.0.0:3500/ws/notifications");
-    ws.mockClose();
-  });
-  */
-});

frontend/src/app/main/data/workspace/notifications.cljs

@@ -162,7 +162,6 @@
                 (assoc :text-color "#000000")))
 
           (update-presence [presence]
-          (js/console.log "🥰 WIIIIII" (clj->js presence))
             (-> presence
                 (update session-id update-session presence)
                 (d/without-nils)))]