VIA-304 SB Whooping Cough overview contains HTML, so renders as a div with dangerouslySetInnerHTML. Other vaccines render as a single paragraph as hitherto.

Author: acerathereinspirative-nhs-nvir

src/_lambda/content-cache-hydrator/content-change-detector.test.ts

@@ -2,7 +2,7 @@ import { vitaContentChangedSinceLastApproved } from "@src/_lambda/content-cache-
 import { VaccinePageContent } from "@src/services/content-api/types";
 
 const mockPreviousApprovedVaccineContent: VaccinePageContent = {
-  overview: "This is an overview",
+  overview: { content: "This is an overview", containsHtml: false },
   whatVaccineIsFor: {
     headline: "What Vaccine Is For",
     subsections: [
@@ -58,7 +58,10 @@ describe("vitaContentChangedSinceLastApproved", () => {
   });
 
   it("should return true if content changed since last approved", async () => {
-    const mockChangedContent = { ...mockPreviousApprovedVaccineContent, overview: "changed-overview" };
+    const mockChangedContent = {
+      ...mockPreviousApprovedVaccineContent,
+      overview: { content: "changed-overview", containsHtml: false },
+    };
 
     expect(vitaContentChangedSinceLastApproved(mockChangedContent, mockPreviousApprovedVaccineContent)).toBeTruthy();
   });

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

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

src/app/_components/content/Overview.tsx

@@ -3,8 +3,14 @@ import { StyledVaccineContent } from "@src/services/content-api/types";
 import { JSX } from "react";
 
 const Overview = (props: { styledVaccineContent: StyledVaccineContent; vaccineType: VaccineType }): JSX.Element => {
-  return (
-    <p data-testid="overview-text" dangerouslySetInnerHTML={{ __html: props.styledVaccineContent?.overview || "" }} />
+  const element = props.styledVaccineContent?.overview.containsHtml ? (
+    <div
+      data-testid="overview-text"
+      dangerouslySetInnerHTML={{ __html: props.styledVaccineContent?.overview.content || "" }}
+    />
+  ) : (
+    <p data-testid="overview-text">{props.styledVaccineContent?.overview.content}</p>
   );
+  return element;
 };
 export { Overview };

src/services/content-api/content-api.integration.test.tsx

@@ -30,7 +30,10 @@ describe("Content API Read Integration Test ", () => {
 
     expect(styledVaccineContent).not.toBeNull();
     expect(contentError).toBeUndefined();
-    expect(styledVaccineContent?.overview).toEqual(mockRsvVaccineJson.mainEntityOfPage[0].text);
+    expect(styledVaccineContent?.overview).toEqual({
+      content: mockRsvVaccineJson.mainEntityOfPage[0].text,
+      containsHtml: false,
+    });
     expect(styledVaccineContent?.webpageLink.href).toEqual(mockRsvVaccineJson.webpage);
   });
 

src/services/content-api/content-service.test.ts

@@ -26,7 +26,10 @@ describe("getContentForVaccine()", () => {
       const { styledVaccineContent, contentError }: GetContentForVaccineResponse = await getContentForVaccine(vaccine);
 
       expect(styledVaccineContent).toBeDefined();
-      expect(styledVaccineContent?.overview).toEqual(mockRsvVaccineJson.mainEntityOfPage[0].text);
+      expect(styledVaccineContent?.overview).toEqual({
+        content: mockRsvVaccineJson.mainEntityOfPage[0].text,
+        containsHtml: false,
+      });
       expect(styledVaccineContent?.whatVaccineIsFor?.heading).toEqual(mockRsvVaccineJson.mainEntityOfPage[1].headline);
       expect(styledVaccineContent?.webpageLink.href).toEqual(mockRsvVaccineJson.webpage);
       expect(contentError).toBeUndefined();

src/services/content-api/parsers/content-filter-service.test.ts

@@ -527,7 +527,7 @@ describe("Content Filter", () => {
   describe("getFilteredContentForVaccine", () => {
     it("should return overview text from lead paragraph mainEntityOfPage object", async () => {
       const expectedOverview = {
-        overview: "Generic Vaccine Lead Paragraph (overview)",
+        overview: { content: "Generic Vaccine Lead Paragraph (overview)", containsHtml: false },
       };
 
       const pageCopyForRsv = getFilteredContentForVaccine(

src/services/content-api/parsers/content-filter-service.ts

@@ -4,6 +4,7 @@ import {
   ContentApiVaccineResponse,
   HasPartSubsection,
   MainEntityOfPage,
+  Overview,
   VaccinePageContent,
   VaccinePageSection,
   VaccinePageSubsection,
@@ -180,7 +181,7 @@ const getFilteredContentForVaccine = (vaccineType: VaccineType, apiContent: stri
 const getFilteredContentForStandardVaccine = (apiContent: string): VaccinePageContent => {
   const content: ContentApiVaccineResponse = JSON.parse(apiContent);
 
-  const overview: string = _extractDescriptionForVaccine(content, "lead paragraph");
+  const overview: Overview = { content: _extractDescriptionForVaccine(content, "lead paragraph"), containsHtml: false };
 
   let whatVaccineIsFor;
   if (_hasHealthAspect(content, "BenefitsHealthAspect")) {

src/services/content-api/parsers/content-styling-service.test.tsx

@@ -214,7 +214,7 @@ describe("ContentStylingService", () => {
         subsections: [mockMarkdownSubsection, mockUrgentSubsection],
       };
       const mockContent: VaccinePageContent = {
-        overview: "This is an overview",
+        overview: { content: "This is an overview", containsHtml: false },
         whatVaccineIsFor: mockWhatSection,
         whoVaccineIsFor: mockWhoSection,
         howToGetVaccine: mockHowSection,
@@ -265,7 +265,7 @@ describe("ContentStylingService", () => {
         subsections: [mockMarkdownSubsection, mockNonUrgentSubsection],
       };
       const mockContent: VaccinePageContent = {
-        overview: "This is an overview",
+        overview: { content: "This is an overview", containsHtml: false },
         whoVaccineIsFor: mockWhoSection,
         howToGetVaccine: mockHowSection,
         vaccineSideEffects: mockSideEffectsSection,
@@ -279,7 +279,7 @@ describe("ContentStylingService", () => {
       );
 
       expect(styledVaccineContent).not.toBeNull();
-      expect(styledVaccineContent.overview).toEqual("This is an overview");
+      expect(styledVaccineContent.overview).toEqual({ content: "This is an overview", containsHtml: false });
       expect(styledVaccineContent.whatVaccineIsFor).toBeUndefined();
       expect(isValidElement(styledVaccineContent.whoVaccineIsFor.component)).toBe(true);
       expect(isValidElement(styledVaccineContent.howToGetVaccine.component)).toBe(true);

src/services/content-api/parsers/content-styling-service.tsx

@@ -5,6 +5,7 @@ import { styleHowToGetSectionForRsv } from "@src/services/content-api/parsers/cu
 import { styleHowToGetSectionForRsvPregnancy } from "@src/services/content-api/parsers/custom/rsv-pregnancy";
 import type {
   HeadingWithContent,
+  Overview,
   StyledPageSection,
   StyledVaccineContent,
   VaccinePageContent,
@@ -142,7 +143,7 @@ const getStyledContentForVaccine = async (
   filteredContent: VaccinePageContent,
   fragile: boolean,
 ): Promise<StyledVaccineContent> => {
-  const overview: string = filteredContent.overview;
+  const overview: Overview = filteredContent.overview;
   let whatVaccineIsFor;
   if (filteredContent.whatVaccineIsFor) {
     whatVaccineIsFor = styleSection(filteredContent.whatVaccineIsFor);

src/services/content-api/parsers/custom/whooping-cough.test.tsx

@@ -24,7 +24,7 @@ const apiResponse = JSON.stringify({
 
 describe("getFilteredContentForVaccine", () => {
   it("should return overview text from lead paragraph mainEntityOfPage object", async () => {
-    const expected = { overview: "Whooping Cough Vaccine Lead Paragraph (overview)" };
+    const expected = { overview: { content: "Whooping Cough Vaccine Lead Paragraph (overview)", containsHtml: true } };
 
     const pageCopy = getFilteredContentForWhoopingCoughVaccine(apiResponse);