3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-18 07:16:15 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Add token creation test

Browse source
This commit is contained in:
Florian Schroedl 2024-11-12 17:26:11 +01:00
parent 76b2760737
commit 439ca4b52c
6 changed files with 120 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

87
frontend/playwright/ui/specs/tokens.spec.js Normal file
View file

@ -0,0 +1,87 @@
import { test, expect } from "@playwright/test";
import { WorkspacePage } from "../pages/WorkspacePage";
test.beforeEach(async ({ page }) => {
await WorkspacePage.init(page);
});
test.describe("Tokens: Tab", () => {
test("Clicking tokens tab button opens tokens sidebar tab", async ({
page,
}) => {
const workspacePage = new WorkspacePage(page);
await workspacePage.setupEmptyFile();
await workspacePage.mockRPC(
"get-team?id=*",
"workspace/get-team-tokens.json",
);
await workspacePage.goToWorkspace();
const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
await tokensTabButton.click();
const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
await expect(tokensTabPanel).toHaveText(/TOKENS/);
await expect(tokensTabPanel).toHaveText(/Themes/);
});
test("Created color token shows up in the sidebar", async ({ page }) => {
const workspacePage = new WorkspacePage(page);
await workspacePage.setupEmptyFile();
await workspacePage.mockRPC(
"get-team?id=*",
"workspace/get-team-tokens.json",
);
await workspacePage.goToWorkspace();
const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
await tokensTabButton.click();
const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
await tokensTabPanel.getByTitle("Add token: Color").click();
// Create color token with mouse
await expect(workspacePage.tokensUpdateCreateModal).toBeVisible();
const nameField = workspacePage.tokensUpdateCreateModal.getByLabel("Name");
const valueField =
workspacePage.tokensUpdateCreateModal.getByLabel("Value");
await nameField.click();
await nameField.fill("color.primary");
await valueField.click();
await valueField.fill("red");
const submitButtonSelector = `button[type="submit"]:enabled`;
await page.waitForSelector(submitButtonSelector);
await page.locator(submitButtonSelector).click();
await expect(tokensTabPanel.getByText("color.primary")).toBeEnabled();
// Create token referencing the previous one with keyboard
await tokensTabPanel.getByTitle("Add token: Color").click();
await expect(workspacePage.tokensUpdateCreateModal).toBeVisible();
await nameField.click();
await nameField.fill("color.secondary");
await nameField.press("Tab");
await valueField.click();
await valueField.fill("{color.primary}");
await page.waitForSelector(submitButtonSelector);
await nameField.press("Enter");
const referenceToken = tokensTabPanel.getByText("color.secondary");
await expect(referenceToken).toBeEnabled();
// Tokens tab panel should have two tokens with the color red / #ff0000
await expect(tokensTabPanel.getByTitle("#ff0000")).toHaveCount(2);
});
});