[OUR415-313] Adds prop/slot for the "Clear Search" button in the SearchResults component

app/components/search/Refinements/ClearSearchButton.tsx

@@ -26,7 +26,7 @@ const ClearSearchButton = () => {
       mobileFullWidth={false}
       onClick={handleOnClick}
     >
-      Clear Search
+      <span data-testid={"clear-search-button"}>Clear Search</span>
     </Button>
   );
 };

app/components/search/SearchResults/SearchResult.tsx

@@ -2,7 +2,6 @@ import React, { forwardRef } from "react";
 import { TransformedSearchHit } from "models";
 import { Link } from "react-router-dom";
 import { LabelTag } from "components/ui/LabelTag";
-import { Tooltip } from "react-tippy";
 import { formatPhoneNumber, renderAddressMetadata } from "utils";
 import { removeAsterisksAndHashes } from "utils/strings";
 import ReactMarkdown from "react-markdown";

app/components/search/SearchResults/SearchResults.test.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { InstantSearch } from "react-instantsearch-core";
+import { render, screen, waitFor } from "@testing-library/react";
+import SearchResults from "components/search/SearchResults/SearchResults";
+import { createSearchClient } from "../../../../test/helpers/createSearchClient";
+import ClearSearchButton from "components/search/Refinements/ClearSearchButton";
+
+describe("SearchResults", () => {
+  test("renders the Clear Search button", async () => {
+    const searchClient = createSearchClient();
+
+    render(
+      <InstantSearch
+        searchClient={searchClient}
+        indexName="fake_test_search_index"
+        initialUiState={{
+          fake_test_search_index: {
+            query: "fake query",
+          },
+        }}
+      >
+        <SearchResults
+          mobileMapIsCollapsed={false}
+          showClearSearchButton={true}
+        />
+      </InstantSearch>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId("clear-search-button")).toBeInTheDocument();
+    });
+  });
+
+  test("does not render the Clear Search button", async () => {
+    const searchClient = createSearchClient();
+
+    render(
+      <InstantSearch
+        searchClient={searchClient}
+        indexName="fake_test_search_index"
+        initialUiState={{
+          fake_test_search_index: {
+            query: "fake query",
+          },
+        }}
+      >
+        <SearchResults mobileMapIsCollapsed={false} />
+      </InstantSearch>
+    );
+
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId("clear-search-button")
+      ).not.toBeInTheDocument();
+    });
+  });
+});

app/components/search/SearchResults/SearchResults.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { ReactNode, useCallback } from "react";
 import { SearchMap } from "components/search/SearchMap/SearchMap";
 import { SearchResult } from "components/search/SearchResults/SearchResult";
 import {
@@ -11,18 +11,20 @@
   useSearchBox,
 } from "react-instantsearch";
 import styles from "./SearchResults.module.scss";
-import ClearSearchButton from "../Refinements/ClearSearchButton";
-import { Loader } from "components/ui";
+import { Loader } from "components/ui/Loader";
 import ResultsPagination from "components/search/Pagination/ResultsPagination";
+import ClearSearchButton from "components/search/Refinements/ClearSearchButton";
 
 export enum SearchMapActions {
   SearchThisArea,
 }
 
 const SearchResults = ({
   mobileMapIsCollapsed,
+  showClearSearchButton,
 }: {
   mobileMapIsCollapsed: boolean;
+  showClearSearchButton?: boolean;
 }) => {
   const { refine: refinePagination } = usePagination();
   const {
@@ -51,15 +53,15 @@
         <br /> Try a different location, filter, or search term.
       </div>
 
-      {query && <ClearSearchButton />}
+      {query && showClearSearchButton && <ClearSearchButton />}
     </div>
   );
 
   const searchResultsHeader = () => {
     return (
       <div className={styles.searchResultsHeader}>
         <h2>{searchResults.nbHits} results</h2>
-        <ClearSearchButton />
+        {showClearSearchButton && <ClearSearchButton />}
       </div>
     );
   };

app/pages/SearchResultsPage/SearchResultsPage.tsx

@@ -1,11 +1,12 @@
 import React, { useState } from "react";
 import SearchResults from "components/search/SearchResults/SearchResults";
 import Sidebar from "components/search/Sidebar/Sidebar";
 import { Header } from "components/search/Header/Header";
 import styles from "./SearchResultsPage.module.scss";
 import { DEFAULT_AROUND_PRECISION, useAppContext } from "utils";
 import { Configure } from "react-instantsearch-core";
 import classNames from "classnames";
+import ClearSearchButton from "components/search/Refinements/ClearSearchButton";
 
 // NOTE: The .searchResultsPage is added plain so that it can be targeted by print-specific css
 export const SearchResultsPage = () => {
@@ -28,7 +29,10 @@
         />
 
         <div className={styles.results}>
-          <SearchResults mobileMapIsCollapsed={isMapCollapsed} />
+          <SearchResults
+            mobileMapIsCollapsed={isMapCollapsed}
+            showClearSearchButton={true}
+          />
         </div>
       </div>
     </div>

jest.config.ts

@@ -91,6 +91,9 @@ const config: Config = {
   moduleNameMapper: {
     // Ensures style imports don't break tests
     "\\.(css|scss)$": "<rootDir>/test/jest/__mocks__/styleMock.ts",
+    "react-markdown": "<rootDir>/test/jest/__mocks__/react-markdown.tsx",
+    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
+      "<rootDir>/test/jest/__mocks__/fileMock.js",
   },
 
   // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader

test/helpers/createSearchClient.ts

@@ -1,5 +1,5 @@
 interface Options {
   [key: string]: any;
 }
 
 /**
@@ -30,7 +30,7 @@
  * @param options Additional customizations of the search response
  * @returns
  */
-export function createSearchClient(options: Options) {
+export function createSearchClient(options?: Options) {
   return {
     search: (requests: any) =>
       Promise.resolve({

test/jest/__mocks__/fileMock.ts

@@ -0,0 +1,3 @@
+// Webpack is not available in tests to handle the css import parsing and handling. Our test config tells jest to
+// replace any style imports it sees with this empty object.
+export default "";

test/jest/__mocks__/react-markdown.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+const ReactMarkdown = ({
+  children,
+}: {
+  children: string | JSX.Element | JSX.Element[] | (() => JSX.Element);
+}) => {
+  return <>{children}</>;
+};
+
+export default ReactMarkdown;