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

Revert "✨ Add regression test for token highlight bug (13302) (#8573)"

Browse Source 
This reverts commit d8249cc3db6283c12ba983d4b44a8c322aaffb6b.
This commit is contained in:
Belén Albeza 2026-03-13 11:14:06 +01:00 committed by Andrey Antukh
parent 6d30989a2d
commit fc64dfe9d6
12 changed files with 198 additions and 699 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/playwright/data/get-teams-tokens.json Normal file
View File

@ -0,0 +1,26 @@
[
{
"~:features": {
"~#set": [
"design-tokens/v1",
"layout/grid",
"styles/v2",
"fdata/pointer-map",
"fdata/objects-map",
"components/v2",
"fdata/shape-data-type"
]
},
"~:permissions": {
"~:type": "~:membership",
"~:is-owner": true,
"~:is-admin": true,
"~:can-edit": true
},
"~:name": "Default",
"~:modified-at": "~m1713533116375",
"~:id": "~uc7ce0794-0992-8105-8004-38e630f7920a",
"~:created-at": "~m1713533116375",
"~:is-default": true
}
]

206
frontend/playwright/data/tokens/get-file-13302.json
View File

@ -1,206 +0,0 @@
{
"~:features": {
"~#set": [
"fdata/path-data",
"plugins/runtime",
"design-tokens/v1",
"variants/v1",
"layout/grid",
"styles/v2",
"fdata/objects-map",
"render-wasm/v1",
"components/v2",
"fdata/shape-data-type"
]
},
"~:team-id": "~u99e49e93-362f-80ef-8007-3450ea52c9a4",
"~:permissions": {
"~:type": "~:membership",
"~:is-owner": true,
"~:is-admin": true,
"~:can-edit": true,
"~:can-read": true,
"~:is-logged": true
},
"~:has-media-trimmed": false,
"~:comment-thread-seqn": 0,
"~:name": "BUG 13302 - Token highlight",
"~:revn": 13,
"~:modified-at": "~m1770721633482",
"~:vern": 0,
"~:id": "~u6886b62b-1979-8195-8007-8d0b92d3116a",
"~:is-shared": false,
"~:migrations": {
"~#ordered-set": [
"legacy-2",
"legacy-3",
"legacy-5",
"legacy-6",
"legacy-7",
"legacy-8",
"legacy-9",
"legacy-10",
"legacy-11",
"legacy-12",
"legacy-13",
"legacy-14",
"legacy-16",
"legacy-17",
"legacy-18",
"legacy-19",
"legacy-25",
"legacy-26",
"legacy-27",
"legacy-28",
"legacy-29",
"legacy-31",
"legacy-32",
"legacy-33",
"legacy-34",
"legacy-36",
"legacy-37",
"legacy-38",
"legacy-39",
"legacy-40",
"legacy-41",
"legacy-42",
"legacy-43",
"legacy-44",
"legacy-45",
"legacy-46",
"legacy-47",
"legacy-48",
"legacy-49",
"legacy-50",
"legacy-51",
"legacy-52",
"legacy-53",
"legacy-54",
"legacy-55",
"legacy-56",
"legacy-57",
"legacy-59",
"legacy-62",
"legacy-65",
"legacy-66",
"legacy-67",
"0001-remove-tokens-from-groups",
"0002-normalize-bool-content-v2",
"0002-clean-shape-interactions",
"0003-fix-root-shape",
"0003-convert-path-content-v2",
"0005-deprecate-image-type",
"0006-fix-old-texts-fills",
"0008-fix-library-colors-v4",
"0009-clean-library-colors",
"0009-add-partial-text-touched-flags",
"0010-fix-swap-slots-pointing-non-existent-shapes",
"0011-fix-invalid-text-touched-flags",
"0012-fix-position-data",
"0013-fix-component-path",
"0013-clear-invalid-strokes-and-fills",
"0014-fix-tokens-lib-duplicate-ids",
"0014-clear-components-nil-objects",
"0015-fix-text-attrs-blank-strings",
"0015-clean-shadow-color",
"0016-copy-fills-from-position-data-to-text-node"
]
},
"~:version": 67,
"~:project-id": "~ucd8f7672-e5d1-810f-8007-87e124eda82a",
"~:created-at": "~m1770719668044",
"~:backend": "legacy-db",
"~:data": {
"~:pages": [
"~u6886b62b-1979-8195-8007-8d0b92d3116b"
],
"~:pages-index": {
"~u6886b62b-1979-8195-8007-8d0b92d3116b": {
"~:objects": {
"~#penpot/objects-map/v2": {
"~u00000000-0000-0000-0000-000000000000": "[\"~#shape\",[\"^ \",\"~:y\",0,\"~:hide-fill-on-export\",false,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:name\",\"Root Frame\",\"~:width\",0.01,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",0.0,\"~:y\",0.0]],[\"^:\",[\"^ \",\"~:x\",0.01,\"~:y\",0.0]],[\"^:\",[\"^ \",\"~:x\",0.01,\"~:y\",0.01]],[\"^:\",[\"^ \",\"~:x\",0.0,\"~:y\",0.01]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:r3\",0,\"~:r1\",0,\"~:id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",0,\"~:proportion\",1.0,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",0,\"~:y\",0,\"^6\",0.01,\"~:height\",0.01,\"~:x1\",0,\"~:y1\",0,\"~:x2\",0.01,\"~:y2\",0.01]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#FFFFFF\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^H\",0.01,\"~:flip-y\",null,\"~:shapes\",[\"~ud601cd4c-f774-802c-8007-8d0c13228bba\"]]]",
"~ud601cd4c-f774-802c-8007-8d0c13228bba": "[\"~#shape\",[\"^ \",\"~:y\",79.00000276416532,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:fixed\",\"~:hide-in-viewer\",false,\"~:name\",\"Rectangle\",\"~:width\",100.00000353902578,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",0,\"~:y\",79.0000027641653]],[\"^<\",[\"^ \",\"~:x\",100.00000353902578,\"~:y\",79.0000027641653]],[\"^<\",[\"^ \",\"~:x\",100.00000353902578,\"~:y\",178.9999994188543]],[\"^<\",[\"^ \",\"~:x\",0,\"~:y\",178.9999994188543]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:r3\",0,\"~:r1\",0,\"~:id\",\"~ud601cd4c-f774-802c-8007-8d0c13228bba\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:applied-tokens\",[\"^ \"],\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",0,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",0,\"~:y\",79.00000276416532,\"^8\",100.00000353902578,\"~:height\",99.99999665468899,\"~:x1\",0,\"~:y1\",79.00000276416532,\"~:x2\",100.00000353902578,\"~:y2\",178.99999941885432]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#B1B2B5\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^K\",99.99999665468899,\"~:flip-y\",null]]"
}
},
"~:id": "~u6886b62b-1979-8195-8007-8d0b92d3116b",
"~:name": "Page 1"
}
},
"~:id": "~u6886b62b-1979-8195-8007-8d0b92d3116a",
"~:options": {
"~:components-v2": true,
"~:base-font-size": "16px"
},
"~:tokens-lib": {
"~#penpot/tokens-lib": {
"~:sets": {
"~#ordered-map": [
[
"S-Global",
{
"~#penpot/token-set": {
"~:id": "~u7b395852-8f6b-8027-8007-8d0bb31bd9d9",
"~:name": "Global",
"~:description": "",
"~:modified-at": "~m1770719731235",
"~:tokens": {
"~#ordered-map": [
[
"any-dimensions-token",
{
"~#penpot/token": {
"~:id": "~u7b395852-8f6b-8027-8007-8d0bb31b8a10",
"~:name": "any-dimensions-token",
"~:type": "~:dimensions",
"~:value": "256",
"~:description": "",
"~:modified-at": "~m1770719731235"
}
}
]
]
}
}
}
]
]
},
"~:themes": {
"~#ordered-map": [
[
"",
{
"~#ordered-map": [
[
"__PENPOT__HIDDEN__TOKEN__THEME__",
{
"~#penpot/token-theme": {
"~:id": "~u00000000-0000-0000-0000-000000000000",
"~:name": "__PENPOT__HIDDEN__TOKEN__THEME__",
"~:group": "",
"~:description": "",
"~:is-source": false,
"~:external-id": "",
"~:modified-at": "~m1770719704149",
"~:sets": {
"~#set": [
"Global"
]
}
}
}
]
]
}
]
]
},
"~:active-themes": {
"~#set": [
"/__PENPOT__HIDDEN__TOKEN__THEME__"
]
}
}
}
}
}

338
frontend/playwright/data/tokens/update-file-13302.json
View File

