Add tests.

frontend/src/app/[locale]/roadmap/RoadmapMilestones.tsx

@@ -13,7 +13,7 @@ export default function RoadmapMilestones() {
       sectionBackgroundColorClass="bg-base-lightest"
       sectionContent={
         <>
-          <h4>{t("contentTitle")}</h4>
+          <h2>{t("contentTitle")}</h2>
           {Object.keys(contentItems).map((key) => {
             const title = t(`contentItems.${key}.title`);
             const content = t.rich(`contentItems.${key}.content`, {
@@ -25,7 +25,7 @@ export default function RoadmapMilestones() {
             });
             return (
               <div key={`roadmap-milestones-${title}-key`}>
-                <h5>{title}</h5>
+                <h3>{title}</h3>
                 {content}
               </div>
             );

frontend/src/utils/testing/intlMocks.ts

@@ -42,4 +42,25 @@ export const mockMessages = {
       boxes: ["firstKey"],
     },
   },
+  Roadmap: {
+    pageHeaderTitle: "Product roadmap",
+    sections: {
+      progress: {
+        title: "progress test title",
+        contentItems: [
+          [{ title: "test title 1", content: "test content 1" }],
+          [{ title: "test title 2", content: "test content 2" }],
+        ],
+      },
+      milestones: {
+        title: "milestones test title",
+        contentItems: [{ title: "test title 3", content: "test content 3" }],
+      },
+      process: {
+        title: "process test title",
+        sectionSummary: "process test summary",
+        contentItems: [{ title: "test title 4", content: "test content 4" }],
+      },
+    },
+  },
 };

frontend/tests/components/roadmap/RoadmapHeader.test.tsx

@@ -0,0 +1,14 @@
+import RoadmapHeader from "src/app/[locale]/roadmap/RoadmapHeader";
+import { render, screen } from "tests/react-utils";
+
+describe("RoadmapHeader Content", () => {
+  it("Renders with expected header", () => {
+    render(<RoadmapHeader />);
+    const RoadmapH1 = screen.getByRole("heading", {
+      level: 1,
+      name: /Product roadmap?/i,
+    });
+
+    expect(RoadmapH1).toBeInTheDocument();
+  });
+});

frontend/tests/components/roadmap/RoadmapMilestones.test.tsx

@@ -0,0 +1,14 @@
+import RoadmapMilestones from "src/app/[locale]/roadmap/RoadmapMilestones";
+import { render, screen } from "tests/react-utils";
+
+describe("RoadmapMilestones Content", () => {
+  it("Renders with expected header", () => {
+    render(<RoadmapMilestones />);
+    const RoadmapMilestonesH2 = screen.getByRole("heading", {
+      level: 2,
+      name: /Recent milestones reached?/i,
+    });
+
+    expect(RoadmapMilestonesH2).toBeInTheDocument();
+  });
+});

frontend/tests/pages/roadmap/page.test.tsx

@@ -0,0 +1,36 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { axe } from "jest-axe";
+import { identity } from "lodash";
+import Roadmap from "src/app/[locale]/roadmap/page";
+import { mockMessages, useTranslationsMock } from "src/utils/testing/intlMocks";
+
+jest.mock("react", () => ({
+  ...jest.requireActual<typeof import("react")>("react"),
+  use: jest.fn(() => ({
+    locale: "en",
+  })),
+}));
+
+jest.mock("next-intl/server", () => ({
+  getTranslations: () => identity,
+  setRequestLocale: identity,
+}));
+
+jest.mock("next-intl", () => ({
+  useTranslations: () => useTranslationsMock(),
+  useMessages: () => mockMessages,
+}));
+
+describe("Roadmap", () => {
+  it("renders header title text", () => {
+    render(<Roadmap />);
+    const content = screen.getByText("pageHeaderTitle");
+    expect(content).toBeInTheDocument();
+  });
+
+  it("passes accessibility scan", async () => {
+    const { container } = render(<Roadmap />);
+    const results = await waitFor(() => axe(container));
+    expect(results).toHaveNoViolations();
+  });
+});