0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-17 18:21:23 -05:00

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

 Add login page as Page Object Model
This commit is contained in:
Aitor Moreno 2024-05-07 10:58:08 +02:00 committed by GitHub
commit 38e35fb5ae
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
19 changed files with 143 additions and 85 deletions

View file

@ -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}`,
});
});
};

View file

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

View file

@ -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$/);
});

View file

@ -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;

View file

@ -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("/");

View file

@ -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$/);
});