Add integration tests for creating sets

frontend/playwright/ui/pages/WorkspacePage.js

@@ -80,6 +80,8 @@ export class WorkspacePage extends BaseWebSocketPage {
       "token-update-create-modal",
     );
     this.tokenThemesSetsSidebar = page.getByTestId("token-themes-sets-sidebar");
+    this.tokenSetItems = page.getByTestId("tokens-set-item");
+    this.tokenSetGroupItems = page.getByTestId("tokens-set-group-item");
   }
 
   async goToWorkspace({

frontend/playwright/ui/specs/tokens.spec.js

@@ -22,6 +22,8 @@ const setupFileWithTokens = async (page) => {
     workspacePage,
     tokensUpdateCreateModal: workspacePage.tokensUpdateCreateModal,
     tokenThemesSetsSidebar: workspacePage.tokenThemesSetsSidebar,
+    tokenSetItems: workspacePage.tokenSetItems,
+    tokenSetGroupItems: workspacePage.tokenSetGroupItems,
   };
 };
 
@@ -102,3 +104,37 @@ test.describe("Tokens: Tokens Tab", () => {
     ).toHaveAttribute("aria-checked", "true");
   });
 });
+
+test.describe("Tokens: Sets Tab", () => {
+  const createSet = async (sidebar, setName) => {
+    const tokensTabButton = sidebar
+      .getByRole("button", { name: "Add set" })
+      .click();
+
+    const setInput = sidebar.locator("input:focus");
+    await expect(setInput).toBeVisible();
+    await setInput.fill(setName);
+    await setInput.press("Enter");
+  };
+
+  test("User creates sets tree structure by entering a set path", async ({
+    page,
+  }) => {
+    const {
+      workspacePage,
+      tokenThemesSetsSidebar,
+      tokenSetItems,
+      tokenSetGroupItems,
+    } = await setupFileWithTokens(page);
+
+    const tokensTabButton = tokenThemesSetsSidebar
+      .getByRole("button", { name: "Add set" })
+      .click();
+
+    await createSet(tokenThemesSetsSidebar, "core/colors/light");
+    await createSet(tokenThemesSetsSidebar, "core/colors/dark");
+
+    await expect(tokenSetItems).toHaveCount(2);
+    await expect(tokenSetGroupItems).toHaveCount(2);
+  });
+});

frontend/src/app/main/ui/workspace/tokens/sets.cljs

@@ -83,6 +83,7 @@
                 :tree-path tree-path})))))]
     [:div {;; :ref dref
            :role "button"
+           :data-testid "tokens-set-group-item"
            :style {"--tree-depth" tree-depth}
            :class (stl/css-case :set-item-container true
                                 :selected-set selected?)
@@ -133,6 +134,7 @@
                 :tree-path tree-path})))))]
     [:div {;; :ref dref
            :role "button"
+           :data-testid "tokens-set-item"
            :style {"--tree-depth" tree-depth}
            :class (stl/css-case :set-item-container true
                                 :selected-set selected?)