github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-08-28 15:48:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

🎉 Add integration test to check new validation

Browse Source
This commit is contained in:
Andrés Moya 2025-10-28 13:29:10 +01:00 committed by Andrés Moya
parent 70143f8ae3
commit 94cbf9d8f2
1 changed files with 69 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
frontend/playwright/ui/specs/tokens.spec.js
View File

@ -95,6 +95,24 @@ const setupTypographyTokensFile = async (page, 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.describe("Tokens: Tokens Tab", () => {
test("Clicking tokens tab button opens tokens sidebar tab", async ({ test("Clicking tokens tab button opens tokens sidebar tab", async ({
page, page,
@ -806,18 +824,25 @@ test.describe("Tokens: Themes modal", () => {
}) })
.click(); .click();
await tokenThemeUpdateCreateModal const groupInput = tokenThemeUpdateCreateModal.getByLabel("Group");
.getByLabel("Group") const nameInput = tokenThemeUpdateCreateModal.getByLabel("Theme");
.fill("New Group name"); const saveButton = tokenThemeUpdateCreateModal.getByRole("button", {
await tokenThemeUpdateCreateModal name: "Save theme",
.getByLabel("Theme") });
.fill("New Theme name");
await groupInput.fill("Core"); // Invalid because "Core / Light" theme already exists
await nameInput.fill("Light");
await tokenThemeUpdateCreateModal await checkInputFieldWithError(tokenThemeUpdateCreateModal, nameInput);
.getByRole("button", { await expect(saveButton).toBeDisabled();
name: "Save theme",
}) await groupInput.fill("New Group name");
.click(); await nameInput.fill("New Theme name");
await checkInputFieldWithoutError(tokenThemeUpdateCreateModal, nameInput);
await expect(saveButton).not.toBeDisabled();
await saveButton.click();
await expect( await expect(
tokenThemeUpdateCreateModal.getByText("New Theme name"), tokenThemeUpdateCreateModal.getByText("New Theme name"),
@ -845,12 +870,36 @@ test.describe("Tokens: Themes modal", () => {
.first() .first()
.click(); .click();
await tokenThemeUpdateCreateModal const groupInput = tokenThemeUpdateCreateModal.getByLabel("Group");
.getByLabel("Theme") const nameInput = tokenThemeUpdateCreateModal.getByLabel("Theme");
.fill("Changed Theme name"); const saveButton = tokenThemeUpdateCreateModal.getByRole("button", {
await tokenThemeUpdateCreateModal name: "Save theme",
.getByLabel("Group") });
.fill("Changed Group name");
await groupInput.fill("Core"); // Invalid because "Core / Dark" theme already exists
await nameInput.fill("Dark");
await checkInputFieldWithError(tokenThemeUpdateCreateModal, nameInput);
await expect(saveButton).toBeDisabled();
await groupInput.fill("Core"); // Valid because "Core / Light" theme already exists
await nameInput.fill("Light"); // but it's the same theme we are editing
await checkInputFieldWithoutError(tokenThemeUpdateCreateModal, nameInput);
await expect(saveButton).not.toBeDisabled();
await nameInput.fill("Changed Theme name"); // New names should be also valid
await groupInput.fill("Changed Group name");
await checkInputFieldWithoutError(tokenThemeUpdateCreateModal, nameInput);
await expect(saveButton).not.toBeDisabled();
expect(
await nameInput.getAttribute("aria-invalid")
).toBeNull();
expect(
await nameInput.getAttribute("aria-describedby")
).toBeNull();
const checkboxes = await tokenThemeUpdateCreateModal const checkboxes = await tokenThemeUpdateCreateModal
.locator('[role="checkbox"]') .locator('[role="checkbox"]')
@ -870,11 +919,9 @@ test.describe("Tokens: Themes modal", () => {
await firstButton.click(); await firstButton.click();
await tokenThemeUpdateCreateModal await expect(saveButton).not.toBeDisabled();
.getByRole("button", {
name: "Save theme", await saveButton.click();
})
.click();
await expect( await expect(
tokenThemeUpdateCreateModal.getByText("Changed Theme name"), tokenThemeUpdateCreateModal.getByText("Changed Theme name"),