diff --git a/src/components/filters/compatibility-filter.test.js b/src/components/filters/compatibility-filter.test.js index 45d0e3dbb692..04613b70bfef 100644 --- a/src/components/filters/compatibility-filter.test.js +++ b/src/components/filters/compatibility-filter.test.js @@ -3,6 +3,21 @@ import { fireEvent, render, screen } from "@testing-library/react" import selectEvent from "react-select-event" import CompatibilityFilter from "./compatibility-filter" + +let mockQueryParamSearchString = undefined + +jest.mock("react-use-query-param-string", () => { + + const original = jest.requireActual("react-use-query-param-string") + const setQueryParam = jest.fn().mockImplementation((val) => { + mockQueryParamSearchString = val + }) + return { + ...original, + useQueryParamString: jest.fn().mockImplementation(() => [mockQueryParamSearchString, setQueryParam, true]), + } +}) + describe("compatibility filter", () => { const label = "Compatibility" @@ -34,6 +49,7 @@ describe("compatibility filter", () => { const filterer = jest.fn() beforeEach(() => { filterer.mockReset() + mockQueryParamSearchString = undefined render( { - if (action === "select-option" && filterer) filterer(value.value) +const onChange = (value, { action }, filterer, setSelectedOption) => { + if (action === "select-option") { + setSelectedOption && setSelectedOption(value.value) + if (filterer) { + filterer(value.value) + } + } } @@ -50,6 +57,8 @@ const DropdownFilter = ({ ? displayLabel.toLowerCase().replace(" ", "-") : "unknown" + const [selectedOption, setSelectedOption] = useQueryParamString(label, undefined, true) + const deduplicatedOptions = options ? [...new Set(options)] : [] const processedOptions = deduplicatedOptions.map(option => { @@ -64,13 +73,21 @@ const DropdownFilter = ({ // A filter string of zero length is interpreted as 'everything' processedOptions.unshift({ value: "", label: "All" }) + // This is what makes the selection work if the page is loaded from a url with a query parameter + useEffect(() => { + if (selectedOption && selectedOption.length > 0) { + filterer(selectedOption) + } + }, [selectedOption, filterer]) + return ( {displayLabel}