github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-06-01 21:20:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

♻️ Fix regression and add test

Browse Source
This commit is contained in:
Eva Marco 2026-05-28 15:06:29 +02:00 committed by GitHub
parent 92a3030f05
commit 7843bb1208
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 71 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/playwright/ui/specs/tokens/apply.spec.js
View File

@ -6,6 +6,7 @@ import {
setupTypographyTokensFileRender,
unfoldTokenType,
createToken,
createSet
} from "./helpers";
test.beforeEach(async ({ page }) => {
@ -1101,21 +1102,6 @@ test("BUG: 14200, Tokens in sets are applied when clicking on Save during creati
flags: ["enable-token-combobox", "enable-feature-token-input"],
});
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();
await changeSetInput(sidebar, setName, (finalKey = "Enter"));
};
// Select rectangle layer
await page.getByRole("tab", { name: "Layers" }).click();
@ -1213,21 +1199,6 @@ test("Check token application across sets", async ({ page }) => {
flags: ["enable-token-combobox", "enable-feature-token-input"],
});
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();
await changeSetInput(sidebar, setName, (finalKey = "Enter"));
};
const createTokenInSet = async (tokenName, tokenValue) => {
await unfoldTokenType(tokensSidebar, "Border radius");

51
frontend/playwright/ui/specs/tokens/crud.spec.js
View File

@ -8,6 +8,7 @@ import {
testTokenCreationFlow,
unfoldTokenType,
createToken,
createSet,
} from "./helpers";
test.beforeEach(async ({ page }) => {
@ -2039,7 +2040,7 @@ test.describe("Tokens tab - delete", () => {
});
});
test("BUG: 1425 Token is not highlighted in red when value references a token in a disabled set", async ({
test("BUG: 14262 Token pill must be highlighted when value references a token in a disabled set", async ({
page,
}) => {
const { tokensSidebar, tokenContextMenuForToken, tokenThemesSetsSidebar } =
@ -2049,16 +2050,54 @@ test("BUG: 1425 Token is not highlighted in red when value references a token in
await unfoldTokenType(tokensSidebar, "Border radius");
await createToken(page, "Border radius", "base-radius", "Value", "20");
await createToken(page, "Border radius", "ref-base", "Value", "{base-radius}");
await createToken(
page,
"Border radius",
"ref-base",
"Value",
"{base-radius}",
);
const refTokenPill = tokensSidebar.getByRole("button", {
name: "ref-base",
});
await expect(refTokenPill).toBeVisible();
const CoreSetCheckbox = tokenThemesSetsSidebar.getByRole('button', { name: 'core' }).getByRole('checkbox');
const CoreSetCheckbox = tokenThemesSetsSidebar
.getByRole("button", { name: "core" })
.getByRole("checkbox");
await CoreSetCheckbox.click();
const brokenTokenPill = tokensSidebar.getByRole('button', { name: 'Missing reference ref-base' });
await expect(brokenTokenPill).toBeVisible();
// Pill is not highlighted if both tokens are on the same disabled set
const brokenTokenPill = tokensSidebar.getByRole("button", {
name: "Missing reference ref-base",
});
await expect(brokenTokenPill).not.toBeVisible();
await createSet(tokenThemesSetsSidebar, "New set");
await tokenThemesSetsSidebar.getByRole("button", { name: "New set" }).click();
await tokenThemesSetsSidebar
.getByRole("button", { name: "New set" })
.getByRole("checkbox")
.click();
await createToken(page, "Border radius", "new-ref", "Value", "{base-radius}");
// Pill is highlighted if the referenced token is in a different disabled set than the token with the reference
const newBrokenTokenPill = tokensSidebar.getByRole("button", {
name: "Missing reference new-ref",
});
await expect(newBrokenTokenPill).toBeVisible();
await tokenThemesSetsSidebar
.getByRole("button", { name: "core" })
.getByRole("checkbox")
.click();
// When the disabled set is activated again, pill is not highlighted anymore
await expect(
tokenThemesSetsSidebar
.getByRole("button", { name: "core" })
.getByRole("checkbox"),
).toBeChecked();
await expect(newBrokenTokenPill).not.toBeVisible();
});

17
frontend/playwright/ui/specs/tokens/helpers.js
View File

@ -360,6 +360,21 @@ const createToken = async (page, type, name, textFieldName, value) => {
await expect(tokensUpdateCreateModal).not.toBeVisible();
};
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();
await changeSetInput(sidebar, setName, (finalKey = "Enter"));
};
export {
setupEmptyTokensFile,
setupEmptyTokensFileRender,
@ -370,4 +385,6 @@ export {
testTokenCreationFlow,
unfoldTokenType,
createToken,
createSet,
changeSetInput,
};

16
frontend/playwright/ui/specs/tokens/sets.spec.js
View File

@ -1,7 +1,7 @@
import { test, expect } from "@playwright/test";
import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage";
import { WasmWorkspacePage } from "../../pages/WasmWorkspacePage";
import { setupEmptyTokensFileRender, setupTokensFileRender } from "./helpers";
import { setupEmptyTokensFileRender, setupTokensFileRender, createSet, changeSetInput } from "./helpers";
test.beforeEach(async ({ page }) => {
await WasmWorkspacePage.init(page);
@ -9,20 +9,6 @@ test.beforeEach(async ({ page }) => {
});
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();
await changeSetInput(sidebar, setName, (finalKey = "Enter"));
};
const assertEmptySetsList = async (el) => {
const buttons = await el.getByRole("button").allTextContents();

8
frontend/src/app/main/ui/workspace/sidebar.cljs
View File

@ -119,7 +119,7 @@
(mf/defc left-sidebar*
{::mf/memo true}
[{:keys [layout file tokens-lib active-tokens resolved-active-tokens resolved-active-tokens-not-forced]}]
[{:keys [layout file tokens-lib active-tokens resolved-active-tokens]}]
(let [options-mode (mf/deref refs/options-mode-global)
project (mf/deref refs/project)
file-id (get file :id)
@ -223,8 +223,7 @@
[:> tokens-sidebar-tab*
{:tokens-lib tokens-lib
:active-tokens active-tokens
:resolved-active-tokens resolved-active-tokens
:resolved-active-tokens-not-forced resolved-active-tokens-not-forced}]
:resolved-active-tokens resolved-active-tokens}]
:layers
[:> layers-content*
@ -396,8 +395,6 @@
resolved-active-tokens-force-set
(sd/use-resolved-tokens* active-tokens-force-set)]
;; TODO: This props should be passed though context to avoid prop drilling.
[:*
(if (:collapse-left-sidebar layout)
[:> collapsed-button*]
@ -406,7 +403,6 @@
:page-id page-id
:tokens-lib tokens-lib
:active-tokens active-tokens-force-set
:resolved-active-tokens-not-forced resolved-active-tokens
:resolved-active-tokens (if tokenscript?
tokenscript-resolved-active-tokens-force-set
resolved-active-tokens-force-set)}])

7
frontend/src/app/main/ui/workspace/tokens/management.cljs
View File

@ -85,7 +85,7 @@
(mf/defc tokens-section*
{::mf/private true}
[{:keys [tokens-lib active-tokens resolved-active-tokens resolved-active-tokens-not-forced]}]
[{:keys [tokens-lib active-tokens resolved-active-tokens]}]
(let [objects (mf/deref refs/workspace-page-objects)
selected (mf/deref refs/selected-shapes)
@ -320,7 +320,6 @@
:selected-shapes selected-shapes
:is-selected-inside-layout is-selected-inside-layout
:active-theme-tokens resolved-active-tokens
:active-theme-tokens-not-forced resolved-active-tokens-not-forced
:tokens-lib tokens-lib
:selected-token-set-id selected-token-set-id}]))
@ -330,6 +329,4 @@
:type type
:selected-shapes selected-shapes
:is-selected-inside-layout is-selected-inside-layout
:active-theme-tokens resolved-active-tokens
:active-theme-tokens-not-forced resolved-active-tokens-not-forced
:selected-token-set-id selected-token-set-id}])]))
:active-theme-tokens resolved-active-tokens}])]))

