From 0c275cf490bf9c763f15f236925ccfdeda40d20d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20Schr=C3=B6dl?= Date: Thu, 6 Feb 2025 14:16:03 +0100 Subject: [PATCH] :bug: Fix token set selection & rename (#5783) * :bug: Fix set selection * :bug: Fix set name not being updated * :recycle: Add better list assertion & test set renaming --- frontend/playwright/ui/specs/tokens.spec.js | 76 +++++++++++++++---- frontend/src/app/main/data/tokens.cljs | 24 +++--- .../app/main/ui/workspace/tokens/sets.cljs | 2 +- 3 files changed, 79 insertions(+), 23 deletions(-) diff --git a/frontend/playwright/ui/specs/tokens.spec.js b/frontend/playwright/ui/specs/tokens.spec.js index f3c613b1f..33686cd3a 100644 --- a/frontend/playwright/ui/specs/tokens.spec.js +++ b/frontend/playwright/ui/specs/tokens.spec.js @@ -298,15 +298,27 @@ test.describe("Tokens: Tokens Tab", () => { }); test.describe("Tokens: Sets Tab", () => { + const changeSetInput = async (sidebar, setName, finalKey = "Enter") => { + const setInput = sidebar.locator("input:focus"); + await expect(setInput).toBeVisible(); + await setInput.fill(setName); + await setInput.press(finalKey); + }; + const createSet = async (sidebar, setName, finalKey = "Enter") => { 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(finalKey); + await changeSetInput(sidebar, setName, (finalKey = "Enter")); + }; + + const assertSetsList = async (el, sets) => { + const buttons = await el.getByRole("button").allTextContents(); + const filteredButtons = buttons.filter( + (text) => text && text !== "Create one.", + ); + await expect(filteredButtons).toEqual(sets); }; test("User creates sets tree structure by entering a set path", async ({ @@ -327,11 +339,46 @@ test.describe("Tokens: Sets Tab", () => { await createSet(tokenThemesSetsSidebar, "core/colors/light"); await createSet(tokenThemesSetsSidebar, "core/colors/dark"); + await assertSetsList(tokenThemesSetsSidebar, [ + "core", + "colors", + "light", + "dark", + ]); + + // User renames set + await tokenThemesSetsSidebar + .getByRole("button", { name: "light" }) + .click({ button: "right" }); + await expect(tokenContextMenuForSet).toBeVisible(); + await tokenContextMenuForSet.getByText("Rename").click(); + await changeSetInput(tokenThemesSetsSidebar, "light-renamed"); + // User cancels during editing await createSet(tokenThemesSetsSidebar, "core/colors/dark", "Escape"); - await expect(tokenSetItems).toHaveCount(2); - await expect(tokenSetGroupItems).toHaveCount(2); + await assertSetsList(tokenThemesSetsSidebar, [ + "core", + "colors", + "light-renamed", + "dark", + ]); + + // Creates nesting by renaming set with double click + await tokenThemesSetsSidebar + .getByRole("button", { name: "light-renamed" }) + .click({ button: "right" }); + await expect(tokenContextMenuForSet).toBeVisible(); + await tokenContextMenuForSet.getByText("Rename").click(); + await changeSetInput(tokenThemesSetsSidebar, "nested/light"); + + await assertSetsList(tokenThemesSetsSidebar, [ + "core", + "colors", + "nested", + "light", + "dark", + ]); // Create set in group await tokenThemesSetsSidebar @@ -339,13 +386,16 @@ test.describe("Tokens: Sets Tab", () => { .click({ button: "right" }); await expect(tokenContextMenuForSet).toBeVisible(); await tokenContextMenuForSet.getByText("Add set to this group").click(); + await changeSetInput(tokenThemesSetsSidebar, "sizes/small"); - const setInput = tokenThemesSetsSidebar.locator("input:focus"); - await expect(setInput).toBeVisible(); - await setInput.fill("sizes/small"); - await setInput.press("Enter"); - - await expect(tokenSetItems).toHaveCount(3); - await expect(tokenSetGroupItems).toHaveCount(3); + await assertSetsList(tokenThemesSetsSidebar, [ + "core", + "colors", + "nested", + "light", + "dark", + "sizes", + "small", + ]); }); }); diff --git a/frontend/src/app/main/data/tokens.cljs b/frontend/src/app/main/data/tokens.cljs index 83b1ac609..add65ed08 100644 --- a/frontend/src/app/main/data/tokens.cljs +++ b/frontend/src/app/main/data/tokens.cljs @@ -19,6 +19,7 @@ [app.main.data.notifications :as ntf] [app.main.data.workspace.shapes :as dwsh] [app.main.data.workspace.tokens.selected-set :as dwts] + [app.main.data.workspace.undo :as dwu] [app.main.store :as st] [app.main.ui.workspace.tokens.update :as wtu] [app.util.i18n :refer [tr]] @@ -221,15 +222,20 @@ (ptk/reify ::drop-token-set ptk/WatchEvent (watch [it state _] - (try - (when-let [changes (clt/generate-move-token-set (pcb/empty-changes it) (get-tokens-lib state) drop-opts)] - (rx/of - (dch/commit-changes changes) - (some-> (get-in changes [:redo-changes 0 :to-path]) (dwts/set-selected-token-set-name)) - (wtu/update-workspace-tokens))) - (catch js/Error e - (rx/of - (drop-error (ex-data e)))))))) + (let [undo-id (js/Symbol)] + (try + (when-let [changes (clt/generate-move-token-set (pcb/empty-changes it) (get-tokens-lib state) drop-opts)] + (rx/of + (dwu/start-undo-transaction undo-id) + (dch/commit-changes changes) + (some-> (get-in changes [:redo-changes 0 :to-path]) + (ctob/join-set-path) + (dwts/set-selected-token-set-name)) + (wtu/update-workspace-tokens) + (dwu/commit-undo-transaction undo-id))) + (catch js/Error e + (rx/of + (drop-error (ex-data e))))))))) (defn update-create-token [{:keys [token prev-token-name]}] diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs index 96a7074d7..43b0065b8 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs @@ -37,7 +37,7 @@ (st/emit! (dwts/set-selected-token-set-name set-name))) (defn on-update-token-set [set-name token-set] - (st/emit! (wdt/update-token-set set-name (ctob/update-name token-set set-name)))) + (st/emit! (wdt/update-token-set (:name token-set) (ctob/update-name token-set set-name)))) (defn on-update-token-set-group [set-group-path set-group-fname] (st/emit! (wdt/rename-token-set-group set-group-path set-group-fname)))