evOo-local/apps/web/e2e/first-conversation.spec.ts

/**
 * E2E: a new account reaches onboarding and, without a model, sees how to connect one.
 */
import { expect, test } from "@playwright/test";
import { captureScreenshot, completeOnboarding, routePatchRpc, signup } from "./helpers";

test("a signed-out visit to onboarding returns there after sign-in", async ({ page }) => {
  const email = `return-onboarding-${Date.now()}@rakazo.test`;
  await signup(page, email, "password12", "Return");
  await page.waitForURL(/\/onboarding$/, { timeout: 20_000 });

  await page.context().clearCookies();
  await page.goto("/onboarding", { waitUntil: "domcontentloaded" });
  await page.waitForURL((url) => url.pathname === "/sign-in");
  expect(new URL(page.url()).searchParams.get("next")).toBe("/onboarding");

  await page.getByPlaceholder("Your email address").fill(email);
  await page.getByPlaceholder("Password").fill("password12");
  await page.getByRole("button", { name: "Continue with email" }).click();
  await page.waitForURL(/\/onboarding$/, { timeout: 20_000 });
  await expect(page.locator('[data-rakazo-surface="onboarding"]')).toBeVisible();
});

test("without a model the composer offers to connect one", async ({ page }) => {
  const testInfo = test.info();
  await signup(page, `model-needed-${Date.now()}@rakazo.test`, "password12", "Model needed");
  await completeOnboarding(page, undefined, { mainConversation: true });

  // Scripted CI has a model; this is what the API returns without one.
  const keyless = {
    needsModel: true,
    defaultProvider: "anthropic",
    defaultModel: "claude-opus-5-5",
  };
  await routePatchRpc(page, "bootstrap", (json) => ({
    ...json,
    me: { ...(json.me as Record<string, unknown>), ...keyless },
  }));
  await routePatchRpc(page, "me", (json) => ({ ...json, ...keyless }));
  await page.reload({ waitUntil: "domcontentloaded" });

  const notice = page.getByTestId("composer-model-needed");
  await expect(notice).toContainText("Connect a model so your Oo can reply.");
  await captureScreenshot(page, testInfo, "first-conversation-model-needed");

  await notice.getByRole("button", { name: "Connect model" }).click();
  const settings = page.getByTestId("model-settings");
  await expect(settings).toBeVisible();
  // The recommendation is preselected, so only the key or sign-in is left.
  await expect(settings).toContainText("Claude Opus 5.5");
  await expect(settings.getByRole("combobox", { name: "Model" })).toHaveCount(0);
  await expect(settings.getByRole("button", { name: /Sign in with Claude/ })).toBeVisible();
  await expect(settings.getByLabel("Or connect an API key")).toBeVisible();
  await captureScreenshot(page, testInfo, "model-settings-recommended");
  await page.emulateMedia({ colorScheme: "dark" });
  await expect(page.locator("html")).toHaveAttribute("data-theme", "dark");
  await captureScreenshot(page, testInfo, "model-settings-recommended-dark");

  await settings.getByRole("button", { name: "Other providers" }).click();
  await expect(settings.getByRole("combobox", { name: "Model" })).toHaveText("Claude Opus 5.5");
});