mirror of
https://github.com/penpot/penpot.git
synced 2025-03-18 02:32:13 -05:00
Merge pull request #4555 from penpot/eva-testing-login-pom
✨ Add login page as Page Object Model
This commit is contained in:
commit
38e35fb5ae
19 changed files with 143 additions and 85 deletions
|
@ -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}`,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
|
8
frontend/playwright/helpers/intercepts.js
Normal file
8
frontend/playwright/helpers/intercepts.js
Normal file
|
@ -0,0 +1,8 @@
|
|||
import { interceptRPC } from "./index";
|
||||
|
||||
|
||||
export const setupNotLogedIn = async (page) => {
|
||||
await interceptRPC(page, "get-profile", "get-profile-anonymous.json");
|
||||
|
||||
};
|
||||
|
|
@ -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$/);
|
||||
});
|
76
frontend/playwright/ui/pages/login-page.js
Normal file
76
frontend/playwright/ui/pages/login-page.js
Normal 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;
|
|
@ -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("/");
|
54
frontend/playwright/ui/specs/login.spec.js
Normal file
54
frontend/playwright/ui/specs/login.spec.js
Normal 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$/);
|
||||
});
|
Loading…
Add table
Reference in a new issue