diff --git a/frontend/playwright/ui/specs/text-editor-v2.spec.js b/frontend/playwright/ui/specs/text-editor-v2.spec.js index 197a19c743..eda09cfc3a 100644 --- a/frontend/playwright/ui/specs/text-editor-v2.spec.js +++ b/frontend/playwright/ui/specs/text-editor-v2.spec.js @@ -97,6 +97,7 @@ test("Update an already created text shape by prepending text", async ({ await workspace.clickLeafLayer("Lorem ipsum"); await workspace.textEditor.startEditing(); await workspace.textEditor.moveFromStart(0); + await page.evaluate(() => new Promise((resolve) => globalThis.requestIdleCallback(resolve))); await page.keyboard.type("Dolor sit amet "); await workspace.textEditor.stopEditing(); await workspace.waitForSelectedShapeName("Dolor sit amet Lorem ipsum"); diff --git a/frontend/playwright/ui/specs/tokens/apply.spec.js b/frontend/playwright/ui/specs/tokens/apply.spec.js index 2952a23c87..3404944938 100644 --- a/frontend/playwright/ui/specs/tokens/apply.spec.js +++ b/frontend/playwright/ui/specs/tokens/apply.spec.js @@ -1,22 +1,21 @@ import { test, expect } from "@playwright/test"; -import { WorkspacePage } from "../../pages/WorkspacePage"; import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage"; +import { WasmWorkspacePage } from "../../pages/WasmWorkspacePage"; import { - setupEmptyTokensFile, - setupTokensFile, - setupTypographyTokensFile, + setupTokensFileRender, + setupTypographyTokensFileRender, unfoldTokenTree, } from "./helpers"; test.beforeEach(async ({ page }) => { - await WorkspacePage.init(page); + await WasmWorkspacePage.init(page); await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json"); }); test.describe("Tokens: Apply token", () => { test("User applies color token to a shape", async ({ page }) => { const { workspacePage, tokensSidebar, tokenContextMenuForToken } = - await setupTokensFile(page); + await setupTokensFileRender(page); await page.getByRole("tab", { name: "Layers" }).click(); @@ -44,7 +43,7 @@ test.describe("Tokens: Apply token", () => { page, }) => { const { workspacePage, tokensSidebar, tokenContextMenuForToken } = - await setupTokensFile(page); + await setupTokensFileRender(page); await page.getByRole("tab", { name: "Layers" }).click(); @@ -105,7 +104,7 @@ test.describe("Tokens: Apply token", () => { page, }) => { const { workspacePage, tokensSidebar, tokenContextMenuForToken } = - await setupTokensFile(page); + await setupTokensFileRender(page); await page.getByRole("tab", { name: "Layers" }).click(); @@ -169,7 +168,7 @@ test.describe("Tokens: Apply token", () => { test("User applies typography token to a text shape", async ({ page }) => { const { workspacePage, tokensSidebar, tokenContextMenuForToken } = - await setupTypographyTokensFile(page); + await setupTypographyTokensFileRender(page); await page.getByRole("tab", { name: "Layers" }).click(); @@ -203,7 +202,7 @@ test.describe("Tokens: Apply token", () => { tokensSidebar, workspacePage, tokenContextMenuForToken, - } = await setupTokensFile(page, { flags: ["enable-token-shadow"] }); + } = await setupTokensFileRender(page, { flags: ["enable-token-shadow"] }); const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" }); @@ -489,7 +488,7 @@ test.describe("Tokens: Apply token", () => { page, }) => { const { workspacePage, tokensSidebar, tokenContextMenuForToken } = - await setupTokensFile(page); + await setupTokensFileRender(page); // Unfolds dimensions on token panel await page.getByRole("tab", { name: "Layers" }).click(); @@ -540,7 +539,7 @@ test.describe("Tokens: Apply token", () => { page, }) => { const { workspacePage, tokensSidebar, tokenContextMenuForToken } = - await setupTokensFile(page); + await setupTokensFileRender(page); // Unfolds dimensions on token panel await page.getByRole("tab", { name: "Layers" }).click(); @@ -594,7 +593,7 @@ test.describe("Tokens: Apply token", () => { page, }) => { const { workspacePage, tokensSidebar, tokenContextMenuForToken } = - await setupTokensFile(page); + await setupTokensFileRender(page); // Unfolds dimensions on token panel await page.getByRole("tab", { name: "Layers" }).click(); @@ -648,7 +647,7 @@ test.describe("Tokens: Apply token", () => { page, }) => { const { workspacePage, tokensSidebar, tokenContextMenuForToken } = - await setupTokensFile(page); + await setupTokensFileRender(page); // Unfolds dimensions on token panel await page.getByRole("tab", { name: "Layers" }).click(); @@ -701,7 +700,7 @@ test.describe("Tokens: Apply token", () => { }); test("User applies stroke width token to a shape", async ({ page }) => { - const workspace = new WorkspacePage(page, { + const workspace = new WasmWorkspacePage(page, { textEditor: true, }); // Set up @@ -761,7 +760,7 @@ test.describe("Tokens: Apply token", () => { }); test("User applies margin token to a shape", async ({ page }) => { - const workspace = new WorkspacePage(page, { + const workspace = new WasmWorkspacePage(page, { textEditor: true, }); // Set up @@ -853,7 +852,7 @@ test.describe("Tokens: Detach token", () => { page, }) => { const { workspacePage, tokensSidebar, tokenContextMenuForToken } = - await setupTokensFile(page); + await setupTokensFileRender(page); await page.getByRole("tab", { name: "Layers" }).click(); diff --git a/frontend/playwright/ui/specs/tokens/crud.spec.js b/frontend/playwright/ui/specs/tokens/crud.spec.js index b726db042d..0911b1095c 100644 --- a/frontend/playwright/ui/specs/tokens/crud.spec.js +++ b/frontend/playwright/ui/specs/tokens/crud.spec.js @@ -1,16 +1,16 @@ import { test, expect } from "@playwright/test"; -import { WorkspacePage } from "../../pages/WorkspacePage"; +import { WasmWorkspacePage } from "../../pages/WasmWorkspacePage"; import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage"; import { - setupEmptyTokensFile, - setupTokensFile, - setupTypographyTokensFile, + setupEmptyTokensFileRender, + setupTokensFileRender, + setupTypographyTokensFileRender, testTokenCreationFlow, unfoldTokenTree, } from "./helpers"; test.beforeEach(async ({ page }) => { - await WorkspacePage.init(page); + await WasmWorkspacePage.init(page); await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json"); }); @@ -158,7 +158,7 @@ test.describe("Tokens - creation", () => { const selfReferenceError = "Token has self reference"; const missingReferenceError = "Missing token references"; const { tokensUpdateCreateModal, tokenThemesSetsSidebar, tokensSidebar } = - await setupEmptyTokensFile(page); + await setupEmptyTokensFileRender(page); await tokensSidebar .getByRole("button", { name: "Add Token: Color" }) @@ -320,7 +320,7 @@ test.describe("Tokens - creation", () => { const missingReferenceError = "Missing token references"; const { tokensUpdateCreateModal, tokenThemesSetsSidebar } = - await setupEmptyTokensFile(page); + await setupEmptyTokensFileRender(page); // Open modal const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" }); @@ -465,7 +465,7 @@ test.describe("Tokens - creation", () => { const missingReferenceError = "Missing token references"; const { tokensUpdateCreateModal, tokenThemesSetsSidebar } = - await setupEmptyTokensFile(page); + await setupEmptyTokensFileRender(page); // Open modal const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" }); @@ -601,7 +601,7 @@ test.describe("Tokens - creation", () => { const missingReferenceError = "Missing token references"; const { tokensUpdateCreateModal, tokenThemesSetsSidebar } = - await setupEmptyTokensFile(page); + await setupEmptyTokensFileRender(page); // Open modal const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" }); @@ -717,7 +717,7 @@ test.describe("Tokens - creation", () => { const missingReferenceError = "Missing token references"; const { tokensUpdateCreateModal, tokenThemesSetsSidebar } = - await setupEmptyTokensFile(page); + await setupEmptyTokensFileRender(page); // Open modal const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" }); @@ -831,7 +831,7 @@ test.describe("Tokens - creation", () => { const emptyNameError = "Name should be at least 1 character"; const { tokensUpdateCreateModal, tokenThemesSetsSidebar } = - await setupEmptyTokensFile(page, { flags: ["enable-token-shadow"] }); + await setupEmptyTokensFileRender(page, { flags: ["enable-token-shadow"] }); // Open modal const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" }); @@ -1012,7 +1012,7 @@ test.describe("Tokens - creation", () => { page, }) => { const { tokensUpdateCreateModal, tokenThemesSetsSidebar, tokensSidebar } = - await setupTypographyTokensFile(page); + await setupTypographyTokensFileRender(page); const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" }); await tokensTabPanel @@ -1047,7 +1047,7 @@ test.describe("Tokens - creation", () => { const emptyNameError = "Name should be at least 1 character"; const { tokensUpdateCreateModal, tokenThemesSetsSidebar } = - await setupEmptyTokensFile(page, { flags: ["enable-token-shadow"] }); + await setupEmptyTokensFileRender(page, { flags: ["enable-token-shadow"] }); // Open modal const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" }); @@ -1232,7 +1232,7 @@ test.describe("Tokens - creation", () => { test("User creates typography token", async ({ page }) => { const emptyNameError = "Name should be at least 1 character"; const { tokensUpdateCreateModal, tokenThemesSetsSidebar } = - await setupEmptyTokensFile(page); + await setupEmptyTokensFileRender(page); // Open modal const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" }); @@ -1479,7 +1479,7 @@ test.describe("Tokens - creation", () => { test("User adds typography token with reference", async ({ page }) => { const { tokensUpdateCreateModal, tokenThemesSetsSidebar, tokensSidebar } = - await setupTypographyTokensFile(page); + await setupTypographyTokensFileRender(page); const newTokenTitle = "NewReference"; @@ -1529,7 +1529,7 @@ test.describe("Tokens - creation", () => { test("User creates grouped color token", async ({ page }) => { const { workspacePage, tokensUpdateCreateModal, tokensSidebar } = - await setupEmptyTokensFile(page); + await setupEmptyTokensFileRender(page); await tokensSidebar .getByRole("button", { name: "Add Token: Color" }) @@ -1562,7 +1562,7 @@ test.describe("Tokens - creation", () => { test("User cant create regular token with value missing", async ({ page, }) => { - const { tokensUpdateCreateModal } = await setupEmptyTokensFile(page); + const { tokensUpdateCreateModal } = await setupEmptyTokensFileRender(page); const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" }); await tokensTabPanel @@ -1589,7 +1589,7 @@ test.describe("Tokens - creation", () => { test("User duplicate color token", async ({ page }) => { const { tokensSidebar, tokenContextMenuForToken } = - await setupTokensFile(page); + await setupTokensFileRender(page); await expect(tokensSidebar).toBeVisible(); @@ -1613,7 +1613,7 @@ test.describe("Tokens - creation", () => { test("User creates grouped color token", async ({ page }) => { const { workspacePage, tokensUpdateCreateModal, tokensSidebar } = - await setupEmptyTokensFile(page); + await setupEmptyTokensFileRender(page); await tokensSidebar.getByRole("button", { name: "Add Token: Color" }).click(); @@ -1642,7 +1642,7 @@ test("User creates grouped color token", async ({ page }) => { }); test("User cant create regular token with value missing", async ({ page }) => { - const { tokensUpdateCreateModal } = await setupEmptyTokensFile(page); + const { tokensUpdateCreateModal } = await setupEmptyTokensFileRender(page); const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" }); await tokensTabPanel @@ -1669,7 +1669,7 @@ test("User cant create regular token with value missing", async ({ page }) => { test("User duplicate color token", async ({ page }) => { const { tokensSidebar, tokenContextMenuForToken } = - await setupTokensFile(page); + await setupTokensFileRender(page); await expect(tokensSidebar).toBeVisible(); @@ -1695,7 +1695,7 @@ test.describe("Tokens tab - edition", () => { page, }) => { const { tokensUpdateCreateModal, tokenThemesSetsSidebar, tokensSidebar } = - await setupTypographyTokensFile(page); + await setupTypographyTokensFileRender(page); await tokensSidebar .getByRole("button") @@ -1791,7 +1791,7 @@ test.describe("Tokens tab - edition", () => { page, }) => { const { tokensUpdateCreateModal, tokensSidebar, tokenContextMenuForToken } = - await setupTokensFile(page); + await setupTokensFileRender(page); await expect(tokensSidebar).toBeVisible(); @@ -1827,7 +1827,7 @@ test.describe("Tokens tab - edition", () => { page, }) => { const { workspacePage, tokensUpdateCreateModal, tokenThemesSetsSidebar } = - await setupEmptyTokensFile(page); + await setupEmptyTokensFileRender(page); const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" }); await tokensTabPanel @@ -1882,7 +1882,7 @@ test.describe("Tokens tab - edition", () => { test.describe("Tokens tab - delete", () => { test("User delete color token", async ({ page }) => { const { tokensSidebar, tokenContextMenuForToken } = - await setupTokensFile(page); + await setupTokensFileRender(page); await expect(tokensSidebar).toBeVisible(); @@ -1902,7 +1902,7 @@ test.describe("Tokens tab - delete", () => { }); test("User removes node and all child tokens", async ({ page }) => { - const { tokensSidebar } = await setupTokensFile(page); + const { tokensSidebar } = await setupTokensFileRender(page); await expect(tokensSidebar).toBeVisible(); diff --git a/frontend/playwright/ui/specs/tokens/general.spec.js b/frontend/playwright/ui/specs/tokens/general.spec.js index 1ed4a341c8..1aefcba2d7 100644 --- a/frontend/playwright/ui/specs/tokens/general.spec.js +++ b/frontend/playwright/ui/specs/tokens/general.spec.js @@ -1,10 +1,10 @@ import { test, expect } from "@playwright/test"; -import { WorkspacePage } from "../../pages/WorkspacePage"; +import { WasmWorkspacePage } from "../../pages/WasmWorkspacePage"; import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage"; -import { setupEmptyTokensFile } from "./helpers"; +import { setupEmptyTokensFileRender } from "./helpers"; test.beforeEach(async ({ page }) => { - await WorkspacePage.init(page); + await WasmWorkspacePage.init(page); await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json"); }); @@ -12,7 +12,7 @@ test.describe("Tokens tab - common tests", () => { test("Clicking tokens tab button opens tokens sidebar tab", async ({ page, }) => { - await setupEmptyTokensFile(page); + await setupEmptyTokensFileRender(page); const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" }); diff --git a/frontend/playwright/ui/specs/tokens/helpers.js b/frontend/playwright/ui/specs/tokens/helpers.js index b416daf8f7..63c54af0f9 100644 --- a/frontend/playwright/ui/specs/tokens/helpers.js +++ b/frontend/playwright/ui/specs/tokens/helpers.js @@ -1,5 +1,6 @@ import { test, expect } from "@playwright/test"; import { WorkspacePage } from "../../pages/WorkspacePage"; +import { WasmWorkspacePage } from "../../pages/WasmWorkspacePage"; const setupEmptyTokensFile = async (page, options = {}) => { const { flags = [] } = options; @@ -40,6 +41,45 @@ const setupEmptyTokensFile = async (page, options = {}) => { }; }; +const setupEmptyTokensFileRender = async (page, options = {}) => { + const { flags = [] } = options; + + const workspacePage = new WasmWorkspacePage(page); + if (flags.length > 0) { + await workspacePage.mockConfigFlags(flags); + } + + await workspacePage.setupEmptyFile(); + await workspacePage.mockRPC( + "get-team?id=*", + "workspace/get-team-tokens.json", + ); + + await workspacePage.mockRPC( + "update-file?id=*", + "workspace/update-file-create-rect.json", + ); + + await workspacePage.goToWorkspace({ + fileId: "c7ce0794-0992-8105-8004-38f280443849", + pageId: "66697432-c33d-8055-8006-2c62cc084cad", + }); + + const tokensTabButton = page.getByRole("tab", { name: "Tokens" }); + await tokensTabButton.click(); + + return { + workspacePage, + tokenThemeUpdateCreateModal: workspacePage.tokenThemeUpdateCreateModal, + tokensUpdateCreateModal: workspacePage.tokensUpdateCreateModal, + tokenThemesSetsSidebar: workspacePage.tokenThemesSetsSidebar, + tokenSetItems: workspacePage.tokenSetItems, + tokensSidebar: workspacePage.tokensSidebar, + tokenSetGroupItems: workspacePage.tokenSetGroupItems, + tokenContextMenuForSet: workspacePage.tokenContextMenuForSet, + }; +}; + const setupTokensFile = async (page, options = {}) => { const { file = "workspace/get-file-tokens.json", @@ -85,6 +125,51 @@ const setupTokensFile = async (page, options = {}) => { }; }; +const setupTokensFileRender = async (page, options = {}) => { + const { + file = "workspace/get-file-tokens.json", + fileFragment = "workspace/get-file-fragment-tokens.json", + flags = ["enable-feature-token-input"], + } = options; + + const workspacePage = new WasmWorkspacePage(page); + if (flags.length > 0) { + await workspacePage.mockConfigFlags(flags); + } + + 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( + "update-file?id=*", + "workspace/update-file-create-rect.json", + ); + + await workspacePage.goToWorkspace({ + fileId: "c7ce0794-0992-8105-8004-38f280443849", + pageId: "66697432-c33d-8055-8006-2c62cc084cad", + }); + + const tokensTabButton = page.getByRole("tab", { name: "Tokens" }); + await tokensTabButton.click(); + + return { + workspacePage, + tokensUpdateCreateModal: workspacePage.tokensUpdateCreateModal, + tokenThemeUpdateCreateModal: workspacePage.tokenThemeUpdateCreateModal, + tokenThemesSetsSidebar: workspacePage.tokenThemesSetsSidebar, + tokenSetItems: workspacePage.tokenSetItems, + tokenSetGroupItems: workspacePage.tokenSetGroupItems, + tokensSidebar: workspacePage.tokensSidebar, + tokenContextMenuForToken: workspacePage.tokenContextMenuForToken, + tokenContextMenuForSet: workspacePage.tokenContextMenuForSet, + }; +}; + const setupTypographyTokensFile = async (page, options = {}) => { return setupTokensFile(page, { file: "workspace/get-file-typography-tokens.json", @@ -93,6 +178,14 @@ const setupTypographyTokensFile = async (page, options = {}) => { }); }; +const setupTypographyTokensFileRender = async (page, options = {}) => { + return setupTokensFileRender(page, { + file: "workspace/get-file-typography-tokens.json", + fileFragment: "workspace/get-file-fragment-typography-tokens.json", + ...options, + }); +}; + const testTokenCreationFlow = async ( page, { @@ -114,7 +207,7 @@ const testTokenCreationFlow = async ( const missingReferenceError = "Missing token references"; const { tokensUpdateCreateModal, tokenThemesSetsSidebar } = - await setupEmptyTokensFile(page); + await setupEmptyTokensFileRender(page); // Open modal const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" }); @@ -259,8 +352,11 @@ const unfoldTokenTree = async (tokensTabPanel, type, tokenName) => { export { setupEmptyTokensFile, + setupEmptyTokensFileRender, setupTokensFile, + setupTokensFileRender, setupTypographyTokensFile, + setupTypographyTokensFileRender, testTokenCreationFlow, unfoldTokenTree, }; diff --git a/frontend/playwright/ui/specs/tokens/remapping.spec.js b/frontend/playwright/ui/specs/tokens/remapping.spec.js index 96aabbdb26..9cf91a1a9c 100644 --- a/frontend/playwright/ui/specs/tokens/remapping.spec.js +++ b/frontend/playwright/ui/specs/tokens/remapping.spec.js @@ -1,21 +1,23 @@ import { test, expect } from "@playwright/test"; import { WorkspacePage } from "../../pages/WorkspacePage"; -import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage"; +import { WasmWorkspacePage } from "../../pages/WasmWorkspacePage"; import { - setupEmptyTokensFile, - setupTokensFile, - setupTypographyTokensFile, + setupTokensFileRender, + setupTypographyTokensFileRender, } from "./helpers"; test.beforeEach(async ({ page }) => { await WorkspacePage.init(page); - await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json"); + 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) => { const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" }); - const { tokensUpdateCreateModal } = await setupTokensFile(page, { + const { tokensUpdateCreateModal } = await setupTokensFileRender(page, { flags: ["enable-token-shadow"], }); @@ -42,7 +44,7 @@ const createToken = async (page, type, name, textFieldName, value) => { const renameToken = async (page, oldName, newName) => { const { tokensUpdateCreateModal, tokensSidebar, tokenContextMenuForToken } = - await setupTokensFile(page, { flags: ["enable-token-shadow"] }); + await setupTokensFileRender(page, { flags: ["enable-token-shadow"] }); const baseToken = tokensSidebar.getByRole("button", { name: oldName, @@ -64,7 +66,7 @@ const renameToken = async (page, oldName, newName) => { const createCompositeDerivedToken = async (page, type, name, reference) => { const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" }); - const { tokensUpdateCreateModal } = await setupTokensFile(page, { + const { tokensUpdateCreateModal } = await setupTokensFileRender(page, { flags: ["enable-token-shadow"], }); @@ -98,7 +100,7 @@ test.describe("Remapping Tokens", () => { test("User renames box shadow token with alias references", async ({ page, }) => { - const { tokensSidebar } = await setupTokensFile(page, { + const { tokensSidebar } = await setupTokensFileRender(page, { flags: ["enable-token-shadow"], }); @@ -144,7 +146,7 @@ test.describe("Remapping Tokens", () => { tokensSidebar, tokenContextMenuForToken, workspacePage, - } = await setupTokensFile(page, { flags: ["enable-token-shadow"] }); + } = await setupTokensFileRender(page, { flags: ["enable-token-shadow"] }); // Create base shadow token await createToken(page, "Shadow", "primary-shadow", "Color", "#000000"); @@ -249,7 +251,7 @@ test.describe("Remapping Tokens", () => { tokensUpdateCreateModal, tokensSidebar, tokenContextMenuForToken, - } = await setupTypographyTokensFile(page); + } = await setupTypographyTokensFileRender(page); const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" }); @@ -293,7 +295,7 @@ test.describe("Remapping Tokens", () => { tokensSidebar, tokenContextMenuForToken, workspacePage, - } = await setupTypographyTokensFile(page); + } = await setupTypographyTokensFileRender(page); const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" }); @@ -401,7 +403,7 @@ test.describe("Remapping Tokens", () => { test("User renames border radius token with alias references", async ({ page, }) => { - const { tokensSidebar } = await setupTokensFile(page); + const { tokensSidebar } = await setupTokensFileRender(page); // Create base border radius token await createToken(page, "Border Radius", "base-radius", "Value", "4"); @@ -443,7 +445,7 @@ test.describe("Remapping Tokens", () => { tokensUpdateCreateModal, tokensSidebar, tokenContextMenuForToken, - } = await setupTokensFile(page); + } = await setupTokensFileRender(page); // Create base border radius token await createToken(page, "Border Radius", "radius-sm", "Value", "4"); @@ -512,7 +514,7 @@ test.describe("Remapping Tokens", () => { test.describe("Cancel remap", () => { test("Only rename - breaks reference", async ({ page }) => { - const { tokensSidebar } = await setupTokensFile(page, { + const { tokensSidebar } = await setupTokensFileRender(page, { flags: ["enable-token-shadow"], }); @@ -551,7 +553,7 @@ test.describe("Remapping Tokens", () => { }); test("Cancel process - no changes applied", async ({ page }) => { - const { tokensSidebar } = await setupTokensFile(page, { + const { tokensSidebar } = await setupTokensFileRender(page, { flags: ["enable-token-shadow"], }); diff --git a/frontend/playwright/ui/specs/tokens/sets.spec.js b/frontend/playwright/ui/specs/tokens/sets.spec.js index f5dd6aa7fb..c0fc52a17a 100644 --- a/frontend/playwright/ui/specs/tokens/sets.spec.js +++ b/frontend/playwright/ui/specs/tokens/sets.spec.js @@ -1,10 +1,10 @@ import { test, expect } from "@playwright/test"; import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage"; -import { WorkspacePage } from "../../pages/WorkspacePage"; -import { setupEmptyTokensFile, setupTokensFile } from "./helpers"; +import { WasmWorkspacePage } from "../../pages/WasmWorkspacePage"; +import { setupEmptyTokensFileRender, setupTokensFileRender } from "./helpers"; test.beforeEach(async ({ page }) => { - await WorkspacePage.init(page); + await WasmWorkspacePage.init(page); await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json"); }); @@ -42,7 +42,7 @@ test.describe("Tokens: Sets Tab", () => { page, }) => { const { tokenThemesSetsSidebar, tokenContextMenuForSet } = - await setupEmptyTokensFile(page); + await setupEmptyTokensFileRender(page); const tokensTabButton = tokenThemesSetsSidebar .getByRole("button", { name: "Add set" }) @@ -139,7 +139,7 @@ test.describe("Tokens: Sets Tab", () => { page, }) => { const { tokenThemesSetsSidebar, tokenContextMenuForSet } = - await setupEmptyTokensFile(page); + await setupEmptyTokensFileRender(page); const tokensTabButton = tokenThemesSetsSidebar .getByRole("button", { name: "Add set" }) @@ -176,7 +176,7 @@ test.describe("Tokens: Sets Tab", () => { test("Fold/Unfold set", async ({ page }) => { const { tokenThemesSetsSidebar, tokenSetGroupItems } = - await setupTokensFile(page); + await setupTokensFileRender(page); await expect(tokenThemesSetsSidebar).toBeVisible(); @@ -202,7 +202,7 @@ test.describe("Tokens: Sets Tab", () => { test("Change current theme", async ({ page }) => { const { tokenThemesSetsSidebar, tokenSetItems } = - await setupTokensFile(page); + await setupTokensFileRender(page); await expect(tokenSetItems.nth(1)).toHaveAttribute("aria-checked", "true"); await expect(tokenSetItems.nth(2)).toHaveAttribute("aria-checked", "false"); @@ -219,7 +219,7 @@ test.describe("Tokens: Sets Tab", () => { test("Display active set and verify if is enabled", async ({ page }) => { const { tokenThemesSetsSidebar, tokensSidebar, tokenSetItems } = - await setupTokensFile(page); + await setupTokensFileRender(page); // Create set await tokenThemesSetsSidebar diff --git a/frontend/playwright/ui/specs/tokens/themes.spec.js b/frontend/playwright/ui/specs/tokens/themes.spec.js index a9c8f827b6..0685aaf959 100644 --- a/frontend/playwright/ui/specs/tokens/themes.spec.js +++ b/frontend/playwright/ui/specs/tokens/themes.spec.js @@ -1,7 +1,7 @@ import { test, expect } from "@playwright/test"; -import { WorkspacePage } from "../../pages/WorkspacePage"; +import { WasmWorkspacePage } from "../../pages/WasmWorkspacePage"; import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage"; -import { setupEmptyTokensFile, setupTokensFile } from "./helpers"; +import { setupEmptyTokensFileRender, setupTokensFileRender } from "./helpers"; // THEMES HELPERS @@ -23,14 +23,17 @@ const checkInputFieldWithoutError = async (inputLocator) => { }; test.beforeEach(async ({ page }) => { - await WorkspacePage.init(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 Themes", () => { test("User edits theme and activates it in the sidebar", async ({ page }) => { const { tokenThemesSetsSidebar, tokenThemeUpdateCreateModal } = - await setupTokensFile(page); + await setupTokensFileRender(page); await expect(tokenThemesSetsSidebar).toBeVisible(); @@ -117,7 +120,7 @@ test.describe("Tokens Themes", () => { test.describe("Tokens: Themes modal", () => { test("Delete theme", async ({ page }) => { const { tokenThemeUpdateCreateModal, workspacePage } = - await setupTokensFile(page); + await setupTokensFileRender(page); workspacePage.openTokenThemesModal(); @@ -137,7 +140,7 @@ test.describe("Tokens: Themes modal", () => { test("Add new theme in empty file", async ({ page }) => { const { tokenThemesSetsSidebar, tokenThemeUpdateCreateModal } = - await setupEmptyTokensFile(page); + await setupEmptyTokensFileRender(page); await tokenThemesSetsSidebar .getByRole("button", { name: "Create one." }) @@ -170,7 +173,7 @@ test.describe("Tokens: Themes modal", () => { test("Add new theme", async ({ page }) => { const { tokenThemeUpdateCreateModal, workspacePage } = - await setupTokensFile(page); + await setupTokensFileRender(page); workspacePage.openTokenThemesModal(); @@ -210,7 +213,7 @@ test.describe("Tokens: Themes modal", () => { test("Edit theme", async ({ page }) => { const { tokenThemeUpdateCreateModal, workspacePage } = - await setupTokensFile(page); + await setupTokensFileRender(page); workspacePage.openTokenThemesModal(); diff --git a/frontend/playwright/ui/specs/tokens/tree.spec.js b/frontend/playwright/ui/specs/tokens/tree.spec.js index c74bda29b6..ae43197acc 100644 --- a/frontend/playwright/ui/specs/tokens/tree.spec.js +++ b/frontend/playwright/ui/specs/tokens/tree.spec.js @@ -1,16 +1,16 @@ import { test, expect } from "@playwright/test"; -import { WorkspacePage } from "../../pages/WorkspacePage"; +import { WasmWorkspacePage } from "../../pages/WasmWorkspacePage"; import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage"; -import { setupTokensFile, unfoldTokenTree } from "./helpers"; +import { setupTokensFileRender, unfoldTokenTree } from "./helpers"; test.beforeEach(async ({ page }) => { - await WorkspacePage.init(page); + await WasmWorkspacePage.init(page); await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json"); }); test.describe("Tokens - node tree", () => { test("User fold/unfold color tokens", async ({ page }) => { - const { tokensSidebar } = await setupTokensFile(page); + const { tokensSidebar } = await setupTokensFileRender(page); await expect(tokensSidebar).toBeVisible();