diff --git a/ui/src/pages/Auth.test.tsx b/ui/src/pages/Auth.test.tsx new file mode 100644 index 00000000..39682c34 --- /dev/null +++ b/ui/src/pages/Auth.test.tsx @@ -0,0 +1,205 @@ +// @vitest-environment jsdom + +import { flushSync } from "react-dom"; +import { createRoot } from "react-dom/client"; +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import { MemoryRouter, Route, Routes } from "react-router-dom"; +import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; +import { AuthPage } from "./Auth"; + +const getSessionMock = vi.hoisted(() => vi.fn()); +const signInEmailMock = vi.hoisted(() => vi.fn()); +const signUpEmailMock = vi.hoisted(() => vi.fn()); + +vi.mock("../api/auth", () => ({ + authApi: { + getSession: () => getSessionMock(), + signInEmail: (input: unknown) => signInEmailMock(input), + signUpEmail: (input: unknown) => signUpEmailMock(input), + }, +})); + +// The ASCII art animation drives a canvas/requestAnimationFrame loop that adds +// nothing to these assertions, so stub it out. +vi.mock("@/components/AsciiArtAnimation", () => ({ + AsciiArtAnimation: () => null, +})); + +// The router's navigate wrapper reads the active company prefix from context. +vi.mock("@/context/CompanyContext", () => ({ + useCompany: () => ({ + selectedCompany: null, + selectedCompanyId: null, + companies: [], + selectionSource: "manual", + loading: false, + error: null, + setSelectedCompanyId: vi.fn(), + reloadCompanies: vi.fn(), + createCompany: vi.fn(), + }), +})); + +// eslint-disable-next-line @typescript-eslint/no-explicit-any +(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true; + +async function act(callback: () => void | Promise) { + let result: void | Promise = undefined; + flushSync(() => { + result = callback(); + }); + await result; +} + +async function flushReact() { + await act(async () => { + await Promise.resolve(); + await new Promise((resolve) => window.setTimeout(resolve, 0)); + }); + flushSync(() => {}); +} + +function renderAuthPage(container: HTMLElement) { + const root = createRoot(container); + const queryClient = new QueryClient({ + defaultOptions: { queries: { retry: false } }, + }); + return { root, queryClient }; +} + +describe("AuthPage", () => { + let container: HTMLDivElement; + + beforeEach(() => { + container = document.createElement("div"); + document.body.appendChild(container); + getSessionMock.mockResolvedValue(null); + signInEmailMock.mockResolvedValue(undefined); + signUpEmailMock.mockResolvedValue(undefined); + }); + + afterEach(() => { + container.remove(); + document.body.innerHTML = ""; + vi.clearAllMocks(); + }); + + async function mount() { + const { root, queryClient } = renderAuthPage(container); + await act(async () => { + root.render( + + + + } /> + + + , + ); + }); + await flushReact(); + await flushReact(); + return root; + } + + it("exposes password-manager metadata and a11y attributes on the sign-in form", async () => { + const root = await mount(); + + const emailInput = container.querySelector('input[name="email"]') as HTMLInputElement; + const passwordInput = container.querySelector('input[name="password"]') as HTMLInputElement; + + expect(emailInput).not.toBeNull(); + expect(passwordInput).not.toBeNull(); + + // 1Password / password-manager recognition: identifier field is "username". + expect(emailInput.getAttribute("autocomplete")).toBe("username"); + expect(emailInput.getAttribute("type")).toBe("email"); + expect(passwordInput.getAttribute("autocomplete")).toBe("current-password"); + + // Stable ids/names for both inputs. + expect(emailInput.id).toBe("email"); + expect(passwordInput.id).toBe("password"); + + // Required + programmatic required state. + expect(emailInput.required).toBe(true); + expect(emailInput.getAttribute("aria-required")).toBe("true"); + expect(passwordInput.required).toBe(true); + expect(passwordInput.getAttribute("aria-required")).toBe("true"); + + // Programmatic labels. + expect(container.querySelector('label[for="email"]')).not.toBeNull(); + expect(container.querySelector('label[for="password"]')).not.toBeNull(); + + await act(async () => { + root.unmount(); + }); + }); + + it("uses new-password autocomplete in sign-up mode", async () => { + const root = await mount(); + + const createOne = Array.from(container.querySelectorAll("button")).find( + (button) => button.textContent === "Create one", + ); + expect(createOne).not.toBeNull(); + + await act(async () => { + createOne?.dispatchEvent(new MouseEvent("click", { bubbles: true })); + }); + await flushReact(); + + const nameInput = container.querySelector('input[name="name"]') as HTMLInputElement; + const passwordInput = container.querySelector('input[name="password"]') as HTMLInputElement; + expect(nameInput).not.toBeNull(); + expect(nameInput.getAttribute("autocomplete")).toBe("name"); + expect(nameInput.required).toBe(true); + expect(passwordInput.getAttribute("autocomplete")).toBe("new-password"); + + await act(async () => { + root.unmount(); + }); + }); + + it("renders auth errors in an assertive alert region referenced by the inputs", async () => { + const root = await mount(); + + const inputValueSetter = Object.getOwnPropertyDescriptor( + HTMLInputElement.prototype, + "value", + )?.set; + const emailInput = container.querySelector('input[name="email"]') as HTMLInputElement; + const passwordInput = container.querySelector('input[name="password"]') as HTMLInputElement; + + await act(async () => { + inputValueSetter!.call(emailInput, "jane@example.com"); + emailInput.dispatchEvent(new Event("input", { bubbles: true })); + inputValueSetter!.call(passwordInput, "wrongpass"); + passwordInput.dispatchEvent(new Event("input", { bubbles: true })); + }); + + signInEmailMock.mockRejectedValueOnce(new Error("Invalid email or password")); + + const form = container.querySelector("form") as HTMLFormElement; + await act(async () => { + form.dispatchEvent(new Event("submit", { bubbles: true, cancelable: true })); + }); + await flushReact(); + await flushReact(); + + const alert = container.querySelector('[role="alert"]') as HTMLElement; + expect(alert).not.toBeNull(); + expect(alert.hasAttribute("aria-live")).toBe(false); + expect(alert.textContent).toContain("Invalid email or password"); + + const errorId = alert.id; + expect(errorId.length).toBeGreaterThan(0); + expect(emailInput.getAttribute("aria-describedby")).toBe(errorId); + expect(emailInput.getAttribute("aria-invalid")).toBe("true"); + expect(passwordInput.getAttribute("aria-describedby")).toBe(errorId); + expect(passwordInput.getAttribute("aria-invalid")).toBe("true"); + + await act(async () => { + root.unmount(); + }); + }); +}); diff --git a/ui/src/pages/Auth.tsx b/ui/src/pages/Auth.tsx index 56e67fc1..fc2f7a84 100644 --- a/ui/src/pages/Auth.tsx +++ b/ui/src/pages/Auth.tsx @@ -19,6 +19,7 @@ export function AuthPage() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [error, setError] = useState(null); + const errorId = "auth-error"; const nextPath = useMemo( () => searchParams.get("next") || getRememberedInvitePath() || "/", @@ -115,6 +116,10 @@ export function AuthPage() { value={name} onChange={(event) => setName(event.target.value)} autoComplete="name" + required + aria-required="true" + aria-invalid={error ? true : undefined} + aria-describedby={error ? errorId : undefined} autoFocus /> @@ -128,7 +133,11 @@ export function AuthPage() { type="email" value={email} onChange={(event) => setEmail(event.target.value)} - autoComplete="email" + autoComplete="username" + required + aria-required="true" + aria-invalid={error ? true : undefined} + aria-describedby={error ? errorId : undefined} autoFocus={mode === "sign_in"} /> @@ -142,9 +151,17 @@ export function AuthPage() { value={password} onChange={(event) => setPassword(event.target.value)} autoComplete={mode === "sign_in" ? "current-password" : "new-password"} + required + aria-required="true" + aria-invalid={error ? true : undefined} + aria-describedby={error ? errorId : undefined} /> - {error &&

{error}

} + {error && ( + + )}