VIA-2 DB/MD Improve UI of error page and render error page when there is error on flu vaccine page

Author: marie-dedikova-nhs

package-lock.json

@@ -65,7 +65,8 @@
     "openid-client": "^6.4.2",
     "pino": "^9.6.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-error-boundary": "^5.0.0"
   },
   "overrides": {
     "jsdom": "^26.0.0"

package.json

@@ -1,35 +1,59 @@
-import { configProvider } from "@src/utils/config";
 import { render, screen } from "@testing-library/react";
 import VaccineFlu from "@src/app/vaccines/flu/page";
 import Vaccine from "@src/app/_components/vaccine/Vaccine";
+import { getContentForVaccine } from "@src/services/content-api/gateway/content-reader-service";
+import { mockStyledContent } from "@test-data/content-api/data";
 
-jest.mock("@src/utils/config");
-jest.mock("@src/app/_components/vaccine/Vaccine", () => jest.fn(() => <div />));
+jest.mock("@src/services/content-api/gateway/content-reader-service");
+jest.mock("@src/app/_components/vaccine/Vaccine");
 
 describe("Flu vaccine page", () => {
-  (configProvider as jest.Mock).mockImplementation(() => ({
-    CONTENT_CACHE_PATH: "wiremock/__files/",
-    PINO_LOG_LEVEL: "info",
-  }));
-
-  it("should contain back link to vaccination schedule page", () => {
-    const pathToSchedulePage = "/schedule";
-
-    render(VaccineFlu());
+  describe("when content loaded successfully", () => {
+    beforeEach(() => {
+      (getContentForVaccine as jest.Mock).mockResolvedValue(
+        () => mockStyledContent,
+      );
+      (Vaccine as jest.Mock).mockImplementation(() => <div />);
+    });
+
+    it("should contain back link to vaccination schedule page", () => {
+      const pathToSchedulePage = "/schedule";
+
+      render(VaccineFlu());
+
+      const linkToSchedulePage = screen.getByRole("link", { name: "Go back" });
+
+      expect(linkToSchedulePage.getAttribute("href")).toBe(pathToSchedulePage);
+    });
+
+    it("should contain vaccine component", () => {
+      render(VaccineFlu());
+
+      expect(Vaccine).toHaveBeenCalledWith(
+        {
+          name: "Flu",
+        },
+        undefined,
+      );
+    });
+  });
 
-    const linkToSchedulePage = screen.getByRole("link", { name: "Go back" });
+  describe("when content fails to load with errors", () => {
+    beforeEach(() => {
+      (Vaccine as jest.Mock).mockImplementation(() => {
+        throw new Error("error");
+      });
+    });
 
-    expect(linkToSchedulePage.getAttribute("href")).toBe(pathToSchedulePage);
-  });
+    it("should display error page", () => {
+      render(VaccineFlu());
 
-  it("should contain vaccine component", () => {
-    render(VaccineFlu());
+      const errorHeading: HTMLElement = screen.getByRole("heading", {
+        level: 2,
+        name: "Vaccine content is unavailable",
+      });
 
-    expect(Vaccine).toHaveBeenCalledWith(
-      {
-        name: "Flu",
-      },
-      undefined,
-    );
+      expect(errorHeading).toBeInTheDocument();
+    });
   });
 });

src/app/vaccines/flu/page.test.tsx

@@ -6,6 +6,8 @@ import Vaccine from "@src/app/_components/vaccine/Vaccine";
 import { getContentForVaccine } from "@src/services/content-api/gateway/content-reader-service";
 import { VaccineContentProvider } from "@src/app/_components/providers/VaccineContentProvider";
 import { StyledVaccineContent } from "@src/services/content-api/parsers/content-styling-service";
+import { ErrorBoundary } from "react-error-boundary";
+import VaccineError from "@src/app/vaccines/vaccine-error/page";
 
 export const dynamic = "force-dynamic";
 
@@ -18,9 +20,11 @@ const VaccineFlu = (): JSX.Element => {
     <div>
       <title>Flu Vaccine - NHS App</title>
       <BackLink link="/schedule" />
-      <VaccineContentProvider contentPromise={contentPromise}>
-        <Vaccine name={VaccineDisplayNames.FLU} />
-      </VaccineContentProvider>
+      <ErrorBoundary fallback={<VaccineError vaccineType={VaccineTypes.FLU} />}>
+        <VaccineContentProvider contentPromise={contentPromise}>
+          <Vaccine name={VaccineDisplayNames.FLU} />
+        </VaccineContentProvider>
+      </ErrorBoundary>
     </div>
   );
 };

src/app/vaccines/flu/page.tsx

@@ -3,17 +3,6 @@ import VaccineError from "@src/app/vaccines/vaccine-error/page";
 import { VaccineDisplayNames, VaccineTypes } from "@src/models/vaccine";
 
 describe("VaccineError", () => {
-  it("should display back button", () => {
-    const pathToSchedulePage: string = "/schedule";
-
-    render(VaccineError({ vaccineType: VaccineTypes.FLU }));
-
-    const linkToSchedulePage: HTMLElement = screen.getByRole("link", {
-      name: "Go back",
-    });
-    expect(linkToSchedulePage.getAttribute("href")).toBe(pathToSchedulePage);
-  });
-
   it.each([VaccineTypes.FLU, VaccineTypes.RSV, VaccineTypes.SIX_IN_ONE])(
     `should display vaccine name in error heading`,
     (vaccineType: VaccineTypes) => {

src/app/vaccines/vaccine-error/page.test.tsx

@@ -1,7 +1,8 @@
+"use client";
+
 import { JSX } from "react";
-import BackLink from "@src/app/_components/nhs-frontend/BackLink";
 import { VaccineDisplayNames, VaccineTypes } from "@src/models/vaccine";
-import styles from "@src/app/styles.module.css";
+import { ErrorSummary } from "nhsuk-react-components";
 
 interface VaccineProps {
   vaccineType: VaccineTypes;
@@ -10,18 +11,20 @@ interface VaccineProps {
 const VaccineError = ({ vaccineType }: VaccineProps): JSX.Element => {
   return (
     <div>
-      <BackLink link="/schedule" />
       <h1 className="app-dynamic-page-title__heading">{`${VaccineDisplayNames[vaccineType]} vaccine`}</h1>
-      <div className={styles.subheading}>
-        <div>
-          <h2 className="nhsuk-heading-s">Vaccine content is unavailable</h2>
-        </div>
-        <p>
-          Sorry, there is a problem showing vaccine information. Come back
-          later, or read about{" "}
-          <a href="https://www.nhs.uk/vaccinations/">vaccinations on NHS.uk</a>.
-        </p>
-      </div>
+      <ErrorSummary>
+        <ErrorSummary.Title>Vaccine content is unavailable</ErrorSummary.Title>
+        <ErrorSummary.Body>
+          <p>
+            Sorry, there is a problem showing vaccine information. Come back
+            later, or read about{" "}
+            <a href="https://www.nhs.uk/vaccinations/">
+              vaccinations on NHS.uk
+            </a>
+            .
+          </p>
+        </ErrorSummary.Body>
+      </ErrorSummary>
     </div>
   );
 };