Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-10 09:08:31 -05:00
Code Issues Activity

Merge pull request #4779 from penpot/ladybenko-7937-login-visual-test

Browse source 
Add temporary visual regression tests for the login page
This commit is contained in:
Alejandro 2024-06-20 11:58:45 +02:00 • committed by GitHub
commit 446edee7c6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 45 additions and 125 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
frontend/playwright/ui/pages/LoginPage.js
View file

@ -1,10 +1,6 @@
import { BasePage } from "./BasePage";
export class LoginPage extends BasePage {
static async initWithLoggedOutUser(page) {
await BasePage.mockRPC(page, "get-profile", "get-profile-anonymous.json");
}
constructor(page) {
super(page);
this.loginButton = page.getByRole("button", { name: "Login" });
@ -24,6 +20,10 @@ export class LoginPage extends BasePage {
await this.loginButton.click();
}
async initWithLoggedOutUser() {
await this.mockRPC("get-profile", "get-profile-anonymous.json");
}
async setupLoggedInUser() {
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");

4
frontend/playwright/ui/specs/login.spec.js
View file

@ -2,7 +2,9 @@ import { test, expect } from "@playwright/test";
import { LoginPage } from "../pages/LoginPage";
test.beforeEach(async ({ page }) => {
await LoginPage.initWithLoggedOutUser(page);
const login = new LoginPage(page);
await login.initWithLoggedOutUser();
await page.goto("/#/auth/login");
});

10
frontend/playwright/ui/visual-specs/example.spec.js
View file

@ -1,10 +0,0 @@
import { test, expect } from "@playwright/test";
import { LoginPage } from "../pages/LoginPage";
test("Shows login form correctly", async ({ page }) => {
await LoginPage.initWithLoggedOutUser(page);
const loginPage = new LoginPage(page);
await page.goto("/#/auth/login");
await expect(page).toHaveScreenshot();
});

111
frontend/playwright/ui/visual-specs/visual-dashboard.spec.js
View file

@ -3,11 +3,7 @@ import DashboardPage from "../pages/DashboardPage";
test.beforeEach(async ({ page }) => {
await DashboardPage.init(page);
await DashboardPage.mockRPC(
page,
"get-profile",
"logged-in-user/get-profile-logged-in-no-onboarding.json",
);
await DashboardPage.mockRPC(page, "get-profile", "logged-in-user/get-profile-logged-in-no-onboarding.json");
});
test("User goes to an empty dashboard", async ({ page }) => {
@ -123,15 +119,12 @@ test("User goes to an full search page", async ({ page }) => {
await dashboardPage.setupDashboardFull();
await dashboardPage.goToSearch();
await expect(dashboardPage.searchInput).toBeVisible();
await dashboardPage.searchInput.fill("New");
await expect(dashboardPage.searchTitle).toBeVisible();
await expect(dashboardPage.newFileName).toBeVisible();
await expect(dashboardPage.page).toHaveScreenshot();
});
@ -141,9 +134,7 @@ test("User opens user account", async ({ page }) => {
const dashboardPage = new DashboardPage(page);
await dashboardPage.goToDashboard();
await expect(dashboardPage.userAccount).toBeVisible();
await dashboardPage.goToAccount();
await expect(dashboardPage.page).toHaveScreenshot();
@ -153,11 +144,9 @@ test("User goes to user profile", async ({ page }) => {
const dashboardPage = new DashboardPage(page);
await dashboardPage.goToDashboard();
await dashboardPage.goToAccount();
await expect(dashboardPage.userAccountTitle).toBeVisible();
await expect(dashboardPage.page).toHaveScreenshot();
});
@ -165,13 +154,11 @@ test("User goes to password management section", async ({ page }) => {
const dashboardPage = new DashboardPage(page);
await dashboardPage.goToDashboard();
await dashboardPage.goToAccount();
await page.getByText("Password").click();
await expect(page.getByRole("heading", { name: "Change Password" })).toBeVisible();
await expect(dashboardPage.page).toHaveScreenshot();
});
@ -179,91 +166,11 @@ test("User goes to settings section", async ({ page }) => {
const dashboardPage = new DashboardPage(page);
await dashboardPage.goToDashboard();
await dashboardPage.goToAccount();
await page.getByTestId("settings-profile").click();
await expect(page.getByRole("heading", { name: "Settings" })).toBeVisible();
await expect(dashboardPage.page).toHaveScreenshot();
});
test("User goes to an empty access tokens secction", async ({ page }) => {
const dashboardPage = new DashboardPage(page);
await dashboardPage.goToDashboard();
await dashboardPage.setupAccessTokensEmpty();
await dashboardPage.goToAccount();
await page.getByText("Access tokens").click();
await expect(page.getByRole("heading", { name: "Personal access tokens" })).toBeVisible();
await expect(dashboardPage.page).toHaveScreenshot();
});
test("User can create an access token", async ({ page }) => {
const dashboardPage = new DashboardPage(page);
await dashboardPage.goToDashboard();
await dashboardPage.setupAccessTokensEmpty();
await dashboardPage.goToAccount();
await page.getByText("Access tokens").click();
await expect(page.getByRole("heading", { name: "Personal access tokens" })).toBeVisible();
await page.getByRole("button", { name: "Generate New Token" }).click();
await dashboardPage.createAccessToken();
await expect(page.getByPlaceholder("The name can help to know")).toBeVisible();
await page.getByPlaceholder("The name can help to know").fill("New token");
await expect(page.getByRole("button", { name: "Create token" })).not.toBeDisabled();
await page.getByRole("button", { name: "Create token" }).click();
await expect(page.getByRole("button", { name: "Create token" })).not.toBeVisible();
await expect(dashboardPage.page).toHaveScreenshot();
});
test("User goes to a full access tokens secction", async ({ page }) => {
const dashboardPage = new DashboardPage(page);
await dashboardPage.goToDashboard();
await dashboardPage.setupAccessTokens();
await dashboardPage.goToAccount();
await page.getByText("Access tokens").click();
await expect(page.getByRole("heading", { name: "Personal access tokens" })).toBeVisible();
await expect(page.getByText("new token", { exact: true })).toBeVisible();
await expect(dashboardPage.page).toHaveScreenshot();
});
test("User goes to the feedback secction", async ({ page }) => {
const dashboardPage = new DashboardPage(page);
await dashboardPage.goToDashboard();
await dashboardPage.goToAccount();
await page.getByText("Give feedback").click();
await expect(page.getByRole("heading", { name: "Email" })).toBeVisible();
await expect(dashboardPage.page).toHaveScreenshot();
});
@ -273,13 +180,11 @@ test("User opens teams selector with only one team", async ({ page }) => {
const dashboardPage = new DashboardPage(page);
await dashboardPage.goToDashboard();
await expect(dashboardPage.titleLabel).toBeVisible();
await dashboardPage.teamDropdown.click();
await expect(page.getByText("Create new team")).toBeVisible();
await expect(dashboardPage.page).toHaveScreenshot();
});
@ -288,30 +193,25 @@ test("User opens teams selector with more than one team", async ({ page }) => {
await dashboardPage.setupDashboardFull();
await dashboardPage.goToDashboard();
await expect(dashboardPage.titleLabel).toBeVisible();
await dashboardPage.teamDropdown.click();
await expect(page.getByText("Second Team")).toBeVisible();
await expect(dashboardPage.page).toHaveScreenshot();
});
test("User goes to second team", async ({ page }) => {
const dashboardPage = new DashboardPage(page);
await dashboardPage.setupDashboardFull();
await dashboardPage.goToDashboard();
await dashboardPage.teamDropdown.click();
await expect(page.getByText("Second Team")).toBeVisible();
await page.getByText("Second Team").click();
await expect(page.getByText("Team Up")).toBeVisible();
await expect(dashboardPage.page).toHaveScreenshot();
});
@ -320,13 +220,11 @@ test("User opens team management dropdown", async ({ page }) => {
await dashboardPage.setupDashboardFull();
await dashboardPage.goToSecondTeamDashboard();
await expect(page.getByText("Team Up")).toBeVisible();
await page.getByRole("button", { name: "team-management" }).click();
await expect(page.getByTestId("team-members")).toBeVisible();
await expect(dashboardPage.page).toHaveScreenshot();
});
@ -365,24 +263,20 @@ test("User goes to a complete invitations section", async ({ page }) => {
await expect(dashboardPage.page).toHaveScreenshot();
});
test("User invite people to the team", async ({ page }) => {
const dashboardPage = new DashboardPage(page);
await dashboardPage.setupDashboardFull();
await dashboardPage.setupTeamInvitationsEmpty();
await dashboardPage.goToSecondTeamInvitationsSection();
await expect(page.getByTestId("invite-member")).toBeVisible();
await page.getByTestId("invite-member").click();
await expect(page.getByText("Invite with the role")).toBeVisible();
await page.getByPlaceholder("Emails, comma separated").fill("test5@mail.com");
await expect(page.getByText("Send invitation")).not.toBeDisabled();
await expect(dashboardPage.page).toHaveScreenshot();
});
@ -394,7 +288,6 @@ test("User goes to an empty webhook section", async ({ page }) => {
await dashboardPage.goToSecondTeamWebhooksSection();
await expect(page.getByText("No webhooks created so far.")).toBeVisible();
await expect(dashboardPage.page).toHaveScreenshot();
});
@ -406,7 +299,6 @@ test("User goes to a complete webhook section", async ({ page }) => {
await dashboardPage.goToSecondTeamWebhooksSection();
await expect(page.getByText("https://www.google.com")).toBeVisible();
await expect(dashboardPage.page).toHaveScreenshot();
});
@ -418,6 +310,5 @@ test("User goes to the team settings section", async ({ page }) => {
await dashboardPage.goToSecondTeamSettingsSection();
await expect(page.getByText("TEAM INFO")).toBeVisible();
await expect(dashboardPage.page).toHaveScreenshot();
});

37
frontend/playwright/ui/visual-specs/visual-login.spec.js Normal file
View file

@ -0,0 +1,37 @@
import { test, expect } from "@playwright/test";
import { LoginPage } from "../pages/LoginPage";
test.beforeEach(async ({ page }) => {
const login = new LoginPage(page);
await login.initWithLoggedOutUser();
await login.page.goto("/#/auth/login");
});
test.describe("Login form", () => {
test("Shows the login form correctly", async ({ page }) => {
const login = new LoginPage(page);
await expect(login.page).toHaveScreenshot();
});
test("Shows form error messages correctly ", async ({ page }) => {
const login = new LoginPage(page);
await login.setupLoginSuccess();
await login.fillEmailAndPasswordInputs("foo", "lorenIpsum");
await expect(login.invalidEmailError).toBeVisible();
await expect(login.page).toHaveScreenshot();
});
test("Shows error toasts correctly", async ({ page }) => {
const login = new LoginPage(page);
await login.setupLoginError();
await login.fillEmailAndPasswordInputs("test@example.com", "loremipsum");
await login.clickLoginButton();
await expect(login.invalidCredentialsError).toBeVisible();
await expect(login.page).toHaveURL(/auth\/login$/);
await expect(login.page).toHaveScreenshot();
});
});