VIA-630 Hub: Add 'at risk groups' expander and extract pregnancy component

Author: donna-belsey-nhs

src/app/_components/hub/AtRiskHubContent.test.tsx

@@ -0,0 +1,30 @@
+import { AtRiskHubContent } from "@src/app/_components/hub/AtRiskHubContent";
+import { render, screen } from "@testing-library/react";
+
+jest.mock("@src/app/_components/hub/AtRiskText", () => ({
+  AtRiskText: jest.fn().mockImplementation(() => <p data-testid={"at-risk-text"}>At risk hub content test</p>),
+}));
+
+describe("At risk hub content", () => {
+  beforeEach(() => {
+    render(AtRiskHubContent());
+  });
+
+  it("should render heading as h2", () => {
+    const atRiskHeading: HTMLElement = getHeading("Recommended vaccines for at-risk groups", 2);
+    expect(atRiskHeading).toBeVisible();
+  });
+
+  it("should include at risk text content", () => {
+    const atRiskText: HTMLElement = screen.getByTestId("at-risk-text");
+
+    expect(atRiskText).toBeInTheDocument();
+  });
+});
+
+const getHeading = (text: string, level: number): HTMLElement => {
+  return screen.getByRole("heading", {
+    name: text,
+    level: level,
+  });
+};

src/app/_components/hub/AtRiskHubContent.tsx

@@ -0,0 +1,19 @@
+import { AtRiskText } from "@src/app/_components/hub/AtRiskText";
+import React, { JSX } from "react";
+
+const AtRiskHubContent = (): JSX.Element => {
+  return (
+    <details className="nhsuk-details">
+      <summary className="nhsuk-details__summary">
+        <h2 className="nhsuk-heading-xs nhsuk-u-margin-0 nhsuk-u-font-weight-normal">
+          <span className="nhsuk-details__summary-text">Recommended vaccines for at-risk groups</span>
+        </h2>
+      </summary>
+      <div className="nhsuk-details__text">
+        <AtRiskText />
+      </div>
+    </details>
+  );
+};
+
+export { AtRiskHubContent };

src/app/_components/hub/AtRiskText.tsx

@@ -0,0 +1,44 @@
+const AtRiskText = () => {
+  return (
+    <>
+      <h3 className="nhsuk-heading-xs nhsuk-u-margin-bottom-0">At-risk babies and children</h3>
+      <p> Speak to your GP or health visitor.</p>
+      <h3 className="nhsuk-heading-xs nhsuk-u-margin-bottom-0">Long-term health conditions</h3>
+      <p>
+        Speak to your GP or{" "}
+        <a href={"https://www.nhs.uk/service-search/pharmacy/find-a-pharmacy/"} target="_blank" rel="noopener">
+          pharmacy
+        </a>{" "}
+        about what vaccinations you might need.
+      </p>
+      <h3 className="nhsuk-heading-xs nhsuk-u-margin-bottom-0">Sexual health</h3>
+      <p>
+        {" "}
+        NHS vaccines are recommended for men who have sex with men, sex workers or other people at higher risk. Ask at
+        your{" "}
+        <a
+          href="https://www.nhs.uk/nhs-services/sexual-health-services/find-a-sexual-health-clinic/"
+          target="_blank"
+          rel="noopener"
+        >
+          sexual health clinic
+        </a>
+        .
+      </p>
+      <h3 className="nhsuk-heading-xs nhsuk-u-margin-bottom-0">Travel</h3>
+      <p>
+        {" "}
+        If you&#39;re planning to{" "}
+        <a href="https://www.nhs.uk/vaccinations/travel-vaccinations/" target="_blank" rel="noopener">
+          travel outside the UK
+        </a>
+        , you may need to be vaccinated against some of the serious diseases found in other parts of the world. Speak to
+        your GP.
+      </p>
+      <h3 className="nhsuk-heading-xs nhsuk-u-margin-bottom-0">Occupation</h3>
+      <p> Check with your employer about what vaccinations you might need.</p>
+    </>
+  );
+};
+
+export { AtRiskText };

src/app/_components/hub/PregnancyHubContent.test.tsx

