test: Add strip html test

theopensystemslab · Oct 23, 2024 · f0cf4fd · f0cf4fd
1 parent 12dfdb1
commit f0cf4fd
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 12 deletions.
diff --git a/...lanx.uk/src/pages/FlowEditor/components/Sidebar/Search/SearchResultCard/allFacets.test.ts b/...lanx.uk/src/pages/FlowEditor/components/Sidebar/Search/SearchResultCard/allFacets.test.ts
@@ -105,7 +105,7 @@ describe("More information fields", () => {
     const output = getDisplayDetailsForResult({
       ...mockQuestionResult,
       key: "data.policyRef",
-      matchValue: "Rat"
+      matchValue: "Rat",
     });
 
     expect(output).toStrictEqual<Output>({
@@ -121,7 +121,7 @@ describe("More information fields", () => {
     const output = getDisplayDetailsForResult({
       ...mockQuestionResult,
       key: "data.info",
-      matchValue: "Octopus"
+      matchValue: "Octopus",
     });
 
     expect(output).toStrictEqual<Output>({
@@ -133,6 +133,7 @@ describe("More information fields", () => {
     });
   });
 });
+
 describe("checklist fields", () => {
   it("renders data.categories.title", () => {
     const output = getDisplayDetailsForResult(mockChecklistResult);
@@ -176,7 +177,7 @@ describe("nextSteps fields", () => {
     const output = getDisplayDetailsForResult({
       ...mockNextStepsOptionResult,
       key: "data.steps.description",
-      matchValue: "Vulture"
+      matchValue: "Vulture",
     });
 
     expect(output).toStrictEqual<Output>({
@@ -222,7 +223,7 @@ describe("fileUploadAndLabel fields", () => {
     const output = getDisplayDetailsForResult({
       ...mockFileUploadAndLabelResult,
       key: "data.fileTypes.moreInformation.info",
-      matchValue: "Kangaroo"
+      matchValue: "Kangaroo",
     });
 
     expect(output).toStrictEqual<Output>({
@@ -238,7 +239,7 @@ describe("fileUploadAndLabel fields", () => {
     const output = getDisplayDetailsForResult({
       ...mockFileUploadAndLabelResult,
       key: "data.fileTypes.moreInformation.policyRef",
-      matchValue: "Tiger"
+      matchValue: "Tiger",
     });
 
     expect(output).toStrictEqual<Output>({
@@ -254,7 +255,7 @@ describe("fileUploadAndLabel fields", () => {
     const output = getDisplayDetailsForResult({
       ...mockFileUploadAndLabelResult,
       key: "data.fileTypes.moreInformation.howMeasured",
-      matchValue: "Salamander"
+      matchValue: "Salamander",
     });
 
     expect(output).toStrictEqual<Output>({
@@ -280,6 +281,7 @@ describe("numberInput fields", () => {
     });
   });
 });
+
 describe("schemaComponents fields", () => {
   it("renders data.schemaName", () => {
     const output = getDisplayDetailsForResult(mockSchemaResult);
@@ -345,7 +347,7 @@ describe("schemaComponents fields", () => {
     const output = getDisplayDetailsForResult({
       ...mockSchemaResult,
       key: "data.schema.fields.data.options.data.description",
-      matchValue: "Parrot"
+      matchValue: "Parrot",
     });
 
     expect(output).toStrictEqual<Output>({
@@ -435,7 +437,7 @@ describe("confirmation fields", () => {
     const output = getDisplayDetailsForResult({
       ...mockConfirmationResult,
       key: "data.contactInfo",
-      matchValue: "Weasel"
+      matchValue: "Weasel",
     });
 
     expect(output).toStrictEqual<Output>({
@@ -451,7 +453,7 @@ describe("confirmation fields", () => {
     const output = getDisplayDetailsForResult({
       ...mockConfirmationResult,
       key: "data.nextSteps.title",
-      matchValue: "Llama"
+      matchValue: "Llama",
     });
 
     expect(output).toStrictEqual<Output>({
@@ -543,7 +545,7 @@ describe("drawBoundary fields", () => {
     const output = getDisplayDetailsForResult({
       ...mockDrawBoundaryResult,
       key: "data.descriptionForUploading",
-      matchValue: "Panda"
+      matchValue: "Panda",
     });
 
     expect(output).toStrictEqual<Output>({
@@ -687,7 +689,7 @@ describe("pay fields", () => {
     const output = getDisplayDetailsForResult({
       ...mockPayResult,
       key: "data.yourDetailsDescription",
-      matchValue: "Macaw"
+      matchValue: "Macaw",
     });
 
     expect(output).toStrictEqual<Output>({
@@ -754,7 +756,7 @@ describe("result fields", () => {
     const output = getDisplayDetailsForResult({
       ...mockResultResult,
       key: "data.overrides.IMMUNE.heading",
-      matchValue: "Squid"
+      matchValue: "Squid",
     });
 
     expect(output).toStrictEqual<Output>({

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/index.test.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/index.test.tsx
@@ -122,3 +122,38 @@ it("should not have any accessibility violations on initial load", async () => {
   const results = await axe(container);
   expect(results).toHaveNoViolations();
 });
+
+describe("rich text fields", () => {
+  test("HTML tags are stripped out", async () => {
+    const {
+      user,
+      getByRole,
+      getAllByRole,
+      getByText,
+      queryByText,
+      getByLabelText,
+    } = setup(
+      <VirtuosoWrapper>
+        <Search />
+      </VirtuosoWrapper>,
+    );
+
+    const searchInput = getByLabelText("Search this flow and internal portals");
+    user.type(searchInput, "rich text");
+
+    // Search has completed
+    await waitFor(() => expect(getByRole("list")).toBeInTheDocument());
+    await waitFor(() => expect(getAllByRole("listitem")).toHaveLength(1));
+
+    // Single, correct, search result returned which has rich text as a description
+    expect(getByText(/1 result:/)).toBeVisible();
+    expect(getByText(/Pick a country/)).toBeVisible();
+    expect(getByText(/Description/)).toBeVisible();
+
+    // No HTML tags in text
+    // We must search by characters and not strings (e.g </h1>) as the string is split for the headline
+    expect(queryByText(/</)).not.toBeInTheDocument();
+    expect(queryByText(/>/)).not.toBeInTheDocument();
+    expect(queryByText(/\//)).not.toBeInTheDocument();
+  });
+});
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/mocks/simple.ts b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/mocks/simple.ts
@@ -10,6 +10,8 @@ export const flow: FlowGraph = {
     data: {
       fn: "country",
       text: "Pick a country",
+      description:
+        "<h1>This is rich text</h1><ol><li>With many nested html tags</li><li>Like <b>this</b>one<li><ol>",
     },
     edges: ["VhSydY2fTe", "tR9tdaWOvF", "tvUxd2IoPo"],
   },