🎉 Add composite typography token

frontend/playwright/ui/specs/tokens.spec.js

@@ -35,18 +35,25 @@ const setupEmptyTokensFile = async (page) => {
   };
 };
 
-const setupTokensFile = async (page) => {
+const setupTokensFile = async (page, options = {}) => {
+  const {
+    file = "workspace/get-file-tokens.json",
+    fileFragment = "workspace/get-file-fragment-tokens.json",
+    flags = [],
+  } = options;
+
   const workspacePage = new WorkspacePage(page);
+  if (flags.length) {
+    await workspacePage.mockConfigFlags(flags);
+  }
+
   await workspacePage.setupEmptyFile();
   await workspacePage.mockRPC(
     "get-team?id=*",
     "workspace/get-team-tokens.json",
   );
-  await workspacePage.mockRPC(/get\-file\?/, "workspace/get-file-tokens.json");
-  await workspacePage.mockRPC(
-    /get\-file\-fragment\?/,
-    "workspace/get-file-fragment-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",
@@ -73,6 +80,15 @@ const setupTokensFile = async (page) => {
   };
 };
 
+const setupTypographyTokensFile = async (page, options = {}) => {
+  return setupTokensFile(page, {
+    file: "workspace/get-file-typography-tokens.json",
+    fileFragment: "workspace/get-file-fragment-typography-tokens.json",
+    flags: ["enable-token-typography-types"],
+    ...options,
+  });
+};
+
 test.describe("Tokens: Tokens Tab", () => {
   test("Clicking tokens tab button opens tokens sidebar tab", async ({
     page,
@@ -531,9 +547,7 @@ test.describe("Tokens: Sets Tab", () => {
 
   const assertEmptySetsList = async (el) => {
     const buttons = await el.getByRole("button").allTextContents();
-    const filteredButtons = buttons.filter(
-      (text) => text === "Create one.",
-    );
+    const filteredButtons = buttons.filter((text) => text === "Create one.");
     await expect(filteredButtons.length).toEqual(2); // We assume there are no themes, so we have two "Create one" buttons.
   };
 
@@ -860,5 +874,74 @@ test.describe("Tokens: Themes modal", () => {
       });
       await expect(inputColor).toHaveValue("000000");
     });
+
+    test("User applies typography token to a text shape", async ({ page }) => {
+      const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
+        await setupTypographyTokensFile(page);
+
+      await page.getByRole("tab", { name: "Layers" }).click();
+
+      await workspacePage.layers
+        .getByTestId("layer-row")
+        .filter({ hasText: "Some Text" })
+        .click();
+
+      const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
+      await tokensTabButton.click();
+
+      await tokensSidebar
+        .getByRole("button")
+        .filter({ hasText: "Typography" })
+        .click();
+
+      await tokensSidebar.getByRole("button", { name: "Full" }).click();
+
+      const fontSizeInput = workspacePage.rightSidebar.getByRole("textbox", {
+        name: "Font Size",
+      });
+      await expect(fontSizeInput).toBeVisible();
+      await expect(fontSizeInput).toHaveValue("100");
+    });
+
+    test("User edits typography token and all fields are valid", async ({
+      page,
+    }) => {
+      const { tokensUpdateCreateModal, tokenThemesSetsSidebar, tokensSidebar } =
+        await setupTypographyTokensFile(page);
+
+      await tokensSidebar
+        .getByRole("button")
+        .filter({ hasText: "Typography" })
+        .click();
+
+      // Open edit modal for "Full" typography token
+      const token = tokensSidebar.getByRole("button", { name: "Full" });
+      await token.click({ button: "right" });
+      await page.getByText("Edit token").click();
+
+      // Modal opens
+      await expect(tokensUpdateCreateModal).toBeVisible();
+
+      const saveButton = tokensUpdateCreateModal.getByRole("button", {
+        name: /save/i,
+      });
+
+      // Invalidate incorrect values for font size
+      const fontSizeField = tokensUpdateCreateModal.getByLabel(/Font Size/i);
+      await fontSizeField.fill("invalid");
+      await expect(
+        tokensUpdateCreateModal.getByText(/Invalid token value:/),
+      ).toBeVisible();
+      await expect(saveButton).toBeDisabled();
+
+      // Allow empty fields
+      await fontSizeField.fill("");
+      await expect(saveButton).toBeEnabled();
+
+      await saveButton.click();
+
+      // Modal should close, token should be visible (with new name) in sidebar
+      await expect(tokensUpdateCreateModal).not.toBeVisible();
+    });
   });
 });