VIA-2 DB/MD Add link to the error page for vaccine pages & add a few missing types to a test

Author: marie-dedikova-nhs

src/app/_components/vaccine/Vaccine.test.tsx

@@ -45,15 +45,17 @@ describe("Any vaccine page", () => {
 
     it("should display overview text", async () => {
       await renderVaccinePage();
-      const overviewBlock = screen.getByText("Overview text");
+      const overviewBlock: HTMLElement = screen.getByText("Overview text");
       expect(overviewBlock).toBeInTheDocument();
     });
 
     it("should display whatItIsFor expander block", async () => {
       await renderVaccinePage();
 
-      const heading = screen.getByText("what-heading");
-      const content = screen.getByText("What Section styled component");
+      const heading: HTMLElement = screen.getByText("what-heading");
+      const content: HTMLElement = screen.getByText(
+        "What Section styled component",
+      );
 
       expect(heading).toBeInTheDocument();
       expect(content).toBeInTheDocument();
@@ -62,8 +64,8 @@ describe("Any vaccine page", () => {
     it("should display whoVaccineIsFor expander block", async () => {
       await renderVaccinePage();
 
-      const heading = screen.getByText("who-heading");
-      const content = screen.getByRole("heading", {
+      const heading: HTMLElement = screen.getByText("who-heading");
+      const content: HTMLElement = screen.getByRole("heading", {
         level: 2,
         name: "Who Section styled component",
       });
@@ -75,8 +77,10 @@ describe("Any vaccine page", () => {
     it("should display howToGetVaccine expander block", async () => {
       await renderVaccinePage();
 
-      const heading = screen.getByText("how-heading");
-      const content = screen.getByText("How Section styled component");
+      const heading: HTMLElement = screen.getByText("how-heading");
+      const content: HTMLElement = screen.getByText(
+        "How Section styled component",
+      );
 
       expect(heading).toBeInTheDocument();
       expect(content).toBeInTheDocument();
@@ -85,7 +89,7 @@ describe("Any vaccine page", () => {
     it("should display webpage link", async () => {
       await renderVaccinePage();
 
-      const webpageLink = screen.getByRole("link", {
+      const webpageLink: HTMLElement = screen.getByRole("link", {
         name: `Learn more about the ${mockVaccineName} vaccination on nhs.uk`,
       });
 

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

@@ -43,9 +43,22 @@ describe("VaccineError", () => {
     render(VaccineError({ vaccineType: VaccineTypes.FLU }));
 
     const text: HTMLElement = screen.getByText(
-      "Sorry, there is a problem showing vaccine information. Come back later, or read about vaccinations on NHS.uk.",
+      /Sorry, there is a problem showing vaccine/,
     );
 
     expect(text).toBeInTheDocument();
   });
+
+  it("renders link in error text", async () => {
+    render(VaccineError({ vaccineType: VaccineTypes.FLU }));
+
+    const link: HTMLElement = screen.getByRole("link", {
+      name: "vaccinations on NHS.uk",
+    });
+
+    expect(link).toBeInTheDocument();
+    expect(link.getAttribute("href")).toEqual(
+      "https://www.nhs.uk/vaccinations/",
+    );
+  });
 });

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

@@ -7,18 +7,19 @@ interface VaccineProps {
   vaccineType: VaccineTypes;
 }
 
-const VaccineError = (props: VaccineProps): JSX.Element => {
+const VaccineError = ({ vaccineType }: VaccineProps): JSX.Element => {
   return (
     <div>
       <BackLink link="/schedule" />
-      <h1 className="app-dynamic-page-title__heading">{`${VaccineDisplayNames[props.vaccineType]} vaccine`}</h1>
+      <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 vaccinations on NHS.uk.
+          later, or read about{" "}
+          <a href="https://www.nhs.uk/vaccinations/">vaccinations on NHS.uk</a>.
         </p>
       </div>
     </div>