diff --git a/frontend/playwright/data/get-teams-tokens.json b/frontend/playwright/data/get-teams-tokens.json new file mode 100644 index 0000000000..7ec12f1877 --- /dev/null +++ b/frontend/playwright/data/get-teams-tokens.json @@ -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 + } +] diff --git a/frontend/playwright/data/tokens/get-file-13302.json b/frontend/playwright/data/tokens/get-file-13302.json deleted file mode 100644 index 1580c3d489..0000000000 --- a/frontend/playwright/data/tokens/get-file-13302.json +++ /dev/null @@ -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__" - ] - } - } - } - } -} \ No newline at end of file diff --git a/frontend/playwright/data/tokens/update-file-13302.json b/frontend/playwright/data/tokens/update-file-13302.json deleted file mode 100644 index 9bd9e68074..0000000000 --- a/frontend/playwright/data/tokens/update-file-13302.json +++ /dev/null @@ -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 - } - ] - } - ] - } - ] -} \ No newline at end of file diff --git a/frontend/playwright/ui/specs/tokens/apply.spec.js b/frontend/playwright/ui/specs/tokens/apply.spec.js index cbcdf03752..b52de56e16 100644 --- a/frontend/playwright/ui/specs/tokens/apply.spec.js +++ b/frontend/playwright/ui/specs/tokens/apply.spec.js @@ -1,4 +1,5 @@ import { test, expect } from "@playwright/test"; +import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage"; import { WasmWorkspacePage } from "../../pages/WasmWorkspacePage"; import { setupTokensFileRender, @@ -8,9 +9,7 @@ import { test.beforeEach(async ({ page }) => { await WasmWorkspacePage.init(page); - await WasmWorkspacePage.mockConfigFlags(page, [ - "enable-feature-design-tokens-v1", - ]); + await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json"); }); test.describe("Tokens: Apply token", () => { @@ -31,7 +30,7 @@ test.describe("Tokens: Apply token", () => { unfoldTokenTree(tokensSidebar, "color", "colors.black"); await tokensSidebar - .getByRole("checkbox", { name: "black" }) + .getByRole("button", { name: "black" }) .click({ button: "right" }); await tokenContextMenuForToken.getByText("Fill").click(); @@ -63,12 +62,12 @@ test.describe("Tokens: Apply token", () => { ).toBeVisible(); await tokensSidebar.getByRole("button", { name: "borderRadius" }).click(); await expect( - tokensSidebar.getByRole("checkbox", { name: "borderRadius.sm" }), + tokensSidebar.getByRole("button", { name: "borderRadius.sm" }), ).toBeVisible(); // Apply border radius token from token panels await tokensSidebar - .getByRole("checkbox", { name: "borderRadius.sm" }) + .getByRole("button", { name: "borderRadius.sm" }) .click(); // 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 ({ page, }) => { - const { workspacePage, tokensSidebar } = + const { workspacePage, tokensSidebar, tokenContextMenuForToken } = await setupTokensFileRender(page); await page.getByRole("tab", { name: "Layers" }).click(); @@ -127,11 +126,11 @@ test.describe("Tokens: Apply token", () => { .getByRole("button", { name: "opacity", exact: true }) .click(); await expect( - tokensSidebar.getByRole("checkbox", { name: "opacity.high" }), + tokensSidebar.getByRole("button", { name: "opacity.high" }), ).toBeVisible(); // 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 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 }) => { - const { workspacePage, tokensSidebar } = await setupTypographyTokensFileRender(page); + const { workspacePage, tokensSidebar, tokenContextMenuForToken } = + await setupTypographyTokensFileRender(page); await page.getByRole("tab", { name: "Layers" }).click(); @@ -188,7 +188,7 @@ test.describe("Tokens: Apply token", () => { .filter({ hasText: "Typography" }) .click(); - await tokensSidebar.getByRole("checkbox", { name: "Full" }).click(); + await tokensSidebar.getByRole("button", { name: "Full" }).click(); const fontSizeInput = workspacePage.rightSidebar.getByRole("textbox", { name: "Font Size", @@ -204,6 +204,7 @@ test.describe("Tokens: Apply token", () => { tokensUpdateCreateModal, tokensSidebar, workspacePage, + tokenContextMenuForToken, } = await setupTokensFileRender(page, { flags: ["enable-token-shadow"] }); const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" }); @@ -467,7 +468,7 @@ test.describe("Tokens: Apply token", () => { unfoldTokenTree(tokensSidebar, "shadow", "primary"); // Verify token appears in sidebar - const shadowToken = tokensSidebar.getByRole("checkbox", { + const shadowToken = tokensSidebar.getByRole("button", { name: "primary", }); 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 ({ page, }) => { - const { workspacePage, tokensSidebar } = await setupTokensFileRender(page); + const { workspacePage, tokensSidebar, tokenContextMenuForToken } = + await setupTokensFileRender(page); // Unfolds dimensions on token panel await page.getByRole("tab", { name: "Layers" }).click(); @@ -502,7 +504,7 @@ test.describe("Tokens: Apply token", () => { unfoldTokenTree(tokensSidebar, "dimensions", "dimension.dimension.sm"); // 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 const measuresSection = page.getByRole("region", { @@ -556,7 +558,7 @@ test.describe("Tokens: Apply token", () => { // Apply token to width and height token from token panel await tokensSidebar - .getByRole("checkbox", { name: "dimension.sm" }) + .getByRole("button", { name: "dimension.sm" }) .click({ button: "right" }); await tokenContextMenuForToken.getByText("AxisX").click(); @@ -612,7 +614,7 @@ test.describe("Tokens: Apply token", () => { // Apply token to width and height token from token panel await tokensSidebar - .getByRole("checkbox", { name: "dimension.sm" }) + .getByRole("button", { name: "dimension.sm" }) .click({ button: "right" }); await tokenContextMenuForToken.getByText("Y").click(); @@ -668,7 +670,7 @@ test.describe("Tokens: Apply token", () => { // Apply token to width and height token from token panel await tokensSidebar - .getByRole("checkbox", { name: "dimension.xs" }) + .getByRole("button", { name: "dimension.xs" }) .click({ button: "right" }); await tokenContextMenuForToken.getByText("Border radius").hover(); await tokenContextMenuForToken.getByText("RadiusAll").click(); @@ -730,9 +732,9 @@ test.describe("Tokens: Apply token", () => { await page.getByRole("button", { name: "Stroke Width 2" }).click(); const tokensSidebar = workspace.tokensSidebar; await expect( - tokensSidebar.getByRole("checkbox", { name: "width-big" }), + tokensSidebar.getByRole("button", { name: "width-big" }), ).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 const strokeSectionSidebar = rightSidebar.getByRole("region", { @@ -741,17 +743,17 @@ test.describe("Tokens: Apply token", () => { await expect(strokeSectionSidebar).toBeVisible(); const firstStrokeRow = strokeSectionSidebar.getByLabel("stroke-row-0"); await expect(firstStrokeRow).toBeVisible(); - const strokeWidthPill = firstStrokeRow.getByRole("button", { + const StrokeWidthPill = firstStrokeRow.getByRole("button", { name: "width-big", }); - await expect(strokeWidthPill).toBeVisible(); + await expect(StrokeWidthPill).toBeVisible(); // Detach token from right sidebar and apply another from dropdown const detachButton = firstStrokeRow.getByRole("button", { name: "Detach token", }); await detachButton.click(); - await expect(strokeWidthPill).not.toBeVisible(); + await expect(StrokeWidthPill).not.toBeVisible(); const tokenDropdown = firstStrokeRow.getByRole("button", { name: "Open token list", @@ -763,10 +765,10 @@ test.describe("Tokens: Apply token", () => { }); await expect(widthOptionSmall).toBeVisible(); await widthOptionSmall.click(); - const strokeWidthPillSmall = firstStrokeRow.getByRole("button", { + const StrokeWidthPillSmall = firstStrokeRow.getByRole("button", { name: "width-small", }); - await expect(strokeWidthPillSmall).toBeVisible(); + await expect(StrokeWidthPillSmall).toBeVisible(); }); 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(); const tokensSidebar = workspace.tokensSidebar; await expect( - tokensSidebar.getByRole("checkbox", { name: "dim.md" }), + tokensSidebar.getByRole("button", { name: "dim.md" }), ).toBeVisible(); await tokensSidebar - .getByRole("checkbox", { name: "dim.md" }) + .getByRole("button", { name: "dim.md" }) .click({ button: "right" }); await page .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 ({ page, }) => { - const { workspacePage, tokensSidebar } = await setupTokensFileRender(page); + const { workspacePage, tokensSidebar, tokenContextMenuForToken } = + await setupTokensFileRender(page); await page.getByRole("tab", { name: "Layers" }).click(); @@ -873,12 +876,12 @@ test.describe("Tokens: Detach token", () => { ).toBeVisible(); await tokensSidebar.getByRole("button", { name: "borderRadius" }).click(); await expect( - tokensSidebar.getByRole("checkbox", { name: "borderRadius.sm" }), + tokensSidebar.getByRole("button", { name: "borderRadius.sm" }), ).toBeVisible(); // Apply border radius token from token panels await tokensSidebar - .getByRole("checkbox", { name: "borderRadius.sm" }) + .getByRole("button", { name: "borderRadius.sm" }) .click(); // Check if border radius sections is visible on right sidebar @@ -896,7 +899,7 @@ test.describe("Tokens: Detach token", () => { // Rename token await tokensSidebar - .getByRole("checkbox", { name: "borderRadius.sm" }) + .getByRole("button", { name: "borderRadius.sm" }) .click({ button: "right" }); await expect(page.getByText("Edit token")).toBeVisible(); await page.getByText("Edit token").click(); diff --git a/frontend/playwright/ui/specs/tokens/crud.spec.js b/frontend/playwright/ui/specs/tokens/crud.spec.js index 6d8d48414f..ac72a2cc7c 100644 --- a/frontend/playwright/ui/specs/tokens/crud.spec.js +++ b/frontend/playwright/ui/specs/tokens/crud.spec.js @@ -1,5 +1,6 @@ import { test, expect } from "@playwright/test"; import { WasmWorkspacePage } from "../../pages/WasmWorkspacePage"; +import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage"; import { setupEmptyTokensFileRender, setupTokensFileRender, @@ -10,9 +11,7 @@ import { test.beforeEach(async ({ page }) => { await WasmWorkspacePage.init(page); - await WasmWorkspacePage.mockConfigFlags(page, [ - "enable-feature-design-tokens-v1", - ]); + await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json"); }); test.describe("Tokens - creation", () => { @@ -38,7 +37,7 @@ test.describe("Tokens - creation", () => { const missingReferenceError = "Missing token references"; const { tokensUpdateCreateModal, tokenThemesSetsSidebar } = - await setupEmptyTokensFileRender(page , { + await setupEmptyTokensFileRender(page, { flags: ["enable-token-combobox", "enable-feature-token-input"], }); @@ -85,7 +84,7 @@ test.describe("Tokens - creation", () => { await submitButton.click(); await expect( - tokensTabPanel.getByRole('checkbox', { name: 'my-token' }), + tokensTabPanel.getByRole('button', { name: 'my-token' }), ).toBeEnabled(); // Create second token referencing the first one using the combobox options @@ -331,14 +330,14 @@ test.describe("Tokens - creation", () => { await submitButton.press("Enter"); await expect( - tokensSidebar.getByRole("checkbox", { + tokensSidebar.getByRole("button", { name: "secondary", }), ).toBeEnabled(); // Tokens tab panel should have two tokens with the color red / #ff0000 await expect( - tokensSidebar.getByRole("checkbox", { name: "#ff0000" }), + tokensSidebar.getByRole("button", { name: "#ff0000" }), ).toHaveCount(2); // Global set has been auto created and is active @@ -479,7 +478,7 @@ test.describe("Tokens - creation", () => { await submitButton.click(); await expect( - tokensTabPanel.getByRole("checkbox", { name: "my-token" }), + tokensTabPanel.getByRole("button", { name: "my-token" }), ).toBeEnabled(); // @@ -520,7 +519,7 @@ test.describe("Tokens - creation", () => { await submitButton.click(); await expect( - tokensTabPanel.getByRole("checkbox", { name: "my-token-2" }), + tokensTabPanel.getByRole("button", { name: "my-token-2" }), ).toBeEnabled(); // @@ -537,7 +536,7 @@ test.describe("Tokens - creation", () => { await submitButton.click(); await expect( - tokensTabPanel.getByRole("checkbox", { name: "my-token-3" }), + tokensTabPanel.getByRole("button", { name: "my-token-3" }), ).toBeEnabled(); }); @@ -633,7 +632,7 @@ test.describe("Tokens - creation", () => { await submitButton.click(); await expect( - tokensTabPanel.getByRole("checkbox", { name: "my-token" }), + tokensTabPanel.getByRole("button", { name: "my-token" }), ).toBeEnabled(); // @@ -653,7 +652,7 @@ test.describe("Tokens - creation", () => { await submitButton.click(); await expect( - tokensTabPanel.getByRole("checkbox", { name: "my-token-2" }), + tokensTabPanel.getByRole("button", { name: "my-token-2" }), ).toBeEnabled(); // @@ -673,7 +672,7 @@ test.describe("Tokens - creation", () => { await submitButton.click(); await expect( - tokensTabPanel.getByRole("checkbox", { name: "my-token-3" }), + tokensTabPanel.getByRole("button", { name: "my-token-3" }), ).toBeEnabled(); }); @@ -684,7 +683,8 @@ test.describe("Tokens - creation", () => { const selfReferenceError = "Token has self reference"; const missingReferenceError = "Missing token references"; - const { tokensUpdateCreateModal } = await setupEmptyTokensFileRender(page); + const { tokensUpdateCreateModal, tokenThemesSetsSidebar } = + await setupEmptyTokensFileRender(page); // Open modal const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" }); @@ -768,7 +768,7 @@ test.describe("Tokens - creation", () => { await submitButton.click(); await expect( - tokensTabPanel.getByRole("checkbox", { name: "my-token" }), + tokensTabPanel.getByRole("button", { name: "my-token" }), ).toBeEnabled(); // @@ -788,7 +788,7 @@ test.describe("Tokens - creation", () => { await submitButton.click(); await expect( - tokensTabPanel.getByRole("checkbox", { name: "my-token-2" }), + tokensTabPanel.getByRole("button", { name: "my-token-2" }), ).toBeEnabled(); }); @@ -799,7 +799,7 @@ test.describe("Tokens - creation", () => { const selfReferenceError = "Token has self reference"; const missingReferenceError = "Missing token references"; - const { tokensUpdateCreateModal } = + const { tokensUpdateCreateModal, tokenThemesSetsSidebar } = await setupEmptyTokensFileRender(page); // Open modal @@ -886,7 +886,7 @@ test.describe("Tokens - creation", () => { await submitButton.click(); await expect( - tokensTabPanel.getByRole("checkbox", { name: "my-token" }), + tokensTabPanel.getByRole("button", { name: "my-token" }), ).toBeEnabled(); // @@ -906,14 +906,14 @@ test.describe("Tokens - creation", () => { await submitButton.click(); await expect( - tokensTabPanel.getByRole("checkbox", { name: "my-token-2" }), + tokensTabPanel.getByRole("button", { name: "my-token-2" }), ).toBeEnabled(); }); test("User creates shadow token", async ({ page }) => { const emptyNameError = "Name should be at least 1 character"; - const { tokensUpdateCreateModal } = + const { tokensUpdateCreateModal, tokenThemesSetsSidebar } = await setupEmptyTokensFileRender(page, { flags: ["enable-token-shadow"] }); // Open modal @@ -1050,7 +1050,7 @@ test.describe("Tokens - creation", () => { await submitButton.click(); await expect( - tokensTabPanel.getByRole("checkbox", { name: "my-token" }), + tokensTabPanel.getByRole("button", { name: "my-token" }), ).toBeEnabled(); // @@ -1087,14 +1087,14 @@ test.describe("Tokens - creation", () => { await expect(submitButton).toBeEnabled(); await submitButton.click(); await expect( - tokensTabPanel.getByRole("checkbox", { name: "my-token-2" }), + tokensTabPanel.getByRole("button", { name: "my-token-2" }), ).toBeEnabled(); }); - test("User can't submit empty typography token or reference", async ({ + test("User cant submit empty typography token or reference", async ({ page, }) => { - const { tokensUpdateCreateModal } = + const { tokensUpdateCreateModal, tokenThemesSetsSidebar, tokensSidebar } = await setupTypographyTokensFileRender(page); 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 }) => { const emptyNameError = "Name should be at least 1 character"; - const { tokensUpdateCreateModal } = + const { tokensUpdateCreateModal, tokenThemesSetsSidebar } = await setupEmptyTokensFileRender(page, { flags: ["enable-token-shadow"] }); // Open modal @@ -1271,7 +1271,7 @@ test.describe("Tokens - creation", () => { await submitButton.click(); await expect( - tokensTabPanel.getByRole("checkbox", { name: "my-token" }), + tokensTabPanel.getByRole("button", { name: "my-token" }), ).toBeEnabled(); // @@ -1308,13 +1308,14 @@ test.describe("Tokens - creation", () => { await expect(submitButton).toBeEnabled(); await submitButton.click(); await expect( - tokensTabPanel.getByRole("checkbox", { name: "my-token-2" }), + tokensTabPanel.getByRole("button", { name: "my-token-2" }), ).toBeEnabled(); }); test("User creates typography token", async ({ page }) => { const emptyNameError = "Name should be at least 1 character"; - const { tokensUpdateCreateModal } = await setupEmptyTokensFileRender(page); + const { tokensUpdateCreateModal, tokenThemesSetsSidebar } = + await setupEmptyTokensFileRender(page); // Open modal const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" }); @@ -1514,7 +1515,7 @@ test.describe("Tokens - creation", () => { await submitButton.click(); await expect( - tokensTabPanel.getByRole("checkbox", { name: "my-token" }), + tokensTabPanel.getByRole("button", { name: "my-token" }), ).toBeEnabled(); // @@ -1555,12 +1556,12 @@ test.describe("Tokens - creation", () => { await expect(submitButton).toBeEnabled(); await submitButton.click(); await expect( - tokensTabPanel.getByRole("checkbox", { name: "my-token-2" }), + tokensTabPanel.getByRole("button", { name: "my-token-2" }), ).toBeEnabled(); }); test("User adds typography token with reference", async ({ page }) => { - const { tokensUpdateCreateModal, tokensSidebar } = + const { tokensUpdateCreateModal, tokenThemesSetsSidebar, tokensSidebar } = await setupTypographyTokensFileRender(page); const newTokenTitle = "NewReference"; @@ -1602,7 +1603,7 @@ test.describe("Tokens - creation", () => { await expect(tokensUpdateCreateModal).not.toBeVisible(); - const newToken = tokensSidebar.getByRole("checkbox", { + const newToken = tokensSidebar.getByRole("button", { name: newTokenTitle, }); @@ -1610,7 +1611,7 @@ test.describe("Tokens - creation", () => { }); test("User creates grouped color token", async ({ page }) => { - const { tokensUpdateCreateModal, tokensSidebar } = + const { workspacePage, tokensUpdateCreateModal, tokensSidebar } = await setupEmptyTokensFileRender(page); await tokensSidebar @@ -1641,7 +1642,7 @@ test.describe("Tokens - creation", () => { 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, }) => { const { tokensUpdateCreateModal } = await setupEmptyTokensFileRender(page); @@ -1668,6 +1669,29 @@ test.describe("Tokens - creation", () => { // Submit button should remain disabled when value is empty 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 }) => { @@ -1726,7 +1750,7 @@ test("User cant create regular token with value missing", async ({ page }) => { await expect(submitButton).toBeDisabled(); }); -test("User duplicates color token", async ({ page }) => { +test("User duplicate color token", async ({ page }) => { const { tokensSidebar, tokenContextMenuForToken } = await setupTokensFileRender(page); @@ -1734,7 +1758,7 @@ test("User duplicates color token", async ({ page }) => { unfoldTokenTree(tokensSidebar, "color", "colors.blue.100"); - const colorToken = tokensSidebar.getByRole("checkbox", { + const colorToken = tokensSidebar.getByRole("button", { name: "100", }); @@ -1745,7 +1769,7 @@ test("User duplicates color token", async ({ page }) => { await expect(tokenContextMenuForToken).not.toBeVisible(); await expect( - tokensSidebar.getByRole("checkbox", { name: "colors.blue.100-copy" }), + tokensSidebar.getByRole("button", { name: "colors.blue.100-copy" }), ).toBeVisible(); }); @@ -1753,7 +1777,7 @@ test.describe("Tokens tab - edition", () => { test("User edits typography token and all fields are valid", async ({ page, }) => { - const { tokensUpdateCreateModal, tokensSidebar } = + const { tokensUpdateCreateModal, tokenThemesSetsSidebar, tokensSidebar } = await setupTypographyTokensFileRender(page); await tokensSidebar @@ -1762,7 +1786,7 @@ test.describe("Tokens tab - edition", () => { .click(); // 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 page.getByText("Edit token").click(); @@ -1856,7 +1880,7 @@ test.describe("Tokens tab - edition", () => { await unfoldTokenTree(tokensSidebar, "color", "colors.blue.100"); - const colorToken = tokensSidebar.getByRole("checkbox", { + const colorToken = tokensSidebar.getByRole("button", { name: "100", }); @@ -1877,7 +1901,7 @@ test.describe("Tokens tab - edition", () => { await unfoldTokenTree(tokensSidebar, "color", "colors.blue.100.changed"); - const colorTokenChanged = tokensSidebar.getByRole("checkbox", { + const colorTokenChanged = tokensSidebar.getByRole("button", { name: "changed", }); await expect(colorTokenChanged).toBeVisible(); @@ -1940,7 +1964,7 @@ test.describe("Tokens tab - edition", () => { }); test.describe("Tokens tab - delete", () => { - test("User deletes color token", async ({ page }) => { + test("User delete color token", async ({ page }) => { const { tokensSidebar, tokenContextMenuForToken } = await setupTokensFileRender(page); @@ -1948,7 +1972,7 @@ test.describe("Tokens tab - delete", () => { unfoldTokenTree(tokensSidebar, "color", "colors.blue.100"); - const colorToken = tokensSidebar.getByRole("checkbox", { + const colorToken = tokensSidebar.getByRole("button", { name: "100", }); await expect(colorToken).toBeVisible(); @@ -1974,7 +1998,7 @@ test.describe("Tokens tab - delete", () => { name: "colors", exact: true, }); - const colorNodeToken = tokensSidebar.getByRole("checkbox", { + const colorNodeToken = tokensSidebar.getByRole("button", { name: "100", }); diff --git a/frontend/playwright/ui/specs/tokens/general.spec.js b/frontend/playwright/ui/specs/tokens/general.spec.js index f276199de5..1aefcba2d7 100644 --- a/frontend/playwright/ui/specs/tokens/general.spec.js +++ b/frontend/playwright/ui/specs/tokens/general.spec.js @@ -1,12 +1,11 @@ import { test, expect } from "@playwright/test"; import { WasmWorkspacePage } from "../../pages/WasmWorkspacePage"; +import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage"; import { setupEmptyTokensFileRender } from "./helpers"; test.beforeEach(async ({ page }) => { await WasmWorkspacePage.init(page); - await WasmWorkspacePage.mockConfigFlags(page, [ - "enable-feature-design-tokens-v1", - ]); + await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json"); }); test.describe("Tokens tab - common tests", () => { @@ -21,31 +20,3 @@ test.describe("Tokens tab - common tests", () => { 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 }); -}); diff --git a/frontend/playwright/ui/specs/tokens/helpers.js b/frontend/playwright/ui/specs/tokens/helpers.js index 92437818d9..63c54af0f9 100644 --- a/frontend/playwright/ui/specs/tokens/helpers.js +++ b/frontend/playwright/ui/specs/tokens/helpers.js @@ -11,6 +11,10 @@ const setupEmptyTokensFile = async (page, options = {}) => { } await workspacePage.setupEmptyFile(); + await workspacePage.mockRPC( + "get-team?id=*", + "workspace/get-team-tokens.json", + ); await workspacePage.mockRPC( "update-file?id=*", @@ -46,6 +50,10 @@ const setupEmptyTokensFileRender = async (page, options = {}) => { } await workspacePage.setupEmptyFile(); + await workspacePage.mockRPC( + "get-team?id=*", + "workspace/get-team-tokens.json", + ); await workspacePage.mockRPC( "update-file?id=*", @@ -85,7 +93,10 @@ const setupTokensFile = async (page, options = {}) => { } 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\-fragment\?/, fileFragment); await workspacePage.mockRPC( @@ -127,7 +138,10 @@ const setupTokensFileRender = async (page, options = {}) => { } 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\-fragment\?/, fileFragment); await workspacePage.mockRPC( @@ -192,7 +206,8 @@ const testTokenCreationFlow = async ( const selfReferenceError = "Token has self reference"; const missingReferenceError = "Missing token references"; - const { tokensUpdateCreateModal } = await setupEmptyTokensFileRender(page); + const { tokensUpdateCreateModal, tokenThemesSetsSidebar } = + await setupEmptyTokensFileRender(page); // Open modal const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" }); @@ -273,7 +288,7 @@ const testTokenCreationFlow = async ( await submitButton.click(); await expect( - tokensTabPanel.getByRole("checkbox", { name: "my-token" }), + tokensTabPanel.getByRole("button", { name: "my-token" }), ).toBeEnabled(); // @@ -293,7 +308,7 @@ const testTokenCreationFlow = async ( await submitButton.click(); await expect( - tokensTabPanel.getByRole("checkbox", { name: "my-token-2" }), + tokensTabPanel.getByRole("button", { name: "my-token-2" }), ).toBeEnabled(); }; @@ -329,7 +344,7 @@ const unfoldTokenTree = async (tokensTabPanel, type, tokenName) => { } await expect( - typeParentWrapper.getByRole("checkbox", { + typeParentWrapper.getByRole("button", { name: tokenLeafName, }), ).toBeEnabled(); diff --git a/frontend/playwright/ui/specs/tokens/remapping.spec.js b/frontend/playwright/ui/specs/tokens/remapping.spec.js index 941c62425f..4563b491b3 100644 --- a/frontend/playwright/ui/specs/tokens/remapping.spec.js +++ b/frontend/playwright/ui/specs/tokens/remapping.spec.js @@ -11,6 +11,7 @@ test.beforeEach(async ({ page }) => { await WasmWorkspacePage.mockConfigFlags(page, [ "enable-feature-design-tokens-v1", ]); + await WasmWorkspacePage.mockRPC(page, "get-teams", "get-teams-tokens.json"); }); const createToken = async (page, type, name, textFieldName, value) => { @@ -73,7 +74,7 @@ const renameToken = async (page, oldName, newName) => { const { tokensUpdateCreateModal, tokensSidebar, tokenContextMenuForToken } = await setupTokensFileRender(page, { flags: ["enable-token-shadow"] }); - const baseToken = tokensSidebar.getByRole("checkbox", { + const baseToken = tokensSidebar.getByRole("button", { name: oldName, }); await baseToken.click({ button: "right" }); @@ -158,10 +159,10 @@ test.describe("Remapping Tokens", () => { // Verify token was renamed await expect( - tokensSidebar.getByRole("checkbox", { name: "foundation-shadow" }), + tokensSidebar.getByRole("button", { name: "foundation-shadow" }), ).toBeVisible(); await expect( - tokensSidebar.getByRole("checkbox", { name: "derived-shadow" }), + tokensSidebar.getByRole("button", { name: "derived-shadow" }), ).toBeVisible(); }); @@ -194,13 +195,13 @@ test.describe("Remapping Tokens", () => { .click(); await page.getByRole("tab", { name: "Tokens" }).click(); - const cardShadowToken = tokensSidebar.getByRole("checkbox", { + const cardShadowToken = tokensSidebar.getByRole("button", { name: "card-shadow", }); await cardShadowToken.click(); // Rename and update value of base token - const primaryToken = tokensSidebar.getByRole("checkbox", { + const primaryToken = tokensSidebar.getByRole("button", { name: "primary-shadow", }); await primaryToken.click({ button: "right" }); @@ -232,12 +233,12 @@ test.describe("Remapping Tokens", () => { // Verify base token was renamed await expect( - tokensSidebar.getByRole("checkbox", { name: "main-shadow" }), + tokensSidebar.getByRole("button", { name: "main-shadow" }), ).toBeVisible(); // Verify referenced token still exists await expect( - tokensSidebar.getByRole("checkbox", { name: "card-shadow" }), + tokensSidebar.getByRole("button", { name: "card-shadow" }), ).toBeVisible(); // 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 ({ page, }) => { - const { tokensSidebar } = await setupTypographyTokensFileRender(page); + const { + tokensUpdateCreateModal, + tokensSidebar, + tokenContextMenuForToken, + } = await setupTypographyTokensFileRender(page); + + const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" }); // Create base typography token await createToken(page, "Typography", "base-text", "Font size", "16"); @@ -301,10 +308,10 @@ test.describe("Remapping Tokens", () => { // Verify token was renamed await expect( - tokensSidebar.getByRole("checkbox", { name: "default-text" }), + tokensSidebar.getByRole("button", { name: "default-text" }), ).toBeVisible(); await expect( - tokensSidebar.getByRole("checkbox", { name: "body-text" }), + tokensSidebar.getByRole("button", { name: "body-text" }), ).toBeVisible(); }); @@ -357,13 +364,13 @@ test.describe("Remapping Tokens", () => { .click(); await page.getByRole("tab", { name: "Tokens" }).click(); - const paragraphToken = tokensSidebar.getByRole("checkbox", { + const paragraphToken = tokensSidebar.getByRole("button", { name: "paragraph-style", }); await paragraphToken.click(); // Rename and update value of base token - const bodyToken = tokensSidebar.getByRole("checkbox", { + const bodyToken = tokensSidebar.getByRole("button", { name: "body-style", }); await bodyToken.click({ button: "right" }); @@ -395,12 +402,12 @@ test.describe("Remapping Tokens", () => { // Verify base token was renamed await expect( - tokensSidebar.getByRole("checkbox", { name: "text-base" }), + tokensSidebar.getByRole("button", { name: "text-base" }), ).toBeVisible(); // Verify referenced token still exists await expect( - tokensSidebar.getByRole("checkbox", { name: "paragraph-style" }), + tokensSidebar.getByRole("button", { name: "paragraph-style" }), ).toBeVisible(); // 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 await expect( - tokensSidebar.getByRole("checkbox", { name: "primary-radius" }), + tokensSidebar.getByRole("button", { name: "primary-radius" }), ).toBeVisible(); await expect( - tokensSidebar.getByRole("checkbox", { name: "card-radius" }), + tokensSidebar.getByRole("button", { name: "card-radius" }), ).toBeVisible(); }); @@ -497,7 +504,7 @@ test.describe("Remapping Tokens", () => { ); // Rename and update value of base token - const radiusToken = tokensSidebar.getByRole("checkbox", { + const radiusToken = tokensSidebar.getByRole("button", { name: "radius-sm", }); await radiusToken.click({ button: "right" }); @@ -527,17 +534,17 @@ test.describe("Remapping Tokens", () => { // Verify base token was renamed await expect( - tokensSidebar.getByRole("checkbox", { name: "radius-base" }), + tokensSidebar.getByRole("button", { name: "radius-base" }), ).toBeVisible(); // Verify referenced token still exists await expect( - tokensSidebar.getByRole("checkbox", { name: "button-radius" }), + tokensSidebar.getByRole("button", { name: "button-radius" }), ).toBeVisible(); // Verify the referenced token now points to the renamed token // by opening it and checking the reference - const buttonRadiusToken = tokensSidebar.getByRole("checkbox", { + const buttonRadiusToken = tokensSidebar.getByRole("button", { name: "button-radius", }); await buttonRadiusToken.click({ button: "right" }); @@ -580,11 +587,13 @@ test.describe("Remapping Tokens", () => { // Verify token was renamed await expect( - tokensSidebar.getByRole("checkbox", { + tokensSidebar.getByRole("button", { name: "foundation-shadow", }), ).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 }) => { @@ -617,10 +626,10 @@ test.describe("Remapping Tokens", () => { // Verify original token name still exists await expect( - tokensSidebar.getByRole("checkbox", { name: "base-shadow" }), + tokensSidebar.getByRole("button", { name: "base-shadow" }), ).toBeVisible(); await expect( - tokensSidebar.getByRole("checkbox", { name: "derived-shadow" }), + tokensSidebar.getByRole("button", { name: "derived-shadow" }), ).toBeVisible(); }); }); diff --git a/frontend/playwright/ui/specs/tokens/sets.spec.js b/frontend/playwright/ui/specs/tokens/sets.spec.js index f8e11c56f4..c0fc52a17a 100644 --- a/frontend/playwright/ui/specs/tokens/sets.spec.js +++ b/frontend/playwright/ui/specs/tokens/sets.spec.js @@ -1,12 +1,11 @@ import { test, expect } from "@playwright/test"; +import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage"; import { WasmWorkspacePage } from "../../pages/WasmWorkspacePage"; import { setupEmptyTokensFileRender, setupTokensFileRender } from "./helpers"; test.beforeEach(async ({ page }) => { - await WasmWorkspacePage.init(page); - await WasmWorkspacePage.mockConfigFlags(page, [ - "enable-feature-design-tokens-v1", - ]); + await WasmWorkspacePage.init(page); + await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json"); }); test.describe("Tokens: Sets Tab", () => { @@ -18,11 +17,11 @@ test.describe("Tokens: Sets Tab", () => { }; const createSet = async (sidebar, setName, finalKey = "Enter") => { - sidebar + const tokensTabButton = sidebar .getByRole("button", { name: "Add set" }) .click(); - await changeSetInput(sidebar, setName, finalKey); + await changeSetInput(sidebar, setName, (finalKey = "Enter")); }; const assertEmptySetsList = async (el) => { @@ -45,7 +44,7 @@ test.describe("Tokens: Sets Tab", () => { const { tokenThemesSetsSidebar, tokenContextMenuForSet } = await setupEmptyTokensFileRender(page); - tokenThemesSetsSidebar + const tokensTabButton = tokenThemesSetsSidebar .getByRole("button", { name: "Add set" }) .click(); @@ -139,10 +138,10 @@ test.describe("Tokens: Sets Tab", () => { test("User can create & edit sets and set groups with an identical name", async ({ page, }) => { - const { tokenThemesSetsSidebar } = + const { tokenThemesSetsSidebar, tokenContextMenuForSet } = await setupEmptyTokensFileRender(page); - tokenThemesSetsSidebar + const tokensTabButton = tokenThemesSetsSidebar .getByRole("button", { name: "Add set" }) .click(); @@ -219,7 +218,7 @@ test.describe("Tokens: Sets Tab", () => { }); test("Display active set and verify if is enabled", async ({ page }) => { - const { tokenThemesSetsSidebar, tokensSidebar } = + const { tokenThemesSetsSidebar, tokensSidebar, tokenSetItems } = await setupTokensFileRender(page); // Create set diff --git a/frontend/playwright/ui/specs/tokens/themes.spec.js b/frontend/playwright/ui/specs/tokens/themes.spec.js index 2e0221b0c8..0685aaf959 100644 --- a/frontend/playwright/ui/specs/tokens/themes.spec.js +++ b/frontend/playwright/ui/specs/tokens/themes.spec.js @@ -1,5 +1,6 @@ import { test, expect } from "@playwright/test"; import { WasmWorkspacePage } from "../../pages/WasmWorkspacePage"; +import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage"; import { setupEmptyTokensFileRender, setupTokensFileRender } from "./helpers"; // THEMES HELPERS @@ -26,6 +27,7 @@ test.beforeEach(async ({ page }) => { await WasmWorkspacePage.mockConfigFlags(page, [ "enable-feature-design-tokens-v1", ]); + await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json"); }); test.describe("Tokens Themes", () => { diff --git a/frontend/playwright/ui/specs/tokens/tree.spec.js b/frontend/playwright/ui/specs/tokens/tree.spec.js index e7d4952ad9..ae43197acc 100644 --- a/frontend/playwright/ui/specs/tokens/tree.spec.js +++ b/frontend/playwright/ui/specs/tokens/tree.spec.js @@ -1,12 +1,11 @@ import { test, expect } from "@playwright/test"; import { WasmWorkspacePage } from "../../pages/WasmWorkspacePage"; +import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage"; import { setupTokensFileRender, unfoldTokenTree } from "./helpers"; test.beforeEach(async ({ page }) => { await WasmWorkspacePage.init(page); - await WasmWorkspacePage.mockConfigFlags(page, [ - "enable-feature-design-tokens-v1", - ]); + await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json"); }); test.describe("Tokens - node tree", () => { @@ -23,7 +22,7 @@ test.describe("Tokens - node tree", () => { await unfoldTokenTree(tokensSidebar, "color", "colors.blue.100"); - const colorToken = tokensSidebar.getByRole("checkbox", { + const colorToken = tokensSidebar.getByRole("button", { name: "100", }); await expect(colorToken).toBeVisible(); diff --git a/frontend/src/app/main/ui/workspace/tokens/management/token_pill.cljs b/frontend/src/app/main/ui/workspace/tokens/management/token_pill.cljs index 79c460aa3e..c76651c151 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management/token_pill.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/management/token_pill.cljs @@ -191,7 +191,7 @@ full-applied? (if has-selected? (applied-all-attributes? token selected-shapes attributes) - false) + true) applied? (if has-selected? @@ -290,11 +290,6 @@ :token-pill-invalid-applied-viewer (and is-viewer? (and full-applied? errors?))) :type "button" - :role "checkbox" - :aria-checked (cond - full-applied? "true" - half-applied? "mixed" - :else "false") :on-focus on-hover :on-click on-click