mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-05-24 00:19:29 -04:00
Code Issues Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Andrés Moya
2026-05-19 18:46:25 +02:00
parent b630a86a0c
commit 3a9c19d466
1 changed files with 285 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

287
frontend/playwright/ui/specs/tokens/crud.spec.js
View File

@@ -2036,6 +2036,8 @@ test.describe("Tokens tab - delete", () => {
});
test.describe("User cant create groups that clash with token names", () => {
const unknownError = "Unknown error";
const changeSetInput = async (sidebar, setName, finalKey = "Enter") => {
const setInput = sidebar.locator("input:focus");
await expect(setInput).toBeVisible();
@@ -2052,7 +2054,6 @@ test.describe("User cant create groups that clash with token names", () => {
};
const createBadToken = async (page, type, name, textFieldName, value) => {
const unknownError = "Unknown error";
const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
const { tokensUpdateCreateModal } = await setupTokensFileRender(page, {
@@ -2083,7 +2084,7 @@ test.describe("User cant create groups that clash with token names", () => {
await expect(submitButton).toBeDisabled();
};
test("Border radius token", async ({ page }) => {
test("User can't create Border Radius token with group name that clashes with existing token", async ({ page }) => {
const { tokenThemesSetsSidebar, tokensSidebar, tokenContextMenuForToken } =
await setupTokensFileRender(page, {
file: "workspace/get-file-tokens-all-types.json"
@@ -2095,4 +2096,286 @@ test.describe("User cant create groups that clash with token names", () => {
await createBadToken(page, "Border Radius", "rad1.bad", "Value", "10");
});
test("User can't create Color token with group name that clashes with existing token", async ({ page }) => {
const { tokenThemesSetsSidebar, tokensSidebar, tokenContextMenuForToken } =
await setupTokensFileRender(page, {
file: "workspace/get-file-tokens-all-types.json"
});
await expect(tokensSidebar).toBeVisible();
await createSet(tokenThemesSetsSidebar, "Second set");
await createBadToken(page, "Color", "col1.bad", "Value", "red");
});
test("User can't create Dimensions token with group name that clashes with existing token", async ({ page }) => {
const { tokenThemesSetsSidebar, tokensSidebar, tokenContextMenuForToken } =
await setupTokensFileRender(page, {
file: "workspace/get-file-tokens-all-types.json"
});
await expect(tokensSidebar).toBeVisible();
await createSet(tokenThemesSetsSidebar, "Second set");
await createBadToken(page, "Dimensions", "dim1.bad", "Value", "100");
});
test("User can't create Font Size token with group name that clashes with existing token", async ({ page }) => {
const { tokenThemesSetsSidebar, tokensSidebar, tokenContextMenuForToken } =
await setupTokensFileRender(page, {
file: "workspace/get-file-tokens-all-types.json"
});
await expect(tokensSidebar).toBeVisible();
await createSet(tokenThemesSetsSidebar, "Second set");
await createBadToken(page, "Font Size", "fsiz1.bad", "Value", "16");
});
test("User can't create Font Weight token with group name that clashes with existing token", async ({ page }) => {
const { tokenThemesSetsSidebar, tokensSidebar, tokenContextMenuForToken } =
await setupTokensFileRender(page, {
file: "workspace/get-file-tokens-all-types.json"
});
await expect(tokensSidebar).toBeVisible();
await createSet(tokenThemesSetsSidebar, "Second set");
await createBadToken(page, "Font Weight", "wei1.bad", "Value", "400");
});
test("User can't create Letter Spacing token with group name that clashes with existing token", async ({ page }) => {
const { tokenThemesSetsSidebar, tokensSidebar, tokenContextMenuForToken } =
await setupTokensFileRender(page, {
file: "workspace/get-file-tokens-all-types.json"
});
await expect(tokensSidebar).toBeVisible();
await createSet(tokenThemesSetsSidebar, "Second set");
await createBadToken(page, "Letter Spacing", "lspa1.bad", "Value", "1");
});
test("User can't create Number token with group name that clashes with existing token", async ({ page }) => {
const { tokenThemesSetsSidebar, tokensSidebar, tokenContextMenuForToken } =
await setupTokensFileRender(page, {
file: "workspace/get-file-tokens-all-types.json"
});
await expect(tokensSidebar).toBeVisible();
await createSet(tokenThemesSetsSidebar, "Second set");
await createBadToken(page, "Number", "num1.bad", "Value", "10");
});
test("User can't create Rotation token with group name that clashes with existing token", async ({ page }) => {
const { tokenThemesSetsSidebar, tokensSidebar, tokenContextMenuForToken } =
await setupTokensFileRender(page, {
file: "workspace/get-file-tokens-all-types.json"
});
await expect(tokensSidebar).toBeVisible();
await createSet(tokenThemesSetsSidebar, "Second set");
await createBadToken(page, "Rotation", "rot1.bad", "Value", "90");
});
test("User can't create Sizing token with group name that clashes with existing token", async ({ page }) => {
const { tokenThemesSetsSidebar, tokensSidebar, tokenContextMenuForToken } =
await setupTokensFileRender(page, {
file: "workspace/get-file-tokens-all-types.json"
});
await expect(tokensSidebar).toBeVisible();
await createSet(tokenThemesSetsSidebar, "Second set");
await createBadToken(page, "Sizing", "siz1.bad", "Value", "100");
});
test("User can't create Spacing token with group name that clashes with existing token", async ({ page }) => {
const { tokenThemesSetsSidebar, tokensSidebar, tokenContextMenuForToken } =
await setupTokensFileRender(page, {
file: "workspace/get-file-tokens-all-types.json"
});
await expect(tokensSidebar).toBeVisible();
await createSet(tokenThemesSetsSidebar, "Second set");
await createBadToken(page, "Spacing", "spa1.bad", "Value", "10");
});
test("User can't create Stroke Width token with group name that clashes with existing token", async ({ page }) => {
const { tokenThemesSetsSidebar, tokensSidebar, tokenContextMenuForToken } =
await setupTokensFileRender(page, {
file: "workspace/get-file-tokens-all-types.json"
});
await expect(tokensSidebar).toBeVisible();
await createSet(tokenThemesSetsSidebar, "Second set");
await createBadToken(page, "Stroke Width", "str1.bad", "Value", "2");
});
test("User can't create Text Case token with group name that clashes with existing token", async ({ page }) => {
const { tokenThemesSetsSidebar, tokensSidebar, tokenContextMenuForToken } =
await setupTokensFileRender(page, {
file: "workspace/get-file-tokens-all-types.json"
});
await expect(tokensSidebar).toBeVisible();
await createSet(tokenThemesSetsSidebar, "Second set");
await createBadToken(page, "Text Case", "cas1.bad", "Value", "uppercase");
});
test("User can't create Text Decoration token with group name that clashes with existing token", async ({ page }) => {
const { tokenThemesSetsSidebar, tokensSidebar, tokenContextMenuForToken } =
await setupTokensFileRender(page, {
file: "workspace/get-file-tokens-all-types.json"
});
await expect(tokensSidebar).toBeVisible();
await createSet(tokenThemesSetsSidebar, "Second set");
await createBadToken(page, "Text Decoration", "td1.bad", "Value", "underline");
});
test("User can't create Typography token with group name that clashes with existing token", async ({ page }) => {
const { tokenThemesSetsSidebar, tokensSidebar } =
await setupTokensFileRender(page, {
file: "workspace/get-file-tokens-all-types.json"
});
await expect(tokensSidebar).toBeVisible();
await createSet(tokenThemesSetsSidebar, "Second set");
const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
const { tokensUpdateCreateModal } = await setupTokensFileRender(page, {
flags: ["enable-token-shadow"],
});
await tokensTabPanel
.getByRole("button", { name: `Add Token: Typography` })
.click();
await expect(tokensUpdateCreateModal).toBeVisible();
const nameField = tokensUpdateCreateModal.getByLabel("Name");
await nameField.fill("typ1.bad");
const fontFamilyField = tokensUpdateCreateModal.getByRole("textbox", {
name: "Font family",
});
await fontFamilyField.fill("Arial");
const fontSizeField = tokensUpdateCreateModal.getByRole("textbox", {
name: "Font size",
});
await fontSizeField.fill("16");
const fontWeightField = tokensUpdateCreateModal.getByRole("textbox", {
name: "Font weight",
});
await fontWeightField.fill("400");
const lineHeightField = tokensUpdateCreateModal.getByRole("textbox", {
name: "Line height",
});
await lineHeightField.fill("1.5");
const letterSpacingField = tokensUpdateCreateModal.getByRole("textbox", {
name: "Letter spacing",
});
await letterSpacingField.fill("0");
const textCaseField = tokensUpdateCreateModal.getByRole("textbox", {
name: "Text case",
});
await textCaseField.fill("none");
const textDecorationField = tokensUpdateCreateModal.getByRole("textbox", {
name: "Text decoration",
});
await textDecorationField.fill("none");
const submitButton = tokensUpdateCreateModal.getByRole("button", {
name: "Save",
});
const errorNode = tokensUpdateCreateModal.getByText(unknownError);
await expect(errorNode).toHaveCount(6);
await expect(submitButton).toBeDisabled();
});
test("User can't create Shadow token with group name that clashes with existing token", async ({ page }) => {
const { tokenThemesSetsSidebar, tokensSidebar } =
await setupTokensFileRender(page, {
file: "workspace/get-file-tokens-all-types.json"
});
await expect(tokensSidebar).toBeVisible();
await createSet(tokenThemesSetsSidebar, "Second set");
const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
const { tokensUpdateCreateModal } = await setupTokensFileRender(page, {
flags: ["enable-token-shadow"],
});
await tokensTabPanel
.getByRole("button", { name: `Add Token: Shadow` })
.click();
await expect(tokensUpdateCreateModal).toBeVisible();
const nameField = tokensUpdateCreateModal.getByLabel("Name");
await nameField.fill("sha1.bad");
const colorField = tokensUpdateCreateModal.getByRole("textbox", {
name: "Color",
});
await colorField.fill("red");
const offsetXField = tokensUpdateCreateModal.getByRole("textbox", {
name: "X",
});
await offsetXField.fill("4");
const offsetYField = tokensUpdateCreateModal.getByRole("textbox", {
name: "Y",
});
await offsetYField.fill("4");
const blurField = tokensUpdateCreateModal.getByRole("textbox", {
name: "Blur",
});
await blurField.fill("4");
const spreadField = tokensUpdateCreateModal.getByRole("textbox", {
name: "Spread",
});
await spreadField.fill("0");
const submitButton = tokensUpdateCreateModal.getByRole("button", {
name: "Save",
});
const errorNode = tokensUpdateCreateModal.getByText(unknownError);
await expect(errorNode).toHaveCount(4);
await expect(submitButton).toBeDisabled();
});
});