VIA-306 MD: render section about pregnancy on the hub page

Author: marie-dedikova-nhs

src/app/check-and-book-vaccinations/page.test.tsx

@@ -9,23 +9,43 @@ describe("Vaccination Hub Page", () => {
     render(<VaccinationsHub />);
   });
 
-  it("renders heading", async () => {
+  it("renders main heading", async () => {
     expectHeadingToBeRendered();
   });
 
-  it("renders  vaccines for all ages button", async () => {
-    const button = screen.getByRole("link", { name: "View vaccines for all ages" });
-    expect(button).toBeVisible();
-    expect(button).toHaveAttribute("href", "/vaccines-for-all-ages");
+  it("renders subheading about pregnancy", () => {
+    const subheading: HTMLElement = getHeading("Vaccines if you are pregnant", 2);
+    expect(subheading).toBeVisible();
+  });
+
+  it("renders subtext about pregnancy", () => {
+    const subtext: HTMLElement = screen.getByText(
+      "Some vaccines are recommended during pregnancy to protect the health of you and your baby.",
+    );
+    expect(subtext).toBeVisible();
+  });
+
+  it("renders vaccines during pregnancy card link", async () => {
+    expectLinkToBeRendered("Vaccines during pregnancy", "/vaccines-during-pregnancy");
+  });
+
+  it("renders vaccines for all ages button", async () => {
+    expectLinkToBeRendered("View vaccines for all ages", "/vaccines-for-all-ages");
   });
 });
 
 const expectHeadingToBeRendered = () => {
-  expect(queryHeading(SERVICE_HEADING, 1)).toBeVisible();
+  expect(getHeading(SERVICE_HEADING, 1)).toBeVisible();
+};
+
+const expectLinkToBeRendered = (text: string, href: string) => {
+  const link: HTMLElement = screen.getByRole("link", { name: text });
+  expect(link).toBeVisible();
+  expect(link).toHaveAttribute("href", href);
 };
 
-const queryHeading = (text: string, level: number): HTMLElement | null => {
-  return screen.queryByRole("heading", {
+const getHeading = (text: string, level: number): HTMLElement => {
+  return screen.getByRole("heading", {
     name: text,
     level: level,
   });

src/app/check-and-book-vaccinations/page.tsx

@@ -1,4 +1,5 @@
 import BackToNHSAppLink from "@src/app/_components/nhs-app/BackToNHSAppLink";
+import CardLink from "@src/app/_components/nhs-app/CardLink";
 import MainContent from "@src/app/_components/nhs-frontend/MainContent";
 import { NHS_TITLE_SUFFIX, SERVICE_HEADING } from "@src/app/constants";
 import Link from "next/link";
@@ -11,6 +12,11 @@ const VaccinationsHub = () => {
       <BackToNHSAppLink />
       <MainContent>
         <h1 className={"app-dynamic-page-title__heading"}>{SERVICE_HEADING}</h1>
+        <h2 className="nhsuk-heading-s">Vaccines if you are pregnant</h2>
+        <p>Some vaccines are recommended during pregnancy to protect the health of you and your baby.</p>
+        <ul className="nhsapp-cards nhsapp-cards--stacked" data-testid={"vaccine-cardlinks-adults"}>
+          <CardLink title={"Vaccines during pregnancy"} link={"/vaccines-during-pregnancy"} />
+        </ul>
         <Link href={"/vaccines-for-all-ages"} className={"nhsuk-button nhsuk-button--secondary"}>
           View vaccines for all ages
         </Link>