Repository: penpot/penpot
File: frontend/playwright/ui/specs/tokens.spec.js (JavaScript)

Code before:
    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",
    fileFragment: "workspace/get-file-fragment-typography-tokens.json",
    flags: [
      "enable-token-typography-types",
      "enable-token-typography-composite",
    ],
    ...options,
  });
};

const checkInputFieldWithError = async (tokenThemeUpdateCreateModal, inputLocator) => {
    await expect(inputLocator).toHaveAttribute("aria-invalid", "true");

    const errorMessageId = await inputLocator.getAttribute("aria-describedby");
    await expect(
      tokenThemeUpdateCreateModal.locator("#" + errorMessageId),
    ).toBeVisible();
};

const checkInputFieldWithoutError = async (tokenThemeUpdateCreateModal, inputLocator) => {
    expect(
      await inputLocator.getAttribute("aria-invalid")
    ).toBeNull();
    expect(
      await inputLocator.getAttribute("aria-describedby")
    ).toBeNull();
};

test.describe("Tokens: Tokens Tab", () => {
  test("Clicking tokens tab button opens tokens sidebar tab", async ({
    page,
  }) => {
    await setupEmptyTokensFile(page);

    const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });

    await expect(tokensTabPanel).toHaveText(/TOKENS/);
    await expect(tokensTabPanel).toHaveText(/Themes/);
  });

  test("User creates color token and auto created set show up in the sidebar", async ({

Review comment (suggestion):
It is a matter of opinion, but IMHO template literals provide a better tool for text operations

```js
tokenThemeUpdateCreateModal.locator(`#${errorMessageId}`)
```

Code after:
    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",
    fileFragment: "workspace/get-file-fragment-typography-tokens.json",
    flags: [
      "enable-token-typography-types",
      "enable-token-typography-composite",
    ],
    ...options,
  });
};

const checkInputFieldWithError = async (tokenThemeUpdateCreateModal, inputLocator) => {
    await expect(inputLocator).toHaveAttribute("aria-invalid", "true");

    const errorMessageId = await inputLocator.getAttribute("aria-describedby");
    await expect(
      tokenThemeUpdateCreateModal.locator(`#${errorMessageId}`),
    ).toBeVisible();
};

const checkInputFieldWithoutError = async (tokenThemeUpdateCreateModal, inputLocator) => {
    expect(
      await inputLocator.getAttribute("aria-invalid")
    ).toBeNull();
    expect(
      await inputLocator.getAttribute("aria-describedby")
    ).toBeNull();
};

test.describe("Tokens: Tokens Tab", () => {
  test("Clicking tokens tab button opens tokens sidebar tab", async ({
    page,
  }) => {
    await setupEmptyTokensFile(page);

    const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });

    await expect(tokensTabPanel).toHaveText(/TOKENS/);
    await expect(tokensTabPanel).toHaveText(/Themes/);
  });

  test("User creates color token and auto created set show up in the sidebar", async ({