From b0caa15516c2452bed120dcf1149b62feb0e3ed1 Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Wed, 15 Apr 2026 09:16:16 +0200 Subject: [PATCH] :tada: Add test to bug (#8928) --- .../playwright/ui/specs/tokens/apply.spec.js | 48 +++++++++++++++++++ .../ui/specs/tokens/remapping.spec.js | 2 +- .../options/menus/color_selection.cljs | 3 +- .../workspace/sidebar/options/menus/fill.cljs | 2 +- frontend/translations/en.po | 8 ++++ frontend/translations/es.po | 8 ++++ 6 files changed, 68 insertions(+), 3 deletions(-) diff --git a/frontend/playwright/ui/specs/tokens/apply.spec.js b/frontend/playwright/ui/specs/tokens/apply.spec.js index a866fefe6a..fccad0cfe9 100644 --- a/frontend/playwright/ui/specs/tokens/apply.spec.js +++ b/frontend/playwright/ui/specs/tokens/apply.spec.js @@ -981,3 +981,51 @@ test("Bug: 13960, User select shapes with different opacity and input show mixed await expect(layerMenuSection .getByRole('textbox', { name: 'Opacity' })).toHaveAttribute("placeholder", "Mixed"); }); + +test("BUG: 13930, Token colors are shown on selected colors section", async ({ + page, +}) => { + const { workspacePage, tokensSidebar, tokenContextMenuForToken } = + await setupTokensFileRender(page); + + await page.getByRole("tab", { name: "Layers" }).click(); + + await workspacePage.layers + .getByTestId("layer-row") + .filter({ hasText: "Button" }) + .click(); + + await page.getByRole("tab", { name: "Tokens" }).click(); + + await unfoldTokenType(tokensSidebar, "color"); + + await tokensSidebar + .getByRole("button", { name: "black" }) + .click({ button: "right" }); + await tokenContextMenuForToken.getByText("Fill").click(); + + await page.getByRole("tab", { name: "Layers" }).click(); + + await workspacePage.layers + .getByTestId("layer-row") + .filter({ hasText: "Rectangle" }) + .first() + .click({ modifiers: ["Shift"] }); + + await expect( + workspacePage.page.getByRole("region", { name: "Color selection section" }), + ).toBeVisible(); + + await workspacePage.page + .getByRole("button", { name: "Resolved value: #7f9cf5" }) + .click(); + await expect( + workspacePage.page.getByRole("region", { name: "Color selection section" }), + ).toBeVisible(); + + await expect( + workspacePage.page + .getByTestId("colorpicker") + .getByRole("button", { name: "colors.black" }), + ).toBeVisible(); +}); diff --git a/frontend/playwright/ui/specs/tokens/remapping.spec.js b/frontend/playwright/ui/specs/tokens/remapping.spec.js index 44163bfdfa..55472cb4a1 100644 --- a/frontend/playwright/ui/specs/tokens/remapping.spec.js +++ b/frontend/playwright/ui/specs/tokens/remapping.spec.js @@ -687,7 +687,7 @@ test.describe("Remapping group of tokens", () => { await expect(lighterNode).toBeVisible(); // Verify that the applied token reference has been updated in the right sidebar for the selected shape - const fillSection = rightSidebar.getByTestId("fill-section"); + const fillSection = rightSidebar.getByRole("region", { name: "Fill section" }); await expect(fillSection).toBeVisible(); const tokenReference = fillSection.getByLabel("lighter.primary", { diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs index 31dd4ad3a5..cbc9e6c31a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs @@ -192,7 +192,8 @@ (conj prev-colors color)) (st/emit! (dwta/apply-token-on-color-selected color-operations token)))))] - [:div {:class (stl/css :element-set)} + [:section {:class (stl/css :element-set) + :aria-label (tr "workspace.options.selection-color.section")} [:div {:class (stl/css :element-title)} [:> title-bar* {:collapsable has-colors? :collapsed (not open?) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs index 107150a16e..529eee6b36 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs @@ -194,7 +194,7 @@ (dom/set-attribute! checkbox "indeterminate" true) (dom/remove-attribute! checkbox "indeterminate")))) - [:div {:class (stl/css :fill-section) :data-testid "fill-section"} + [:section {:class (stl/css :fill-section) :aria-label (tr "workspace.options.fill.section")} [:div {:class (stl/css :fill-title)} [:> title-bar* {:collapsable has-fills? :collapsed (not open?) diff --git a/frontend/translations/en.po b/frontend/translations/en.po index 65c38e5ccd..dfabd64c24 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -6468,6 +6468,10 @@ msgstr "Export unexpectedly slow" msgid "workspace.options.fill" msgstr "Fill" +#: src/app/main/ui/workspace/sidebar/options/menus/fill.cljs +msgid "workspace.options.fill.section" +msgstr "Fill section" + #: src/app/main/ui/workspace/sidebar/options/menus/fill.cljs:208 msgid "workspace.options.fill.add-fill" msgstr "Add fill" @@ -7083,6 +7087,10 @@ msgstr "More library colors" msgid "workspace.options.more-token-colors" msgstr "More color tokens" +#: src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs +msgid "workspace.options.selection-color.section" +msgstr "Color selection section" + #: src/app/main/ui/workspace/sidebar/options/menus/layer.cljs:229, src/app/main/ui/workspace/sidebar/options/menus/layer.cljs:241 msgid "workspace.options.opacity" msgstr "Opacity" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 59b7eb0bd5..922b552159 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -6363,6 +6363,10 @@ msgstr "Exportación lenta" msgid "workspace.options.fill" msgstr "Relleno" +#: src/app/main/ui/workspace/sidebar/options/menus/fill.cljs +msgid "workspace.options.fill.section" +msgstr "Sección de relleno" + #: src/app/main/ui/workspace/sidebar/options/menus/fill.cljs:208 msgid "workspace.options.fill.add-fill" msgstr "Añadir relleno" @@ -6978,6 +6982,10 @@ msgstr "Más colores de la biblioteca" msgid "workspace.options.more-token-colors" msgstr "Más tokens de color" +#: src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs +msgid "workspace.options.selection-color.section" +msgstr "Sección de colores seleccionados" + #: src/app/main/ui/workspace/sidebar/options/menus/layer.cljs:229, src/app/main/ui/workspace/sidebar/options/menus/layer.cljs:241 msgid "workspace.options.opacity" msgstr "Opacidad"