diff --git a/__test__/fixtures/searchResultsManyBibs.ts b/__test__/fixtures/searchResultsManyBibs.ts index 4ce692ab9..3dd9b598c 100644 --- a/__test__/fixtures/searchResultsManyBibs.ts +++ b/__test__/fixtures/searchResultsManyBibs.ts @@ -9072,6 +9072,34 @@ export const aggregationsResults = { "http://discovery-api-production.us-east-1.elasticbeanstalk.com/api/v0.1/discovery/context_all.jsonld", "@type": "itemList", itemListElement: [ + { + "@type": "nypl:Aggregation", + "@id": "res:buildingLocation", + id: "buildingLocation", + field: "buildingLocation", + values: [ + { + value: "sc", + count: 26, + label: "Not the label you should see - sc", + }, + { + value: "rc", + count: 26, + label: "Not the lable you should see - rc", + }, + { + value: "pa", + count: 2, + label: "Not the label you should see - pa", + }, + { + value: "ma", + count: 1, + label: "Not the label you should see - ma", + }, + ], + }, { "@type": "nypl:Aggregation", "@id": "res:materialType", diff --git a/__test__/pages/search/advancedSearchForm.test.tsx b/__test__/pages/search/advancedSearchForm.test.tsx index ef1ff4242..b07ec4842 100644 --- a/__test__/pages/search/advancedSearchForm.test.tsx +++ b/__test__/pages/search/advancedSearchForm.test.tsx @@ -80,7 +80,7 @@ describe("Advanced Search Form", () => { it("can check location checkboxes", async () => { render() const location = searchAggregations.buildingLocation[0] - await userEvent.click(screen.getByLabelText(location.label)) + await userEvent.click(screen.getByLabelText(location.label as string)) submit() expect(mockRouter.asPath).toBe( `/search?q=&filters%5BbuildingLocation%5D%5B0%5D=${location.value}` @@ -93,10 +93,13 @@ describe("Advanced Search Form", () => { await userEvent.click(notatedMusic) const cartographic = screen.getByLabelText("Cartographic") await userEvent.click(cartographic) - await userEvent.selectOptions( - screen.getByLabelText("Language"), - "Azerbaijani" - ) + const selector = screen.getByLabelText("Language") + await userEvent.selectOptions(selector, "Azerbaijani") + const schomburg = screen.getByLabelText("Schomburg Center for", { + exact: false, + }) + + await userEvent.click(schomburg) const keywordInput = screen.getByLabelText("Keyword") const titleInput = screen.getByLabelText("Title") const contributorInput = screen.getByLabelText("Author") @@ -107,7 +110,15 @@ describe("Advanced Search Form", () => { await userEvent.type(subjectInput, "italian food") await userEvent.click(screen.getByText("Clear fields")) - expect(notatedMusic).not.toBeChecked() + ;[notatedMusic, cartographic, schomburg].forEach((input) => + expect(input).not.toBeChecked() + ) + expect(selector).not.toHaveDisplayValue("Azerbaijani") + ;[subjectInput, keywordInput, titleInput, contributorInput].forEach( + (input) => { + expect(input).toBeEmptyDOMElement() + } + ) submit() // presence of alert means the form was cleared before hitting submit diff --git a/__test__/pages/search/searchResults.test.tsx b/__test__/pages/search/searchResults.test.tsx index 1ffb06295..b121f48b2 100644 --- a/__test__/pages/search/searchResults.test.tsx +++ b/__test__/pages/search/searchResults.test.tsx @@ -25,7 +25,7 @@ describe("Search Results page", () => { results={{ results, aggregations: aggregationsResults }} /> ) - const refine = screen.getByText("Refine Search") + const refine = screen.getByText("Filter results") await userEvent.click(refine) const field = screen.getByLabelText("Greek, Modern (1453-present)", { exact: false, @@ -70,7 +70,7 @@ describe("Search Results page", () => { await userEvent.selectOptions(desktopSortBy, "Title (A - Z)") expect(desktopSortBy).toHaveFocus() }) - it("focuses on cancel after clicking refine search", async () => { + it("focuses on cancel after clicking Filter results", async () => { mockRouter.push(`/search?q=${query}`) render( { results={{ results, aggregations: aggregationsResults }} /> ) - const refine = screen.getByText("Refine Search") + const refine = screen.getByText("Filter results") await userEvent.click(refine) const cancel = screen.getByText("Cancel") expect(cancel).toHaveFocus }) - it("focuses on refine search after clicking cancel", async () => { + it("focuses on Filter results after clicking cancel", async () => { mockRouter.push(`/search?q=${query}`) render( { results={{ results, aggregations: aggregationsResults }} /> ) - const refine = screen.getByText("Refine Search") + const refine = screen.getByText("Filter results") await userEvent.click(refine) const cancel = screen.getByText("Cancel") await userEvent.click(cancel) diff --git a/pages/search/advanced.tsx b/pages/search/advanced.tsx index 6530c57cb..d1d4130aa 100644 --- a/pages/search/advanced.tsx +++ b/pages/search/advanced.tsx @@ -55,7 +55,7 @@ export default function AdvancedSearch({ isAuthenticated, goBackHref, }: AdvancedSearchPropTypes) { - const metadataTitle = `Advanced Search | ${SITE_NAME}` + const metadataTitle = `Advanced search | ${SITE_NAME}` const router = useRouter() const inputRef = useRef() const notificationRef = useRef() @@ -153,7 +153,7 @@ export default function AdvancedSearch({ {alert && } - Advanced Search + Advanced search
- + {textInputFields.map(({ name, label }) => { return ( @@ -200,16 +200,17 @@ export default function AdvancedSearch({ {} - + handleCheckboxChange("buildingLocation", e) } searchFormState={searchFormState["filters"].buildingLocation} + gridOptions={{ min: 1, max: 1 }} /> { + return ( + + + Active filters + + + + ) +} + +export default ActiveFilters diff --git a/src/components/ItemFilters/ItemFilters.tsx b/src/components/ItemFilters/ItemFilters.tsx index 6b935e8d3..681013dc9 100644 --- a/src/components/ItemFilters/ItemFilters.tsx +++ b/src/components/ItemFilters/ItemFilters.tsx @@ -6,9 +6,7 @@ import { MultiSelect, SearchBar, Box, - Text, Label, - TagSet, type TagSetFilterDataProps, } from "@nypl/design-system-react-components" import type { @@ -22,6 +20,7 @@ import { buildItemFilterQuery, removeValueFromFilters, } from "../../utils/itemFilterUtils" +import ActiveFilters from "./ActiveFilters" interface ItemFilterContainerProps { itemAggregations: Aggregation[] @@ -200,31 +199,13 @@ const ItemFilters = ({ /> {filtersAreApplied ? ( - - - Active filters - - { - await handleRemoveFilter(filterToRemove.id) - }} - tagSetData={appliedFiltersTagSetData} - /> - + { + await handleRemoveFilter(filterToRemove.id) + }} + tagSetData={appliedFiltersTagSetData} + /> ) : null} ) diff --git a/src/components/RefineSearch/CancelSubmitButtonGroup.tsx b/src/components/RefineSearch/CancelSubmitButtonGroup.tsx index 66c876a7e..2f59e383e 100644 --- a/src/components/RefineSearch/CancelSubmitButtonGroup.tsx +++ b/src/components/RefineSearch/CancelSubmitButtonGroup.tsx @@ -20,7 +20,18 @@ const CancelSubmitButtonGroup = ({ ? "actionSearch" : "check" return ( - + // @ts-ignore + + - ) } diff --git a/src/components/RefineSearch/RefineSearch.test.tsx b/src/components/RefineSearch/RefineSearch.test.tsx index 5fa714c5f..acc5f3521 100644 --- a/src/components/RefineSearch/RefineSearch.test.tsx +++ b/src/components/RefineSearch/RefineSearch.test.tsx @@ -12,7 +12,7 @@ import { jest.mock("next/router", () => jest.requireActual("next-router-mock")) const openRefineSearch = async () => { - const refineButton = screen.getByText("Refine Search") + const refineButton = screen.getByText("Filter results") await userEvent.click(refineButton) } const apply = async () => { diff --git a/src/components/RefineSearch/RefineSearch.tsx b/src/components/RefineSearch/RefineSearch.tsx index 9cc3e68ef..69c9178ae 100644 --- a/src/components/RefineSearch/RefineSearch.tsx +++ b/src/components/RefineSearch/RefineSearch.tsx @@ -1,5 +1,6 @@ import type { TextInputRefType } from "@nypl/design-system-react-components" import { + Flex, Box, Button, HorizontalRule, @@ -27,7 +28,7 @@ import CancelSubmitButtonGroup from "./CancelSubmitButtonGroup" import SearchFilterCheckboxField from "./SearchFilterCheckboxField" const fields = [ - { value: "buildingLocation", label: "Location" }, + { value: "buildingLocation", label: "Item location" }, { value: "materialType", label: "Format" }, { value: "language", label: "Language" }, { value: "dateAfter", label: "Start Year" }, @@ -143,27 +144,33 @@ const RefineSearch = ({ } return ( - + {refineSearchClosed ? ( ) : ( - - - + + +