3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-07-13 11:47:16 +02:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #4799 from penpot/ladybenko-fix-visual-regression-tests

Browse source 
Fix broken visual regression test + refactor Dashboard POM
This commit is contained in:
Alejandro 2024-06-26 07:01:49 +02:00 • committed by GitHub
commit 4437fc43e4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 48 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

42
frontend/playwright/ui/pages/DashboardPage.js
View file

@ -1,3 +1,4 @@
import { expect } from "@playwright/test";
import { BaseWebSocketPage } from "./BaseWebSocketPage"; import { BaseWebSocketPage } from "./BaseWebSocketPage";
export class DashboardPage extends BaseWebSocketPage { export class DashboardPage extends BaseWebSocketPage {
@ -49,31 +50,29 @@ export class DashboardPage extends BaseWebSocketPage {
} }
static anyTeamId = "c7ce0794-0992-8105-8004-38e630f40f6d"; static anyTeamId = "c7ce0794-0992-8105-8004-38e630f40f6d";
static secondTeamId = "dd33ff88-f4e5-8033-8003-8096cc07bdf3"; static secondTeamId = "dd33ff88-f4e5-8033-8003-8096cc07bdf3";
static draftProjectId = "c7ce0794-0992-8105-8004-38e630f7920b"; static draftProjectId = "c7ce0794-0992-8105-8004-38e630f7920b";
constructor(page) { constructor(page) {
super(page); super(page);
this.titleLabel = page.getByRole("heading", { name: "Projects" });
this.addProjectBtn = page.getByRole("button", { name: "+ NEW PROJECT" }); this.sidebar = page.getByTestId("dashboard-sidebar");
this.sidebarMenu = this.sidebar.getByRole("menu");
this.mainHeading = page.getByRole("heading", { level: 1 });
this.addProjectButton = page.getByRole("button", { name: "+ NEW PROJECT" });
this.projectName = page.getByText("Project 1"); this.projectName = page.getByText("Project 1");
this.draftTitle = page.getByRole("heading", { name: "Drafts" });
this.draftLink = page.getByTestId("drafts-link-sidebar"); this.draftsLink = this.sidebar.getByText("Drafts");
this.draftsFile = page.getByText(/New File 1/); this.fontsLink = this.sidebar.getByText("Fonts");
this.fontsLink = page.getByTestId("fonts-link-sidebar"); this.libsLink = this.sidebar.getByText("Libraries");
this.fontsTitle = page.getByRole("heading", { name: "Fonts", level: 1 });
this.libsLink = page.getByTestId("libs-link-sidebar");
this.libsTitle = page.getByRole("heading", { name: "Libraries", level: 1 });
this.searchButton = page.getByRole("button", { name: "dashboard-search" }); this.searchButton = page.getByRole("button", { name: "dashboard-search" });
this.searchTitle = page.getByRole("heading", { name: "Search results" }); this.searchInput = page.getByPlaceholder("Search…");
this.searchInput = page.getByPlaceholder('Search…');
this.newFileName = page.getByText("New File 3"); this.teamDropdown = this.sidebar.getByRole("button", { name: "Your Penpot" });
this.teamDropdown = page.getByRole('button', { name: 'Your Penpot' }); this.userAccount = this.sidebar.getByRole("button", { name: /Princesa Leia/ });
this.userAccount = page.getByRole('button', { name: "Princesa Leia Princesa Leia" }); this.userProfileOption = this.sidebarMenu.getByText("Your account");
this.userProfileOption = page.getByText("Your account");
this.userAccountTitle = page.getByRole("heading", {name: "Your account"});
} }
async setupDraftsEmpty() { async setupDraftsEmpty() {
@ -106,8 +105,8 @@ export class DashboardPage extends BaseWebSocketPage {
await this.mockRPC("get-team-shared-files?project-id=*", "dashboard/get-shared-files.json"); await this.mockRPC("get-team-shared-files?project-id=*", "dashboard/get-shared-files.json");
await this.mockRPC("get-team-recent-files?team-id=*", "dashboard/get-team-recent-files.json"); await this.mockRPC("get-team-recent-files?team-id=*", "dashboard/get-team-recent-files.json");
await this.mockRPC("get-font-variants?team-id=*", "dashboard/get-font-variants.json"); await this.mockRPC("get-font-variants?team-id=*", "dashboard/get-font-variants.json");
await this.mockRPC("search-files", "dashboard/search-files.json", { method: "POST" }); await this.mockRPC("search-files", "dashboard/search-files.json", { method: "POST" });
await this.mockRPC("search-files", "dashboard/search-files.json" ); await this.mockRPC("search-files", "dashboard/search-files.json");
await this.mockRPC("get-teams", "logged-in-user/get-teams-complete.json"); await this.mockRPC("get-teams", "logged-in-user/get-teams-complete.json");
} }
@ -145,6 +144,7 @@ export class DashboardPage extends BaseWebSocketPage {
async goToDashboard() { async goToDashboard() {
await this.page.goto(`#/dashboard/team/${DashboardPage.anyTeamId}/projects`); await this.page.goto(`#/dashboard/team/${DashboardPage.anyTeamId}/projects`);
await expect(this.mainHeading).toBeVisible();
} }
async goToSecondTeamDashboard() { async goToSecondTeamDashboard() {
@ -179,10 +179,10 @@ export class DashboardPage extends BaseWebSocketPage {
await this.page.goto( await this.page.goto(
`#/dashboard/team/${DashboardPage.anyTeamId}/projects/${DashboardPage.draftProjectId}`, `#/dashboard/team/${DashboardPage.anyTeamId}/projects/${DashboardPage.draftProjectId}`,
); );
await expect(this.mainHeading).toHaveText("Drafts");
} }
async goToAccount() { async goToAccount() {
await this.userAccount.click(); await this.userAccount.click();
await this.userProfileOption.click(); await this.userProfileOption.click();

19
frontend/playwright/ui/specs/dashboard.spec.js
View file

@ -3,11 +3,7 @@ import DashboardPage from "../pages/DashboardPage";
test.beforeEach(async ({ page }) => { test.beforeEach(async ({ page }) => {
await DashboardPage.init(page); await DashboardPage.init(page);
await DashboardPage.mockRPC( await DashboardPage.mockRPC(page, "get-profile", "logged-in-user/get-profile-logged-in-no-onboarding.json");
page,
"get-profile",
"logged-in-user/get-profile-logged-in-no-onboarding.json",
);
}); });
test("Dashboad page has title ", async ({ page }) => { test("Dashboad page has title ", async ({ page }) => {
@ -16,7 +12,7 @@ test("Dashboad page has title ", async ({ page }) => {
await dashboardPage.goToDashboard(); await dashboardPage.goToDashboard();
await expect(dashboardPage.page).toHaveURL(/dashboard/); await expect(dashboardPage.page).toHaveURL(/dashboard/);
await expect(dashboardPage.titleLabel).toBeVisible(); await expect(dashboardPage.mainHeading).toBeVisible();
}); });
test("User can create a new project", async ({ page }) => { test("User can create a new project", async ({ page }) => {
@ -24,7 +20,7 @@ test("User can create a new project", async ({ page }) => {
await dashboardPage.setupNewProject(); await dashboardPage.setupNewProject();
await dashboardPage.goToDashboard(); await dashboardPage.goToDashboard();
await dashboardPage.addProjectBtn.click(); await dashboardPage.addProjectButton.click();
await expect(dashboardPage.projectName).toBeVisible(); await expect(dashboardPage.projectName).toBeVisible();
}); });
@ -34,16 +30,17 @@ test("User goes to draft page", async ({ page }) => {
await dashboardPage.setupDraftsEmpty(); await dashboardPage.setupDraftsEmpty();
await dashboardPage.goToDashboard(); await dashboardPage.goToDashboard();
await dashboardPage.draftLink.click(); await dashboardPage.draftsLink.click();
await expect(dashboardPage.draftTitle).toBeVisible(); await expect(dashboardPage.mainHeading).toHaveText("Drafts");
}); });
test("User loads the draft page", async ({ page }) => { test("Lists files in the drafts page", async ({ page }) => {
const dashboardPage = new DashboardPage(page); const dashboardPage = new DashboardPage(page);
await dashboardPage.setupDrafts(); await dashboardPage.setupDrafts();
await dashboardPage.goToDrafts(); await dashboardPage.goToDrafts();
await expect(dashboardPage.draftsFile).toBeVisible(); await expect(dashboardPage.page.getByRole("button", { name: /New File 1/ })).toBeVisible();
await expect(dashboardPage.page.getByRole("button", { name: /New File 2/ })).toBeVisible();
}); });

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

@ -11,7 +11,7 @@ test("User goes to an empty dashboard", async ({ page }) => {
await dashboardPage.goToDashboard(); await dashboardPage.goToDashboard();
await expect(dashboardPage.titleLabel).toBeVisible(); await expect(dashboardPage.mainHeading).toBeVisible();
await expect(dashboardPage.page).toHaveScreenshot(); await expect(dashboardPage.page).toHaveScreenshot();
}); });
@ -22,9 +22,9 @@ test("User goes to an empty draft page", async ({ page }) => {
await dashboardPage.setupDraftsEmpty(); await dashboardPage.setupDraftsEmpty();
await dashboardPage.goToDashboard(); await dashboardPage.goToDashboard();
await dashboardPage.draftLink.click(); await dashboardPage.draftsLink.click();
await expect(dashboardPage.draftTitle).toBeVisible(); await expect(dashboardPage.mainHeading).toHaveText("Drafts");
await expect(dashboardPage.page).toHaveScreenshot(); await expect(dashboardPage.page).toHaveScreenshot();
}); });
@ -34,7 +34,7 @@ test("User goes to an empty fonts page", async ({ page }) => {
await dashboardPage.goToDashboard(); await dashboardPage.goToDashboard();
await dashboardPage.fontsLink.click(); await dashboardPage.fontsLink.click();
await expect(dashboardPage.fontsTitle).toBeVisible(); await expect(dashboardPage.mainHeading).toHaveText("Fonts");
await expect(dashboardPage.page).toHaveScreenshot(); await expect(dashboardPage.page).toHaveScreenshot();
}); });
@ -45,7 +45,7 @@ test("User goes to an empty libraries page", async ({ page }) => {
await dashboardPage.goToDashboard(); await dashboardPage.goToDashboard();
await dashboardPage.libsLink.click(); await dashboardPage.libsLink.click();
await expect(dashboardPage.libsTitle).toBeVisible(); await expect(dashboardPage.mainHeading).toHaveText("Libraries");
await expect(dashboardPage.page).toHaveScreenshot(); await expect(dashboardPage.page).toHaveScreenshot();
}); });
@ -55,7 +55,7 @@ test("User goes to an empty search page", async ({ page }) => {
await dashboardPage.goToSearch(); await dashboardPage.goToSearch();
await expect(dashboardPage.searchTitle).toBeVisible(); await expect(dashboardPage.mainHeading).toHaveText("Search results");
await expect(dashboardPage.page).toHaveScreenshot(); await expect(dashboardPage.page).toHaveScreenshot();
}); });
@ -77,54 +77,53 @@ test("User goes to a full dashboard", async ({ page }) => {
await dashboardPage.goToDashboard(); await dashboardPage.goToDashboard();
await expect(dashboardPage.draftsFile).toBeVisible();
await expect(dashboardPage.page).toHaveScreenshot(); await expect(dashboardPage.page).toHaveScreenshot();
}); });
test("User goes to an full draft page", async ({ page }) => { test("User goes to a full draft page", async ({ page }) => {
const dashboardPage = new DashboardPage(page); const dashboardPage = new DashboardPage(page);
await dashboardPage.setupDashboardFull(); await dashboardPage.setupDashboardFull();
await dashboardPage.goToDashboard(); await dashboardPage.goToDashboard();
await dashboardPage.draftLink.click(); await dashboardPage.draftsLink.click();
await expect(dashboardPage.draftTitle).toBeVisible(); await expect(dashboardPage.mainHeading).toHaveText("Drafts");
await expect(dashboardPage.page).toHaveScreenshot(); await expect(dashboardPage.page).toHaveScreenshot();
}); });
test("User goes to an full library page", async ({ page }) => { test("User goes to a full library page", async ({ page }) => {
const dashboardPage = new DashboardPage(page); const dashboardPage = new DashboardPage(page);
await dashboardPage.setupDashboardFull(); await dashboardPage.setupDashboardFull();
await dashboardPage.goToDashboard(); await dashboardPage.goToDashboard();
await dashboardPage.libsLink.click(); await dashboardPage.libsLink.click();
await expect(dashboardPage.libsTitle).toBeVisible(); await expect(dashboardPage.mainHeading).toHaveText("Libraries");
await expect(dashboardPage.page).toHaveScreenshot(); await expect(dashboardPage.page).toHaveScreenshot();
}); });
test("User goes to an full fonts page", async ({ page }) => { test("User goes to a full fonts page", async ({ page }) => {
const dashboardPage = new DashboardPage(page); const dashboardPage = new DashboardPage(page);
await dashboardPage.setupDashboardFull(); await dashboardPage.setupDashboardFull();
await dashboardPage.goToDashboard(); await dashboardPage.goToDashboard();
await dashboardPage.fontsLink.click(); await dashboardPage.fontsLink.click();
await expect(dashboardPage.fontsTitle).toBeVisible(); await expect(dashboardPage.mainHeading).toHaveText("Fonts");
await expect(dashboardPage.page).toHaveScreenshot(); await expect(dashboardPage.page).toHaveScreenshot();
}); });
test("User goes to an full search page", async ({ page }) => { test("User goes to a full search page", async ({ page }) => {
const dashboardPage = new DashboardPage(page); const dashboardPage = new DashboardPage(page);
await dashboardPage.setupDashboardFull(); await dashboardPage.setupDashboardFull();
await dashboardPage.goToSearch(); await dashboardPage.goToSearch();
await expect(dashboardPage.searchInput).toBeVisible(); await expect(dashboardPage.searchInput).toBeVisible();
await dashboardPage.searchInput.fill("New"); await dashboardPage.searchInput.fill("3");
await expect(dashboardPage.searchTitle).toBeVisible(); await expect(dashboardPage.mainHeading).toHaveText("Search results");
await expect(dashboardPage.newFileName).toBeVisible(); await expect(dashboardPage.page.getByRole("button", { name: "New File 3" })).toBeVisible();
await expect(dashboardPage.page).toHaveScreenshot(); await expect(dashboardPage.page).toHaveScreenshot();
}); });
@ -146,7 +145,7 @@ test("User goes to user profile", async ({ page }) => {
await dashboardPage.goToDashboard(); await dashboardPage.goToDashboard();
await dashboardPage.goToAccount(); await dashboardPage.goToAccount();
await expect(dashboardPage.userAccountTitle).toBeVisible(); await expect(dashboardPage.mainHeading).toHaveText("Your account");
await expect(dashboardPage.page).toHaveScreenshot(); await expect(dashboardPage.page).toHaveScreenshot();
}); });
@ -180,8 +179,6 @@ test("User opens teams selector with only one team", async ({ page }) => {
const dashboardPage = new DashboardPage(page); const dashboardPage = new DashboardPage(page);
await dashboardPage.goToDashboard(); await dashboardPage.goToDashboard();
await expect(dashboardPage.titleLabel).toBeVisible();
await dashboardPage.teamDropdown.click(); await dashboardPage.teamDropdown.click();
await expect(page.getByText("Create new team")).toBeVisible(); await expect(page.getByText("Create new team")).toBeVisible();
@ -193,8 +190,6 @@ test("User opens teams selector with more than one team", async ({ page }) => {
await dashboardPage.setupDashboardFull(); await dashboardPage.setupDashboardFull();
await dashboardPage.goToDashboard(); await dashboardPage.goToDashboard();
await expect(dashboardPage.titleLabel).toBeVisible();
await dashboardPage.teamDropdown.click(); await dashboardPage.teamDropdown.click();
await expect(page.getByText("Second Team")).toBeVisible(); await expect(page.getByText("Second Team")).toBeVisible();

3
frontend/src/app/main/ui/dashboard/sidebar.cljs
View file

@ -786,7 +786,6 @@
[:li {:class (stl/css-case :current drafts? [:li {:class (stl/css-case :current drafts?
:sidebar-nav-item true)} :sidebar-nav-item true)}
[:& link {:action go-drafts [:& link {:action go-drafts
:data-testid "drafts-link-sidebar"
:class (stl/css :sidebar-link) :class (stl/css :sidebar-link)
:keyboard-action go-drafts-with-key} :keyboard-action go-drafts-with-key}
[:span {:class (stl/css :element-title)} (tr "labels.drafts")]]] [:span {:class (stl/css :element-title)} (tr "labels.drafts")]]]
@ -1052,7 +1051,7 @@
[props] [props]
(let [team (obj/get props "team") (let [team (obj/get props "team")
profile (obj/get props "profile")] profile (obj/get props "profile")]
[:nav {:class (stl/css :dashboard-sidebar)} [:nav {:class (stl/css :dashboard-sidebar) :data-testid "dashboard-sidebar"}
[:> sidebar-content props] [:> sidebar-content props]
[:& profile-section [:& profile-section
{:profile profile {:profile profile