@ -1,338 +0,0 @@
{
"~:revn": 11,
"~:lagged": [
{
"~:id": "~u6886b62b-1979-8195-8007-8d12e2ccd0f1",
"~:revn": 11,
"~:file-id": "~u6886b62b-1979-8195-8007-8d0b92d3116a",
"~:session-id": "~u488d46ff-4717-808d-8007-8d0c3dac344e",
"~:changes": [
{
"~:type": "~:mod-obj",
"~:id": "~ud601cd4c-f774-802c-8007-8d0c13228bba",
"~:page-id": "~u6886b62b-1979-8195-8007-8d0b92d3116b",
"~:operations": [
{
"~:type": "~:set",
"~:attr": "~:width",
"~:val": 100.00000353902578,
"~:ignore-geometry": false,
"~:ignore-touched": false
},
{
"~:type": "~:set",
"~:attr": "~:points",
"~:val": [
{
"~#point": {
"~:x": 0,
"~:y": 79.00000333786011
}
},
{
"~#point": {
"~:x": 100.00000353902578,
"~:y": 79.00000333786011
}
},
{
"~#point": {
"~:x": 100.00000353902578,
"~:y": 335.00001430511475
}
},
{
"~#point": {
"~:x": 0,
"~:y": 335.00001430511475
}
}
],
"~:ignore-geometry": false,
"~:ignore-touched": false
},
{
"~:type": "~:set",
"~:attr": "~:selrect",
"~:val": {
"~#rect": {
"~:x": 0,
"~:y": 79.00000333786011,
"~:width": 100.00000353902578,
"~:height": 256.00001096725464,
"~:x1": 0,
"~:y1": 79.00000333786011,
"~:x2": 100.00000353902578,
"~:y2": 335.00001430511475
}
},
"~:ignore-geometry": false,
"~:ignore-touched": false
}
]
},
{
"~:type": "~:mod-obj",
"~:id": "~ud601cd4c-f774-802c-8007-8d0c13228bba",
"~:page-id": "~u6886b62b-1979-8195-8007-8d0b92d3116b",
"~:operations": [
{
"~:type": "~:set",
"~:attr": "~:applied-tokens",
"~:val": {
"~:height": "any-dimensions-token"
},
"~:ignore-geometry": false,
"~:ignore-touched": false
}
]
},
{
"~:type": "~:mod-obj",
"~:id": "~ud601cd4c-f774-802c-8007-8d0c13228bba",
"~:page-id": "~u6886b62b-1979-8195-8007-8d0b92d3116b",
"~:operations": [
{
"~:type": "~:set",
"~:attr": "~:y",
"~:val": 79.00000276416532,
"~:ignore-geometry": false,
"~:ignore-touched": false
},
{
"~:type": "~:set",
"~:attr": "~:points",
"~:val": [
{
"~#point": {
"~:x": 0,
"~:y": 79.0000027641653
}
},
{
"~#point": {
"~:x": 100.00000353902578,
"~:y": 79.0000027641653
}
},
{
"~#point": {
"~:x": 100.00000353902578,
"~:y": 178.9999994188543
}
},
{
"~#point": {
"~:x": 0,
"~:y": 178.9999994188543
}
}
],
"~:ignore-geometry": false,
"~:ignore-touched": false
},
{
"~:type": "~:set",
"~:attr": "~:selrect",
"~:val": {
"~#rect": {
"~:x": 0,
"~:y": 79.00000276416532,
"~:width": 100.00000353902578,
"~:height": 99.99999665468899,
"~:x1": 0,
"~:y1": 79.00000276416532,
"~:x2": 100.00000353902578,
"~:y2": 178.99999941885432
}
},
"~:ignore-geometry": false,
"~:ignore-touched": false
},
{
"~:type": "~:set",
"~:attr": "~:height",
"~:val": 99.99999665468899,
"~:ignore-geometry": false,
"~:ignore-touched": false
}
]
},
{
"~:type": "~:mod-obj",
"~:id": "~ud601cd4c-f774-802c-8007-8d0c13228bba",
"~:page-id": "~u6886b62b-1979-8195-8007-8d0b92d3116b",
"~:operations": [
{
"~:type": "~:set",
"~:attr": "~:applied-tokens",
"~:val": {},
"~:ignore-geometry": false,
"~:ignore-touched": false
}
]
}
]
},
{
"~:id": "~u6886b62b-1979-8195-8007-8d12e996895c",
"~:revn": 12,
"~:file-id": "~u6886b62b-1979-8195-8007-8d0b92d3116a",
"~:session-id": "~u488d46ff-4717-808d-8007-8d0c3dac344e",
"~:changes": [
{
"~:type": "~:mod-obj",
"~:id": "~ud601cd4c-f774-802c-8007-8d0c13228bba",
"~:page-id": "~u6886b62b-1979-8195-8007-8d0b92d3116b",
"~:operations": [
{
"~:type": "~:set",
"~:attr": "~:applied-tokens",
"~:val": {
"~:width": "any-dimensions-token",
"~:height": "any-dimensions-token"
},
"~:ignore-geometry": false,
"~:ignore-touched": false
}
]
},
{
"~:type": "~:mod-obj",
"~:id": "~ud601cd4c-f774-802c-8007-8d0c13228bba",
"~:page-id": "~u6886b62b-1979-8195-8007-8d0b92d3116b",
"~:operations": [
{
"~:type": "~:set",
"~:attr": "~:width",
"~:val": 256.0000033378599,
"~:ignore-geometry": false,
"~:ignore-touched": true
},
{
"~:type": "~:set",
"~:attr": "~:points",
"~:val": [
{
"~#point": {
"~:x": 0,
"~:y": 79.0000027641653
}
},
{
"~#point": {
"~:x": 256.0000033378599,
"~:y": 79.0000027641653
}
},
{
"~#point": {
"~:x": 256.0000033378599,
"~:y": 178.9999994188543
}
},
{
"~#point": {
"~:x": 0,
"~:y": 178.9999994188543
}
}
],
"~:ignore-geometry": false,
"~:ignore-touched": true
},
{
"~:type": "~:set",
"~:attr": "~:selrect",
"~:val": {
"~#rect": {
"~:x": 0,
"~:y": 79.00000276416532,
"~:width": 256.0000033378599,
"~:height": 99.99999665468899,
"~:x1": 0,
"~:y1": 79.00000276416532,
"~:x2": 256.0000033378599,
"~:y2": 178.99999941885432
}
},
"~:ignore-geometry": false,
"~:ignore-touched": true
}
]
},
{
"~:type": "~:mod-obj",
"~:id": "~ud601cd4c-f774-802c-8007-8d0c13228bba",
"~:page-id": "~u6886b62b-1979-8195-8007-8d0b92d3116b",
"~:operations": [
{
"~:type": "~:set",
"~:attr": "~:y",
"~:val": 79.00000826835657,
"~:ignore-geometry": false,
"~:ignore-touched": true
},
{
"~:type": "~:set",
"~:attr": "~:points",
"~:val": [
{
"~#point": {
"~:x": 0,
"~:y": 79.00000826835657
}
},
{
"~#point": {
"~:x": 256.0000033378599,
"~:y": 79.00000826835657
}
},
{
"~#point": {
"~:x": 256.0000033378599,
"~:y": 335.0000178241718
}
},
{
"~#point": {
"~:x": 0,
"~:y": 335.0000178241718
}
}
],
"~:ignore-geometry": false,
"~:ignore-touched": true
},
{
"~:type": "~:set",
"~:attr": "~:selrect",
"~:val": {
"~#rect": {
"~:x": 0,
"~:y": 79.00000826835657,
"~:width": 256.0000033378599,
"~:height": 256.0000095558152,
"~:x1": 0,
"~:y1": 79.00000826835657,
"~:x2": 256.0000033378599,
"~:y2": 335.0000178241718
}
},
"~:ignore-geometry": false,
"~:ignore-touched": true
},
{
"~:type": "~:set",
"~:attr": "~:height",
"~:val": 256.0000095558152,
"~:ignore-geometry": false,
"~:ignore-touched": true
}
]
}
]
}
]
}

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

