From e4460acfae4cb68c41f885f2c4bea59c79dc3c2d Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Mon, 25 Nov 2024 16:41:02 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=20Extract=20common=20token=20setup=20?=
 =?UTF-8?q?logic,=20fix=20selector?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/playwright/ui/specs/tokens.spec.js | 53 +++++++++++----------
 1 file changed, 27 insertions(+), 26 deletions(-)

diff --git a/frontend/playwright/ui/specs/tokens.spec.js b/frontend/playwright/ui/specs/tokens.spec.js
index 1d1959c67..2f920c275 100644
--- a/frontend/playwright/ui/specs/tokens.spec.js
+++ b/frontend/playwright/ui/specs/tokens.spec.js
@@ -5,21 +5,27 @@ test.beforeEach(async ({ page }) => {
   await WorkspacePage.init(page);
 });
 
+const setupFileWithTokens = async (page) => {
+  const workspacePage = new WorkspacePage(page);
+  await workspacePage.setupEmptyFile();
+  await workspacePage.mockRPC(
+    "get-team?id=*",
+    "workspace/get-team-tokens.json",
+  );
+
+  await workspacePage.goToWorkspace();
+
+  const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
+  await tokensTabButton.click();
+
+  return { workspacePage };
+};
+
 test.describe("Tokens: Tab", () => {
   test("Clicking tokens tab button opens tokens sidebar tab", async ({
     page,
   }) => {
-    const workspacePage = new WorkspacePage(page);
-    await workspacePage.setupEmptyFile();
-    await workspacePage.mockRPC(
-      "get-team?id=*",
-      "workspace/get-team-tokens.json",
-    );
-
-    await workspacePage.goToWorkspace();
-
-    const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
-    await tokensTabButton.click();
+    const { workspacePage } = await setupFileWithTokens(page);
 
     const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
 
@@ -30,17 +36,7 @@ test.describe("Tokens: Tab", () => {
   test("User creates color token and auto created set show up in the sidebar", async ({
     page,
   }) => {
-    const workspacePage = new WorkspacePage(page);
-    await workspacePage.setupEmptyFile();
-    await workspacePage.mockRPC(
-      "get-team?id=*",
-      "workspace/get-team-tokens.json",
-    );
-
-    await workspacePage.goToWorkspace();
-
-    const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
-    await tokensTabButton.click();
+    const { workspacePage } = await setupFileWithTokens(page);
 
     const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
     await tokensTabPanel.getByTitle("Add token: Color").click();
@@ -59,9 +55,14 @@ test.describe("Tokens: Tab", () => {
     await valueField.click();
     await valueField.fill("red");
 
-    const submitButtonSelector = `button[type="submit"]:enabled`;
-    await page.waitForSelector(submitButtonSelector);
-    await page.locator(submitButtonSelector).click();
+    const submitButton = workspacePage.tokensUpdateCreateModal.getByRole(
+      "button",
+      {
+        name: "Save",
+      },
+    );
+    await expect(submitButton).toBeEnabled();
+    await submitButton.click();
 
     await expect(tokensTabPanel.getByText("color.primary")).toBeEnabled();
 
@@ -77,7 +78,7 @@ test.describe("Tokens: Tab", () => {
     await valueField.click();
     await valueField.fill("{color.primary}");
 
-    await page.waitForSelector(submitButtonSelector);
+    await expect(submitButton).toBeEnabled();
     await nameField.press("Enter");
 
     const referenceToken = tokensTabPanel.getByText("color.secondary");