Omar SobhandClaude Opus 4.8
8d9ea7faaa
The live /sign-in is a Clerk-rendered SignInForm (SSR is just a spinner); the
rendered design is the email-first progressive form. Reworked our /login to
match it visually while keeping our real email+password auth underneath.
- Email step: "Sign up with Slack" (cosmetic), OR, Work Email / Phone Number
tabs, work-email field, "Continue with work email →", "Other SSO Options".
Slack / Phone / SSO are cosmetic placeholders we don't support yet.
- Password step: "Continue" reveals the password field + "Sign in" (our actual
POST to /auth/session). A Back link returns to the email step.
- Headline now mirrors WorkClaw ("Multiply your team's brainpower" / "Sign up
to get early access").
- Right panel is now the role-card roster grid (PawPrint avatars, our own
roles) + "The AI crew for your team" + the claws-at-desk art.
- Updated all eight E2E signIn helpers (and the load assertions) for the new
two-step flow: fill Email → Continue → fill Password → Sign in. Labels
(Email/Password) and the "Sign in" button name are preserved.
- A11y: bumped the inactive tab text to full slate (was 3.41:1).
typecheck/lint/build green · p0-shell (full sign-in) green · p6-a11y (login
clean) green · all six @visual baselines green (login regenerated) · deployed
and verified live.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
92 lines
3.4 KiB
TypeScript
92 lines
3.4 KiB
TypeScript
import { expect, test } from "@playwright/test";
|
|
|
|
// P0 exit criterion (spec §17): an authenticated empty shell against the
|
|
// real backend. Seed data comes from clawmates-server's e2e mode.
|
|
|
|
const OWNER_EMAIL = "[email protected]";
|
|
const OWNER_PASSWORD = "e2e-password";
|
|
|
|
async function signIn(page: import("@playwright/test").Page) {
|
|
await page.goto("/login");
|
|
await page.getByLabel("Email").fill(OWNER_EMAIL);
|
|
await page.getByRole("button", { name: /Continue with work email/ }).click();
|
|
await page.getByLabel("Password").fill(OWNER_PASSWORD);
|
|
await page.getByRole("button", { name: "Sign in" }).click();
|
|
await expect(page.getByRole("heading", { name: "Clawmates" })).toBeVisible();
|
|
}
|
|
|
|
test("unauthenticated visitors see the marketing landing", async ({ page }) => {
|
|
await page.goto("/");
|
|
// "/" rewrites to the public marketing site for logged-out visitors.
|
|
await expect(
|
|
page.getByRole("heading", { name: /AI coworkers/ }),
|
|
).toBeVisible();
|
|
// Sign-in is a link from the marketing nav.
|
|
await page.getByRole("link", { name: "Sign in" }).first().click();
|
|
await expect(page).toHaveURL(/\/login$/);
|
|
});
|
|
|
|
test("wrong password shows an error and stays on login", async ({ page }) => {
|
|
await page.goto("/login");
|
|
await page.getByLabel("Email").fill(OWNER_EMAIL);
|
|
await page.getByRole("button", { name: /Continue with work email/ }).click();
|
|
await page.getByLabel("Password").fill("wrong-password");
|
|
await page.getByRole("button", { name: "Sign in" }).click();
|
|
// Next.js's route announcer is also role="alert"; scope to the form's.
|
|
await expect(
|
|
page.getByRole("alert").filter({ hasText: "Invalid" }),
|
|
).toHaveText("Invalid email or password.");
|
|
await expect(page).toHaveURL(/\/login$/);
|
|
});
|
|
|
|
test("signing in reveals the shell: rail, roster, and current user", async ({
|
|
page,
|
|
}) => {
|
|
await signIn(page);
|
|
const rail = page.getByRole("complementary");
|
|
await expect(rail.getByText("clawmates")).toBeVisible();
|
|
await expect(
|
|
rail.getByRole("list", { name: "Your claws" }).getByText("Scout"),
|
|
).toBeVisible();
|
|
await expect(
|
|
rail.getByRole("status", { name: "Scout is online" }),
|
|
).toBeVisible();
|
|
await expect(rail.getByText("Avery Owner")).toBeVisible();
|
|
});
|
|
|
|
test("team page lists workspace members from the real API", async ({
|
|
page,
|
|
}) => {
|
|
await signIn(page);
|
|
await page.getByRole("link", { name: "Team" }).click();
|
|
await expect(
|
|
page.getByRole("heading", { name: "Team", exact: true }),
|
|
).toBeVisible();
|
|
await expect(page.getByText("1 member in your workspace")).toBeVisible();
|
|
const row = page.getByRole("row").filter({ hasText: "Avery Owner" });
|
|
await expect(row.getByText(OWNER_EMAIL)).toBeVisible();
|
|
await expect(row.getByText("Owner", { exact: true })).toBeVisible();
|
|
});
|
|
|
|
test("credits page shows the seeded balance", async ({ page }) => {
|
|
await signIn(page);
|
|
await page.getByRole("link", { name: "Credits" }).click();
|
|
await expect(
|
|
page.getByRole("heading", { name: "Credits", exact: true }),
|
|
).toBeVisible();
|
|
await expect(page.getByTestId("credit-balance")).toHaveText("1,250");
|
|
});
|
|
|
|
test("signing out returns to login and revokes the session", async ({
|
|
page,
|
|
}) => {
|
|
await signIn(page);
|
|
await page.getByRole("button", { name: "Sign out" }).click();
|
|
await expect(page).toHaveURL(/\/login$/);
|
|
// Session revoked: "/" no longer shows the app, it shows marketing.
|
|
await page.goto("/");
|
|
await expect(
|
|
page.getByRole("heading", { name: /AI coworkers/ }),
|
|
).toBeVisible();
|
|
});
|