diff --git a/frontend/playwright/ui/pages/DashboardPage.js b/frontend/playwright/ui/pages/DashboardPage.js index 0cda75b23..995d8e15a 100644 --- a/frontend/playwright/ui/pages/DashboardPage.js +++ b/frontend/playwright/ui/pages/DashboardPage.js @@ -1,3 +1,4 @@ +import { expect } from "@playwright/test"; import { BaseWebSocketPage } from "./BaseWebSocketPage"; export class DashboardPage extends BaseWebSocketPage { @@ -49,31 +50,38 @@ export class DashboardPage extends BaseWebSocketPage { } static anyTeamId = "c7ce0794-0992-8105-8004-38e630f40f6d"; - static secondTeamId = "dd33ff88-f4e5-8033-8003-8096cc07bdf3"; - static draftProjectId = "c7ce0794-0992-8105-8004-38e630f7920b"; constructor(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.projectsHeading = page.getByRole("heading", { name: "Projects" }); + this.addProjectButton = page.getByRole("button", { name: "+ NEW PROJECT" }); this.projectName = page.getByText("Project 1"); - this.draftTitle = page.getByRole("heading", { name: "Drafts" }); - this.draftLink = page.getByTestId("drafts-link-sidebar"); + + this.draftsTitle = page.getByRole("heading", { name: "Drafts" }); + this.draftsLink = this.sidebar.getByText("Drafts"); this.draftsFile = page.getByText(/New File 1/); - this.fontsLink = page.getByTestId("fonts-link-sidebar"); + + this.fontsLink = this.sidebar.getByText("Fonts"); this.fontsTitle = page.getByRole("heading", { name: "Fonts", level: 1 }); - this.libsLink = page.getByTestId("libs-link-sidebar"); + + this.libsLink = this.sidebar.getByText("Libraries"); this.libsTitle = page.getByRole("heading", { name: "Libraries", level: 1 }); + this.searchButton = page.getByRole("button", { name: "dashboard-search" }); this.searchTitle = page.getByRole("heading", { name: "Search results" }); this.searchInput = page.getByPlaceholder("Search…"); this.newFileName = page.getByText("New File 3"); - this.teamDropdown = page.getByRole("button", { name: "Your Penpot" }); - this.userAccount = page.getByRole("button", { name: "Princesa Leia Princesa Leia" }); - this.userProfileOption = page.getByText("Your account"); - this.userAccountTitle = page.getByRole("heading", { name: "Your account" }); + + this.teamDropdown = this.sidebar.getByRole("button", { name: "Your Penpot" }); + this.userAccount = this.sidebar.getByRole("button", { name: /Princesa Leia/ }); + this.userProfileOption = this.sidebarMenu.getByText("Your account"); + this.userAccountHeading = page.getByRole("heading", { name: "Your account" }); } async setupDraftsEmpty() { @@ -145,6 +153,7 @@ export class DashboardPage extends BaseWebSocketPage { async goToDashboard() { await this.page.goto(`#/dashboard/team/${DashboardPage.anyTeamId}/projects`); + await expect(this.projectsHeading).toBeVisible(); } async goToSecondTeamDashboard() { diff --git a/frontend/playwright/ui/specs/dashboard.spec.js b/frontend/playwright/ui/specs/dashboard.spec.js index 4cb381b4a..5dc110d35 100644 --- a/frontend/playwright/ui/specs/dashboard.spec.js +++ b/frontend/playwright/ui/specs/dashboard.spec.js @@ -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("Dashboad page has title ", async ({ page }) => { @@ -16,7 +12,7 @@ test("Dashboad page has title ", async ({ page }) => { await dashboardPage.goToDashboard(); await expect(dashboardPage.page).toHaveURL(/dashboard/); - await expect(dashboardPage.titleLabel).toBeVisible(); + await expect(dashboardPage.projectsHeading).toBeVisible(); }); 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.goToDashboard(); - await dashboardPage.addProjectBtn.click(); + await dashboardPage.addProjectButton.click(); await expect(dashboardPage.projectName).toBeVisible(); }); @@ -34,9 +30,9 @@ test("User goes to draft page", async ({ page }) => { await dashboardPage.setupDraftsEmpty(); await dashboardPage.goToDashboard(); - await dashboardPage.draftLink.click(); + await dashboardPage.draftsLink.click(); - await expect(dashboardPage.draftTitle).toBeVisible(); + await expect(dashboardPage.draftsTitle).toBeVisible(); }); test("User loads the draft page", async ({ page }) => { diff --git a/frontend/playwright/ui/visual-specs/visual-dashboard.spec.js b/frontend/playwright/ui/visual-specs/visual-dashboard.spec.js index f7eeeb01a..b2ddc888d 100644 --- a/frontend/playwright/ui/visual-specs/visual-dashboard.spec.js +++ b/frontend/playwright/ui/visual-specs/visual-dashboard.spec.js @@ -11,7 +11,7 @@ test("User goes to an empty dashboard", async ({ page }) => { await dashboardPage.goToDashboard(); - await expect(dashboardPage.titleLabel).toBeVisible(); + await expect(dashboardPage.projectsHeading).toBeVisible(); await expect(dashboardPage.page).toHaveScreenshot(); }); @@ -22,9 +22,9 @@ test("User goes to an empty draft page", async ({ page }) => { await dashboardPage.setupDraftsEmpty(); await dashboardPage.goToDashboard(); - await dashboardPage.draftLink.click(); + await dashboardPage.draftsLink.click(); - await expect(dashboardPage.draftTitle).toBeVisible(); + await expect(dashboardPage.draftsTitle).toBeVisible(); await expect(dashboardPage.page).toHaveScreenshot(); }); @@ -86,9 +86,9 @@ test("User goes to an full draft page", async ({ page }) => { await dashboardPage.setupDashboardFull(); await dashboardPage.goToDashboard(); - await dashboardPage.draftLink.click(); + await dashboardPage.draftsLink.click(); - await expect(dashboardPage.draftTitle).toBeVisible(); + await expect(dashboardPage.draftsTitle).toBeVisible(); await expect(dashboardPage.page).toHaveScreenshot(); }); @@ -146,7 +146,7 @@ test("User goes to user profile", async ({ page }) => { await dashboardPage.goToDashboard(); await dashboardPage.goToAccount(); - await expect(dashboardPage.userAccountTitle).toBeVisible(); + await expect(dashboardPage.userAccountHeading).toBeVisible(); await expect(dashboardPage.page).toHaveScreenshot(); }); @@ -180,7 +180,7 @@ 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 expect(dashboardPage.projectsHeading).toBeVisible(); await dashboardPage.teamDropdown.click(); @@ -193,7 +193,7 @@ test("User opens teams selector with more than one team", async ({ page }) => { await dashboardPage.setupDashboardFull(); await dashboardPage.goToDashboard(); - await expect(dashboardPage.titleLabel).toBeVisible(); + await expect(dashboardPage.projectsHeading).toBeVisible(); await dashboardPage.teamDropdown.click(); diff --git a/frontend/src/app/main/ui/dashboard/sidebar.cljs b/frontend/src/app/main/ui/dashboard/sidebar.cljs index 83a915d75..245145f44 100644 --- a/frontend/src/app/main/ui/dashboard/sidebar.cljs +++ b/frontend/src/app/main/ui/dashboard/sidebar.cljs @@ -786,7 +786,6 @@ [:li {:class (stl/css-case :current drafts? :sidebar-nav-item true)} [:& link {:action go-drafts - :data-testid "drafts-link-sidebar" :class (stl/css :sidebar-link) :keyboard-action go-drafts-with-key} [:span {:class (stl/css :element-title)} (tr "labels.drafts")]]] @@ -1052,7 +1051,7 @@ [props] (let [team (obj/get props "team") profile (obj/get props "profile")] - [:nav {:class (stl/css :dashboard-sidebar)} + [:nav {:class (stl/css :dashboard-sidebar) :data-testid "dashboard-sidebar"} [:> sidebar-content props] [:& profile-section {:profile profile