From 55d85545209ee963671aba9b2813b170b7d3fae4 Mon Sep 17 00:00:00 2001 From: Ross Chapman Date: Wed, 6 Nov 2024 18:31:27 -0800 Subject: [PATCH] Parameterizes the clear search button --- .../search/Refinements/ClearSearchButton.tsx | 2 +- .../search/SearchResults/SearchResult.tsx | 1 - .../SearchResults/SearchResults.test.tsx | 33 +++++++++++++++++++ .../search/SearchResults/SearchResults.tsx | 17 +++++++--- .../SearchResultsPage/SearchResultsPage.tsx | 6 +++- jest.config.ts | 3 ++ test/helpers/createSearchClient.ts | 2 +- test/jest/__mocks__/fileMock.ts | 3 ++ test/jest/__mocks__/react-markdown.tsx | 11 +++++++ 9 files changed, 69 insertions(+), 9 deletions(-) create mode 100644 app/components/search/SearchResults/SearchResults.test.tsx create mode 100644 test/jest/__mocks__/fileMock.ts create mode 100644 test/jest/__mocks__/react-markdown.tsx diff --git a/app/components/search/Refinements/ClearSearchButton.tsx b/app/components/search/Refinements/ClearSearchButton.tsx index 32c810c47..8285fea5e 100644 --- a/app/components/search/Refinements/ClearSearchButton.tsx +++ b/app/components/search/Refinements/ClearSearchButton.tsx @@ -26,7 +26,7 @@ const ClearSearchButton = () => { mobileFullWidth={false} onClick={handleOnClick} > - Clear Search + Clear Search ); }; diff --git a/app/components/search/SearchResults/SearchResult.tsx b/app/components/search/SearchResults/SearchResult.tsx index a585daac5..91cdf17a9 100644 --- a/app/components/search/SearchResults/SearchResult.tsx +++ b/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"; diff --git a/app/components/search/SearchResults/SearchResults.test.tsx b/app/components/search/SearchResults/SearchResults.test.tsx new file mode 100644 index 000000000..ac5b8a012 --- /dev/null +++ b/app/components/search/SearchResults/SearchResults.test.tsx @@ -0,0 +1,33 @@ +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 a Clear Search button if passed as a param", async () => { + const searchClient = createSearchClient(); + + render( + + } + /> + + ); + + await waitFor(() => { + expect(screen.getByTestId("clear-search-button")).toBeInTheDocument(); + }); + }); +}); diff --git a/app/components/search/SearchResults/SearchResults.tsx b/app/components/search/SearchResults/SearchResults.tsx index 0c56ab032..d42421792 100644 --- a/app/components/search/SearchResults/SearchResults.tsx +++ b/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,25 @@ import { 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"; export enum SearchMapActions { SearchThisArea, } +/** + * Renders the search results list and the map + * + * @property clearSearchButton Must be a ClearSearchButton component + * @returns + */ const SearchResults = ({ mobileMapIsCollapsed, + clearSearchButton, }: { mobileMapIsCollapsed: boolean; + clearSearchButton?: ReactNode; }) => { const { refine: refinePagination } = usePagination(); const { @@ -51,7 +58,7 @@ const SearchResults = ({
Try a different location, filter, or search term. - {query && } + {query && clearSearchButton} ); @@ -59,7 +66,7 @@ const SearchResults = ({ return (

{searchResults.nbHits} results

- + {clearSearchButton}
); }; diff --git a/app/pages/SearchResultsPage/SearchResultsPage.tsx b/app/pages/SearchResultsPage/SearchResultsPage.tsx index 8cdd087e0..6c0dc12bf 100644 --- a/app/pages/SearchResultsPage/SearchResultsPage.tsx +++ b/app/pages/SearchResultsPage/SearchResultsPage.tsx @@ -6,6 +6,7 @@ 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 @@ export const SearchResultsPage = () => { />
- + } + />
diff --git a/jest.config.ts b/jest.config.ts index 9c5edbc96..4df688939 100644 --- a/jest.config.ts +++ b/jest.config.ts @@ -91,6 +91,9 @@ const config: Config = { moduleNameMapper: { // Ensures style imports don't break tests "\\.(css|scss)$": "/test/jest/__mocks__/styleMock.ts", + "react-markdown": "/test/jest/__mocks__/react-markdown.tsx", + "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": + "/test/jest/__mocks__/fileMock.js", }, // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader diff --git a/test/helpers/createSearchClient.ts b/test/helpers/createSearchClient.ts index 9b2433ba0..b20093ca8 100644 --- a/test/helpers/createSearchClient.ts +++ b/test/helpers/createSearchClient.ts @@ -30,7 +30,7 @@ interface Options { * @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({ diff --git a/test/jest/__mocks__/fileMock.ts b/test/jest/__mocks__/fileMock.ts new file mode 100644 index 000000000..00629187f --- /dev/null +++ b/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 ""; diff --git a/test/jest/__mocks__/react-markdown.tsx b/test/jest/__mocks__/react-markdown.tsx new file mode 100644 index 000000000..608bd4abd --- /dev/null +++ b/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;