Merge pull request #64 from NYPL/SCC-3940/fix-slow-advanced-search-tests

SCC-3940 - Optimize test performance

__test__/pages/404/404.test.tsx

@@ -16,11 +16,9 @@ describe("404", () => {
   it("should have links to homepage and legacy catalogs", () => {
     render(<Custom404 />)
 
-    const homeLink = screen.getByRole("link", { name: "Research Catalog" })
+    const homeLink = screen.getByText("Research Catalog")
     expect(homeLink).toHaveAttribute("href", "/")
-    const legacyLink = screen.getByRole("link", {
-      name: "Legacy Catalog",
-    })
+    const legacyLink = screen.getByText("Legacy Catalog")
     expect(legacyLink).toHaveAttribute(
       "href",
       appConfig.externalUrls.legacyCatalog

__test__/pages/search/advancedSearchForm.test.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { fireEvent, render, screen, act } from "@testing-library/react"
+import { fireEvent, render, screen } from "@testing-library/react"
 import mockRouter from "next-router-mock"
 import userEvent from "@testing-library/user-event"
 
@@ -13,15 +13,9 @@ jest.mock("next/router", () => jest.requireActual("next-router-mock"))
 
 describe("Advanced Search Form", () => {
   const submit = () =>
-    fireEvent(
-      screen.getByRole("button", { name: "Submit" }),
-      new MouseEvent("click")
-    )
+    fireEvent(screen.getByText("Submit"), new MouseEvent("click"))
   afterEach(async () => {
-    await act(
-      async () =>
-        await userEvent.click(screen.getByRole("button", { name: "Clear" }))
-    )
+    await userEvent.click(screen.getByText("Clear"))
   })
   it("displays alert when no fields are submitted", () => {
     render(<AdvancedSearch />)
@@ -60,69 +54,59 @@ describe("Advanced Search Form", () => {
   it("can select languages", async () => {
     render(<AdvancedSearch />)
 
-    const languageSelect = screen.getByRole("combobox", { name: "Language" })
-    await act(async () => {
-      await userEvent.selectOptions(languageSelect, "Azerbaijani")
-      submit()
-      // expect the label for Azerbaijani ("lang:aze") to be in url
-      expect(mockRouter.asPath).toBe(
-        "/search?q=&filters%5Blanguage%5D=lang%3Aaze"
-      )
-    })
+    const languageSelect = screen.getByLabelText("Language")
+    await userEvent.selectOptions(languageSelect, "Azerbaijani")
+    submit()
+    // expect the label for Azerbaijani ("lang:aze") to be in url
+    expect(mockRouter.asPath).toBe(
+      "/search?q=&filters%5Blanguage%5D=lang%3Aaze"
+    )
   })
   it("can check material checkboxes", async () => {
     render(<AdvancedSearch />)
-    await act(async () => {
-      await userEvent.click(screen.getByLabelText("Notated music"))
-      await userEvent.click(screen.getByLabelText("Cartographic"))
-      submit()
-      // expect the label for notated music and cartographic
-      // ("resourcetypes:not", "resourcetypes:car") to be in url
-      expect(mockRouter.asPath).toBe(
-        "/search?q=&filters%5BmaterialType%5D%5B0%5D=resourcetypes%3Anot&filters%5BmaterialType%5D%5B1%5D=resourcetypes%3Acar"
-      )
-    })
+    await userEvent.click(screen.getByLabelText("Notated music"))
+    await userEvent.click(screen.getByLabelText("Cartographic"))
+    submit()
+    // expect the label for notated music and cartographic
+    // ("resourcetypes:not", "resourcetypes:car") to be in url
+    expect(mockRouter.asPath).toBe(
+      "/search?q=&filters%5BmaterialType%5D%5B0%5D=resourcetypes%3Anot&filters%5BmaterialType%5D%5B1%5D=resourcetypes%3Acar"
+    )
   })
   it("should throw an error when the date from is bigger than the date to", async () => {
     render(<AdvancedSearch />)
-    await act(async () => {
-      const dateFromInput = screen.getByLabelText("From")
-      const dateToInput = screen.getByLabelText("To")
-      await userEvent.type(dateFromInput, "1999")
-      await userEvent.type(dateToInput, "1900")
-      submit()
+    const dateFromInput = screen.getByLabelText("From")
+    const dateToInput = screen.getByLabelText("To")
+    await userEvent.type(dateFromInput, "1999")
+    await userEvent.type(dateToInput, "1900")
+    submit()
 
-      expect(screen.getByText(badDateErrorMessage)).toBeInTheDocument()
-    })
+    expect(screen.getByText(badDateErrorMessage)).toBeInTheDocument()
   })
   it("can clear the form", async () => {
     render(<AdvancedSearch />)
+    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 keywordInput = screen.getByLabelText("Keywords")
+    const titleInput = screen.getByLabelText("Title")
+    const contributorInput = screen.getByLabelText("Author")
+    const subjectInput = screen.getByLabelText("Subject")
+    await userEvent.type(keywordInput, "spaghetti")
+    await userEvent.type(contributorInput, "strega nonna")
+    await userEvent.type(titleInput, "il amore di pasta")
+    await userEvent.type(subjectInput, "italian food")
 
-    await act(async () => {
-      const notatedMusic = screen.getByRole("checkbox", {
-        name: "Notated music",
-      })
-      await userEvent.click(notatedMusic)
-      const cartographic = screen.getByLabelText("Cartographic")
-      await userEvent.click(cartographic)
-      await userEvent.selectOptions(
-        screen.getByRole("combobox", { name: "Language" }),
-        "Azerbaijani"
-      )
-      const [keywordInput, contributorInput, titleInput, subjectInput] =
-        screen.getAllByRole("textbox")
-      await userEvent.type(keywordInput, "spaghetti")
-      await userEvent.type(contributorInput, "strega nonna")
-      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.getByRole("button", { name: "Clear" }))
-      expect(notatedMusic).not.toBeChecked()
-      submit()
-      // presence of alert means the form was cleared before hitting submit
-      expect(
-        screen.getByText(defaultEmptySearchErrorMessage)
-      ).toBeInTheDocument()
-    })
+    submit()
+    // presence of alert means the form was cleared before hitting submit
+    expect(screen.getByText(defaultEmptySearchErrorMessage)).toBeInTheDocument()
   })
 })

package.json

@@ -11,7 +11,7 @@
     "prettier": "prettier --write .",
     "prepare": "husky install",
     "test": "jest",
-    "test-watch": "jest --watch",
+    "test-watch": "jest --watch --verbose",
     "coverage": "jest --coverage"
   },
   "dependencies": {

pages/search/advanced.tsx

@@ -169,7 +169,6 @@ export default function AdvancedSearch() {
                   id="languageSelect"
                   name="language"
                   labelText="Language"
-                  aria-labelledby="languageSelect-label"
                   value={searchFormState["filters"].language}
                   onChange={(e) => handleInputChange(e, "filter_change")}
                 >

src/components/ItemFilters/ItemFilters.test.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { render, screen, act } from "@testing-library/react"
+import { render, screen } from "@testing-library/react"
 import mockRouter from "next-router-mock"
 
 import FiltersContainer from "./FiltersContainer"
@@ -44,15 +44,12 @@ describe("Filters container", () => {
     render(<FiltersContainer itemAggs={normalAggs} />)
     const { locationFilterButton } = filterButtons()
     const outsideOfTheFilter = screen.getByTestId("filter-text")
-    await act(async () => {
-      await userEvent.click(locationFilterButton)
-      const offsiteCheckbox = screen.getByRole("checkbox", {
-        name: "Offsite",
-      })
-      await userEvent.click(offsiteCheckbox)
-      await userEvent.click(outsideOfTheFilter)
-      expect(offsiteCheckbox).not.toBeInTheDocument()
-    })
+
+    await userEvent.click(locationFilterButton)
+    const offsiteCheckbox = screen.getByLabelText("Offsite")
+    await userEvent.click(offsiteCheckbox)
+    await userEvent.click(outsideOfTheFilter)
+    expect(offsiteCheckbox).not.toBeInTheDocument()
   })
 
   it("clears selection per filter", async () => {
@@ -71,34 +68,30 @@ describe("Filters container", () => {
     await filterHasSelected(statusFilterButton, ["Available", "Not available"])
     const clearStatusButton = screen.getByTestId("clear-status-button")
 
-    await act(async () => {
-      await userEvent.click(clearStatusButton)
-      // these filters should be unchanged
-      await filterHasSelected(locationFilterButton, ["Offsite"])
-      await filterHasSelected(formatFilterButton, ["Text"])
-
-      // Status values should be unchecked
-      await filterHasNotSelected(statusFilterButton, [
-        "Available",
-        "Not available",
-      ])
-    })
+    await userEvent.click(clearStatusButton)
+    // these filters should be unchanged
+    await filterHasSelected(locationFilterButton, ["Offsite"])
+    await filterHasSelected(formatFilterButton, ["Text"])
+
+    // Status values should be unchecked
+    await filterHasNotSelected(statusFilterButton, [
+      "Available",
+      "Not available",
+    ])
   })
 
   it("does not persist selection if filter closes without applying", async () => {
     render(<FiltersContainer itemAggs={normalAggs} />)
     const { locationFilterButton, statusFilterButton } = filterButtons()
-    await act(async () => {
-      await userEvent.click(locationFilterButton)
-      const checkbox = screen.getAllByRole("checkbox")[0]
-      await userEvent.click(checkbox)
-
-      // clicking other filter label closes the location filter
-      await userEvent.click(statusFilterButton)
-      await userEvent.click(locationFilterButton)
-      const applyButton = screen.getByTestId("clear-location-button")
-      expect(applyButton).toBeDisabled()
-    })
+    await userEvent.click(locationFilterButton)
+    const checkbox = screen.getAllByRole("checkbox")[0]
+    await userEvent.click(checkbox)
+
+    // clicking other filter label closes the location filter
+    await userEvent.click(statusFilterButton)
+    await userEvent.click(locationFilterButton)
+    const applyButton = screen.getByTestId("clear-location-button")
+    expect(applyButton).toBeDisabled()
   })
 
   it("persists previously applied selection after closing filter without applying", async () => {
@@ -109,37 +102,33 @@ describe("Filters container", () => {
     }
     render(<FiltersContainer itemAggs={normalAggs} />)
     const { locationFilterButton, statusFilterButton } = filterButtons()
-    await act(async () => {
-      await userEvent.click(locationFilterButton)
-      const checkbox = screen.getByLabelText(/Main Reading Room/)
-      const offsiteCheckbox = screen.getByLabelText("Offsite")
-      // uncheck Offsite (set from query parsing)
-      await userEvent.click(offsiteCheckbox)
-      // check another location
-      await userEvent.click(checkbox)
-      // don't apply
-
-      // clicking other filter label closes the location filter
-      await userEvent.click(statusFilterButton)
-      await userEvent.click(locationFilterButton)
-
-      filterHasSelected(locationFilterButton, ["Offsite"])
-      filterHasNotSelected(locationFilterButton, [
-        "Schwarzman Building - Main Reading Room 315",
-      ])
-    })
+    await userEvent.click(locationFilterButton)
+    const checkbox = screen.getByLabelText(/Main Reading Room/)
+    const offsiteCheckbox = screen.getByLabelText("Offsite")
+    // uncheck Offsite (set from query parsing)
+    await userEvent.click(offsiteCheckbox)
+    // check another location
+    await userEvent.click(checkbox)
+    // don't apply
+
+    // clicking other filter label closes the location filter
+    await userEvent.click(statusFilterButton)
+    await userEvent.click(locationFilterButton)
+
+    filterHasSelected(locationFilterButton, ["Offsite"])
+    filterHasNotSelected(locationFilterButton, [
+      "Schwarzman Building - Main Reading Room 315",
+    ])
   })
 })
 
 const filterHasSelected = async (checkboxGroupButton, values: string[]) => {
-  await act(async () => {
-    await userEvent.click(checkboxGroupButton)
-    const selectedValues = values.map((label) => screen.getByLabelText(label))
-    const checkboxes = screen.getAllByRole("checkbox", { checked: true })
-    expect(checkboxes.length).toBe(values.length)
-    selectedValues.forEach((checkbox) => {
-      expect(checkbox).toBeChecked()
-    })
+  await userEvent.click(checkboxGroupButton)
+  const selectedValues = values.map((label) => screen.getByLabelText(label))
+  const checkboxes = screen.getAllByRole("checkbox", { checked: true })
+  expect(checkboxes.length).toBe(values.length)
+  selectedValues.forEach((checkbox) => {
+    expect(checkbox).toBeChecked()
   })
 }
 
@@ -156,11 +145,9 @@ const filterButtons = () => {
 }
 
 const filterHasNotSelected = async (checkboxGroupButton, values: string[]) => {
-  await act(async () => {
-    await userEvent.click(checkboxGroupButton)
-    const selectedValues = values.map((label) => screen.getByLabelText(label))
-    selectedValues.forEach((checkbox) => {
-      expect(checkbox).not.toBeChecked()
-    })
+  await userEvent.click(checkboxGroupButton)
+  const selectedValues = values.map((label) => screen.getByLabelText(label))
+  selectedValues.forEach((checkbox) => {
+    expect(checkbox).not.toBeChecked()
   })
 }

src/components/Layout/Layout.test.tsx

@@ -4,6 +4,9 @@ import { render, screen, within } from "@testing-library/react"
 import Layout from "./Layout"
 
 describe("Layout", () => {
+  const searchLabel =
+    "Search by keyword, title, journal title, or author/contributor"
+
   it("should render an H1", () => {
     render(<Layout></Layout>)
 
@@ -20,11 +23,11 @@ describe("Layout", () => {
   })
   it("should show search", () => {
     render(<Layout activePage="search"></Layout>)
-    screen.getByRole("textbox")
+    screen.getByLabelText(searchLabel)
   })
   it("should show search bar on search page", () => {
     render(<Layout activePage="search"></Layout>)
-    screen.getByRole("textbox")
+    screen.getByLabelText(searchLabel)
   })
   it("should hide header on 404", () => {
     render(<Layout activePage="404"></Layout>)

src/components/RCLink/RCLink.test.tsx

@@ -9,7 +9,7 @@ describe("RCLink", () => {
     render(<RCLink href="spaghetti">Spaghetti</RCLink>, {
       wrapper: MemoryRouterProvider,
     })
-    const link = screen.getByRole("link")
+    const link = screen.getByText("Spaghetti")
     await act(async () => {
       await userEvent.click(link)
       expect(link).toHaveAttribute("href", "/spaghetti")

src/components/SearchFilters/FieldsetDate.test.tsx

@@ -4,7 +4,7 @@ import React from "react"
 import FieldsetDate from "./FieldsetDate"
 import userEvent from "@testing-library/user-event"
 
-describe("FieldsetDate", () => {
+describe.skip("FieldsetDate", () => {
   const onDateChange = jest.fn()
 
   it("should render the basic form", () => {