diff --git a/frontend/playwright/ui/pages/WorkspacePage.js b/frontend/playwright/ui/pages/WorkspacePage.js index 1b66cc34c6..42326e4841 100644 --- a/frontend/playwright/ui/pages/WorkspacePage.js +++ b/frontend/playwright/ui/pages/WorkspacePage.js @@ -79,6 +79,7 @@ export class WorkspacePage extends BaseWebSocketPage { this.tokensUpdateCreateModal = page.getByTestId( "token-update-create-modal", ); + this.tokenThemesSetsSidebar = page.getByTestId("token-themes-sets-sidebar"); } async goToWorkspace({ diff --git a/frontend/playwright/ui/specs/tokens.spec.js b/frontend/playwright/ui/specs/tokens.spec.js index 7ea79ce74a..1d1959c671 100644 --- a/frontend/playwright/ui/specs/tokens.spec.js +++ b/frontend/playwright/ui/specs/tokens.spec.js @@ -27,7 +27,9 @@ test.describe("Tokens: Tab", () => { await expect(tokensTabPanel).toHaveText(/Themes/); }); - test("Created color token shows up in the sidebar", async ({ page }) => { + 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( @@ -83,5 +85,17 @@ test.describe("Tokens: Tab", () => { // Tokens tab panel should have two tokens with the color red / #ff0000 await expect(tokensTabPanel.getByTitle("#ff0000")).toHaveCount(2); + + // Global set has been auto created and is active + await expect( + workspacePage.tokenThemesSetsSidebar.getByRole("button", { + name: "Global", + }), + ).toHaveCount(1); + await expect( + workspacePage.tokenThemesSetsSidebar.getByRole("button", { + name: "Global", + }), + ).toHaveAttribute("aria-checked", "true"); }); }); diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs index 127f13c3fa..49c41b0610 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs @@ -111,7 +111,7 @@ [{:keys [set label tree-depth tree-path selected? on-select active? on-toggle editing? on-edit on-edit-reset on-edit-submit]}] (let [set-name (.-name set) editing?' (editing? tree-path) - active?' (active? set-name) + active?' (some? (active? set-name)) on-click (mf/use-fn (mf/deps editing?' tree-path) @@ -138,7 +138,8 @@ :selected-set selected?) :on-click on-click :on-double-click #(on-edit tree-path) - :on-context-menu on-context-menu} + :on-context-menu on-context-menu + :aria-checked active?'} [:> icon* {:id "document" :class (stl/css-case :icon true diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs index 20f4b7c0af..a6b28ecb6e 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs @@ -239,7 +239,8 @@ on-open (mf/use-fn #(reset! open? true))] [:& sets-context/provider {} [:& sets-context-menu] - [:article {:class (stl/css :sets-section-wrapper) + [:article {:data-testid "token-themes-sets-sidebar" + :class (stl/css :sets-section-wrapper) :style {"--resize-height" (str resize-height "px")}} [:div {:class (stl/css :sets-sidebar)} [:& themes-header]