Skip to content
Open
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
183 changes: 183 additions & 0 deletions e2e/custom-color-palette.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,183 @@
import { Page } from "@playwright/test";

import { setup, sleep } from "./common";

const { test, expect, describe } = setup();

const addNewColor = async (page: Page, i: number) => {
await page.locator('[data-testId="profile-add-new-color"]').click();

await page.getByRole("button", { name: "Open Color Picker" }).last().click();
await sleep(1_000);

const saturation = page.locator('[data-testId="color-picker-saturation"]');
await saturation.waitFor({ state: "visible", timeout: 5000 });

const box = await saturation.boundingBox();
if (!box) {
throw new Error("Could not get saturation element bounding box");
}

const randomX = box.x + Math.random() * box.width;
const randomY = box.y + Math.random() * box.height;

await page.mouse.click(randomX, randomY);
await sleep(1_000);
await page.keyboard.press("Escape");
};

test("Custom color palettes on profile page should allow CREATE, UPDATE and DELETING palettes ", async ({
page,
auth,
}) => {
test.slow();

await page.goto("/en");
await auth();
await page.waitForLoadState("networkidle");
await page.goto("/en/profile");
const url = page.url();
expect(url.endsWith("/en/profile")).toBe(true);
await page.locator('[data-testId="color-palettes-tab"]').click();

//Create Categorical Palette
await page.locator('[data-testId="add-profile-color-palette"]').click();
await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
await sleep(1_000);

const categoricalTitleInput = page.locator(
'input[name="custom-color-palette-title"]'
);
await categoricalTitleInput.waitFor({ state: "visible", timeout: 5000 });
await categoricalTitleInput.click();
await categoricalTitleInput.fill("Categorical Palette");
await page.keyboard.press("Enter");
await page.waitForTimeout(500);

for (let i = 0; i < 3; i++) {
await addNewColor(page, i);
}
await page.locator('[data-testId="profile-save-color-palette"]').click();
await sleep(1_000);

const categoricalTitleExists = await page
.getByText("Categorical Palette")
.isVisible();
expect(categoricalTitleExists).toBe(true);

//Create Sequential Palette
await page.locator('[data-testId="add-profile-color-palette"]').click();
await page
.locator('[data-testId="profile-color-palette-sequential"]')
.click();
await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
await sleep(1_000);

const sequentialTitleInput = page.locator(
'input[name="custom-color-palette-title"]'
);
await sequentialTitleInput.waitFor({ state: "visible", timeout: 5000 });
await sequentialTitleInput.click();
await sequentialTitleInput.fill("Sequential Palette");
await page.keyboard.press("Enter");
await page.waitForTimeout(500);

await page.locator('[data-testId="profile-save-color-palette"]').click();
await sleep(1_000);

const sequentialTitleExists = await page
.getByText("Sequential Palette")
.isVisible();
expect(sequentialTitleExists).toBe(true);

//Create Diverging Palette (2 colors)
await page.locator('[data-testId="add-profile-color-palette"]').click();
await page.locator('[data-testId="profile-color-palette-diverging"]').click();
await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
await sleep(1_000);

const divergingTwoTitleInput = page.locator(
'input[name="custom-color-palette-title"]'
);
await divergingTwoTitleInput.waitFor({ state: "visible", timeout: 5000 });
await divergingTwoTitleInput.click();
await divergingTwoTitleInput.fill("Diverging Palette (2)");
await page.keyboard.press("Enter");
await page.waitForTimeout(500);

await page.getByRole("button", { name: "Remove Color" }).first().click();
await sleep(1_000);

await page.locator('[data-testId="profile-save-color-palette"]').click();
await sleep(1_000);

const divergingTwoTitleExists = await page
.getByText("Diverging Palette (2)")
.isVisible();
expect(divergingTwoTitleExists).toBe(true);

//Create Diverging Palette (3 colors)
await page.locator('[data-testId="add-profile-color-palette"]').click();
await page.locator('[data-testId="profile-color-palette-diverging"]').click();
await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
await sleep(1_000);

const divergingThreeTitleInput = page.locator(
'input[name="custom-color-palette-title"]'
);
await divergingThreeTitleInput.waitFor({ state: "visible", timeout: 5000 });
await divergingThreeTitleInput.click();
await divergingThreeTitleInput.fill("Diverging Palette (3)");
await page.keyboard.press("Enter");
await page.waitForTimeout(500);

await page.locator('[data-testId="profile-save-color-palette"]').click();
await sleep(1_000);

const divergingThreeTitleExists = await page
.getByText("Diverging Palette (3)")
.isVisible();
expect(divergingThreeTitleExists).toBe(true);

//Update Color palettes
//Edit Categorical Palette add more colors
await page
.getByRole("button", { name: "Edit Color Palette" })
.first()
.click();

await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
await sleep(1_000);

for (let i = 0; i < 3; i++) {
await addNewColor(page, i);
}
await page.locator('[data-testId="profile-save-color-palette"]').click();
await sleep(1_000);

//Edit Sequential Palette change type
await page
.getByRole("button", { name: "Edit Color Palette" })
.first()
.click();
await page
.locator('[data-testId="profile-color-palette-categorical"]')
.click();

await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
await sleep(1_000);

for (let i = 0; i < 3; i++) {
await addNewColor(page, i);
}
await page.locator('[data-testId="profile-save-color-palette"]').click();
await sleep(1_000);

//Delete Color palettes
for (let i = 0; i < 4; i++) {
await page
.getByRole("button", { name: "Delete Color Palette" })
.first()
.click();
}
});