create-ailk 0.21.0 → 0.23.0

package/templates/apps/web/app/[locale]/careers/__tests__/job-application-form.test.ts

@@ -0,0 +1,141 @@
+/**
+ * jobApplicationFormFromConfig (#8746 D4, D5; AC-4): the Job application
+ * magnet's field step mapped onto the shared form block, and the built-in
+ * form that stands in for an absent or switched-off magnet.
+ */
+import {
+  JOB_APPLICATION_TERMS_STATEMENT,
+  jobApplicationFlowConfig,
+  type FlowConfig,
+} from "@working-theory/validation";
+
+import {
+  jobApplicationFormFallback,
+  jobApplicationFormFromConfig,
+} from "../[slug]/job-application-form";
+
+// jsdom has no `structuredClone`; the config is plain JSON.
+const clone = (): FlowConfig =>
+  JSON.parse(JSON.stringify(jobApplicationFlowConfig)) as FlowConfig;
+
+describe("jobApplicationFormFromConfig (#8746 D5, AC-4)", () => {
+  // #8840 D3 — the seed is two steps: step 1 (names, email, phone, the hidden
+  // `job`, the terms box) draws inline; LinkedIn URL moved to step 2, whose
+  // "Submit application" is now the submit label.
+  it("maps the seeded config's step 1 to First, Last, Email and Phone, with the step's title and step 2's submit label", () => {
+    const view = jobApplicationFormFromConfig(jobApplicationFlowConfig, "en");
+    expect(view?.title).toBe("Job application");
+    expect(view?.fields).toEqual([
+      {
+        name: "first_name",
+        type: "text",
+        label: "First name",
+        required: true,
+        colSpan: 1,
+      },
+      {
+        name: "last_name",
+        type: "text",
+        label: "Last name",
+        required: true,
+        colSpan: 1,
+      },
+      {
+        name: "email",
+        type: "email",
+        label: "Email",
+        required: true,
+        colSpan: 1,
+      },
+      {
+        name: "phone",
+        type: "tel",
+        label: "Phone",
+        required: false,
+        colSpan: 1,
+      },
+    ]);
+    expect(view?.submitLabel).toBe("Submit application");
+  });
+
+  it("keeps an owner's edited label and an added full-width field", () => {
+    const config = clone();
+    const step = config.steps[0] as Extract<
+      FlowConfig["steps"][number],
+      { type: "field" }
+    >;
+    step.fields[3]!.copy = { label: { en: "Mobile" } };
+    step.fields.push({
+      name: "cover_letter",
+      inputType: "textarea",
+      copy: { label: { en: "Cover letter" } },
+    });
+    const view = jobApplicationFormFromConfig(config, "en");
+    expect(view?.fields.map((f) => [f.name, f.label, f.colSpan])).toEqual([
+      ["first_name", "First name", 1],
+      ["last_name", "Last name", 1],
+      ["email", "Email", 1],
+      ["phone", "Mobile", 1],
+      ["cover_letter", "Cover letter", 2],
+    ]);
+  });
+
+  it.each(["first_name", "last_name", "email"])(
+    "answers null when the step has no %s field",
+    (name) => {
+      const config = clone();
+      const step = config.steps[0] as Extract<
+        FlowConfig["steps"][number],
+        { type: "field" }
+      >;
+      step.fields = step.fields.filter((f) => f.name !== name);
+      expect(jobApplicationFormFromConfig(config, "en")).toBeNull();
+    },
+  );
+
+  it("answers null when the first step is not a field step", () => {
+    const config = clone();
+    (config.steps[0] as { type: string }).type = "segmentation";
+    expect(jobApplicationFormFromConfig(config, "en")).toBeNull();
+  });
+});
+
+describe("a consent field on the magnet (#8746 D5)", () => {
+  it("labels the terms box with the step's first consent field, which is not drawn as a field", () => {
+    const config = clone();
+    const step = config.steps[0] as Extract<
+      FlowConfig["steps"][number],
+      { type: "field" }
+    >;
+    const terms = step.fields.find((f) => f.name === "terms")!;
+    terms.copy = {
+      label: {
+        en: "I agree my application is kept for 12 months under the [Privacy Policy](privacy).",
+      },
+    };
+    const view = jobApplicationFormFromConfig(config, "en");
+    expect(view?.consentStatement).toBe(
+      "I agree my application is kept for 12 months under the [Privacy Policy](privacy).",
+    );
+    expect(view?.fields.map((f) => f.name)).not.toContain("terms");
+  });
+
+  // #8840 D3 — the seed now carries a terms box, so the page labels its own.
+  it("the seeded config's terms field labels the box", () => {
+    expect(jobApplicationFormFallback("en").consentStatement).toBe(
+      JOB_APPLICATION_TERMS_STATEMENT,
+    );
+  });
+
+  it("never draws the hidden job field", () => {
+    expect(jobApplicationFormFallback("en").fields.map((f) => f.name)).not.toContain("job");
+  });
+});
+
+describe("jobApplicationFormFallback (#8746 D5, AC-4)", () => {
+  it("is the seeded config's own form", () => {
+    expect(jobApplicationFormFallback("en")).toEqual(
+      jobApplicationFormFromConfig(jobApplicationFlowConfig, "en"),
+    );
+  });
+});

