0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-20 05:34:23 -05:00

Add integration tests for creating sets

This commit is contained in:
Florian Schroedl 2024-11-26 10:56:52 +01:00
parent b5110c2222
commit 7bce4ab425
3 changed files with 40 additions and 0 deletions

View file

@ -80,6 +80,8 @@ export class WorkspacePage extends BaseWebSocketPage {
"token-update-create-modal",
);
this.tokenThemesSetsSidebar = page.getByTestId("token-themes-sets-sidebar");
this.tokenSetItems = page.getByTestId("tokens-set-item");
this.tokenSetGroupItems = page.getByTestId("tokens-set-group-item");
}
async goToWorkspace({

View file

@ -22,6 +22,8 @@ const setupFileWithTokens = async (page) => {
workspacePage,
tokensUpdateCreateModal: workspacePage.tokensUpdateCreateModal,
tokenThemesSetsSidebar: workspacePage.tokenThemesSetsSidebar,
tokenSetItems: workspacePage.tokenSetItems,
tokenSetGroupItems: workspacePage.tokenSetGroupItems,
};
};
@ -102,3 +104,37 @@ test.describe("Tokens: Tokens Tab", () => {
).toHaveAttribute("aria-checked", "true");
});
});
test.describe("Tokens: Sets Tab", () => {
const createSet = async (sidebar, setName) => {
const tokensTabButton = sidebar
.getByRole("button", { name: "Add set" })
.click();
const setInput = sidebar.locator("input:focus");
await expect(setInput).toBeVisible();
await setInput.fill(setName);
await setInput.press("Enter");
};
test("User creates sets tree structure by entering a set path", async ({
page,
}) => {
const {
workspacePage,
tokenThemesSetsSidebar,
tokenSetItems,
tokenSetGroupItems,
} = await setupFileWithTokens(page);
const tokensTabButton = tokenThemesSetsSidebar
.getByRole("button", { name: "Add set" })
.click();
await createSet(tokenThemesSetsSidebar, "core/colors/light");
await createSet(tokenThemesSetsSidebar, "core/colors/dark");
await expect(tokenSetItems).toHaveCount(2);
await expect(tokenSetGroupItems).toHaveCount(2);
});
});

View file

@ -83,6 +83,7 @@
:tree-path tree-path})))))]
[:div {;; :ref dref
:role "button"
:data-testid "tokens-set-group-item"
:style {"--tree-depth" tree-depth}
:class (stl/css-case :set-item-container true
:selected-set selected?)
@ -133,6 +134,7 @@
:tree-path tree-path})))))]
[:div {;; :ref dref
:role "button"
:data-testid "tokens-set-item"
:style {"--tree-depth" tree-depth}
:class (stl/css-case :set-item-container true
:selected-set selected?)