From f417445f31325370100aea478acb982d11b5fc62 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= <belen@hey.com>
Date: Tue, 11 Jun 2024 15:48:18 +0200
Subject: [PATCH] :sparkles: Refactor WorkspacePage so it has more semantic
 locators

---
 frontend/playwright/ui/pages/WorkspacePage.js     | 7 +++----
 frontend/playwright/ui/specs/sidebar.spec.js      | 8 ++++----
 frontend/src/app/main/ui/workspace/libraries.cljs | 2 +-
 3 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/frontend/playwright/ui/pages/WorkspacePage.js b/frontend/playwright/ui/pages/WorkspacePage.js
index e2c7b11d8..131f94943 100644
--- a/frontend/playwright/ui/pages/WorkspacePage.js
+++ b/frontend/playwright/ui/pages/WorkspacePage.js
@@ -48,7 +48,6 @@ export class WorkspacePage extends BaseWebSocketPage {
     this.layers = page.getByTestId("layer-tree");
     this.palette = page.getByTestId("palette");
     this.sidebar = page.getByTestId("left-sidebar");
-    this.closeLibraries = page.getByTestId("close-libraries");
     this.librariesModal = page.getByTestId("libraries-modal");
   }
 
@@ -126,7 +125,7 @@ export class WorkspacePage extends BaseWebSocketPage {
     await this.sidebar.getByText("Assets").click(clickOptions);
   }
 
-  async clickLibraries(clickOptions = {}) {
+  async openLibrariesModal(clickOptions = {}) {
     await this.sidebar.getByText("Libraries").click(clickOptions);
   }
 
@@ -138,8 +137,8 @@ export class WorkspacePage extends BaseWebSocketPage {
       .click(clickOptions);
   }
 
-  async clickCloseLibraries(clickOptions = {}) {
-    await this.closeLibraries.click(clickOptions);
+  async closeLibrariesModal(clickOptions = {}) {
+    await this.librariesModal.getByRole("button", { name: "Close" }).click(clickOptions);
   }
 
   async clickColorPalette(clickOptions = {}) {
diff --git a/frontend/playwright/ui/specs/sidebar.spec.js b/frontend/playwright/ui/specs/sidebar.spec.js
index 9333749f8..468a661fa 100644
--- a/frontend/playwright/ui/specs/sidebar.spec.js
+++ b/frontend/playwright/ui/specs/sidebar.spec.js
@@ -40,16 +40,16 @@ test.describe("Assets tab", () => {
     await workspacePage.clickAssets();
     // Now the get-file call should return a library
     await workspacePage.mockRPC(/get\-file\?/, "workspace/get-file-library.json");
-    await workspacePage.clickLibraries();
+    await workspacePage.openLibrariesModal();
     await workspacePage.clickLibrary("Testing library 1");
-    await workspacePage.clickCloseLibraries();
+    await workspacePage.closeLibrariesModal();
 
     await expect(workspacePage.palette.getByRole("button", { name: "test-color-187cd5" })).toBeVisible();
 
     // Remove Testing library 1
-    await workspacePage.clickLibraries();
+    await workspacePage.openLibrariesModal();
     await workspacePage.clickLibrary("Testing library 1");
-    await workspacePage.clickCloseLibraries();
+    await workspacePage.closeLibrariesModal();
 
     await expect(
       workspacePage.palette.getByText("There are no color styles in your library yet"),
diff --git a/frontend/src/app/main/ui/workspace/libraries.cljs b/frontend/src/app/main/ui/workspace/libraries.cljs
index d07517c7b..6d5813c0d 100644
--- a/frontend/src/app/main/ui/workspace/libraries.cljs
+++ b/frontend/src/app/main/ui/workspace/libraries.cljs
@@ -519,7 +519,7 @@
      [:div {:class (stl/css :modal-dialog)}
       [:button {:class (stl/css :close-btn)
                 :on-click close-dialog
-                :data-testid "close-libraries"}
+                :aria-label (tr "labels.close")}
        close-icon]
       [:div {:class (stl/css :modal-title)}
        (tr "workspace.libraries.libraries")]