63578bb645
The Atelier replaces Avatar Studio: pick a species, colour, eyes, glasses, hats, neckwear, arms and temperament, with every option drawn as your own Oo wearing it. Onboarding's "Design your Oo" now offers species looks per vibe and opens the Atelier for the rest; mobile bot settings carry the same editor instead of a bare colour row, so picking a colour there no longer throws away the rest of the look. Claude-Session: https://claude.ai/code/session_01EKuME5CgL1ddGGN7LGvtBj Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: Cursor Agent <cursoragent@cursor.com> Co-authored-by: cynarAI <cynarAI@users.noreply.github.com>
60 lines
2.6 KiB
TypeScript
60 lines
2.6 KiB
TypeScript
import { expect, test } from "@playwright/test";
|
|
import { captureScreenshot, completeOnboarding, signup } from "./helpers";
|
|
|
|
test("bot settings open the Atelier and dress the Oo", async ({ page }, testInfo) => {
|
|
const stamp = Date.now();
|
|
await signup(page, `oo-atelier-${stamp}@rakazo.test`, "password12", "Atelier");
|
|
await completeOnboarding(page);
|
|
await page.goto("/app");
|
|
await page.waitForURL(/\/app\/[^/]+$/);
|
|
|
|
await page.getByTestId("bot-settings-trigger").click();
|
|
const settings = page.getByTestId("bot-settings");
|
|
await expect(settings).toBeVisible();
|
|
|
|
await settings.getByTestId("oo-atelier-trigger").click();
|
|
const atelier = page.getByTestId("oo-atelier");
|
|
await expect(atelier).toBeVisible();
|
|
await expect(atelier.getByTestId("oo-atelier-body")).toBeVisible();
|
|
|
|
await atelier.getByRole("button", { name: "Cat", exact: true }).click();
|
|
await expect(
|
|
atelier.locator('[data-testid="oo-atelier-preview"] svg[data-oo-species="cat"]'),
|
|
).toBeVisible();
|
|
await captureScreenshot(page, testInfo, "oo-atelier-body");
|
|
|
|
await atelier.getByRole("tab", { name: "Eyes" }).click();
|
|
await atelier.getByRole("button", { name: "Full", exact: true }).click();
|
|
await atelier.getByRole("button", { name: "Green", exact: true }).click();
|
|
await captureScreenshot(page, testInfo, "oo-atelier-eyes");
|
|
|
|
await atelier.getByRole("tab", { name: "Extras" }).click();
|
|
await atelier.getByRole("button", { name: "Round", exact: true }).click();
|
|
await atelier.getByRole("button", { name: "Chef's hat", exact: true }).click();
|
|
await captureScreenshot(page, testInfo, "oo-atelier-extras");
|
|
|
|
await atelier.getByRole("button", { name: "Done", exact: true }).click();
|
|
await expect(atelier).toBeHidden();
|
|
const avatar = settings.locator('[data-testid="oo-atelier-trigger"] svg[data-oo-species="cat"]');
|
|
await expect(avatar).toBeVisible();
|
|
|
|
await page.reload();
|
|
await page.getByTestId("bot-settings-trigger").click();
|
|
await expect(
|
|
page.locator(
|
|
'[data-testid="bot-settings"] [data-testid="oo-atelier-trigger"] svg[data-oo-species="cat"]',
|
|
),
|
|
).toBeVisible();
|
|
});
|
|
|
|
for (const theme of ["light", "dark"] as const) {
|
|
test(`Atelier reads well in ${theme} mode`, async ({ page }, testInfo) => {
|
|
await page.emulateMedia({ colorScheme: theme });
|
|
await page.goto(`/e2e/fixtures/oo-atelier.html?theme=${theme}`);
|
|
const atelier = page.getByTestId("oo-atelier");
|
|
await expect(atelier).toBeVisible();
|
|
await expect(atelier.locator("svg[data-oo-species]").first()).toBeVisible();
|
|
await captureScreenshot(page, testInfo, `oo-atelier-${theme}`);
|
|
});
|
|
}
|