VIA-618 SB Render markdown in Flu in pregnancy page.

Author: acerathereinspirative-nhs-nvir

src/_lambda/content-cache-hydrator/handler.test.ts

@@ -34,6 +34,10 @@ jest.mock("@src/utils/requestContext", () => ({
   },
 }));
 jest.mock("sanitize-data", () => ({ sanitize: jest.fn() }));
+const mockMarkdownWithStylingHtml = "<ul><li>sausage</li><li>egg</li><li>chips</li></ul>";
+jest.mock("@project/src/app/_components/markdown/MarkdownWithStyling", () => ({
+  MarkdownWithStyling: () => mockMarkdownWithStylingHtml,
+}));
 
 const mockValidCacheReadResult: ReadCachedContentResult = { cacheStatus: "valid", cacheContent: "some-content" };
 const mockInvalidatedCacheReadResult: ReadCachedContentResult = { cacheStatus: "invalidated", cacheContent: "" };

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

@@ -1,4 +1,4 @@
-import { Callout } from "@src/app/_components/content/Callout";
+import Callout from "@src/app/_components/content/Callout";
 import { VaccineType } from "@src/models/vaccine";
 import { mockStyledContent } from "@test-data/content-api/data";
 import { render, screen } from "@testing-library/react";

src/app/_components/content/Callout.tsx

@@ -15,4 +15,4 @@ const Callout = (props: { styledVaccineContent: StyledVaccineContent; vaccineTyp
     );
   return element;
 };
-export { Callout };
+export default Callout;

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

@@ -0,0 +1,22 @@
+import Recommendation from "@src/app/_components/content/Recommendation";
+import { mockStyledContent, mockStyledContentWithoutRecommendation } from "@test-data/content-api/data";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+
+describe("Recommendation component", () => {
+  it("renders correctly", () => {
+    render(<Recommendation styledVaccineContent={mockStyledContent} />);
+
+    const RecommendationText: HTMLElement = screen.getByTestId("recommendation");
+
+    expect(RecommendationText).toBeInTheDocument();
+  });
+
+  it("does not render if no recommendation present", () => {
+    render(<Recommendation styledVaccineContent={mockStyledContentWithoutRecommendation} />);
+
+    const RecommendationText: HTMLElement | null = screen.queryByTestId("Recommendation component");
+
+    expect(RecommendationText).not.toBeInTheDocument();
+  });
+});

src/app/_components/content/Recommendation.tsx

@@ -0,0 +1,19 @@
+import NonUrgentCareCard from "@src/app/_components/nhs-frontend/NonUrgentCareCard";
+import { StyledVaccineContent } from "@src/services/content-api/types";
+import { JSX } from "react";
+
+const Recommendation = (props: { styledVaccineContent: StyledVaccineContent }): JSX.Element => {
+  const element = props.styledVaccineContent.recommendation ? (
+    <div data-testid="recommendation">
+      <NonUrgentCareCard
+        heading={props.styledVaccineContent.recommendation.heading}
+        content={props.styledVaccineContent.recommendation.component}
+      />
+    </div>
+  ) : (
+    <></>
+  );
+
+  return element;
+};
+export default Recommendation;

src/app/_components/vaccine/Vaccine.tsx

@@ -1,13 +1,13 @@
 "use server";
 
 import { auth } from "@project/auth";
-import { Callout } from "@src/app/_components/content/Callout";
+import Callout from "@src/app/_components/content/Callout";
 import { FindOutMoreLink } from "@src/app/_components/content/FindOutMore";
 import { HowToGetVaccineFallback } from "@src/app/_components/content/HowToGetVaccineFallback";
 import { MoreInformation } from "@src/app/_components/content/MoreInformation";
 import { Overview } from "@src/app/_components/content/Overview";
+import Recommendation from "@src/app/_components/content/Recommendation";
 import { EligibilityVaccinePageContent } from "@src/app/_components/eligibility/EligibilityVaccinePageContent";
