Merge pull request #391 from NYPL/qa

Deploy holding location filters

CHANGELOG

@@ -5,13 +5,20 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## Prerelease
+## [1.3.6] 2024-11-6
+
+## Added
+
+- Holding location filters to refine search and advanced search panels
+- "Go back" button to advanced search
 
 ## Updated
 
 - Better handling of bibs with no titles in SearchResultsBib model
+- Create reusable save/cancel button group
+- Extract checkbox groups from refine search and advanced search
 
-## 1.3.5 2024-10-23
+## [1.3.5] 2024-10-23
 
 ### Updated
 

__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",

__test__/pages/search/advancedSearchForm.test.tsx

@@ -6,16 +6,20 @@ import userEvent from "@testing-library/user-event"
 import AdvancedSearch, {
   defaultEmptySearchErrorMessage,
 } from "../../../pages/search/advanced"
+import { searchAggregations } from "../../../src/config/aggregations"
 
 // Mock next router
 jest.mock("next/router", () => jest.requireActual("next-router-mock"))
 
 describe("Advanced Search Form", () => {
   const submit = () => {
-    fireEvent(screen.getByText("Submit"), new MouseEvent("click"))
+    fireEvent(
+      screen.getByTestId("submit-advanced-search-button"),
+      new MouseEvent("click")
+    )
   }
   afterEach(async () => {
-    await userEvent.click(screen.getByText("Clear"))
+    await userEvent.click(screen.getByText("Clear fields"))
   })
   it("displays alert when no fields are submitted", () => {
     render(<AdvancedSearch isAuthenticated={true} />)
@@ -73,17 +77,29 @@ describe("Advanced Search Form", () => {
       "/search?q=&filters%5BmaterialType%5D%5B0%5D=resourcetypes%3Anot&filters%5BmaterialType%5D%5B1%5D=resourcetypes%3Acar"
     )
   })
+  it("can check location checkboxes", async () => {
+    render(<AdvancedSearch isAuthenticated={true} />)
+    const location = searchAggregations.buildingLocation[0]
+    await userEvent.click(screen.getByLabelText(location.label as string))
+    submit()
+    expect(mockRouter.asPath).toBe(
+      `/search?q=&filters%5BbuildingLocation%5D%5B0%5D=${location.value}`
+    )
+  })
 
   it("can clear the form", async () => {
     render(<AdvancedSearch isAuthenticated={true} />)
     const notatedMusic = screen.getByLabelText("Notated music")
     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")
@@ -93,8 +109,16 @@ describe("Advanced Search Form", () => {
     await userEvent.type(titleInput, "il amore di pasta")
     await userEvent.type(subjectInput, "italian food")
 
-    await userEvent.click(screen.getByText("Clear"))
-    expect(notatedMusic).not.toBeChecked()
+    await userEvent.click(screen.getByText("Clear fields"))
+    ;[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

__test__/pages/search/searchResults.test.tsx

@@ -25,13 +25,13 @@ 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,
       })
       await userEvent.click(field)
-      await userEvent.click(screen.getByText("Apply Filters"))
+      await userEvent.click(screen.getByText("Apply filters"))
       // This was the only way to get this test to pass. waitFor was not in fact waiting, even with same timeout.
       setTimeout(() => {
         const resultsHeading = screen.getByTestId("search-results-heading")
@@ -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(
         <SearchResults
@@ -79,12 +79,12 @@ 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 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(
         <SearchResults
@@ -93,7 +93,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 cancel = screen.getByText("Cancel")
       await userEvent.click(cancel)

jest.setup.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-undef */
 import "@testing-library/jest-dom"
-
+import { configure } from "@testing-library/dom"
 // The scrollIntoView function is necessary for the Tabs component.
 window.HTMLElement.prototype.scrollIntoView = jest.fn()