create-ailk 0.4.0 → 0.6.0

package/templates/apps/web/app/[locale]/(auth)/__tests__/auth-pages.test.tsx

@@ -0,0 +1,282 @@
+/**
+ * Tests for the `(auth)` route group's five pages and its layout (#5963).
+ *
+ * This suite is AC-1's and AC-3's scorer:
+ *   - AC-1: each of the five pages renders a real card (no 404 path), and the
+ *     group's layout mounts AuthShell with no Nav and no marketing Footer.
+ *   - AC-2 (the half jsdom CAN see): the moved sign-in card carries no
+ *     `min-h-screen` / `items-center` / `justify-center` framing of its own —
+ *     a regression to vertical centering fails a unit test, not just a frame
+ *     review — and the shell's column carries the 400px cap.
+ *   - AC-3: `/sign-up` follows `isSignUpOpen()`, and `/forgot-password` +
+ *     `/reset-password` follow the reset predicate, in both directions. (#5962
+ *     repointed that predicate from `isResetAvailable()` to
+ *     `resetSendConfigured()`; the mock below binds both to one fn, so these
+ *     cases read identically either way.)
+ *
+ * `next-intl/server` is mocked globally (apps/web/__tests__/setup.ts) against
+ * the real en.json, so the `auth` copy is asserted by its real strings.
+ */
+import { render, screen } from "@testing-library/react";
+
+const mockGetActiveProviderIds = jest.fn();
+const mockIsSignUpOpen = jest.fn();
+const mockIsResetAvailable = jest.fn();
+// eslint-disable-next-line no-restricted-syntax -- #507: mock-internal rewrite pending; auth-env.ts is a pure env-introspection module with no external boundary to mock instead.
+jest.mock("../../../../lib/auth-env", () => ({
+  __esModule: true,
+  getActiveProviderIds: () => mockGetActiveProviderIds(),
+  isSignUpOpen: () => mockIsSignUpOpen(),
+  isResetAvailable: () => mockIsResetAvailable(),
+  // #5962 repointed both reset pages from the flag-only `isResetAvailable()`
+  // at the send conjunction. This is a PARTIAL module mock, so an absent
+  // member is `undefined` rather than the real function — the two pages would
+  // throw rather than take a branch. Bound to the SAME jest.fn() the flag
+  // already drives, so every case below keeps the exact truth value and the
+  // exact expectation it was written with: no assertion in this file changes.
+  resetSendConfigured: () => mockIsResetAvailable(),
+}));
+
+jest.mock("better-auth/react", () => ({
+  __esModule: true,
+  createAuthClient: () => ({
+    signIn: { social: jest.fn(), email: jest.fn() },
+    signUp: { email: jest.fn() },
+  }),
+}));
+
+// `readLocales()` reads project.yaml relative to cwd, which jest does not
+// provide from apps/web — the sibling layout suite stubs it for the same
+// reason. The locale list only feeds the language switcher, stubbed below.
+jest.mock("@working-theory/web-i18n", () => ({
+  readLocales: jest.fn().mockReturnValue(["en"]),
+}));
+
+jest.mock("next/headers", () => ({
+  headers: jest.fn().mockResolvedValue({ get: () => "/sign-in" }),
+}));
+
+// The language switcher is an island with its own router side-effects; the
+// layout suite next door stubs it for the same reason.
+jest.mock("@working-theory/ui/blocks", () => {
+  const actual = jest.requireActual("@working-theory/ui/blocks");
+  return {
+    ...actual,
+    LocaleSwitcherNav: ({ current }: { current: string }) => (
+      <span data-testid="language-switcher-stub">{current}</span>
+    ),
+  };
+});
+
+import en from "../../../../messages/en.json";
+import AuthLayout from "../layout";
+import ForgotPasswordPage from "../forgot-password/page";
+import ResetPasswordPage from "../reset-password/page";
+import SignInPage from "../sign-in/page";
+import SignUpPage from "../sign-up/page";
+import VerifyEmailPage from "../verify-email/page";
+
+const params = Promise.resolve({ locale: "en" });
+
+async function renderPage(
+  page: (props: {
+    params: Promise<{ locale: string }>;
+    searchParams: Promise<Record<string, string>>;
+  }) => Promise<React.ReactElement>,
+): Promise<void> {
+  render(
+    await page({
+      params: Promise.resolve({ locale: "en" }),
+      searchParams: Promise.resolve({}),
+    }),
+  );
+}
+
+beforeEach(() => {
+  mockGetActiveProviderIds.mockReset().mockReturnValue(["google"]);
+  mockIsSignUpOpen.mockReset().mockReturnValue(false);
+  mockIsResetAvailable.mockReset().mockReturnValue(false);
+});
+
+// ── AC-1: the five routes resolve ─────────────────────────────────────────────
+
+describe("the five (auth) routes resolve", () => {
+  it.each([
+    ["/sign-in", SignInPage, "sign-in-page"],
+    ["/sign-up", SignUpPage, "sign-up-page"],
+    ["/forgot-password", ForgotPasswordPage, "forgot-password-page"],
+    ["/reset-password", ResetPasswordPage, "reset-password-page"],
+    ["/verify-email", VerifyEmailPage, "verify-email-page"],
+  ] as const)("%s renders a card", async (_path, Page, testid) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- the five pages differ in props (only sign-in takes searchParams); the shared runner passes both.
+    await renderPage(Page as any);
+    expect(screen.getByTestId(testid)).toBeInTheDocument();
+    expect(screen.getByTestId("auth-card")).toBeInTheDocument();
+  });
+});
+
+// ── AC-1: the group's layout is AuthShell, with no marketing chrome ──────────
+
+describe("the (auth) layout", () => {
+  async function renderLayout(): Promise<void> {
+    render(
+      await AuthLayout({
+        children: <span data-testid="auth-child">page</span>,
+        params,
+      }),
+    );
+  }
+
+  it("mounts AuthShell", async () => {
+    await renderLayout();
+    expect(screen.getByTestId("auth-shell")).toBeInTheDocument();
+    expect(screen.getByTestId("auth-child")).toBeInTheDocument();
+  });
+
+  it("renders no Nav and no marketing Footer", async () => {
+    await renderLayout();
+    expect(
+      document.querySelector('nav[aria-label="Primary"]'),
+    ).not.toBeInTheDocument();
+    expect(document.querySelector(".ailk-footer")).not.toBeInTheDocument();
+  });
+
+  it("renders the brand mark and the slim footer's three links", async () => {
+    await renderLayout();
+    expect(screen.getByTestId("auth-shell-brand")).toBeInTheDocument();
+    const footer = screen.getByTestId("auth-shell-footer");
+    expect(footer.querySelectorAll("a")).toHaveLength(3);
+    expect(
+      screen.getByRole("link", { name: en.auth.footerPrivacy }),
+    ).toHaveAttribute("href", "/privacy");
+    expect(
+      screen.getByRole("link", { name: en.auth.footerHelp }),
+    ).toHaveAttribute("href", "/faq");
+  });
+
+  it("owns exactly one <main> landmark (ADR-0027)", async () => {
+    await renderLayout();
+    expect(document.querySelectorAll("main")).toHaveLength(1);
+  });
+
+  it("caps the content column at 400px — AC-2's class contract", async () => {
+    await renderLayout();
+    expect(screen.getByTestId("auth-shell-column")).toHaveClass("max-w-100");
+  });
+});
+
+// ── AC-2: the moved sign-in card no longer frames the page ───────────────────
+
+describe("the moved sign-in card", () => {
+  it("carries no min-h-screen / items-center / justify-center framing", async () => {
+    await renderPage(SignInPage);
+    const wrapper = screen.getByTestId("sign-in-page");
+    expect(wrapper).not.toHaveClass("min-h-screen");
+    expect(wrapper).not.toHaveClass("items-center");
+    expect(wrapper).not.toHaveClass("justify-center");
+  });
+
+  it("points the forgot link at /forgot-password when reset is available (it was a dead '#')", async () => {
+    mockGetActiveProviderIds.mockReturnValue(["google", "email"]);
+    mockIsResetAvailable.mockReturnValue(true);
+    await renderPage(SignInPage);
+    expect(screen.getByTestId("auth-forgot")).toHaveAttribute(
+      "href",
+      "/forgot-password",
+    );
+  });
+
+  it("omits the forgot link when password reset is unavailable (#6018 AC-1)", async () => {
+    mockGetActiveProviderIds.mockReturnValue(["google", "email"]);
+    mockIsResetAvailable.mockReturnValue(false);
+    await renderPage(SignInPage);
+    expect(screen.queryByTestId("auth-forgot")).not.toBeInTheDocument();
+  });
+
+  it("renders no logo inside the card — the mark is the shell's", async () => {
+    await renderPage(SignInPage);
+    expect(screen.queryByTestId("auth-card-logo")).not.toBeInTheDocument();
+  });
+});
+
+// ── AC-3: the two env predicates drive the pages ─────────────────────────────
+
+describe("/sign-up follows isSignUpOpen()", () => {
+  it("renders the open form when sign-up is open", async () => {
+    mockIsSignUpOpen.mockReturnValue(true);
+    mockGetActiveProviderIds.mockReturnValue(["google", "email"]);
+    await renderPage(SignUpPage);
+    expect(screen.getByTestId("auth-submit")).toBeInTheDocument();
+    expect(
+      screen.getByRole("heading", { name: en.auth.signUpHeading }),
+    ).toBeInTheDocument();
+    expect(screen.queryByTestId("auth-invitation-body")).not.toBeInTheDocument();
+  });
+
+  it("renders the invitation intent when sign-up is closed", async () => {
+    mockIsSignUpOpen.mockReturnValue(false);
+    await renderPage(SignUpPage);
+    expect(screen.getByTestId("auth-invitation-body")).toBeInTheDocument();
+    expect(
+      screen.getByRole("heading", { name: en.auth.invitationHeading }),
+    ).toBeInTheDocument();
+    expect(screen.queryByTestId("auth-submit")).not.toBeInTheDocument();
+  });
+});
+
+describe("/forgot-password and /reset-password follow the reset predicate", () => {
+  it("renders the forgot intent when reset is available", async () => {
+    mockIsResetAvailable.mockReturnValue(true);
+    await renderPage(ForgotPasswordPage);
+    expect(screen.getByTestId("auth-email")).toBeInTheDocument();
+    expect(
+      screen.getByRole("heading", { name: en.auth.forgotHeading }),
+    ).toBeInTheDocument();
+  });
+
+  it("renders the not-available state when reset is unavailable", async () => {
+    mockIsResetAvailable.mockReturnValue(false);
+    await renderPage(ForgotPasswordPage);
+    expect(screen.getByTestId("auth-invitation-body")).toBeInTheDocument();
+    expect(
+      screen.getByRole("heading", { name: en.auth.forgotUnavailableHeading }),
+    ).toBeInTheDocument();
+    expect(screen.queryByTestId("auth-email")).not.toBeInTheDocument();
+  });
+
+  it("renders the reset intent when reset is available", async () => {
+    mockIsResetAvailable.mockReturnValue(true);
+    await renderPage(ResetPasswordPage);
+    expect(screen.getByTestId("auth-password")).toBeInTheDocument();
+    expect(
+      screen.getByRole("heading", { name: en.auth.resetHeading }),
+    ).toBeInTheDocument();
+  });
+
+  it("renders its own not-available copy when reset is unavailable", async () => {
+    mockIsResetAvailable.mockReturnValue(false);
+    await renderPage(ResetPasswordPage);
+    expect(screen.getByTestId("auth-invitation-body")).toHaveTextContent(
+      en.auth.resetUnavailableBody,
+    );
+    expect(screen.queryByTestId("auth-password")).not.toBeInTheDocument();
+  });
+});
+
+// ── Every non-form page routes back to sign-in ───────────────────────────────
+
+describe("the copy-only intents route back to sign-in", () => {
+  it.each([
+    ["sign-up (closed)", SignUpPage],
+    ["forgot-password (unavailable)", ForgotPasswordPage],
+    ["reset-password (unavailable)", ResetPasswordPage],
+    ["verify-email", VerifyEmailPage],
+  ] as const)("%s carries the backToSignIn link", async (_name, Page) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- see the note on the five-routes runner above.
+    await renderPage(Page as any);
+    expect(screen.getByTestId("auth-footer-link")).toHaveAttribute(
+      "href",
+      "/sign-in",
+    );
+  });
+});