VIA-306 MD: Add missing tests for nhs-app components incl. CardLinkWithDescription

Author: marie-dedikova-nhs

src/app/_components/nhs-app/CardLink.test.tsx

@@ -0,0 +1,20 @@
+import CardLink from "@src/app/_components/nhs-app/CardLink";
+import { render, screen } from "@testing-library/react";
+
+describe("CardLink", () => {
+  it("should render component", () => {
+    render(<CardLink title="Flu" link="/vaccines/flu" />);
+
+    const oneOfCards = screen.getByRole("listitem");
+
+    expect(oneOfCards).toBeVisible();
+  });
+
+  it("should render link inside of card link", () => {
+    render(<CardLink title="Flu" link="/vaccines/flu" />);
+
+    const cardLinkWithDescription: HTMLElement = screen.getByRole("link", { name: "Flu" });
+
+    expect(cardLinkWithDescription).toBeVisible();
+  });
+});

src/app/_components/nhs-app/CardLinkWithDescription.test.tsx

@@ -0,0 +1,28 @@
+import CardLinkWithDescription from "@src/app/_components/nhs-app/CardLinkWithDescription";
+import { render, screen } from "@testing-library/react";
+
+describe("CardLinkWithDescription", () => {
+  it("should render component", () => {
+    render(<CardLinkWithDescription title="Flu" description="Around 12 weeks" link="/vaccines/flu" />);
+
+    const oneOfCards = screen.getByRole("listitem");
+
+    expect(oneOfCards).toBeVisible();
+  });
+
+  it("should render link inside of card link", () => {
+    render(<CardLinkWithDescription title="Flu" description="Around 12 weeks" link="/vaccines/flu" />);
+
+    const cardLinkWithDescription: HTMLElement = screen.getByRole("link", { name: "Flu" });
+
+    expect(cardLinkWithDescription).toBeVisible();
+  });
+
+  it("should render description inside of card link", () => {
+    render(<CardLinkWithDescription title="Flu" description="Around 12 weeks" link="/vaccines/flu" />);
+
+    const content: HTMLElement = screen.getByText("Around 12 weeks");
+
+    expect(content).toBeVisible();
+  });
+});

src/app/_components/nhs-app/CardLinkWithDescription.tsx

@@ -1,3 +1,5 @@
+import Link from "next/link";
+
 interface CardLinkProps {
   title: string;
   description: string;
@@ -9,9 +11,9 @@ const CardLinkWithDescription = ({ title, description, link }: CardLinkProps) =>
     <li className="nhsapp-card">
       <div className="nhsapp-card__container">
         <div className="nhsapp-card__content">
-          <a href={link} className="nhsapp-card__link nhsuk-link--no-visited-state">
+          <Link prefetch={false} href={link} className="nhsapp-card__link nhsuk-link--no-visited-state">
             {title}
-          </a>
+          </Link>
           <div className="nhsapp-card__below">
             <p className="nhsapp-card__description">{description}</p>
           </div>