VIA-304 SB Overview component renders HTML.

Author: acerathereinspirative-nhs-nvir

src/app/_components/content/Overview.test.tsx

@@ -0,0 +1,23 @@
+import { Overview } from "@src/app/_components/content/Overview";
+import { VaccineType } from "@src/models/vaccine";
+import { mockStyledContent } from "@test-data/content-api/data";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+
+describe("Overview component", () => {
+  it("renders correctly", () => {
+    const vaccineType = VaccineType.SHINGLES;
+
+    render(<Overview styledVaccineContent={mockStyledContent} vaccineType={vaccineType} />);
+
+    const overviewText: HTMLElement = screen.getByTestId("overview-text");
+
+    expect(overviewText).toBeInTheDocument();
+
+    const boldElement = screen.getByText("text");
+
+    expect(overviewText).toContainElement(boldElement);
+    expect(boldElement).toBeInTheDocument();
+    expect(boldElement.tagName).toBe("B");
+  });
+});

src/app/_components/content/Overview.tsx

@@ -4,9 +4,7 @@ import { JSX } from "react";
 
 const Overview = (props: { styledVaccineContent: StyledVaccineContent; vaccineType: VaccineType }): JSX.Element => {
   return (
-    <>
-      <p data-testid="overview-text">{props.styledVaccineContent?.overview}</p>
-    </>
+    <p data-testid="overview-text" dangerouslySetInnerHTML={{ __html: props.styledVaccineContent?.overview || "" }} />
   );
 };
 export { Overview };

test-data/content-api/data.tsx

@@ -559,7 +559,7 @@ export const genericVaccineContentAPIResponse: ContentApiVaccineResponse = {
 };
 
 export const mockStyledContent: StyledVaccineContent = {
-  overview: "Overview text",
+  overview: "Overview <b>text</b>",
   whatVaccineIsFor: {
     heading: "what-heading",
     component: <p>What Section styled component</p>,