3
frontend/src/app/main/ui/workspace/tokens/management/group.cljs
View File

@ -71,7 +71,7 @@
(mf/defc token-group*
{::mf/schema schema:token-group}
[{:keys [type tokens selected-shapes is-selected-inside-layout active-theme-tokens selected-token-set-id tokens-lib selected-ids active-theme-tokens-not-forced]}]
[{:keys [type tokens selected-shapes is-selected-inside-layout active-theme-tokens selected-token-set-id tokens-lib selected-ids]}]
(let [{:keys [modal title]}
(get dwta/token-properties type)
@ -190,7 +190,6 @@
:selected-shapes selected-shapes
:is-selected-inside-layout is-selected-inside-layout
:active-theme-tokens active-theme-tokens
:active-theme-tokens-not-forced active-theme-tokens-not-forced
:selected-token-set-id selected-token-set-id
:tokens-lib tokens-lib
:on-token-pill-click on-token-pill-click

4
frontend/src/app/main/ui/workspace/tokens/management/token_pill.cljs
View File

@ -175,7 +175,7 @@
(mf/defc token-pill*
{::mf/wrap [mf/memo]}
[{:keys [on-click token on-context-menu selected-shapes is-selected-inside-layout active-theme-tokens active-theme-tokens-not-forced]}]
[{:keys [on-click token on-context-menu selected-shapes is-selected-inside-layout active-theme-tokens]}]
(let [{:keys [name value type]} token
resolved-token (get active-theme-tokens (:name token))
@ -216,7 +216,7 @@
(if (contains? cf/flags :tokenscript)
(seq (:errors resolved-token))
(and is-reference?
(not (contains-reference-value? value active-theme-tokens-not-forced))))
(not (contains-reference-value? value active-theme-tokens))))
no-valid-value (seq errors)

2
frontend/src/app/main/ui/workspace/tokens/management/token_tree.cljs
View File

@ -134,7 +134,6 @@
selected-shapes
is-selected-inside-layout
active-theme-tokens
active-theme-tokens-not-forced
tokens-lib
selected-token-set-id
on-token-pill-click
@ -172,7 +171,6 @@
:selected-shapes selected-shapes
:is-selected-inside-layout is-selected-inside-layout
:active-theme-tokens active-theme-tokens
:active-theme-tokens-not-forced active-theme-tokens-not-forced
:on-click on-token-pill-click
:on-context-menu on-pill-context-menu}])
;; Render segment folder