Merge pull request #4555 from penpot/eva-testing-login-pom

✨ Add login page as Page Object Model

frontend/playwright/helpers/index.js

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

frontend/playwright/helpers/intercepts.js

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

frontend/playwright/login.spec.js

@@ -1,80 +0,0 @@
-import { test, expect } from "@playwright/test";
-import { interceptRPC } from "./helpers";
-
-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",
-  );
-};
-
-test("Shows login page when going to index and user is logged out", async ({ page }) => {
-  setupLoggedOutUser(page);
-
-  await page.goto("/");
-
-  await expect(page).toHaveURL(/auth\/login$/);
-  await expect(page.getByRole("heading", { name: "Log into my account" } )).toBeVisible();
-});
-
-test("User submit a wrong formated email ", async ({ page }) => {
-  await interceptRPC(page, "get-profile", "get-profile-anonymous.json");
-  await page.goto("/");
-  await page.getByLabel("Email").fill("foo");
-
-  await expect(page).toHaveURL(/auth\/login$/);
-  await expect(page.getByText("Enter a valid email please")).toBeVisible();
-});
-
-test("User logs in by filling the login form", async ({ page }) => {
-  setupLoggedOutUser(page);
-
-  await page.goto("/#/auth/login");
-
-  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/);
-});
-
-test("User submits wrong credentials", async ({ page }) => {
-  await interceptRPC(page, "get-profile", "get-profile-anonymous.json");
-  await interceptRPC(page, "login-with-password", "login-with-password-error.json", { status: 400 });
-
-  await page.goto("/");
-
-  await page.getByLabel("Email").fill("foo123@example.com");
-  await page.getByLabel("Password").fill("aaaa");
-
-  await page.getByRole("button", { name: "Login" }).click();
-
-  await expect(page.getByText("Email or password is incorrect")).toBeVisible();
-  await expect(page).toHaveURL(/auth\/login$/);
-});

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

@@ -0,0 +1,76 @@
+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/example.spec.js

@@ -5,7 +5,7 @@ test("Has title", async ({ page }) => {
     route.fulfill({
       status: 200,
       contentType: "application/transit+json",
-      path: "playwright/fixtures/get-profile-anonymous.json",
+      path: "playwright/data/get-profile-anonymous.json",
     });
   });
   await page.goto("/");

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

@@ -0,0 +1,54 @@
+import { test, expect } from "@playwright/test";
+import { setupNotLogedIn } from "../../helpers/intercepts";
+
+import LoginPage from "../pages/login-page";
+
+test.beforeEach(async ({ page }) => {
+  await setupNotLogedIn(page);
+  await page.goto("/#/auth/login");
+});
+
+test("Shows login page when going to index and user is logged out", async ({ page }) => {
+  const loginPage = new LoginPage(page);
+
+  await loginPage.setupAllowedUser();
+
+  await expect(loginPage.url()).toMatch(/auth\/login$/);
+  await expect(loginPage.initialHeading).toBeVisible();
+});
+
+test("User submit a wrong formated email ", async ({ page }) => {
+  const loginPage = new LoginPage(page);
+
+  await loginPage.setupLoginSuccess();
+
+  await loginPage.fillEmailAndPasswordInputs("foo", "lorenIpsum");
+
+  await expect(loginPage.badLoginMsg).toBeVisible();
+});
+
+test("User logs in by filling the login form", async ({ page }) => {
+  const loginPage = new LoginPage(page);
+
+  await loginPage.setupLoginSuccess();
+  await loginPage.setupAllowedUser();
+
+  await loginPage.fillEmailAndPasswordInputs("foo@example.com", "loremipsum");
+  await loginPage.clickLoginButton();
+
+  await page.waitForURL('**/dashboard/**');
+  await expect(page).toHaveURL(/dashboard/);
+  // await expect(loginPage.url()).toMatch(/dashboard/);
+});
+
+test("User submits wrong credentials", async ({ page }) => {
+  const loginPage = new LoginPage(page);
+
+  await loginPage.setupLoginError();
+
+  await loginPage.fillEmailAndPasswordInputs("test@example.com", "loremipsum");
+  await loginPage.clickLoginButton();
+
+  await expect(loginPage.message).toBeVisible();
+  await expect(loginPage.url()).toMatch(/auth\/login$/);
+});