1ed4868dcf
* feat(web): WOW mobile-first onboarding look picker with swipe previews Replace the form-style emoji step with category chips and a swipeable look carousel. Each preset maps to existing color, shape, and pose taxonomies; avatarValue still lands as color::shape on bot create. Co-authored-by: cynarAI <cynarAI@users.noreply.github.com> * style(web): format onboarding look picker files Co-authored-by: cynarAI <cynarAI@users.noreply.github.com> --------- Co-authored-by: Cursor Agent <cursoragent@cursor.com> Co-authored-by: cynarAI <cynarAI@users.noreply.github.com>
67 lines
2.2 KiB
TypeScript
67 lines
2.2 KiB
TypeScript
import type { Page } from "@playwright/test";
|
|
import { expect, test } from "@playwright/test";
|
|
import { captureScreenshot, signup } from "./helpers";
|
|
|
|
test.use({
|
|
hasTouch: true,
|
|
isMobile: true,
|
|
viewport: { width: 390, height: 844 },
|
|
});
|
|
|
|
async function swipeLook(page: Page, start: [number, number], end: [number, number]) {
|
|
await page.getByTestId("onboarding-look-carousel").evaluate(
|
|
(root, { start, end }) => {
|
|
function touch([clientX, clientY]: [number, number]) {
|
|
return new Touch({ clientX, clientY, identifier: 1, target: root });
|
|
}
|
|
const first = touch(start);
|
|
root.dispatchEvent(
|
|
new TouchEvent("touchstart", {
|
|
bubbles: true,
|
|
cancelable: true,
|
|
changedTouches: [first],
|
|
touches: [first],
|
|
}),
|
|
);
|
|
const last = touch(end);
|
|
root.dispatchEvent(
|
|
new TouchEvent("touchend", {
|
|
bubbles: true,
|
|
cancelable: true,
|
|
changedTouches: [last],
|
|
touches: [],
|
|
}),
|
|
);
|
|
},
|
|
{ start, end },
|
|
);
|
|
}
|
|
|
|
test("mobile onboarding: category pick and swipe look previews", async ({ page }, testInfo) => {
|
|
const stamp = Date.now();
|
|
await signup(page, `oo-swipe-${stamp}@rakazo.test`, "password12", "Swipe Tester");
|
|
|
|
await page.waitForURL(/\/(onboarding|app)/, { timeout: 20_000 });
|
|
await expect(page.getByTestId("onboarding-oo-designer")).toBeVisible();
|
|
await expect(page.getByRole("heading", { name: /Design your Oo/i })).toBeVisible();
|
|
await expect(page.getByTestId("onboarding-look-preview")).toBeVisible();
|
|
|
|
await page.getByTestId("onboarding-look-category-coder").click();
|
|
await expect(page.getByTestId("onboarding-look-category-coder")).toHaveAttribute(
|
|
"aria-selected",
|
|
"true",
|
|
);
|
|
|
|
const secondDot = page.getByRole("tab", { name: /Look 2 of/i });
|
|
await swipeLook(page, [280, 420], [120, 420]);
|
|
await expect(secondDot).toHaveAttribute("aria-selected", "true");
|
|
|
|
if (testInfo) await captureScreenshot(page, testInfo, "mobile-onboarding-oo-swipe");
|
|
|
|
await page
|
|
.getByRole("button", { name: /Continue/i })
|
|
.first()
|
|
.click();
|
|
await expect(page.getByRole("heading", { name: /Tell us about yourself/i })).toBeVisible();
|
|
});
|