@ -1,4 +1,5 @@
import { test, expect } from "@playwright/test"; import { test, expect } from "@playwright/test";
import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage";
import { WasmWorkspacePage } from "../../pages/WasmWorkspacePage"; import { WasmWorkspacePage } from "../../pages/WasmWorkspacePage";
import { import {
setupTokensFileRender, setupTokensFileRender,
@ -8,9 +9,7 @@ import {
test.beforeEach(async ({ page }) => { test.beforeEach(async ({ page }) => {
await WasmWorkspacePage.init(page); await WasmWorkspacePage.init(page);
await WasmWorkspacePage.mockConfigFlags(page, [ await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json");
"enable-feature-design-tokens-v1",
]);
}); });
test.describe("Tokens: Apply token", () => { test.describe("Tokens: Apply token", () => {
@ -31,7 +30,7 @@ test.describe("Tokens: Apply token", () => {
unfoldTokenTree(tokensSidebar, "color", "colors.black"); unfoldTokenTree(tokensSidebar, "color", "colors.black");
await tokensSidebar await tokensSidebar
.getByRole("checkbox", { name: "black" }) .getByRole("button", { name: "black" })
.click({ button: "right" }); .click({ button: "right" });
await tokenContextMenuForToken.getByText("Fill").click(); await tokenContextMenuForToken.getByText("Fill").click();
@ -63,12 +62,12 @@ test.describe("Tokens: Apply token", () => {
).toBeVisible(); ).toBeVisible();
await tokensSidebar.getByRole("button", { name: "borderRadius" }).click(); await tokensSidebar.getByRole("button", { name: "borderRadius" }).click();
await expect( await expect(
tokensSidebar.getByRole("checkbox", { name: "borderRadius.sm" }), tokensSidebar.getByRole("button", { name: "borderRadius.sm" }),
).toBeVisible(); ).toBeVisible();
// Apply border radius token from token panels // Apply border radius token from token panels
await tokensSidebar await tokensSidebar
.getByRole("checkbox", { name: "borderRadius.sm" }) .getByRole("button", { name: "borderRadius.sm" })
.click(); .click();
// Check if border radius sections is visible on right sidebar // Check if border radius sections is visible on right sidebar
@ -107,7 +106,7 @@ test.describe("Tokens: Apply token", () => {
test("User applies opacity token to a shape from sidebar", async ({ test("User applies opacity token to a shape from sidebar", async ({
page, page,
}) => { }) => {
const { workspacePage, tokensSidebar } = const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
await setupTokensFileRender(page); await setupTokensFileRender(page);
await page.getByRole("tab", { name: "Layers" }).click(); await page.getByRole("tab", { name: "Layers" }).click();
@ -127,11 +126,11 @@ test.describe("Tokens: Apply token", () => {
.getByRole("button", { name: "opacity", exact: true }) .getByRole("button", { name: "opacity", exact: true })
.click(); .click();
await expect( await expect(
tokensSidebar.getByRole("checkbox", { name: "opacity.high" }), tokensSidebar.getByRole("button", { name: "opacity.high" }),
).toBeVisible(); ).toBeVisible();
// Apply opacity token from token panels // Apply opacity token from token panels
await tokensSidebar.getByRole("checkbox", { name: "opacity.high" }).click(); await tokensSidebar.getByRole("button", { name: "opacity.high" }).click();
// Check if opacity sections is visible on right sidebar // Check if opacity sections is visible on right sidebar
const layerMenuSection = page.getByRole("region", { const layerMenuSection = page.getByRole("region", {
@ -171,7 +170,8 @@ test.describe("Tokens: Apply token", () => {
}); });
test("User applies typography token to a text shape", async ({ page }) => { test("User applies typography token to a text shape", async ({ page }) => {
const { workspacePage, tokensSidebar } = await setupTypographyTokensFileRender(page); const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
await setupTypographyTokensFileRender(page);
await page.getByRole("tab", { name: "Layers" }).click(); await page.getByRole("tab", { name: "Layers" }).click();
@ -188,7 +188,7 @@ test.describe("Tokens: Apply token", () => {
.filter({ hasText: "Typography" }) .filter({ hasText: "Typography" })
.click(); .click();
await tokensSidebar.getByRole("checkbox", { name: "Full" }).click(); await tokensSidebar.getByRole("button", { name: "Full" }).click();
const fontSizeInput = workspacePage.rightSidebar.getByRole("textbox", { const fontSizeInput = workspacePage.rightSidebar.getByRole("textbox", {
name: "Font Size", name: "Font Size",
@ -204,6 +204,7 @@ test.describe("Tokens: Apply token", () => {
tokensUpdateCreateModal, tokensUpdateCreateModal,
tokensSidebar, tokensSidebar,
workspacePage, workspacePage,
tokenContextMenuForToken,
} = await setupTokensFileRender(page, { flags: ["enable-token-shadow"] }); } = await setupTokensFileRender(page, { flags: ["enable-token-shadow"] });
const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" }); const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
@ -467,7 +468,7 @@ test.describe("Tokens: Apply token", () => {
unfoldTokenTree(tokensSidebar, "shadow", "primary"); unfoldTokenTree(tokensSidebar, "shadow", "primary");
// Verify token appears in sidebar // Verify token appears in sidebar
const shadowToken = tokensSidebar.getByRole("checkbox", { const shadowToken = tokensSidebar.getByRole("button", {
name: "primary", name: "primary",
}); });
await expect(shadowToken).toBeEnabled(); await expect(shadowToken).toBeEnabled();
@ -489,7 +490,8 @@ test.describe("Tokens: Apply token", () => {
test("User applies dimension token to a shape on width and height", async ({ test("User applies dimension token to a shape on width and height", async ({
page, page,
}) => { }) => {
const { workspacePage, tokensSidebar } = await setupTokensFileRender(page); const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
await setupTokensFileRender(page);
// Unfolds dimensions on token panel // Unfolds dimensions on token panel
await page.getByRole("tab", { name: "Layers" }).click(); await page.getByRole("tab", { name: "Layers" }).click();
@ -502,7 +504,7 @@ test.describe("Tokens: Apply token", () => {
unfoldTokenTree(tokensSidebar, "dimensions", "dimension.dimension.sm"); unfoldTokenTree(tokensSidebar, "dimensions", "dimension.dimension.sm");
// Apply token to width and height token from token panel // Apply token to width and height token from token panel
await tokensSidebar.getByRole("checkbox", { name: "dimension.sm" }).click(); await tokensSidebar.getByRole("button", { name: "dimension.sm" }).click();
// Check if measures sections is visible on right sidebar // Check if measures sections is visible on right sidebar
const measuresSection = page.getByRole("region", { const measuresSection = page.getByRole("region", {
@ -556,7 +558,7 @@ test.describe("Tokens: Apply token", () => {
// Apply token to width and height token from token panel // Apply token to width and height token from token panel
await tokensSidebar await tokensSidebar
.getByRole("checkbox", { name: "dimension.sm" }) .getByRole("button", { name: "dimension.sm" })
.click({ button: "right" }); .click({ button: "right" });
await tokenContextMenuForToken.getByText("AxisX").click(); await tokenContextMenuForToken.getByText("AxisX").click();
@ -612,7 +614,7 @@ test.describe("Tokens: Apply token", () => {
// Apply token to width and height token from token panel // Apply token to width and height token from token panel
await tokensSidebar await tokensSidebar
.getByRole("checkbox", { name: "dimension.sm" }) .getByRole("button", { name: "dimension.sm" })
.click({ button: "right" }); .click({ button: "right" });
await tokenContextMenuForToken.getByText("Y").click(); await tokenContextMenuForToken.getByText("Y").click();
@ -668,7 +670,7 @@ test.describe("Tokens: Apply token", () => {
// Apply token to width and height token from token panel // Apply token to width and height token from token panel
await tokensSidebar await tokensSidebar
.getByRole("checkbox", { name: "dimension.xs" }) .getByRole("button", { name: "dimension.xs" })
.click({ button: "right" }); .click({ button: "right" });
await tokenContextMenuForToken.getByText("Border radius").hover(); await tokenContextMenuForToken.getByText("Border radius").hover();
await tokenContextMenuForToken.getByText("RadiusAll").click(); await tokenContextMenuForToken.getByText("RadiusAll").click();
@ -730,9 +732,9 @@ test.describe("Tokens: Apply token", () => {
await page.getByRole("button", { name: "Stroke Width 2" }).click(); await page.getByRole("button", { name: "Stroke Width 2" }).click();
const tokensSidebar = workspace.tokensSidebar; const tokensSidebar = workspace.tokensSidebar;
await expect( await expect(
tokensSidebar.getByRole("checkbox", { name: "width-big" }), tokensSidebar.getByRole("button", { name: "width-big" }),
).toBeVisible(); ).toBeVisible();
await tokensSidebar.getByRole("checkbox", { name: "width-big" }).click(); await tokensSidebar.getByRole("button", { name: "width-big" }).click();
// Check if token pill is visible on right sidebar // Check if token pill is visible on right sidebar
const strokeSectionSidebar = rightSidebar.getByRole("region", { const strokeSectionSidebar = rightSidebar.getByRole("region", {
@ -741,17 +743,17 @@ test.describe("Tokens: Apply token", () => {
await expect(strokeSectionSidebar).toBeVisible(); await expect(strokeSectionSidebar).toBeVisible();
const firstStrokeRow = strokeSectionSidebar.getByLabel("stroke-row-0"); const firstStrokeRow = strokeSectionSidebar.getByLabel("stroke-row-0");
await expect(firstStrokeRow).toBeVisible(); await expect(firstStrokeRow).toBeVisible();
const strokeWidthPill = firstStrokeRow.getByRole("button", { const StrokeWidthPill = firstStrokeRow.getByRole("button", {
name: "width-big", name: "width-big",
}); });
await expect(strokeWidthPill).toBeVisible(); await expect(StrokeWidthPill).toBeVisible();
// Detach token from right sidebar and apply another from dropdown // Detach token from right sidebar and apply another from dropdown
const detachButton = firstStrokeRow.getByRole("button", { const detachButton = firstStrokeRow.getByRole("button", {
name: "Detach token", name: "Detach token",
}); });
await detachButton.click(); await detachButton.click();
await expect(strokeWidthPill).not.toBeVisible(); await expect(StrokeWidthPill).not.toBeVisible();
const tokenDropdown = firstStrokeRow.getByRole("button", { const tokenDropdown = firstStrokeRow.getByRole("button", {
name: "Open token list", name: "Open token list",
@ -763,10 +765,10 @@ test.describe("Tokens: Apply token", () => {
}); });
await expect(widthOptionSmall).toBeVisible(); await expect(widthOptionSmall).toBeVisible();
await widthOptionSmall.click(); await widthOptionSmall.click();
const strokeWidthPillSmall = firstStrokeRow.getByRole("button", { const StrokeWidthPillSmall = firstStrokeRow.getByRole("button", {
name: "width-small", name: "width-small",
}); });
await expect(strokeWidthPillSmall).toBeVisible(); await expect(StrokeWidthPillSmall).toBeVisible();
}); });
test("User applies margin token to a shape", async ({ page }) => { test("User applies margin token to a shape", async ({ page }) => {
@ -800,10 +802,10 @@ test.describe("Tokens: Apply token", () => {
await page.getByRole("button", { name: "dim", exact: true }).click(); await page.getByRole("button", { name: "dim", exact: true }).click();
const tokensSidebar = workspace.tokensSidebar; const tokensSidebar = workspace.tokensSidebar;
await expect( await expect(
tokensSidebar.getByRole("checkbox", { name: "dim.md" }), tokensSidebar.getByRole("button", { name: "dim.md" }),
).toBeVisible(); ).toBeVisible();
await tokensSidebar await tokensSidebar
.getByRole("checkbox", { name: "dim.md" }) .getByRole("button", { name: "dim.md" })
.click({ button: "right" }); .click({ button: "right" });
await page await page
.getByTestId("tokens-context-menu-for-token") .getByTestId("tokens-context-menu-for-token")
@ -856,7 +858,8 @@ test.describe("Tokens: Detach token", () => {
test("User applies border-radius token to a shape from sidebar", async ({ test("User applies border-radius token to a shape from sidebar", async ({
page, page,
}) => { }) => {
const { workspacePage, tokensSidebar } = await setupTokensFileRender(page); const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
await setupTokensFileRender(page);
await page.getByRole("tab", { name: "Layers" }).click(); await page.getByRole("tab", { name: "Layers" }).click();
@ -873,12 +876,12 @@ test.describe("Tokens: Detach token", () => {
).toBeVisible(); ).toBeVisible();
await tokensSidebar.getByRole("button", { name: "borderRadius" }).click(); await tokensSidebar.getByRole("button", { name: "borderRadius" }).click();
await expect( await expect(
tokensSidebar.getByRole("checkbox", { name: "borderRadius.sm" }), tokensSidebar.getByRole("button", { name: "borderRadius.sm" }),
).toBeVisible(); ).toBeVisible();
// Apply border radius token from token panels // Apply border radius token from token panels
await tokensSidebar await tokensSidebar
.getByRole("checkbox", { name: "borderRadius.sm" }) .getByRole("button", { name: "borderRadius.sm" })
.click(); .click();
// Check if border radius sections is visible on right sidebar // Check if border radius sections is visible on right sidebar
@ -896,7 +899,7 @@ test.describe("Tokens: Detach token", () => {
// Rename token // Rename token
await tokensSidebar await tokensSidebar
.getByRole("checkbox", { name: "borderRadius.sm" }) .getByRole("button", { name: "borderRadius.sm" })
.click({ button: "right" }); .click({ button: "right" });
await expect(page.getByText("Edit token")).toBeVisible(); await expect(page.getByText("Edit token")).toBeVisible();
await page.getByText("Edit token").click(); await page.getByText("Edit token").click();

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

@ -1,5 +1,6 @@
import { test, expect } from "@playwright/test"; import { test, expect } from "@playwright/test";
import { WasmWorkspacePage } from "../../pages/WasmWorkspacePage"; import { WasmWorkspacePage } from "../../pages/WasmWorkspacePage";
import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage";
import { import {
setupEmptyTokensFileRender, setupEmptyTokensFileRender,
setupTokensFileRender, setupTokensFileRender,
@ -10,9 +11,7 @@ import {
test.beforeEach(async ({ page }) => { test.beforeEach(async ({ page }) => {
await WasmWorkspacePage.init(page); await WasmWorkspacePage.init(page);
await WasmWorkspacePage.mockConfigFlags(page, [ await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json");
"enable-feature-design-tokens-v1",
]);
}); });
test.describe("Tokens - creation", () => { test.describe("Tokens - creation", () => {
@ -38,7 +37,7 @@ test.describe("Tokens - creation", () => {
const missingReferenceError = "Missing token references"; const missingReferenceError = "Missing token references";
const { tokensUpdateCreateModal, tokenThemesSetsSidebar } = const { tokensUpdateCreateModal, tokenThemesSetsSidebar } =
await setupEmptyTokensFileRender(page , { await setupEmptyTokensFileRender(page, {
flags: ["enable-token-combobox", "enable-feature-token-input"], flags: ["enable-token-combobox", "enable-feature-token-input"],
}); });
@ -85,7 +84,7 @@ test.describe("Tokens - creation", () => {
await submitButton.click(); await submitButton.click();
await expect( await expect(
tokensTabPanel.getByRole('checkbox', { name: 'my-token' }), tokensTabPanel.getByRole('button', { name: 'my-token' }),
).toBeEnabled(); ).toBeEnabled();
// Create second token referencing the first one using the combobox options // Create second token referencing the first one using the combobox options
@ -331,14 +330,14 @@ test.describe("Tokens - creation", () => {
await submitButton.press("Enter"); await submitButton.press("Enter");
await expect( await expect(
tokensSidebar.getByRole("checkbox", { tokensSidebar.getByRole("button", {
name: "secondary", name: "secondary",
}), }),
).toBeEnabled(); ).toBeEnabled();
// Tokens tab panel should have two tokens with the color red / #ff0000 // Tokens tab panel should have two tokens with the color red / #ff0000
await expect( await expect(
tokensSidebar.getByRole("checkbox", { name: "#ff0000" }), tokensSidebar.getByRole("button", { name: "#ff0000" }),
).toHaveCount(2); ).toHaveCount(2);
// Global set has been auto created and is active // Global set has been auto created and is active
@ -479,7 +478,7 @@ test.describe("Tokens - creation", () => {
await submitButton.click(); await submitButton.click();
await expect( await expect(
tokensTabPanel.getByRole("checkbox", { name: "my-token" }), tokensTabPanel.getByRole("button", { name: "my-token" }),
).toBeEnabled(); ).toBeEnabled();
// //
@ -520,7 +519,7 @@ test.describe("Tokens - creation", () => {
await submitButton.click(); await submitButton.click();
await expect( await expect(
tokensTabPanel.getByRole("checkbox", { name: "my-token-2" }), tokensTabPanel.getByRole("button", { name: "my-token-2" }),
).toBeEnabled(); ).toBeEnabled();
// //
@ -537,7 +536,7 @@ test.describe("Tokens - creation", () => {
await submitButton.click(); await submitButton.click();
await expect( await expect(
tokensTabPanel.getByRole("checkbox", { name: "my-token-3" }), tokensTabPanel.getByRole("button", { name: "my-token-3" }),
).toBeEnabled(); ).toBeEnabled();
}); });
@ -633,7 +632,7 @@ test.describe("Tokens - creation", () => {
await submitButton.click(); await submitButton.click();
await expect( await expect(
tokensTabPanel.getByRole("checkbox", { name: "my-token" }), tokensTabPanel.getByRole("button", { name: "my-token" }),
).toBeEnabled(); ).toBeEnabled();
// //
@ -653,7 +652,7 @@ test.describe("Tokens - creation", () => {
await submitButton.click(); await submitButton.click();
await expect( await expect(
tokensTabPanel.getByRole("checkbox", { name: "my-token-2" }), tokensTabPanel.getByRole("button", { name: "my-token-2" }),
).toBeEnabled(); ).toBeEnabled();
// //
@ -673,7 +672,7 @@ test.describe("Tokens - creation", () => {
await submitButton.click(); await submitButton.click();
await expect( await expect(
tokensTabPanel.getByRole("checkbox", { name: "my-token-3" }), tokensTabPanel.getByRole("button", { name: "my-token-3" }),
).toBeEnabled(); ).toBeEnabled();
}); });
@ -684,7 +683,8 @@ test.describe("Tokens - creation", () => {
const selfReferenceError = "Token has self reference"; const selfReferenceError = "Token has self reference";
const missingReferenceError = "Missing token references"; const missingReferenceError = "Missing token references";
const { tokensUpdateCreateModal } = await setupEmptyTokensFileRender(page); const { tokensUpdateCreateModal, tokenThemesSetsSidebar } =
await setupEmptyTokensFileRender(page);
// Open modal // Open modal
const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" }); const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
@ -768,7 +768,7 @@ test.describe("Tokens - creation", () => {
await submitButton.click(); await submitButton.click();
await expect( await expect(
tokensTabPanel.getByRole("checkbox", { name: "my-token" }), tokensTabPanel.getByRole("button", { name: "my-token" }),
).toBeEnabled(); ).toBeEnabled();
// //
@ -788,7 +788,7 @@ test.describe("Tokens - creation", () => {
await submitButton.click(); await submitButton.click();
await expect( await expect(
tokensTabPanel.getByRole("checkbox", { name: "my-token-2" }), tokensTabPanel.getByRole("button", { name: "my-token-2" }),
).toBeEnabled(); ).toBeEnabled();
}); });
@ -799,7 +799,7 @@ test.describe("Tokens - creation", () => {
const selfReferenceError = "Token has self reference"; const selfReferenceError = "Token has self reference";
const missingReferenceError = "Missing token references"; const missingReferenceError = "Missing token references";
const { tokensUpdateCreateModal } = const { tokensUpdateCreateModal, tokenThemesSetsSidebar } =
await setupEmptyTokensFileRender(page); await setupEmptyTokensFileRender(page);
// Open modal // Open modal
@ -886,7 +886,7 @@ test.describe("Tokens - creation", () => {
await submitButton.click(); await submitButton.click();
await expect( await expect(
tokensTabPanel.getByRole("checkbox", { name: "my-token" }), tokensTabPanel.getByRole("button", { name: "my-token" }),
).toBeEnabled(); ).toBeEnabled();
// //
@ -906,14 +906,14 @@ test.describe("Tokens - creation", () => {
await submitButton.click(); await submitButton.click();
await expect( await expect(
tokensTabPanel.getByRole("checkbox", { name: "my-token-2" }), tokensTabPanel.getByRole("button", { name: "my-token-2" }),
).toBeEnabled(); ).toBeEnabled();
}); });
test("User creates shadow token", async ({ page }) => { test("User creates shadow token", async ({ page }) => {
const emptyNameError = "Name should be at least 1 character"; const emptyNameError = "Name should be at least 1 character";
const { tokensUpdateCreateModal } = const { tokensUpdateCreateModal, tokenThemesSetsSidebar } =
await setupEmptyTokensFileRender(page, { flags: ["enable-token-shadow"] }); await setupEmptyTokensFileRender(page, { flags: ["enable-token-shadow"] });
// Open modal // Open modal
@ -1050,7 +1050,7 @@ test.describe("Tokens - creation", () => {
await submitButton.click(); await submitButton.click();
await expect( await expect(
tokensTabPanel.getByRole("checkbox", { name: "my-token" }), tokensTabPanel.getByRole("button", { name: "my-token" }),
).toBeEnabled(); ).toBeEnabled();
// //
@ -1087,14 +1087,14 @@ test.describe("Tokens - creation", () => {
await expect(submitButton).toBeEnabled(); await expect(submitButton).toBeEnabled();
await submitButton.click(); await submitButton.click();
await expect( await expect(
tokensTabPanel.getByRole("checkbox", { name: "my-token-2" }), tokensTabPanel.getByRole("button", { name: "my-token-2" }),
).toBeEnabled(); ).toBeEnabled();
}); });
test("User can't submit empty typography token or reference", async ({ test("User cant submit empty typography token or reference", async ({
page, page,
}) => { }) => {
const { tokensUpdateCreateModal } = const { tokensUpdateCreateModal, tokenThemesSetsSidebar, tokensSidebar } =
await setupTypographyTokensFileRender(page); await setupTypographyTokensFileRender(page);
const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" }); const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
@ -1129,7 +1129,7 @@ test.describe("Tokens - creation", () => {
test("User creates shadow token with negative spread", async ({ page }) => { test("User creates shadow token with negative spread", async ({ page }) => {
const emptyNameError = "Name should be at least 1 character"; const emptyNameError = "Name should be at least 1 character";
const { tokensUpdateCreateModal } = const { tokensUpdateCreateModal, tokenThemesSetsSidebar } =
await setupEmptyTokensFileRender(page, { flags: ["enable-token-shadow"] }); await setupEmptyTokensFileRender(page, { flags: ["enable-token-shadow"] });
// Open modal // Open modal
@ -1271,7 +1271,7 @@ test.describe("Tokens - creation", () => {
await submitButton.click(); await submitButton.click();
await expect( await expect(
tokensTabPanel.getByRole("checkbox", { name: "my-token" }), tokensTabPanel.getByRole("button", { name: "my-token" }),
).toBeEnabled(); ).toBeEnabled();
// //
@ -1308,13 +1308,14 @@ test.describe("Tokens - creation", () => {
await expect(submitButton).toBeEnabled(); await expect(submitButton).toBeEnabled();
await submitButton.click(); await submitButton.click();
await expect( await expect(
tokensTabPanel.getByRole("checkbox", { name: "my-token-2" }), tokensTabPanel.getByRole("button", { name: "my-token-2" }),
).toBeEnabled(); ).toBeEnabled();
}); });
test("User creates typography token", async ({ page }) => { test("User creates typography token", async ({ page }) => {
const emptyNameError = "Name should be at least 1 character"; const emptyNameError = "Name should be at least 1 character";
const { tokensUpdateCreateModal } = await setupEmptyTokensFileRender(page); const { tokensUpdateCreateModal, tokenThemesSetsSidebar } =
await setupEmptyTokensFileRender(page);
// Open modal // Open modal
const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" }); const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
@ -1514,7 +1515,7 @@ test.describe("Tokens - creation", () => {
await submitButton.click(); await submitButton.click();
await expect( await expect(
tokensTabPanel.getByRole("checkbox", { name: "my-token" }), tokensTabPanel.getByRole("button", { name: "my-token" }),
).toBeEnabled(); ).toBeEnabled();
// //
@ -1555,12 +1556,12 @@ test.describe("Tokens - creation", () => {
await expect(submitButton).toBeEnabled(); await expect(submitButton).toBeEnabled();
await submitButton.click(); await submitButton.click();
await expect( await expect(
tokensTabPanel.getByRole("checkbox", { name: "my-token-2" }), tokensTabPanel.getByRole("button", { name: "my-token-2" }),
).toBeEnabled(); ).toBeEnabled();
}); });
test("User adds typography token with reference", async ({ page }) => { test("User adds typography token with reference", async ({ page }) => {
const { tokensUpdateCreateModal, tokensSidebar } = const { tokensUpdateCreateModal, tokenThemesSetsSidebar, tokensSidebar } =
await setupTypographyTokensFileRender(page); await setupTypographyTokensFileRender(page);
const newTokenTitle = "NewReference"; const newTokenTitle = "NewReference";
@ -1602,7 +1603,7 @@ test.describe("Tokens - creation", () => {
await expect(tokensUpdateCreateModal).not.toBeVisible(); await expect(tokensUpdateCreateModal).not.toBeVisible();
const newToken = tokensSidebar.getByRole("checkbox", { const newToken = tokensSidebar.getByRole("button", {
name: newTokenTitle, name: newTokenTitle,
}); });
@ -1610,7 +1611,7 @@ test.describe("Tokens - creation", () => {
}); });
test("User creates grouped color token", async ({ page }) => { test("User creates grouped color token", async ({ page }) => {
const { tokensUpdateCreateModal, tokensSidebar } = const { workspacePage, tokensUpdateCreateModal, tokensSidebar } =
await setupEmptyTokensFileRender(page); await setupEmptyTokensFileRender(page);
await tokensSidebar await tokensSidebar
@ -1641,7 +1642,7 @@ test.describe("Tokens - creation", () => {
await expect(tokensSidebar.getByLabel("primary")).toBeEnabled(); await expect(tokensSidebar.getByLabel("primary")).toBeEnabled();
}); });
test("User can't create regular token with value missing", async ({ test("User cant create regular token with value missing", async ({
page, page,
}) => { }) => {
const { tokensUpdateCreateModal } = await setupEmptyTokensFileRender(page); const { tokensUpdateCreateModal } = await setupEmptyTokensFileRender(page);
@ -1668,6 +1669,29 @@ test.describe("Tokens - creation", () => {
// Submit button should remain disabled when value is empty // Submit button should remain disabled when value is empty
await expect(submitButton).toBeDisabled(); await expect(submitButton).toBeDisabled();
}); });
test("User duplicate color token", async ({ page }) => {
const { tokensSidebar, tokenContextMenuForToken } =
await setupTokensFileRender(page);
await expect(tokensSidebar).toBeVisible();
unfoldTokenTree(tokensSidebar, "color", "colors.blue.100");
const colorToken = tokensSidebar.getByRole("button", {
name: "100",
});
await colorToken.click({ button: "right" });
await expect(tokenContextMenuForToken).toBeVisible();
await tokenContextMenuForToken.getByText("Duplicate token").click();
await expect(tokenContextMenuForToken).not.toBeVisible();
await expect(
tokensSidebar.getByRole("button", { name: "colors.blue.100-copy" }),
).toBeVisible();
});
}); });
test("User creates grouped color token", async ({ page }) => { test("User creates grouped color token", async ({ page }) => {
@ -1726,7 +1750,7 @@ test("User cant create regular token with value missing", async ({ page }) => {
await expect(submitButton).toBeDisabled(); await expect(submitButton).toBeDisabled();
}); });
test("User duplicates color token", async ({ page }) => { test("User duplicate color token", async ({ page }) => {
const { tokensSidebar, tokenContextMenuForToken } = const { tokensSidebar, tokenContextMenuForToken } =
await setupTokensFileRender(page); await setupTokensFileRender(page);
@ -1734,7 +1758,7 @@ test("User duplicates color token", async ({ page }) => {
unfoldTokenTree(tokensSidebar, "color", "colors.blue.100"); unfoldTokenTree(tokensSidebar, "color", "colors.blue.100");
const colorToken = tokensSidebar.getByRole("checkbox", { const colorToken = tokensSidebar.getByRole("button", {
name: "100", name: "100",
}); });
@ -1745,7 +1769,7 @@ test("User duplicates color token", async ({ page }) => {
await expect(tokenContextMenuForToken).not.toBeVisible(); await expect(tokenContextMenuForToken).not.toBeVisible();
await expect( await expect(
tokensSidebar.getByRole("checkbox", { name: "colors.blue.100-copy" }), tokensSidebar.getByRole("button", { name: "colors.blue.100-copy" }),
).toBeVisible(); ).toBeVisible();
}); });
@ -1753,7 +1777,7 @@ test.describe("Tokens tab - edition", () => {
test("User edits typography token and all fields are valid", async ({ test("User edits typography token and all fields are valid", async ({
page, page,
}) => { }) => {
const { tokensUpdateCreateModal, tokensSidebar } = const { tokensUpdateCreateModal, tokenThemesSetsSidebar, tokensSidebar } =
await setupTypographyTokensFileRender(page); await setupTypographyTokensFileRender(page);
await tokensSidebar await tokensSidebar
@ -1762,7 +1786,7 @@ test.describe("Tokens tab - edition", () => {
.click(); .click();
// Open edit modal for "Full" typography token // Open edit modal for "Full" typography token
const token = tokensSidebar.getByRole("checkbox", { name: "Full" }); const token = tokensSidebar.getByRole("button", { name: "Full" });
await token.click({ button: "right" }); await token.click({ button: "right" });
await page.getByText("Edit token").click(); await page.getByText("Edit token").click();
@ -1856,7 +1880,7 @@ test.describe("Tokens tab - edition", () => {
await unfoldTokenTree(tokensSidebar, "color", "colors.blue.100"); await unfoldTokenTree(tokensSidebar, "color", "colors.blue.100");
const colorToken = tokensSidebar.getByRole("checkbox", { const colorToken = tokensSidebar.getByRole("button", {
name: "100", name: "100",
}); });
@ -1877,7 +1901,7 @@ test.describe("Tokens tab - edition", () => {
await unfoldTokenTree(tokensSidebar, "color", "colors.blue.100.changed"); await unfoldTokenTree(tokensSidebar, "color", "colors.blue.100.changed");
const colorTokenChanged = tokensSidebar.getByRole("checkbox", { const colorTokenChanged = tokensSidebar.getByRole("button", {
name: "changed", name: "changed",
}); });
await expect(colorTokenChanged).toBeVisible(); await expect(colorTokenChanged).toBeVisible();
@ -1940,7 +1964,7 @@ test.describe("Tokens tab - edition", () => {
}); });
test.describe("Tokens tab - delete", () => { test.describe("Tokens tab - delete", () => {
test("User deletes color token", async ({ page }) => { test("User delete color token", async ({ page }) => {
const { tokensSidebar, tokenContextMenuForToken } = const { tokensSidebar, tokenContextMenuForToken } =
await setupTokensFileRender(page); await setupTokensFileRender(page);
@ -1948,7 +1972,7 @@ test.describe("Tokens tab - delete", () => {
unfoldTokenTree(tokensSidebar, "color", "colors.blue.100"); unfoldTokenTree(tokensSidebar, "color", "colors.blue.100");
const colorToken = tokensSidebar.getByRole("checkbox", { const colorToken = tokensSidebar.getByRole("button", {
name: "100", name: "100",
}); });
await expect(colorToken).toBeVisible(); await expect(colorToken).toBeVisible();
@ -1974,7 +1998,7 @@ test.describe("Tokens tab - delete", () => {
name: "colors", name: "colors",
exact: true, exact: true,
}); });
const colorNodeToken = tokensSidebar.getByRole("checkbox", { const colorNodeToken = tokensSidebar.getByRole("button", {
name: "100", name: "100",
}); });

33
frontend/playwright/ui/specs/tokens/general.spec.js
View File

@ -1,12 +1,11 @@
import { test, expect } from "@playwright/test"; import { test, expect } from "@playwright/test";
import { WasmWorkspacePage } from "../../pages/WasmWorkspacePage"; import { WasmWorkspacePage } from "../../pages/WasmWorkspacePage";
import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage";
import { setupEmptyTokensFileRender } from "./helpers"; import { setupEmptyTokensFileRender } from "./helpers";
test.beforeEach(async ({ page }) => { test.beforeEach(async ({ page }) => {
await WasmWorkspacePage.init(page); await WasmWorkspacePage.init(page);
await WasmWorkspacePage.mockConfigFlags(page, [ await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json");
"enable-feature-design-tokens-v1",
]);
}); });
test.describe("Tokens tab - common tests", () => { test.describe("Tokens tab - common tests", () => {
@ -21,31 +20,3 @@ test.describe("Tokens tab - common tests", () => {
await expect(tokensTabPanel).toHaveText(/Themes/); await expect(tokensTabPanel).toHaveText(/Themes/);
}); });
}); });
test("BUG 13302 - Dimension token not being highlighted after applying it", async ({ page }) => {
const workspacePage = new WasmWorkspacePage(page);
await workspacePage.setupEmptyFile();
await workspacePage.mockGetFile("tokens/get-file-13302.json");
await workspacePage.mockRPC("update-file?id=*", "tokens/update-file-13302.json");
await workspacePage.goToWorkspace({
fileId: "6886b62b-1979-8195-8007-8d0b92d3116a",
pageId: "6886b62b-1979-8195-8007-8d0b92d3116b",
});
await workspacePage.clickLeafLayer("Rectangle");
await workspacePage.sidebar.getByRole("tab", { name: "Tokens" }).click();
await workspacePage.tokensSidebar
.getByRole("button", { name: "Dimensions 1" })
.click();
const token = workspacePage.tokensSidebar.getByRole("checkbox", { name: "any-dimensions-token" });
await token.click();
// FIXME: this is a bug somewhere else in tokens, this should be fully applied
// for a dimensions token
await expect(token).toBeChecked({ indeterminate: true });
});

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

@ -11,6 +11,10 @@ const setupEmptyTokensFile = async (page, options = {}) => {
} }
await workspacePage.setupEmptyFile(); await workspacePage.setupEmptyFile();
await workspacePage.mockRPC(
"get-team?id=*",
"workspace/get-team-tokens.json",
);
await workspacePage.mockRPC( await workspacePage.mockRPC(
"update-file?id=*", "update-file?id=*",
@ -46,6 +50,10 @@ const setupEmptyTokensFileRender = async (page, options = {}) => {
} }
await workspacePage.setupEmptyFile(); await workspacePage.setupEmptyFile();
await workspacePage.mockRPC(
"get-team?id=*",
"workspace/get-team-tokens.json",
);
await workspacePage.mockRPC( await workspacePage.mockRPC(
"update-file?id=*", "update-file?id=*",
@ -85,7 +93,10 @@ const setupTokensFile = async (page, options = {}) => {
} }
await workspacePage.setupEmptyFile(); await workspacePage.setupEmptyFile();
await workspacePage.mockRPC(
"get-team?id=*",
"workspace/get-team-tokens.json",
);
await workspacePage.mockRPC(/get\-file\?/, file); await workspacePage.mockRPC(/get\-file\?/, file);
await workspacePage.mockRPC(/get\-file\-fragment\?/, fileFragment); await workspacePage.mockRPC(/get\-file\-fragment\?/, fileFragment);
await workspacePage.mockRPC( await workspacePage.mockRPC(
@ -127,7 +138,10 @@ const setupTokensFileRender = async (page, options = {}) => {
} }
await workspacePage.setupEmptyFile(); await workspacePage.setupEmptyFile();
await workspacePage.mockRPC(
"get-team?id=*",
"workspace/get-team-tokens.json",
);
await workspacePage.mockRPC(/get\-file\?/, file); await workspacePage.mockRPC(/get\-file\?/, file);
await workspacePage.mockRPC(/get\-file\-fragment\?/, fileFragment); await workspacePage.mockRPC(/get\-file\-fragment\?/, fileFragment);
await workspacePage.mockRPC( await workspacePage.mockRPC(
@ -192,7 +206,8 @@ const testTokenCreationFlow = async (
const selfReferenceError = "Token has self reference"; const selfReferenceError = "Token has self reference";
const missingReferenceError = "Missing token references"; const missingReferenceError = "Missing token references";
const { tokensUpdateCreateModal } = await setupEmptyTokensFileRender(page); const { tokensUpdateCreateModal, tokenThemesSetsSidebar } =
await setupEmptyTokensFileRender(page);
// Open modal // Open modal
const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" }); const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
@ -273,7 +288,7 @@ const testTokenCreationFlow = async (
await submitButton.click(); await submitButton.click();
await expect( await expect(
tokensTabPanel.getByRole("checkbox", { name: "my-token" }), tokensTabPanel.getByRole("button", { name: "my-token" }),
).toBeEnabled(); ).toBeEnabled();
// //
@ -293,7 +308,7 @@ const testTokenCreationFlow = async (
await submitButton.click(); await submitButton.click();
await expect( await expect(
tokensTabPanel.getByRole("checkbox", { name: "my-token-2" }), tokensTabPanel.getByRole("button", { name: "my-token-2" }),
).toBeEnabled(); ).toBeEnabled();
}; };
@ -329,7 +344,7 @@ const unfoldTokenTree = async (tokensTabPanel, type, tokenName) => {
} }
await expect( await expect(
typeParentWrapper.getByRole("checkbox", { typeParentWrapper.getByRole("button", {
name: tokenLeafName, name: tokenLeafName,
}), }),
).toBeEnabled(); ).toBeEnabled();

57
frontend/playwright/ui/specs/tokens/remapping.spec.js
View File

@ -11,6 +11,7 @@ test.beforeEach(async ({ page }) => {
await WasmWorkspacePage.mockConfigFlags(page, [ await WasmWorkspacePage.mockConfigFlags(page, [
"enable-feature-design-tokens-v1", "enable-feature-design-tokens-v1",
]); ]);
await WasmWorkspacePage.mockRPC(page, "get-teams", "get-teams-tokens.json");
}); });
const createToken = async (page, type, name, textFieldName, value) => { const createToken = async (page, type, name, textFieldName, value) => {
@ -73,7 +74,7 @@ const renameToken = async (page, oldName, newName) => {
const { tokensUpdateCreateModal, tokensSidebar, tokenContextMenuForToken } = const { tokensUpdateCreateModal, tokensSidebar, tokenContextMenuForToken } =
await setupTokensFileRender(page, { flags: ["enable-token-shadow"] }); await setupTokensFileRender(page, { flags: ["enable-token-shadow"] });
const baseToken = tokensSidebar.getByRole("checkbox", { const baseToken = tokensSidebar.getByRole("button", {
name: oldName, name: oldName,
}); });
await baseToken.click({ button: "right" }); await baseToken.click({ button: "right" });
@ -158,10 +159,10 @@ test.describe("Remapping Tokens", () => {
// Verify token was renamed // Verify token was renamed
await expect( await expect(
tokensSidebar.getByRole("checkbox", { name: "foundation-shadow" }), tokensSidebar.getByRole("button", { name: "foundation-shadow" }),
).toBeVisible(); ).toBeVisible();
await expect( await expect(
tokensSidebar.getByRole("checkbox", { name: "derived-shadow" }), tokensSidebar.getByRole("button", { name: "derived-shadow" }),
).toBeVisible(); ).toBeVisible();
}); });
@ -194,13 +195,13 @@ test.describe("Remapping Tokens", () => {
.click(); .click();
await page.getByRole("tab", { name: "Tokens" }).click(); await page.getByRole("tab", { name: "Tokens" }).click();
const cardShadowToken = tokensSidebar.getByRole("checkbox", { const cardShadowToken = tokensSidebar.getByRole("button", {
name: "card-shadow", name: "card-shadow",
}); });
await cardShadowToken.click(); await cardShadowToken.click();
// Rename and update value of base token // Rename and update value of base token
const primaryToken = tokensSidebar.getByRole("checkbox", { const primaryToken = tokensSidebar.getByRole("button", {
name: "primary-shadow", name: "primary-shadow",
}); });
await primaryToken.click({ button: "right" }); await primaryToken.click({ button: "right" });
@ -232,12 +233,12 @@ test.describe("Remapping Tokens", () => {
// Verify base token was renamed // Verify base token was renamed
await expect( await expect(
tokensSidebar.getByRole("checkbox", { name: "main-shadow" }), tokensSidebar.getByRole("button", { name: "main-shadow" }),
).toBeVisible(); ).toBeVisible();
// Verify referenced token still exists // Verify referenced token still exists
await expect( await expect(
tokensSidebar.getByRole("checkbox", { name: "card-shadow" }), tokensSidebar.getByRole("button", { name: "card-shadow" }),
).toBeVisible(); ).toBeVisible();
// Verify the shape still has the token applied with the NEW name // Verify the shape still has the token applied with the NEW name
@ -274,7 +275,13 @@ test.describe("Remapping Tokens", () => {
test("User renames typography token with alias references", async ({ test("User renames typography token with alias references", async ({
page, page,
}) => { }) => {
const { tokensSidebar } = await setupTypographyTokensFileRender(page); const {
tokensUpdateCreateModal,
tokensSidebar,
tokenContextMenuForToken,
} = await setupTypographyTokensFileRender(page);
const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
// Create base typography token // Create base typography token
await createToken(page, "Typography", "base-text", "Font size", "16"); await createToken(page, "Typography", "base-text", "Font size", "16");
@ -301,10 +308,10 @@ test.describe("Remapping Tokens", () => {
// Verify token was renamed // Verify token was renamed
await expect( await expect(
tokensSidebar.getByRole("checkbox", { name: "default-text" }), tokensSidebar.getByRole("button", { name: "default-text" }),
).toBeVisible(); ).toBeVisible();
await expect( await expect(
tokensSidebar.getByRole("checkbox", { name: "body-text" }), tokensSidebar.getByRole("button", { name: "body-text" }),
).toBeVisible(); ).toBeVisible();
}); });
@ -357,13 +364,13 @@ test.describe("Remapping Tokens", () => {
.click(); .click();
await page.getByRole("tab", { name: "Tokens" }).click(); await page.getByRole("tab", { name: "Tokens" }).click();
const paragraphToken = tokensSidebar.getByRole("checkbox", { const paragraphToken = tokensSidebar.getByRole("button", {
name: "paragraph-style", name: "paragraph-style",
}); });
await paragraphToken.click(); await paragraphToken.click();
// Rename and update value of base token // Rename and update value of base token
const bodyToken = tokensSidebar.getByRole("checkbox", { const bodyToken = tokensSidebar.getByRole("button", {
name: "body-style", name: "body-style",
}); });
await bodyToken.click({ button: "right" }); await bodyToken.click({ button: "right" });
@ -395,12 +402,12 @@ test.describe("Remapping Tokens", () => {
// Verify base token was renamed // Verify base token was renamed
await expect( await expect(
tokensSidebar.getByRole("checkbox", { name: "text-base" }), tokensSidebar.getByRole("button", { name: "text-base" }),
).toBeVisible(); ).toBeVisible();
// Verify referenced token still exists // Verify referenced token still exists
await expect( await expect(
tokensSidebar.getByRole("checkbox", { name: "paragraph-style" }), tokensSidebar.getByRole("button", { name: "paragraph-style" }),
).toBeVisible(); ).toBeVisible();
// Verify the text shape still has the token applied with NEW name and value // Verify the text shape still has the token applied with NEW name and value
@ -460,10 +467,10 @@ test.describe("Remapping Tokens", () => {
// Verify token was renamed // Verify token was renamed
await expect( await expect(
tokensSidebar.getByRole("checkbox", { name: "primary-radius" }), tokensSidebar.getByRole("button", { name: "primary-radius" }),
).toBeVisible(); ).toBeVisible();
await expect( await expect(
tokensSidebar.getByRole("checkbox", { name: "card-radius" }), tokensSidebar.getByRole("button", { name: "card-radius" }),
).toBeVisible(); ).toBeVisible();
}); });
@ -497,7 +504,7 @@ test.describe("Remapping Tokens", () => {
); );
// Rename and update value of base token // Rename and update value of base token
const radiusToken = tokensSidebar.getByRole("checkbox", { const radiusToken = tokensSidebar.getByRole("button", {
name: "radius-sm", name: "radius-sm",
}); });
await radiusToken.click({ button: "right" }); await radiusToken.click({ button: "right" });
@ -527,17 +534,17 @@ test.describe("Remapping Tokens", () => {
// Verify base token was renamed // Verify base token was renamed
await expect( await expect(
tokensSidebar.getByRole("checkbox", { name: "radius-base" }), tokensSidebar.getByRole("button", { name: "radius-base" }),
).toBeVisible(); ).toBeVisible();
// Verify referenced token still exists // Verify referenced token still exists
await expect( await expect(
tokensSidebar.getByRole("checkbox", { name: "button-radius" }), tokensSidebar.getByRole("button", { name: "button-radius" }),
).toBeVisible(); ).toBeVisible();
// Verify the referenced token now points to the renamed token // Verify the referenced token now points to the renamed token
// by opening it and checking the reference // by opening it and checking the reference
const buttonRadiusToken = tokensSidebar.getByRole("checkbox", { const buttonRadiusToken = tokensSidebar.getByRole("button", {
name: "button-radius", name: "button-radius",
}); });
await buttonRadiusToken.click({ button: "right" }); await buttonRadiusToken.click({ button: "right" });
@ -580,11 +587,13 @@ test.describe("Remapping Tokens", () => {
// Verify token was renamed // Verify token was renamed
await expect( await expect(
tokensSidebar.getByRole("checkbox", { tokensSidebar.getByRole("button", {
name: "foundation-shadow", name: "foundation-shadow",
}), }),
).toBeVisible(); ).toBeVisible();
await expect(tokensSidebar.getByLabel("Missing reference")).toBeVisible(); await expect(
tokensSidebar.locator('[aria-label="Missing reference"]'),
).toBeVisible();
}); });
test("Cancel process - no changes applied", async ({ page }) => { test("Cancel process - no changes applied", async ({ page }) => {
@ -617,10 +626,10 @@ test.describe("Remapping Tokens", () => {
// Verify original token name still exists // Verify original token name still exists
await expect( await expect(
tokensSidebar.getByRole("checkbox", { name: "base-shadow" }), tokensSidebar.getByRole("button", { name: "base-shadow" }),
).toBeVisible(); ).toBeVisible();
await expect( await expect(
tokensSidebar.getByRole("checkbox", { name: "derived-shadow" }), tokensSidebar.getByRole("button", { name: "derived-shadow" }),
).toBeVisible(); ).toBeVisible();
}); });
}); });

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

@ -1,12 +1,11 @@
import { test, expect } from "@playwright/test"; import { test, expect } from "@playwright/test";
import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage";
import { WasmWorkspacePage } from "../../pages/WasmWorkspacePage"; import { WasmWorkspacePage } from "../../pages/WasmWorkspacePage";
import { setupEmptyTokensFileRender, setupTokensFileRender } from "./helpers"; import { setupEmptyTokensFileRender, setupTokensFileRender } from "./helpers";
test.beforeEach(async ({ page }) => { test.beforeEach(async ({ page }) => {
await WasmWorkspacePage.init(page); await WasmWorkspacePage.init(page);
await WasmWorkspacePage.mockConfigFlags(page, [ await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json");
"enable-feature-design-tokens-v1",
]);
}); });
test.describe("Tokens: Sets Tab", () => { test.describe("Tokens: Sets Tab", () => {
@ -18,11 +17,11 @@ test.describe("Tokens: Sets Tab", () => {
}; };
const createSet = async (sidebar, setName, finalKey = "Enter") => { const createSet = async (sidebar, setName, finalKey = "Enter") => {
sidebar const tokensTabButton = sidebar
.getByRole("button", { name: "Add set" }) .getByRole("button", { name: "Add set" })
.click(); .click();
await changeSetInput(sidebar, setName, finalKey); await changeSetInput(sidebar, setName, (finalKey = "Enter"));
}; };
const assertEmptySetsList = async (el) => { const assertEmptySetsList = async (el) => {
@ -45,7 +44,7 @@ test.describe("Tokens: Sets Tab", () => {
const { tokenThemesSetsSidebar, tokenContextMenuForSet } = const { tokenThemesSetsSidebar, tokenContextMenuForSet } =
await setupEmptyTokensFileRender(page); await setupEmptyTokensFileRender(page);
tokenThemesSetsSidebar const tokensTabButton = tokenThemesSetsSidebar
.getByRole("button", { name: "Add set" }) .getByRole("button", { name: "Add set" })
.click(); .click();
@ -139,10 +138,10 @@ test.describe("Tokens: Sets Tab", () => {
test("User can create & edit sets and set groups with an identical name", async ({ test("User can create & edit sets and set groups with an identical name", async ({
page, page,
}) => { }) => {
const { tokenThemesSetsSidebar } = const { tokenThemesSetsSidebar, tokenContextMenuForSet } =
await setupEmptyTokensFileRender(page); await setupEmptyTokensFileRender(page);
tokenThemesSetsSidebar const tokensTabButton = tokenThemesSetsSidebar
.getByRole("button", { name: "Add set" }) .getByRole("button", { name: "Add set" })
.click(); .click();
@ -219,7 +218,7 @@ test.describe("Tokens: Sets Tab", () => {
}); });
test("Display active set and verify if is enabled", async ({ page }) => { test("Display active set and verify if is enabled", async ({ page }) => {
const { tokenThemesSetsSidebar, tokensSidebar } = const { tokenThemesSetsSidebar, tokensSidebar, tokenSetItems } =
await setupTokensFileRender(page); await setupTokensFileRender(page);
// Create set // Create set

2
frontend/playwright/ui/specs/tokens/themes.spec.js
View File

@ -1,5 +1,6 @@
import { test, expect } from "@playwright/test"; import { test, expect } from "@playwright/test";
import { WasmWorkspacePage } from "../../pages/WasmWorkspacePage"; import { WasmWorkspacePage } from "../../pages/WasmWorkspacePage";
import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage";
import { setupEmptyTokensFileRender, setupTokensFileRender } from "./helpers"; import { setupEmptyTokensFileRender, setupTokensFileRender } from "./helpers";
// THEMES HELPERS // THEMES HELPERS
@ -26,6 +27,7 @@ test.beforeEach(async ({ page }) => {
await WasmWorkspacePage.mockConfigFlags(page, [ await WasmWorkspacePage.mockConfigFlags(page, [
"enable-feature-design-tokens-v1", "enable-feature-design-tokens-v1",
]); ]);
await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json");
}); });
test.describe("Tokens Themes", () => { test.describe("Tokens Themes", () => {

7
frontend/playwright/ui/specs/tokens/tree.spec.js
View File

@ -1,12 +1,11 @@
import { test, expect } from "@playwright/test"; import { test, expect } from "@playwright/test";
import { WasmWorkspacePage } from "../../pages/WasmWorkspacePage"; import { WasmWorkspacePage } from "../../pages/WasmWorkspacePage";
import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage";
import { setupTokensFileRender, unfoldTokenTree } from "./helpers"; import { setupTokensFileRender, unfoldTokenTree } from "./helpers";
test.beforeEach(async ({ page }) => { test.beforeEach(async ({ page }) => {
await WasmWorkspacePage.init(page); await WasmWorkspacePage.init(page);
await WasmWorkspacePage.mockConfigFlags(page, [ await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json");
"enable-feature-design-tokens-v1",
]);
}); });
test.describe("Tokens - node tree", () => { test.describe("Tokens - node tree", () => {
@ -23,7 +22,7 @@ test.describe("Tokens - node tree", () => {
await unfoldTokenTree(tokensSidebar, "color", "colors.blue.100"); await unfoldTokenTree(tokensSidebar, "color", "colors.blue.100");
const colorToken = tokensSidebar.getByRole("checkbox", { const colorToken = tokensSidebar.getByRole("button", {
name: "100", name: "100",
}); });
await expect(colorToken).toBeVisible(); await expect(colorToken).toBeVisible();

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

@ -191,7 +191,7 @@
full-applied? full-applied?
(if has-selected? (if has-selected?
(applied-all-attributes? token selected-shapes attributes) (applied-all-attributes? token selected-shapes attributes)
false) true)
applied? applied?
(if has-selected? (if has-selected?
@ -290,11 +290,6 @@
:token-pill-invalid-applied-viewer (and is-viewer? :token-pill-invalid-applied-viewer (and is-viewer?
(and full-applied? errors?))) (and full-applied? errors?)))
:type "button" :type "button"
:role "checkbox"
:aria-checked (cond
full-applied? "true"
half-applied? "mixed"
:else "false")
:on-focus on-hover :on-focus on-hover
:on-click on-click :on-click on-click