diff --git a/frontend/.gitignore b/frontend/.gitignore index d69ed5d6f..8d2f604e1 100644 --- a/frontend/.gitignore +++ b/frontend/.gitignore @@ -10,3 +10,5 @@ node_modules/ /playwright-report/ /blob-report/ /playwright/.cache/ +visual-dashboard.spec.js-snapshots + diff --git a/frontend/playwright/data/dashboard/create-access-token.json b/frontend/playwright/data/dashboard/create-access-token.json new file mode 100644 index 000000000..395e5a1a9 --- /dev/null +++ b/frontend/playwright/data/dashboard/create-access-token.json @@ -0,0 +1,8 @@ +{ + "~:id": "~u62edaeb8-e212-81ca-8004-80a6f8a42e8e", + "~:profile-id": "~uc7ce0794-0992-8105-8004-38e630f29a9b", + "~:created-at": "~m1718348381840", + "~:updated-at": "~m1718348381840", + "~:name": "new token", + "~:token": "eyJhbGciOiJBMjU2S1ciLCJlbmMiOiJBMjU2R0NNIn0.9aFN5YdOI-b-NQPos5uqF8J8b9iMyeri3yYhV5FlHuhNbRwk0YuftA.Dygx9O5-KsAHpuqD.ryTDCqelYOk1XYflTlDGFlzG8VLuElKHSGHdJyJvWqcCUANWzl8cVvezvU2GWg1Piin21KNrcV0TEcHPpDggySRbTn01MOIjw3vTVHdGrlHaVq5VpnWb5hCfs_P9kF7Y2IWOa4da4mM.IulvBQUllnay7clORd-NSg" +} diff --git a/frontend/playwright/data/dashboard/get-access-tokens-empty.json b/frontend/playwright/data/dashboard/get-access-tokens-empty.json new file mode 100644 index 000000000..fe51488c7 --- /dev/null +++ b/frontend/playwright/data/dashboard/get-access-tokens-empty.json @@ -0,0 +1 @@ +[] diff --git a/frontend/playwright/data/dashboard/get-access-tokens.json b/frontend/playwright/data/dashboard/get-access-tokens.json new file mode 100644 index 000000000..ec296ea8a --- /dev/null +++ b/frontend/playwright/data/dashboard/get-access-tokens.json @@ -0,0 +1,8 @@ +[ + { + "~:id": "~u62edaeb8-e212-81ca-8004-80a6f8a42e8e", + "~:name": "new token", + "~:created-at": "~m1718348381840", + "~:updated-at": "~m1718348381840" + } +] diff --git a/frontend/playwright/data/dashboard/get-font-variants.json b/frontend/playwright/data/dashboard/get-font-variants.json new file mode 100644 index 000000000..6a16ec574 --- /dev/null +++ b/frontend/playwright/data/dashboard/get-font-variants.json @@ -0,0 +1,15 @@ +[ + { + "~:font-style": "normal", + "~:team-id": "~uc7ce0794-0992-8105-8004-38e630f40f6d", + "~:font-id": "~u838cda51-c50f-8032-8004-6ac92ea6eaea", + "~:font-weight": 400, + "~:ttf-file-id": "~ue3710e43-7e40-405d-a4ea-8bb85443d44b", + "~:modified-at": "~m1716880956479", + "~:otf-file-id": "~u72bd3cda-478a-4e0e-a372-4a4f7cdc1371", + "~:id": "~u28f4b65f-3667-8087-8004-6ac93050433a", + "~:woff1-file-id": "~ua4c0a056-2eb6-47cc-bf80-3115d14e048d", + "~:created-at": "~m1716880956479", + "~:font-family": "Milligram Variable Trial" + } +] diff --git a/frontend/playwright/data/dashboard/get-projects-full.json b/frontend/playwright/data/dashboard/get-projects-full.json new file mode 100644 index 000000000..491351e86 --- /dev/null +++ b/frontend/playwright/data/dashboard/get-projects-full.json @@ -0,0 +1,19 @@ +[{ + "~:id": "~ue5a24d1b-ef1e-812f-8004-52bab84be6f7", + "~:team-id": "~uc7ce0794-0992-8105-8004-38e630f40f6d", + "~:created-at": "~m1715266551088", + "~:modified-at": "~m1715266551088", + "~:is-default": false, + "~:name": "New Project 1", + "~:is-pinned": false, + "~:count": 1 +}, +{ + "~:id": "~uc7ce0794-0992-8105-8004-38e630f7920b", + "~:team-id": "~uc7ce0794-0992-8105-8004-38e630f40f6d", + "~:created-at": "~m1713533116382", + "~:modified-at": "~m1713873823633", + "~:is-default": true, + "~:name": "Drafts", + "~:count": 1 +}] diff --git a/frontend/playwright/data/dashboard/get-shared-files-empty.json b/frontend/playwright/data/dashboard/get-shared-files-empty.json new file mode 100644 index 000000000..fe51488c7 --- /dev/null +++ b/frontend/playwright/data/dashboard/get-shared-files-empty.json @@ -0,0 +1 @@ +[] diff --git a/frontend/playwright/data/dashboard/get-shared-files.json b/frontend/playwright/data/dashboard/get-shared-files.json new file mode 100644 index 000000000..3fffa07f4 --- /dev/null +++ b/frontend/playwright/data/dashboard/get-shared-files.json @@ -0,0 +1,219 @@ +{ + "~#set": [ + { + "~:name": "New File 3", + "~:revn": 1, + "~:id": "~u28f4b65f-3667-8087-8004-69eca173cc07", + "~:is-shared": true, + "~:project-id": "~ue5a24d1b-ef1e-812f-8004-52bab84be6f7", + "~:created-at": "~m1713518796912", + "~:modified-at": "~m1713519762931", + "~:library-summary": { + "~:components": { + "~:count": 1, + "~:sample": [ + { + "~:id": "~ua30724ae-f8d8-8003-8004-69ecacfc8a4c", + "~:name": "Rectangle", + "~:path": "", + "~:modified-at": "~m1716823150739", + "~:main-instance-id": "~ua30724ae-f8d8-8003-8004-69ecacfa2045", + "~:main-instance-page": "~u28f4b65f-3667-8087-8004-69eca173cc08", + "~:objects": { + "~ua30724ae-f8d8-8003-8004-69ecacfa2045": { + "~#shape": { + "~:y": 168, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:hide-in-viewer": true, + "~:name": "Rectangle", + "~:width": 553, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 481, + "~:y": 168 + } + }, + { + "~#point": { + "~:x": 1034, + "~:y": 168 + } + }, + { + "~#point": { + "~:x": 1034, + "~:y": 550 + } + }, + { + "~#point": { + "~:x": 481, + "~:y": 550 + } + } + ], + "~:component-root": true, + "~:show-content": true, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:id": "~ua30724ae-f8d8-8003-8004-69ecacfa2045", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:component-id": "~ua30724ae-f8d8-8003-8004-69ecacfc8a4c", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 481, + "~:main-instance": true, + "~:proportion": 1, + "~:selrect": { + "~#rect": { + "~:x": 481, + "~:y": 168, + "~:width": 553, + "~:height": 382, + "~:x1": 481, + "~:y1": 168, + "~:x2": 1034, + "~:y2": 550 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 382, + "~:component-file": "~u28f4b65f-3667-8087-8004-69eca173cc07", + "~:flip-y": null, + "~:shapes": [ + "~ua30724ae-f8d8-8003-8004-69eca9b27c8c" + ] + } + }, + "~ua30724ae-f8d8-8003-8004-69eca9b27c8c": { + "~#shape": { + "~:y": 168, + "~:rx": 0, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Rectangle", + "~:width": 553, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 481, + "~:y": 168 + } + }, + { + "~#point": { + "~:x": 1034, + "~:y": 168 + } + }, + { + "~#point": { + "~:x": 1034, + "~:y": 550 + } + }, + { + "~#point": { + "~:x": 481, + "~:y": 550 + } + } + ], + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:constraints-v": "~:scale", + "~:constraints-h": "~:scale", + "~:id": "~ua30724ae-f8d8-8003-8004-69eca9b27c8c", + "~:parent-id": "~ua30724ae-f8d8-8003-8004-69ecacfa2045", + "~:frame-id": "~ua30724ae-f8d8-8003-8004-69ecacfa2045", + "~:strokes": [], + "~:x": 481, + "~:proportion": 1, + "~:selrect": { + "~#rect": { + "~:x": 481, + "~:y": 168, + "~:width": 553, + "~:height": 382, + "~:x1": 481, + "~:y1": 168, + "~:x2": 1034, + "~:y2": 550 + } + }, + "~:fills": [ + { + "~:fill-color": "#B1B2B5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:ry": 0, + "~:height": 382, + "~:flip-y": null + } + } + } + } + ] + }, + "~:media": { + "~:count": 0, + "~:sample": [] + }, + "~:colors": { + "~:count": 0, + "~:sample": [] + }, + "~:typographies": { + "~:count": 0, + "~:sample": [] + } + } + } + ] +} diff --git a/frontend/playwright/data/dashboard/get-team-invitations-empty.json b/frontend/playwright/data/dashboard/get-team-invitations-empty.json new file mode 100644 index 000000000..fe51488c7 --- /dev/null +++ b/frontend/playwright/data/dashboard/get-team-invitations-empty.json @@ -0,0 +1 @@ +[] diff --git a/frontend/playwright/data/dashboard/get-team-invitations.json b/frontend/playwright/data/dashboard/get-team-invitations.json new file mode 100644 index 000000000..f7ac77543 --- /dev/null +++ b/frontend/playwright/data/dashboard/get-team-invitations.json @@ -0,0 +1,6 @@ +[ + { "~:email": "test1@mail.com", "~:role": "~:editor", "~:expired": true }, + { "~:email": "test2@mail.com", "~:role": "~:editor", "~:expired": false }, + { "~:email": "test3@mail.com", "~:role": "~:admin", "~:expired": true }, + { "~:email": "test4@mail.com", "~:role": "~:admin", "~:expired": false } +] diff --git a/frontend/playwright/data/dashboard/get-team-members.json b/frontend/playwright/data/dashboard/get-team-members.json new file mode 100644 index 000000000..a869d5e34 --- /dev/null +++ b/frontend/playwright/data/dashboard/get-team-members.json @@ -0,0 +1,16 @@ +[ + { + "~:is-admin": true, + "~:email": "foo@example.com", + "~:team-id": "~udd33ff88-f4e5-8033-8003-8096cc07bdf3", + "~:name": "Princesa Leia", + "~:fullname": "Princesa Leia", + "~:is-owner": false, + "~:modified-at": "~m1713533116365", + "~:can-edit": true, + "~:is-active": true, + "~:id": "~uc7ce0794-0992-8105-8004-38e630f29a9b", + "~:profile-id": "~uf56647eb-19a7-8115-8003-b6bc939ecd1b", + "~:created-at": "~m1713533116365" + } +] diff --git a/frontend/playwright/data/dashboard/get-team-recent-files.json b/frontend/playwright/data/dashboard/get-team-recent-files.json new file mode 100644 index 000000000..920bb2df0 --- /dev/null +++ b/frontend/playwright/data/dashboard/get-team-recent-files.json @@ -0,0 +1,29 @@ +[ + { + "~:id": "~u8b479b80-e02d-8074-8004-4088dc6bfd11", + "~:project-id": "~uc7ce0794-0992-8105-8004-38e630f7920b", + "~:created-at": "~m1714045521389", + "~:modified-at": "~m1714045654874", + "~:name": "New File 2", + "~:revn": 1, + "~:is-shared": false + }, + { + "~:id": "~u95d6fdd8-48d8-8148-8004-38af910d2dbe", + "~:project-id": "~uc7ce0794-0992-8105-8004-38e630f7920b", + "~:created-at": "~m1713518796912", + "~:modified-at": "~m1713519762931", + "~:name": "New File 1", + "~:revn": 1, + "~:is-shared": false + }, + { + "~:id": "~u28f4b65f-3667-8087-8004-69eca173cc07", + "~:project-id": "~ue5a24d1b-ef1e-812f-8004-52bab84be6f7", + "~:created-at": "~m1713518796912", + "~:modified-at": "~m1713519762931", + "~:name": "New File 3", + "~:revn": 1, + "~:is-shared": true + } +] diff --git a/frontend/playwright/data/dashboard/get-team-stats.json b/frontend/playwright/data/dashboard/get-team-stats.json new file mode 100644 index 000000000..c984f1021 --- /dev/null +++ b/frontend/playwright/data/dashboard/get-team-stats.json @@ -0,0 +1 @@ +{"~:projects":1,"~:files":3} diff --git a/frontend/playwright/data/dashboard/get-webhooks-empty.json b/frontend/playwright/data/dashboard/get-webhooks-empty.json new file mode 100644 index 000000000..fe51488c7 --- /dev/null +++ b/frontend/playwright/data/dashboard/get-webhooks-empty.json @@ -0,0 +1 @@ +[] diff --git a/frontend/playwright/data/dashboard/get-webhooks.json b/frontend/playwright/data/dashboard/get-webhooks.json new file mode 100644 index 000000000..3849e3608 --- /dev/null +++ b/frontend/playwright/data/dashboard/get-webhooks.json @@ -0,0 +1,20 @@ +[ + { + "~:id": "~u29ce7ec9-e75d-81b4-8004-08100373558a", + "~:uri": { + "~#uri": "https://www.abc.es" + }, + "~:mtype": "application/json", + "~:is-active": false, + "~:error-count": 0 + }, + { + "~:id": "~u43d6b3b1-40f7-807b-8003-f9846292b4c7", + "~:uri": { + "~#uri": "https://www.google.com" + }, + "~:mtype": "application/json", + "~:is-active": true, + "~:error-count": 0 + } +] diff --git a/frontend/playwright/data/dashboard/search-files-empty.json b/frontend/playwright/data/dashboard/search-files-empty.json new file mode 100644 index 000000000..e69de29bb diff --git a/frontend/playwright/data/dashboard/search-files.json b/frontend/playwright/data/dashboard/search-files.json new file mode 100644 index 000000000..920bb2df0 --- /dev/null +++ b/frontend/playwright/data/dashboard/search-files.json @@ -0,0 +1,29 @@ +[ + { + "~:id": "~u8b479b80-e02d-8074-8004-4088dc6bfd11", + "~:project-id": "~uc7ce0794-0992-8105-8004-38e630f7920b", + "~:created-at": "~m1714045521389", + "~:modified-at": "~m1714045654874", + "~:name": "New File 2", + "~:revn": 1, + "~:is-shared": false + }, + { + "~:id": "~u95d6fdd8-48d8-8148-8004-38af910d2dbe", + "~:project-id": "~uc7ce0794-0992-8105-8004-38e630f7920b", + "~:created-at": "~m1713518796912", + "~:modified-at": "~m1713519762931", + "~:name": "New File 1", + "~:revn": 1, + "~:is-shared": false + }, + { + "~:id": "~u28f4b65f-3667-8087-8004-69eca173cc07", + "~:project-id": "~ue5a24d1b-ef1e-812f-8004-52bab84be6f7", + "~:created-at": "~m1713518796912", + "~:modified-at": "~m1713519762931", + "~:name": "New File 3", + "~:revn": 1, + "~:is-shared": true + } +] diff --git a/frontend/playwright/data/logged-in-user/get-teams-complete.json b/frontend/playwright/data/logged-in-user/get-teams-complete.json new file mode 100644 index 000000000..910e1543f --- /dev/null +++ b/frontend/playwright/data/logged-in-user/get-teams-complete.json @@ -0,0 +1,48 @@ +[ + { + "~:features": { + "~#set": [ + "layout/grid", + "styles/v2", + "fdata/pointer-map", + "fdata/objects-map", + "components/v2", + "fdata/shape-data-type" + ] + }, + "~:permissions": { + "~:type": "~:membership", + "~:is-owner": true, + "~:is-admin": true, + "~:can-edit": true + }, + "~:name": "Default", + "~:modified-at": "~m1713533116375", + "~:id": "~uc7ce0794-0992-8105-8004-38e630f40f6d", + "~:created-at": "~m1713533116375", + "~:is-default": true +}, + { + "~:features": { + "~#set": [ + "layout/grid", + "styles/v2", + "fdata/pointer-map", + "fdata/objects-map", + "components/v2", + "fdata/shape-data-type" + ] + }, + "~:permissions": { + "~:type": "~:membership", + "~:is-owner": true, + "~:is-admin": true, + "~:can-edit": true + }, + "~:name": "Second team", + "~:modified-at": "~m1701164272671", + "~:id": "~udd33ff88-f4e5-8033-8003-8096cc07bdf3", + "~:created-at": "~m1701164272671", + "~:is-default": false + } +] diff --git a/frontend/playwright/ui/pages/DashboardPage.js b/frontend/playwright/ui/pages/DashboardPage.js index e83c62dd9..fbc373d3f 100644 --- a/frontend/playwright/ui/pages/DashboardPage.js +++ b/frontend/playwright/ui/pages/DashboardPage.js @@ -50,6 +50,8 @@ 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) { @@ -60,12 +62,34 @@ export class DashboardPage extends BaseWebSocketPage { this.draftTitle = page.getByRole("heading", { name: "Drafts" }); this.draftLink = page.getByTestId("drafts-link-sidebar"); this.draftsFile = page.getByText(/New File 1/); + this.fontsLink = page.getByTestId("fonts-link-sidebar"); + 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.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"}); } async setupDraftsEmpty() { await this.mockRPC("get-project-files?project-id=*", "dashboard/get-project-files-empty.json"); } + async setupSearchEmpty() { + await this.mockRPC("search-files", "dashboard/search-files-empty.json", { + method: "POST", + }); + } + + async setupLibrariesEmpty() { + await this.mockRPC("get-team-shared-files?team-id=*", "dashboard/get-shared-files-empty.json"); + } + async setupDrafts() { await this.mockRPC("get-project-files?project-id=*", "dashboard/get-project-files.json"); } @@ -74,15 +98,95 @@ export class DashboardPage extends BaseWebSocketPage { await this.mockRPC("create-project", "dashboard/create-project.json", { method: "POST" }); await this.mockRPC("get-projects?team-id=*", "dashboard/get-projects-new.json"); } - async goToWorkspace() { + + async setupDashboardFull() { + await this.mockRPC("get-projects?team-id=*", "dashboard/get-projects-full.json"); + await this.mockRPC("get-project-files?project-id=*", "dashboard/get-project-files.json"); + await this.mockRPC("get-team-shared-files?team-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-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" ); + await this.mockRPC("get-teams", "logged-in-user/get-teams-complete.json"); + } + + async setupAccessTokensEmpty() { + await this.mockRPC("get-access-tokens", "dashboard/get-access-tokens-empty.json"); + } + + async createAccessToken() { + await this.mockRPC("create-access-token", "dashboard/create-access-token.json", { method: "POST" }); + } + + async setupAccessTokens() { + await this.mockRPC("get-access-tokens", "dashboard/get-access-tokens.json"); + } + + async setupTeamInvitationsEmpty() { + await this.mockRPC("get-team-invitations?team-id=*", "dashboard/get-team-invitations-empty.json"); + } + + async setupTeamInvitations() { + await this.mockRPC("get-team-invitations?team-id=*", "dashboard/get-team-invitations.json"); + } + + async setupTeamWebhooksEmpty() { + await this.mockRPC("get-webhooks?team-id=*", "dashboard/get-webhooks-empty.json"); + } + + async setupTeamWebhooks() { + await this.mockRPC("get-webhooks?team-id=*", "dashboard/get-webhooks.json"); + } + + async setupTeamSettings() { + await this.mockRPC("get-team-stats?team-id=*", "dashboard/get-team-stats.json"); + } + + async goToDashboard() { await this.page.goto(`#/dashboard/team/${DashboardPage.anyTeamId}/projects`); } + async goToSecondTeamDashboard() { + await this.page.goto(`#/dashboard/team/${DashboardPage.secondTeamId}/projects`); + } + + async goToSecondTeamMembersSection() { + await this.page.goto(`#/dashboard/team/${DashboardPage.secondTeamId}/members`); + } + + async goToSecondTeamInvitationsSection() { + await this.page.goto(`#/dashboard/team/${DashboardPage.secondTeamId}/invitations`); + } + + async goToSecondTeamWebhooksSection() { + await this.page.goto(`#/dashboard/team/${DashboardPage.secondTeamId}/webhooks`); + } + + async goToSecondTeamWebhooksSection() { + await this.page.goto(`#/dashboard/team/${DashboardPage.secondTeamId}/webhooks`); + } + + async goToSecondTeamSettingsSection() { + await this.page.goto(`#/dashboard/team/${DashboardPage.secondTeamId}/settings`); + } + + async goToSearch() { + await this.page.goto(`#/dashboard/team/${DashboardPage.anyTeamId}/search`); + } + async goToDrafts() { await this.page.goto( `#/dashboard/team/${DashboardPage.anyTeamId}/projects/${DashboardPage.draftProjectId}`, ); } + + async goToAccount() { + + await this.userAccount.click(); + + await this.userProfileOption.click(); + } } export default DashboardPage; diff --git a/frontend/playwright/ui/specs/dashboard.spec.js b/frontend/playwright/ui/specs/dashboard.spec.js index 23e71efad..4cb381b4a 100644 --- a/frontend/playwright/ui/specs/dashboard.spec.js +++ b/frontend/playwright/ui/specs/dashboard.spec.js @@ -13,7 +13,7 @@ test.beforeEach(async ({ page }) => { test("Dashboad page has title ", async ({ page }) => { const dashboardPage = new DashboardPage(page); - await dashboardPage.goToWorkspace(); + await dashboardPage.goToDashboard(); await expect(dashboardPage.page).toHaveURL(/dashboard/); await expect(dashboardPage.titleLabel).toBeVisible(); @@ -23,7 +23,7 @@ test("User can create a new project", async ({ page }) => { const dashboardPage = new DashboardPage(page); await dashboardPage.setupNewProject(); - await dashboardPage.goToWorkspace(); + await dashboardPage.goToDashboard(); await dashboardPage.addProjectBtn.click(); await expect(dashboardPage.projectName).toBeVisible(); @@ -33,7 +33,7 @@ test("User goes to draft page", async ({ page }) => { const dashboardPage = new DashboardPage(page); await dashboardPage.setupDraftsEmpty(); - await dashboardPage.goToWorkspace(); + await dashboardPage.goToDashboard(); await dashboardPage.draftLink.click(); await expect(dashboardPage.draftTitle).toBeVisible(); diff --git a/frontend/playwright/ui/specs/onboarding.spec.js b/frontend/playwright/ui/specs/onboarding.spec.js index 39efa967c..68e00fc50 100644 --- a/frontend/playwright/ui/specs/onboarding.spec.js +++ b/frontend/playwright/ui/specs/onboarding.spec.js @@ -12,7 +12,7 @@ test("User can complete the onboarding", async ({ page }) => { const dashboardPage = new DashboardPage(page); const onboardingPage = new OnboardingPage(page); - await dashboardPage.goToWorkspace(); + await dashboardPage.goToDashboard(); await expect(page.getByRole("heading", { name: "Help us get to know you" })).toBeVisible(); await onboardingPage.fillOnboardingInputsStep1(); diff --git a/frontend/playwright/ui/visual-specs/visual-dashboard.spec.js b/frontend/playwright/ui/visual-specs/visual-dashboard.spec.js new file mode 100644 index 000000000..faefbeb1b --- /dev/null +++ b/frontend/playwright/ui/visual-specs/visual-dashboard.spec.js @@ -0,0 +1,423 @@ +import { test, expect } from "@playwright/test"; +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", + ); +}); + +test("User goes to an empty dashboard", async ({ page }) => { + const dashboardPage = new DashboardPage(page); + + await dashboardPage.goToDashboard(); + + await expect(dashboardPage.titleLabel).toBeVisible(); + await expect(dashboardPage.page).toHaveScreenshot(); +}); + +// Empty dashboard pages + +test("User goes to an empty draft page", async ({ page }) => { + const dashboardPage = new DashboardPage(page); + await dashboardPage.setupDraftsEmpty(); + + await dashboardPage.goToDashboard(); + await dashboardPage.draftLink.click(); + + await expect(dashboardPage.draftTitle).toBeVisible(); + await expect(dashboardPage.page).toHaveScreenshot(); +}); + +test("User goes to an empty fonts page", async ({ page }) => { + const dashboardPage = new DashboardPage(page); + + await dashboardPage.goToDashboard(); + await dashboardPage.fontsLink.click(); + + await expect(dashboardPage.fontsTitle).toBeVisible(); + await expect(dashboardPage.page).toHaveScreenshot(); +}); + +test("User goes to an empty libraries page", async ({ page }) => { + const dashboardPage = new DashboardPage(page); + await dashboardPage.setupLibrariesEmpty(); + + await dashboardPage.goToDashboard(); + await dashboardPage.libsLink.click(); + + await expect(dashboardPage.libsTitle).toBeVisible(); + await expect(dashboardPage.page).toHaveScreenshot(); +}); + +test("User goes to an empty search page", async ({ page }) => { + const dashboardPage = new DashboardPage(page); + await dashboardPage.setupSearchEmpty(); + + await dashboardPage.goToSearch(); + + await expect(dashboardPage.searchTitle).toBeVisible(); + await expect(dashboardPage.page).toHaveScreenshot(); +}); + +test("User goes to the dashboard with a new project", async ({ page }) => { + const dashboardPage = new DashboardPage(page); + await dashboardPage.setupNewProject(); + + await dashboardPage.goToDashboard(); + + await expect(dashboardPage.projectName).toBeVisible(); + await expect(dashboardPage.page).toHaveScreenshot(); +}); + +// Dashboard pages with content + +test("User goes to a full dashboard", async ({ page }) => { + const dashboardPage = new DashboardPage(page); + await dashboardPage.setupDashboardFull(); + + await dashboardPage.goToDashboard(); + + await expect(dashboardPage.draftsFile).toBeVisible(); + await expect(dashboardPage.page).toHaveScreenshot(); +}); + +test("User goes to an full draft page", async ({ page }) => { + const dashboardPage = new DashboardPage(page); + await dashboardPage.setupDashboardFull(); + + await dashboardPage.goToDashboard(); + await dashboardPage.draftLink.click(); + + await expect(dashboardPage.draftTitle).toBeVisible(); + await expect(dashboardPage.page).toHaveScreenshot(); +}); + +test("User goes to an full library page", async ({ page }) => { + const dashboardPage = new DashboardPage(page); + await dashboardPage.setupDashboardFull(); + + await dashboardPage.goToDashboard(); + await dashboardPage.libsLink.click(); + + await expect(dashboardPage.libsTitle).toBeVisible(); + await expect(dashboardPage.page).toHaveScreenshot(); +}); + +test("User goes to an full fonts page", async ({ page }) => { + const dashboardPage = new DashboardPage(page); + await dashboardPage.setupDashboardFull(); + + await dashboardPage.goToDashboard(); + await dashboardPage.fontsLink.click(); + + await expect(dashboardPage.fontsTitle).toBeVisible(); + await expect(dashboardPage.page).toHaveScreenshot(); +}); + +test("User goes to an full search page", async ({ page }) => { + const dashboardPage = new DashboardPage(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(); +}); + +// Account management + +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(); +}); + +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(); +}); + +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(); +}); + +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(); +}); + +// Teams management + +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(); +}); + +test("User opens teams selector with more than one team", async ({ page }) => { + const dashboardPage = new DashboardPage(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(); +}); + +test("User opens team management dropdown", async ({ page }) => { + const dashboardPage = new DashboardPage(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(); +}); + +test("User goes to team management section", async ({ page }) => { + const dashboardPage = new DashboardPage(page); + await dashboardPage.setupDashboardFull(); + + await dashboardPage.goToSecondTeamMembersSection(); + + await expect(page.getByText("role")).toBeVisible(); + + await expect(dashboardPage.page).toHaveScreenshot(); +}); + +test("User goes to an empty invitations section", async ({ page }) => { + const dashboardPage = new DashboardPage(page); + await dashboardPage.setupDashboardFull(); + await dashboardPage.setupTeamInvitationsEmpty(); + + await dashboardPage.goToSecondTeamInvitationsSection(); + + await expect(page.getByText("No pending invitations")).toBeVisible(); + + await expect(dashboardPage.page).toHaveScreenshot(); +}); + +test("User goes to a complete invitations section", async ({ page }) => { + const dashboardPage = new DashboardPage(page); + await dashboardPage.setupDashboardFull(); + await dashboardPage.setupTeamInvitations(); + + await dashboardPage.goToSecondTeamInvitationsSection(); + + await expect(page.getByText("test1@mail.com")).toBeVisible(); + + 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(); +}); + +test("User goes to an empty webhook section", async ({ page }) => { + const dashboardPage = new DashboardPage(page); + await dashboardPage.setupDashboardFull(); + await dashboardPage.setupTeamWebhooksEmpty(); + + await dashboardPage.goToSecondTeamWebhooksSection(); + + await expect(page.getByText("No webhooks created so far.")).toBeVisible(); + + await expect(dashboardPage.page).toHaveScreenshot(); +}); + +test("User goes to a complete webhook section", async ({ page }) => { + const dashboardPage = new DashboardPage(page); + await dashboardPage.setupDashboardFull(); + await dashboardPage.setupTeamWebhooks(); + + await dashboardPage.goToSecondTeamWebhooksSection(); + + await expect(page.getByText("https://www.google.com")).toBeVisible(); + + await expect(dashboardPage.page).toHaveScreenshot(); +}); + +test("User goes to the team settings section", async ({ page }) => { + const dashboardPage = new DashboardPage(page); + await dashboardPage.setupDashboardFull(); + await dashboardPage.setupTeamSettings(); + + await dashboardPage.goToSecondTeamSettingsSection(); + + await expect(page.getByText("TEAM INFO")).toBeVisible(); + + await expect(dashboardPage.page).toHaveScreenshot(); +}); diff --git a/frontend/src/app/main/ui/dashboard/sidebar.cljs b/frontend/src/app/main/ui/dashboard/sidebar.cljs index 10cfd2f5c..0862eb17e 100644 --- a/frontend/src/app/main/ui/dashboard/sidebar.cljs +++ b/frontend/src/app/main/ui/dashboard/sidebar.cljs @@ -256,11 +256,13 @@ (if (or @focused? (seq search-term)) [:button {:class (stl/css :search-btn :clear-search-btn) :tab-index "0" + :aria-label "dashboard-clear-search" :on-click on-clear-click :on-key-down handle-clear-search} clear-search-icon] [:button {:class (stl/css :search-btn) + :aria-label "dashboard-search" :on-click on-clear-click} search-icon])])) @@ -504,11 +506,13 @@ :on-key-down handle-members :className (stl/css :team-options-item) :id "teams-options-members" + :data-testid "team-members" :data-test "team-members"} (tr "labels.members")] [:> dropdown-menu-item* {:on-click go-invitations :on-key-down handle-invitations :className (stl/css :team-options-item) + :data-testid "team-invitations" :id "teams-options-invitations" :data-test "team-invitations"} (tr "labels.invitations")] @@ -524,6 +528,7 @@ :on-key-down handle-settings :className (stl/css :team-options-item) :id "teams-options-settings" + :data-testid "team-settings" :data-test "team-settings"} (tr "labels.settings")] @@ -533,6 +538,7 @@ :on-key-down handle-rename :id "teams-options-rename" :className (stl/css :team-options-item) + :data-testid "rename-team" :data-test "rename-team"} (tr "labels.rename")]) @@ -550,6 +556,7 @@ :on-key-down handle-leave-as-owner-clicked :id "teams-options-leave-team" :className (stl/css :team-options-item) + :data-testid "leave-team" :data-test "leave-team"} (tr "dashboard.leave-team")] @@ -654,6 +661,7 @@ (when-not (:is-default team) [:button {:class (stl/css :switch-options) :on-click handle-show-opts-click + :aria-label "team-management" :tab-index "0" :on-key-down handle-show-opts-keydown} menu-icon])] @@ -792,6 +800,7 @@ [:li {:class (stl/css-case :current libs? :sidebar-nav-item true)} [:& link {:action go-libs + :data-testid "libs-link-sidebar" :class (stl/css :sidebar-link) :keyboard-action go-libs-with-key} [:span {:class (stl/css :element-title)} (tr "labels.shared-libraries")]]]]] @@ -803,6 +812,7 @@ :current fonts?)} [:& link {:action go-fonts :class (stl/css :sidebar-link) + :data-testid "fonts-link-sidebar" :keyboard-action go-fonts-with-key :data-test "fonts"} [:span {:class (stl/css :element-title)} (tr "labels.fonts")]]]]] @@ -946,11 +956,11 @@ :on-hide-comments handle-hide-comments}]) [:div {:class (stl/css :profile-section)} - [:div {:class (stl/css :profile) - :tab-index "0" - :on-click handle-click - :on-key-down handle-key-down - :data-test "profile-btn"} + [:button {:class (stl/css :profile) + :tab-index "0" + :on-click handle-click + :on-key-down handle-key-down + :data-test "profile-btn"} [:img {:src photo :class (stl/css :profile-img) :alt (:fullname profile)}] diff --git a/frontend/src/app/main/ui/dashboard/sidebar.scss b/frontend/src/app/main/ui/dashboard/sidebar.scss index f939c8d44..22a0a3c9c 100644 --- a/frontend/src/app/main/ui/dashboard/sidebar.scss +++ b/frontend/src/app/main/ui/dashboard/sidebar.scss @@ -331,10 +331,12 @@ } .profile { + @include buttonStyle; display: grid; grid-template-columns: auto 1fr; gap: $s-8; cursor: pointer; + text-align: left; } .profile-fullname { diff --git a/frontend/src/app/main/ui/dashboard/team.cljs b/frontend/src/app/main/ui/dashboard/team.cljs index 76652e98a..380a07da2 100644 --- a/frontend/src/app/main/ui/dashboard/team.cljs +++ b/frontend/src/app/main/ui/dashboard/team.cljs @@ -105,7 +105,8 @@ [:a {:class (stl/css :btn-secondary :btn-small) :on-click on-invite-member - :data-test "invite-member"} + :data-test "invite-member" + :data-testid "invite-member"} (tr "dashboard.invite-profile")] [:div {:class (stl/css :blank-space)}])]])) diff --git a/frontend/src/app/main/ui/settings/sidebar.cljs b/frontend/src/app/main/ui/settings/sidebar.cljs index c878c7b4b..6b6bed60d 100644 --- a/frontend/src/app/main/ui/settings/sidebar.cljs +++ b/frontend/src/app/main/ui/settings/sidebar.cljs @@ -89,6 +89,7 @@ [:li {:class (stl/css-case :current options? :settings-item true) :on-click go-settings-options + :data-testid "settings-profile" :data-test "settings-profile"} [:span {:class (stl/css :element-title)} (tr "labels.settings")]]