♻️ Refactor token test to match new render (#8442)

* ♻️ Refactor apply token test to match new render

* ♻️ Refactor crud token test with new render

* ♻️ Refactor general token tes tto use new render

* ♻️ Refactor remapping token tests to use new render

* ♻️ Refactor token set tests to use new render

* ♻️ Refactor token theme tests to use new render

* ♻️ Refactor token tree tests to use new render

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");

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,
+  setupTokensFileRender,
-  setupTokensFile,
+  setupTypographyTokensFileRender,
-  setupTypographyTokensFile,
   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();
 

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,
+  setupEmptyTokensFileRender,
-  setupTokensFile,
+  setupTokensFileRender,
-  setupTypographyTokensFile,
+  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();
 

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" });
 

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,
 };

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,
+  setupTokensFileRender,
-  setupTokensFile,
+  setupTypographyTokensFileRender,
-  setupTypographyTokensFile,
 } 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"],
       });
 

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 { WasmWorkspacePage } from "../../pages/WasmWorkspacePage";
-import { setupEmptyTokensFile, setupTokensFile } from "./helpers";
+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

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();
 

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();