evOo-local/apps/web/e2e/onboarding-oo-swipe.spec.ts

import type { Page } from "@playwright/test";
import { expect, test } from "@playwright/test";
import { captureScreenshot, signup, skipOnboardingNameStep } from "./helpers";

test.beforeEach(async ({ page }) => {
  await page.route("**/rpc/integrationSetup/get", (route) =>
    route.fulfill({
      json: {
        json: {
          canConfigure: true,
          needsSetup: false,
          webUrl: "https://example.test/integrations/setup",
          providers: [{ id: "composio", configured: true }],
        },
      },
    }),
  );
});

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 skipOnboardingNameStep(page);
  await expect(page.getByRole("heading", { name: /Choose your language/i })).toBeVisible();
});