🐛 Update visual regression tests (#8730)

.gitignore

@@ -50,6 +50,7 @@
 /frontend/.storybook/preview-body.html
 /frontend/.storybook/preview-head.html
 /frontend/playwright-report/
+/frontend/playwright/ui/visual-specs/
 /frontend/text-editor/src/wasm/
 /frontend/dist/
 /frontend/npm-debug.log

frontend/playwright/ui/pages/DashboardPage.js

@@ -147,6 +147,7 @@ export class DashboardPage extends BaseWebSocketPage {
       "get-projects?team-id=*",
       "dashboard/get-projects-full.json",
     );
+
     await this.mockRPC(
       "get-project-files?project-id=*",
       "dashboard/get-project-files.json",

frontend/playwright/ui/visual-specs/visual-dashboard.spec.js

@@ -9,6 +9,7 @@ test("User goes to an empty dashboard", async ({ page }) => {
   const dashboardPage = new DashboardPage(page);
 
   await dashboardPage.goToDashboard();
+  await expect(dashboardPage.page).toHaveURL(/dashboard/);
 
   await expect(dashboardPage.mainHeading).toBeVisible();
   await expect(dashboardPage.page).toHaveScreenshot();
@@ -122,9 +123,7 @@ test("User goes to a full search page", async ({ page }) => {
   await dashboardPage.searchInput.fill("3");
 
   await expect(dashboardPage.mainHeading).toHaveText("Search results");
-  await expect(
+  await expect(page.getByRole("button", { name: "New File 3" })).toBeVisible();
-    dashboardPage.page.getByRole("button", { name: "New File 3" }),
-  ).toBeVisible();
   await expect(dashboardPage.page).toHaveScreenshot();
 });
 
@@ -202,6 +201,10 @@ test("User opens teams selector with more than one team", async ({ page }) => {
 test("User goes to second team", async ({ page }) => {
   const dashboardPage = new DashboardPage(page);
   await dashboardPage.setupDashboardFull();
+  await dashboardPage.mockRPC(
+    `get-projects?team-id=${DashboardPage.secondTeamId}`,
+    "dashboard/get-projects-second-team.json",
+  );
   await dashboardPage.goToDashboard();
 
   await dashboardPage.teamDropdown.click();
@@ -216,6 +219,10 @@ test("User goes to second team", async ({ page }) => {
 test("User opens team management dropdown", async ({ page }) => {
   const dashboardPage = new DashboardPage(page);
   await dashboardPage.setupDashboardFull();
+  await dashboardPage.mockRPC(
+    `get-projects?team-id=${DashboardPage.secondTeamId}`,
+    "dashboard/get-projects-second-team.json",
+  );
 
   await dashboardPage.goToSecondTeamDashboard();
   await expect(page.getByText("Team Up")).toBeVisible();

frontend/playwright/ui/visual-specs/visual-viewer.spec.js

@@ -103,7 +103,7 @@ test("User goes to the Viewer Inspect code", async ({ page }) => {
 
   await expect(
     viewerPage.page.getByRole("button", {
-      name: "Toggle panel Size & Position",
+      name: "Toggle panel Size and position",
     }),
   ).toBeVisible();
 

frontend/playwright/ui/visual-specs/workspace.spec.js

@@ -158,7 +158,9 @@ test.describe("Palette", () => {
       .getByRole("button", { name: "Color Palette" })
       .click();
     await expect(
-      workspace.palette.getByRole("button", { name: "#7798ff" }),
+      workspace.palette.getByText(
+        "There are no color styles in your library yet",
+      ),
     ).toBeVisible();
   });
 });

frontend/src/app/main/ui/dashboard/grid.cljs

@@ -413,6 +413,7 @@
        :ref node-ref
        :role "button"
        :title (:name file)
+       :aria-label (:name file)
        :draggable (dm/str can-edit)
        :on-click on-select
        :on-key-down on-key-down