@@ -0,0 +1,37 @@
+import { PregnancyHubContent } from "@src/app/_components/hub/PregnancyHubContent";
+import { render, screen } from "@testing-library/react";
+
+describe("Pregnancy hub content", () => {
+  beforeEach(() => {
+    render(<PregnancyHubContent />);
+  });
+
+  it("renders subheading about pregnancy", () => {
+    const subheading: HTMLElement = getHeading("Vaccines if you're 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");
+  });
+});
+
+const expectLinkToBeRendered = (text: string, href: string) => {
+  const link: HTMLElement = screen.getByRole("link", { name: text });
+  expect(link).toBeVisible();
+  expect(link).toHaveAttribute("href", href);
+};
+
+const getHeading = (text: string, level: number): HTMLElement => {
+  return screen.getByRole("heading", {
+    name: text,
+    level: level,
+  });
+};

src/app/_components/hub/PregnancyHubContent.tsx

@@ -0,0 +1,15 @@
+import CardLink from "@src/app/_components/nhs-app/CardLink";
+
+const PregnancyHubContent = () => {
+  return (
+    <>
+      <h2 className="nhsuk-heading-s">Vaccines if you&#39;re 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>
+    </>
+  );
+};
+
+export { PregnancyHubContent };

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

@@ -20,6 +20,18 @@ jest.mock("@src/app/_components/hub/AgeBasedHubCards", () => ({
     .mockImplementation(() => <p data-testid={"age-based-hub-cards"}>Age based hub cards test</p>),
 }));
 
+jest.mock("@src/app/_components/hub/AtRiskHubContent", () => ({
+  AtRiskHubContent: jest
+    .fn()
+    .mockImplementation(() => <p data-testid={"at-risk-hub-content"}>At risk hub content test</p>),
+}));
+
+jest.mock("@src/app/_components/hub/PregnancyHubContent", () => ({
+  PregnancyHubContent: jest
+    .fn()
+    .mockImplementation(() => <p data-testid={"pregnancy-hub-content"}>Pregnancy hub content test</p>),
+}));
+
 const mockAgeGroup = AgeGroup.AGE_25_to_64;
 
 const mockSessionValue: Partial<Session> = {
@@ -60,20 +72,16 @@ describe("Vaccination Hub Page", () => {
     );
   });
 
-  it("renders subheading about pregnancy", () => {
-    const subheading: HTMLElement = getHeading("Vaccines if you're pregnant", 2);
-    expect(subheading).toBeVisible();
-  });
+  it("should show at risk expander ", () => {
+    const atRiskHubContent: HTMLElement = screen.getByTestId("at-risk-hub-content");
 
-  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();
+    expect(atRiskHubContent).toBeVisible();
   });
 
-  it("renders vaccines during pregnancy card link", async () => {
-    expectLinkToBeRendered("Vaccines during pregnancy", "/vaccines-during-pregnancy");
+  it("should show pregnancy hub content ", () => {
+    const pregnancyHubContent: HTMLElement = screen.getByTestId("pregnancy-hub-content");
+
+    expect(pregnancyHubContent).toBeVisible();
   });
 
   it("renders vaccines for all ages button", async () => {

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

@@ -2,8 +2,9 @@
 
 import { auth } from "@project/auth";
 import { AgeBasedHubCards } from "@src/app/_components/hub/AgeBasedHubCards";
+import { AtRiskHubContent } from "@src/app/_components/hub/AtRiskHubContent";
+import { PregnancyHubContent } from "@src/app/_components/hub/PregnancyHubContent";
 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 { AgeGroup } from "@src/models/ageBasedHub";
@@ -24,11 +25,9 @@ const VaccinationsHub = async () => {
       <MainContent>
         <h1 className={"nhsuk-heading-xl nhsuk-u-margin-bottom-3"}>{SERVICE_HEADING}</h1>
         <AgeBasedHubCards ageGroup={ageGroup} />
-        <h2 className="nhsuk-heading-s">Vaccines if you&#39;re 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>
+        {/*TODO VIA-630 control visibility of the following components based on age*/}
+        <AtRiskHubContent />
+        <PregnancyHubContent />
         <Link href={"/vaccines-for-all-ages"} className={"nhsuk-button nhsuk-button--secondary"}>
           View vaccines for all ages
         </Link>