package/templates/apps/web/app/[locale]/careers/__tests__/job-apply-page.test.tsx

@@ -0,0 +1,424 @@
+/**
+ * The careers set over the Job application magnet (#8746 D1, D5; #8849 D7,
+ * D8; AC-5, AC-6): the posting page carries an Apply button and no form, and
+ * the Free apply page, careers/[slug]/[action]/page.tsx, draws the form.
+ *
+ * Renders the REAL `LeadCaptureForm` bound to the REAL apply action, so the
+ * form, its fields and a submit are all visible. Mocked boundaries:
+ * `@working-theory/api-client` (`flows.get`, `leads.captureStatus`,
+ * `leads.submit`), `next/headers`, `next-intl/server` (over the real English
+ * catalog), the `_site.mdx` contact-email read, and the page-renderer's
+ * content loader (injected, and spied on for `lib/posting-title.ts`'s read).
+ */
+import React from "react";
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import {
+  jobApplicationFlowConfig,
+  type FlowConfig,
+} from "@working-theory/validation";
+
+jest.mock("next/navigation", () => ({
+  __esModule: true,
+  notFound: jest.fn(() => {
+    throw new Error("NEXT_NOT_FOUND");
+  }),
+}));
+
+jest.mock("next-mdx-remote/rsc", () => ({
+  __esModule: true,
+  MDXRemote: ({ source }: { source: string }) =>
+    React.createElement("div", { "data-testid": "mdx-rendered" }, source),
+}));
+
+jest.mock("@working-theory/api-client", () => ({
+  flows: { get: jest.fn() },
+  leads: { captureStatus: jest.fn(), submit: jest.fn() },
+  visitorForwardHeaders: () => undefined,
+}));
+
+jest.mock("next/headers", () => ({
+  __esModule: true,
+  headers: jest.fn().mockResolvedValue({ get: () => null }),
+  cookies: jest.fn().mockResolvedValue({ get: () => undefined }),
+}));
+
+jest.mock("next-intl/server", () => {
+  const messages = jest.requireActual("../../../../messages/en.json") as Record<
+    string,
+    Record<string, unknown>
+  >;
+  return {
+    getTranslations: async (arg: string | { namespace: string }) => {
+      const ns = messages[typeof arg === "string" ? arg : arg.namespace] ?? {};
+      return (key: string, values?: Record<string, string>) =>
+        String(ns[key] ?? key).replace(
+          /\{(\w+)\}/g,
+          (m, name: string) => values?.[name] ?? m,
+        );
+    },
+  };
+});
+
+// eslint-disable-next-line no-restricted-syntax -- test-seam mock: the real read is a node:fs frontmatter parse of content/_site.mdx; narrowest possible scope
+jest.mock("../../contact/site-contact-email", () => ({
+  readSiteContactEmail: jest.fn().mockReturnValue("jobs@example.com"),
+}));
+
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+
+import { flows, leads } from "@working-theory/api-client";
+import * as pageRenderer from "@working-theory/page-renderer";
+
+import messages from "../../../../messages/en.json";
+
+import CareersPage from "../page";
+import JobPage from "../[slug]/page";
+import * as jobPageModule from "../[slug]/page";
+import ApplyPage, { generateMetadata as applyMetadata } from "../[slug]/[action]/page";
+
+const mockFlowsGet = flows.get as jest.Mock;
+const mockCaptureStatus = leads.captureStatus as jest.Mock;
+const mockSubmit = leads.submit as jest.Mock;
+let mockPostingSource: jest.SpyInstance;
+
+type FieldStep = Extract<FlowConfig["steps"][number], { type: "field" }>;
+
+const JOB = "writer";
+const jobSource = {
+  frontmatter: {
+    type: "JobPosting" as const,
+    slug: JOB,
+    title: "Writer",
+    description: "Write for us.",
+  },
+  body: "mdx-body-content",
+};
+
+async function renderApplyPage(slug = JOB, action = "apply") {
+  const element = await ApplyPage({
+    params: Promise.resolve({ locale: "en", slug, action }),
+  });
+  return render(element);
+}
+
+/** The form's field names; a composite's parts (`field-phone-country`, …) are left out. */
+function fieldNames(): string[] {
+  return Array.from(
+    screen
+      .getByTestId("lead-capture-form")
+      .querySelectorAll<HTMLElement>("[data-testid^='field-']"),
+  )
+    .map((el) => el.dataset.testid!.slice("field-".length))
+    .filter((name) => !name.includes("-"));
+}
+
+// The apply page shares its two hub reads for a few seconds, per module
+// instance (as /contact does, #8731). Each test starts an hour later so none
+// sees another's read.
+let clock = 1_800_000_000_000;
+const nowSpy = jest.spyOn(Date, "now");
+
+beforeEach(() => {
+  clock += 60 * 60 * 1000;
+  nowSpy.mockImplementation(() => clock);
+  mockCaptureStatus.mockResolvedValue({
+    ok: true,
+    status: 200,
+    body: { ok: true, data: { contact: true, newsletter: true } },
+  });
+  mockFlowsGet.mockResolvedValue({
+    ok: true,
+    status: 200,
+    body: jobApplicationFlowConfig,
+  });
+  mockSubmit.mockResolvedValue({ ok: true, status: 201, body: { ok: true } });
+  // `lib/posting-title.ts` reads the posting through the package loader.
+  mockPostingSource = jest
+    .spyOn(pageRenderer, "getMdxSource")
+    .mockImplementation(async (_type, slug) => (slug === JOB ? jobSource : null));
+});
+
+afterEach(() => {
+  jest.clearAllMocks();
+  mockPostingSource.mockRestore();
+});
+
+describe("the posting page carries an Apply button and no form (#8849 D8, AC-5)", () => {
+  it("renders job-apply-cta to the localized apply page, and no form or hub read", async () => {
+    const element = await JobPage({
+      params: Promise.resolve({ locale: "fr", slug: JOB }),
+      getMdxSource: jest.fn().mockResolvedValue(jobSource),
+    });
+    render(element);
+    const cta = screen.getByTestId("job-apply-cta");
+    expect(cta.getAttribute("href")).toBe("/fr/careers/writer/apply");
+    expect(cta.textContent).toBe(messages.careers.apply);
+    expect(screen.queryByTestId("job-apply")).toBeNull();
+    expect(document.getElementById("apply")).toBeNull();
+    expect(screen.queryByTestId("lead-capture-form")).toBeNull();
+    expect(document.querySelector("form")).toBeNull();
+    expect(mockFlowsGet).not.toHaveBeenCalled();
+    expect(mockCaptureStatus).not.toHaveBeenCalled();
+    // The posting itself still renders above it.
+    expect(screen.getByTestId("mdx-rendered").textContent).toBe(
+      "mdx-body-content",
+    );
+  });
+
+  it("an unknown posting is a 404 and builds no button", async () => {
+    await expect(
+      JobPage({
+        params: Promise.resolve({ locale: "en", slug: "unknown" }),
+        getMdxSource: jest.fn().mockResolvedValue(null),
+      }),
+    ).rejects.toThrow("NEXT_NOT_FOUND");
+    expect(screen.queryByTestId("job-apply-cta")).toBeNull();
+    expect(mockFlowsGet).not.toHaveBeenCalled();
+  });
+
+  it("the page module no longer exports dynamic", () => {
+    expect("dynamic" in jobPageModule).toBe(false);
+  });
+});
+
+describe("the Free apply page draws the Job application (#8849 D7, AC-6; #8746 D1, D5)", () => {
+  it("renders a back link to the posting, the posting's title and the magnet's field step", async () => {
+    await renderApplyPage();
+    expect(mockFlowsGet).toHaveBeenCalledWith("job-application");
+    expect(
+      screen.getByRole("heading", { level: 1, name: "Writer" }),
+    ).toBeTruthy();
+    expect(screen.getByTestId("nav-back-link").getAttribute("href")).toBe(
+      "/careers/writer",
+    );
+    expect(fieldNames()).toEqual([
+      "first_name",
+      "last_name",
+      "email",
+      "phone",
+    ]);
+    expect(screen.getByTestId("contact-submit").textContent).toBe(
+      "Submit application",
+    );
+  });
+
+  it("an owner's edit to the magnet shows on the page", async () => {
+    const edited = JSON.parse(
+      JSON.stringify(jobApplicationFlowConfig),
+    ) as FlowConfig;
+    (edited.steps[0] as FieldStep).fields[2]!.copy.label = { en: "Work email" };
+    mockFlowsGet.mockResolvedValue({ ok: true, status: 200, body: edited });
+    await renderApplyPage();
+    expect(
+      screen.getByTestId("field-email").closest("div")!.textContent,
+    ).toContain("Work email");
+  });
+
+  it.each([
+    [
+      "absent or off (404)",
+      () =>
+        mockFlowsGet.mockResolvedValue({ ok: false, status: 404, body: null }),
+    ],
+    [
+      "unreadable (throws)",
+      () => mockFlowsGet.mockRejectedValue(new Error("down")),
+    ],
+    [
+      "unusable (no first_name)",
+      () => {
+        const broken = JSON.parse(
+          JSON.stringify(jobApplicationFlowConfig),
+        ) as FlowConfig;
+        const step = broken.steps[0] as FieldStep;
+        step.fields = step.fields.filter((f) => f.name !== "first_name");
+        mockFlowsGet.mockResolvedValue({ ok: true, status: 200, body: broken });
+      },
+    ],
+  ])(
+    "falls back to the built-in form with the same fields when the magnet is %s",
+    async (_label, arrange) => {
+      arrange();
+      await renderApplyPage();
+      expect(fieldNames()).toEqual([
+        "first_name",
+        "last_name",
+        "email",
+        "phone",
+      ]);
+    },
+  );
+
+  it("shows the site's contact email instead of a form when the deployment accepts no lead", async () => {
+    mockCaptureStatus.mockResolvedValue({
+      ok: true,
+      status: 200,
+      body: { ok: true, data: { contact: false, newsletter: false } },
+    });
+    await renderApplyPage();
+    expect(screen.queryByTestId("lead-capture-form")).toBeNull();
+    expect(screen.getByTestId("job-apply").textContent).toContain(
+      "jobs@example.com",
+    );
+  });
+
+  it.each([
+    ["an action other than apply", JOB, "start"],
+    ["an uppercase slug", "Writer", "apply"],
+    ["an encoded traversal slug", "a%2F..%2Fb", "apply"],
+  ])("%s is a 404 before any read", async (_label, slug, action) => {
+    await expect(renderApplyPage(slug, action)).rejects.toThrow("NEXT_NOT_FOUND");
+    expect(mockPostingSource).not.toHaveBeenCalled();
+    expect(mockFlowsGet).not.toHaveBeenCalled();
+    expect(mockCaptureStatus).not.toHaveBeenCalled();
+  });
+
+  it("an unknown posting is a 404 with no hub read", async () => {
+    await expect(renderApplyPage("unknown")).rejects.toThrow("NEXT_NOT_FOUND");
+    expect(mockPostingSource).toHaveBeenCalledWith("JobPosting", "unknown", "en");
+    expect(mockFlowsGet).not.toHaveBeenCalled();
+    expect(mockCaptureStatus).not.toHaveBeenCalled();
+  });
+
+  it("is noindex, follow, titled with the posting", async () => {
+    const metadata = await applyMetadata({
+      params: Promise.resolve({ locale: "en", slug: JOB, action: "apply" }),
+    });
+    expect(metadata.robots).toEqual({ index: false, follow: true });
+    expect(metadata.title).toBe("Writer");
+    const unknown = await applyMetadata({
+      params: Promise.resolve({ locale: "en", slug: "unknown", action: "apply" }),
+    });
+    expect(unknown.robots).toEqual({ index: false, follow: true });
+  });
+
+  it("is core: it imports no flows/ or module file, and reads the title from lib/posting-title", () => {
+    const source = readFileSync(
+      join(__dirname, "..", "[slug]", "[action]", "page.tsx"),
+      "utf8",
+    );
+    const imports = source
+      .split("\n")
+      .filter((line) => /^import |^\} from |^  [\w{}, ]+ from /.test(line) || line.includes(" from \""))
+      .join("\n");
+    expect(imports).not.toMatch(/flows\//);
+    expect(imports).not.toContain("FlowStepper");
+    expect(imports).not.toContain("@working-theory/ui-signal-collectors");
+    expect(imports).not.toMatch(/["']\.\/apply|\/apply\//);
+    expect(imports).toContain('from "../../../../../lib/posting-title"');
+  });
+});
+
+describe("the Free apply page shares its two hub reads (#8746 security review, as #8731)", () => {
+  it("a burst of views makes one hub read of each kind, not one per view", async () => {
+    for (let i = 0; i < 25; i += 1) {
+      const view = await renderApplyPage();
+      expect(screen.getByTestId("lead-capture-form")).toBeTruthy();
+      view.unmount();
+    }
+    expect(mockFlowsGet).toHaveBeenCalledTimes(1);
+    expect(mockCaptureStatus).toHaveBeenCalledTimes(1);
+  });
+
+  it("a failed read is shared too, so an unreachable hub is not retried per view", async () => {
+    mockFlowsGet.mockRejectedValue(new Error("hub down"));
+    mockCaptureStatus.mockRejectedValue(new Error("hub down"));
+    for (let i = 0; i < 5; i += 1) {
+      const view = await renderApplyPage();
+      expect(fieldNames()).toEqual([
+        "first_name",
+        "last_name",
+        "email",
+        "phone",
+      ]);
+      view.unmount();
+    }
+    expect(mockFlowsGet).toHaveBeenCalledTimes(1);
+    expect(mockCaptureStatus).toHaveBeenCalledTimes(1);
+  });
+
+  it("an Admin edit shows once the shared read expires", async () => {
+    const first = await renderApplyPage();
+    expect(
+      screen.getByTestId("field-email").closest("div")!.textContent,
+    ).toContain("Email");
+    first.unmount();
+
+    const edited = JSON.parse(
+      JSON.stringify(jobApplicationFlowConfig),
+    ) as FlowConfig;
+    (edited.steps[0] as FieldStep).fields[2]!.copy.label = { en: "Work email" };
+    mockFlowsGet.mockResolvedValue({ ok: true, status: 200, body: edited });
+    clock += 60_000;
+    await renderApplyPage();
+    expect(
+      screen.getByTestId("field-email").closest("div")!.textContent,
+    ).toContain("Work email");
+    expect(mockFlowsGet).toHaveBeenCalledTimes(2);
+  });
+});
+
+describe("a submission from the Free apply page lands as a job application lead (#8746 D4, D5; #8849 AC-6)", () => {
+  it("posts source flow:job-application, name = first + last and the posting's slug as job", async () => {
+    await renderApplyPage();
+    for (const [name, value] of Object.entries({
+      first_name: "Ada",
+      last_name: "Lovelace",
+      email: "ada@example.com",
+    })) {
+      fireEvent.change(screen.getByTestId(`field-${name}`), {
+        target: { value },
+      });
+    }
+    fireEvent.click(screen.getByTestId("contact-consent"));
+    await act(async () => {
+      fireEvent.submit(screen.getByTestId("lead-capture-form"));
+    });
+    await waitFor(() => expect(mockSubmit).toHaveBeenCalledTimes(1));
+    const body = mockSubmit.mock.calls[0][0] as {
+      source: string;
+      email: string;
+      payload: Record<string, unknown>;
+    };
+    expect(body.source).toBe("flow:job-application");
+    expect(body.email).toBe("ada@example.com");
+    expect(body.payload).toMatchObject({
+      name: "Ada Lovelace",
+      job: JOB,
+      page: "careers",
+    });
+    // #8746 — the careers catalog's own success line, not /contact's.
+    const success = await screen.findByTestId("contact-success");
+    expect(success.textContent).toBe(messages.careers.applicationSuccess);
+    expect(success.textContent).not.toContain("reaching out");
+  });
+});
+
+describe("the /careers index links to each job and carries no form (#8746 D1, #8849 D10)", () => {
+  it("renders the list with no apply form and reads no magnet", async () => {
+    const element = await CareersPage({
+      params: Promise.resolve({ locale: "en" }),
+      getMdxSlugs: jest.fn().mockResolvedValue([]),
+      getMdxSource: jest.fn().mockResolvedValue({
+        frontmatter: {
+          type: "CareersList",
+          slug: "careers",
+          title: "Careers",
+          description: "Open roles.",
+        },
+        body: "",
+      }),
+    });
+    render(element);
+    expect(screen.queryByTestId("lead-capture-form")).toBeNull();
+    expect(document.getElementById("apply")).toBeNull();
+    expect(mockFlowsGet).not.toHaveBeenCalled();
+  });
+});