-import NonUrgentCareCard from "@src/app/_components/nhs-frontend/NonUrgentCareCard";
 import { RSVPregnancyInfo } from "@src/app/_components/vaccine-custom/RSVPregnancyInfo";
 import { NhsNumber, VaccineDetails, VaccineInfo, VaccineType } from "@src/models/vaccine";
 import { getContentForVaccine } from "@src/services/content-api/content-service";
@@ -69,15 +69,8 @@ const VaccineComponent = async ({ vaccineType }: VaccineProps): Promise<JSX.Elem
       {contentError != ContentErrorTypes.CONTENT_LOADING_ERROR && styledVaccineContent != undefined && (
         <>
           <Overview styledVaccineContent={styledVaccineContent} vaccineType={vaccineType} />
+          <Recommendation styledVaccineContent={styledVaccineContent} />
           <Callout styledVaccineContent={styledVaccineContent} vaccineType={vaccineType} />
-          {styledVaccineContent.recommendation && (
-            <div data-testid="recommendation">
-              <NonUrgentCareCard
-                heading={styledVaccineContent.recommendation.heading}
-                content={styledVaccineContent.recommendation.component}
-              />
-            </div>
-          )}
         </>
       )}
 

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

@@ -12,6 +12,10 @@ import { Readable } from "stream";
 
 jest.mock("@aws-sdk/client-s3");
 jest.mock("sanitize-data", () => ({ sanitize: jest.fn() }));
+const mockMarkdownWithStylingHtml = "<ul><li>sausage</li><li>egg</li><li>chips</li></ul>";
+jest.mock("@project/src/app/_components/markdown/MarkdownWithStyling", () => ({
+  MarkdownWithStyling: () => mockMarkdownWithStylingHtml,
+}));
 
 const mockRsvResponse = {
   Body: new Readable({

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

@@ -10,6 +10,10 @@ import { ConfigMock, configBuilder } from "@test-data/config/builders";
 jest.mock("@src/services/content-api/gateway/content-reader-service");
 jest.mock("@src/utils/config");
 jest.mock("sanitize-data", () => ({ sanitize: jest.fn() }));
+const mockMarkdownWithStylingHtml = "<ul><li>sausage</li><li>egg</li><li>chips</li></ul>";
+jest.mock("@project/src/app/_components/markdown/MarkdownWithStyling", () => ({
+  MarkdownWithStyling: () => mockMarkdownWithStylingHtml,
+}));
 
 describe("getContentForVaccine()", () => {
   const mockedConfig = config as ConfigMock;

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

@@ -20,6 +20,10 @@ const mockNBSBookingActionHTML = "NBS Booking Link Test";
 jest.mock("@src/app/_components/nbs/NBSBookingAction", () => ({
   NBSBookingAction: () => mockNBSBookingActionHTML,
 }));
+const mockMarkdownWithStylingHtml = "<ul><li>sausage</li><li>egg</li><li>chips</li></ul>";
+jest.mock("@project/src/app/_components/markdown/MarkdownWithStyling", () => ({
+  MarkdownWithStyling: () => mockMarkdownWithStylingHtml,
+}));
 jest.mock("sanitize-data", () => ({ sanitize: jest.fn() }));
 
 describe("ContentStylingService", () => {

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

@@ -1,3 +1,4 @@
+import { MarkdownWithStyling } from "@project/src/app/_components/markdown/MarkdownWithStyling";
 import NonUrgentCareCard from "@src/app/_components/nhs-frontend/NonUrgentCareCard";
 import UrgentCareCard from "@src/app/_components/nhs-frontend/UrgentCareCard";
 import { VaccineType } from "@src/models/vaccine";
@@ -161,7 +162,10 @@ function styleCallout(callout: HeadingWithContent | undefined): HeadingWithConte
 
 function styleRecommendation(recommendation: HeadingWithContent | undefined): StyledPageSection | undefined {
   if (recommendation) {
-    return { heading: recommendation.heading, component: <>{recommendation.content}</> };
+    return {
+      heading: recommendation.heading,
+      component: <MarkdownWithStyling content={recommendation.content} delineator={false} />,
+    };
   }
   return undefined;
 }