From 88d90c78990b1f99806337969b3e3d5eeb2883d2 Mon Sep 17 00:00:00 2001 From: Jackie Quach Date: Tue, 26 Sep 2023 17:32:41 -0400 Subject: [PATCH 1/2] replace fireEvent with userEvent --- CHANGELOG.md | 1 + src/__tests__/AdvancedSearch.test.tsx | 119 +++++++++--------- src/__tests__/Search.test.tsx | 115 ++++++++--------- .../componentHelpers/FilterYears.tsx | 16 +-- src/__tests__/componentHelpers/SearchForm.tsx | 8 +- src/components/Collection/Collection.test.tsx | 10 +- src/components/EditionDetail/Edition.test.tsx | 11 +- src/components/Feedback/Feedback.test.tsx | 15 +-- src/components/Work/Work.test.tsx | 15 +-- 9 files changed, 158 insertions(+), 152 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c8d81485..aea24193 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ - Fix: Small adjustments to Playwright tests - Upgrade testing-library packages to v14 and jest to v29 +- Replace fireEvent with userEvent ## [0.17.4] diff --git a/src/__tests__/AdvancedSearch.test.tsx b/src/__tests__/AdvancedSearch.test.tsx index 0b9bf97d..ded97d3c 100644 --- a/src/__tests__/AdvancedSearch.test.tsx +++ b/src/__tests__/AdvancedSearch.test.tsx @@ -1,6 +1,6 @@ import React from "react"; import AdvancedSearch from "../components/AdvancedSearch/AdvancedSearch"; -import { render, screen, fireEvent } from "@testing-library/react"; +import { render, screen } from "@testing-library/react"; import { FilterLanguagesCommonTests } from "./componentHelpers/FilterLanguages"; import { FilterYearsTests } from "./componentHelpers/FilterYears"; import { FilterFormatTests } from "./componentHelpers/FilterFormats"; @@ -68,29 +68,28 @@ describe("Advanced Search submit", () => { test("Submits well formed query", async () => { render(); - const inputValues = { - Keyword: "cat", - Author: "Nook", - Subject: "poetry", - Title: "Handbook", - }; - await userEvent.click( - await screen.findByRole("checkbox", { name: "english" }) + screen.getByRole("checkbox", { + name: "english", + }) + ); + await userEvent.type(screen.getByLabelText("Keyword"), "cat"); + await userEvent.type(screen.getByLabelText("Author"), "Nook"); + await userEvent.type(screen.getByLabelText("Title"), "Handbook"); + await userEvent.type(screen.getByLabelText("Subject"), "poetry"); + await userEvent.type( + screen.getByRole("spinbutton", { name: "From" }), + "1990" + ); + await userEvent.type( + screen.getByRole("spinbutton", { name: "To" }), + "1999" + ); + await userEvent.click( + screen.getByRole("checkbox", { + name: "Readable", + }) ); - inputTerms.forEach((val) => { - fireEvent.change(screen.getByLabelText(val.text), { - target: { value: inputValues[val.text] }, - }); - }); - fireEvent.change(screen.getByRole("spinbutton", { name: "From" }), { - target: { value: "1990" }, - }); - fireEvent.change(screen.getByRole("spinbutton", { name: "To" }), { - target: { value: "1999" }, - }); - await userEvent.click(screen.getByRole("checkbox", { name: "Readable" })); - await userEvent.click(screen.getByRole("button", { name: "Search" })); const expectedQuery = { @@ -106,12 +105,11 @@ describe("Advanced Search submit", () => { test("Submits only year start and subject", async () => { render(); - fireEvent.change(screen.getByRole("spinbutton", { name: "From" }), { - target: { value: "1990" }, - }); - fireEvent.change(screen.getByLabelText("Keyword"), { - target: { value: "cat" }, - }); + await userEvent.type( + screen.getByRole("spinbutton", { name: "From" }), + "1990" + ); + await userEvent.type(screen.getByLabelText("Keyword"), "cat"); await userEvent.click(screen.getByRole("button", { name: "Search" })); @@ -128,12 +126,11 @@ describe("Advanced Search submit", () => { test("Submits only year end and author", async () => { render(); - fireEvent.change(screen.getByRole("spinbutton", { name: "To" }), { - target: { value: "1990" }, - }); - fireEvent.change(screen.getByLabelText("Author"), { - target: { value: "Shakespeare" }, - }); + await userEvent.type( + screen.getByRole("spinbutton", { name: "To" }), + "1990" + ); + await userEvent.type(screen.getByLabelText("Author"), "Shakespeare"); await userEvent.click(screen.getByRole("button", { name: "Search" })); @@ -157,15 +154,15 @@ describe("Advanced Search submit", () => { test("show error on invalid year", async () => { render(); - fireEvent.change(screen.getByRole("spinbutton", { name: "From" }), { - target: { value: "1990" }, - }); - fireEvent.change(screen.getByRole("spinbutton", { name: "To" }), { - target: { value: "1880" }, - }); - fireEvent.change(screen.getByLabelText("Keyword"), { - target: { value: "cat" }, - }); + await userEvent.type( + screen.getByRole("spinbutton", { name: "From" }), + "1990" + ); + await userEvent.type( + screen.getByRole("spinbutton", { name: "To" }), + "1880" + ); + await userEvent.type(screen.getByLabelText("Keyword"), "cat"); await userEvent.click(screen.getByRole("button", { name: "Search" })); @@ -186,17 +183,23 @@ describe("Advanced Search clear", () => { }; await userEvent.click(screen.getByRole("checkbox", { name: "english" })); - inputTerms.forEach((val) => { - fireEvent.change(screen.getByLabelText(val.text), { - target: { value: inputValues[val.text] }, - }); - }); - fireEvent.change(screen.getByRole("spinbutton", { name: "From" }), { - target: { value: "1990" }, - }); - fireEvent.change(screen.getByRole("spinbutton", { name: "To" }), { - target: { value: "1999" }, + inputTerms.forEach(async (val) => { + await userEvent.type( + screen.getByLabelText(val.text), + inputValues[val.text] + ); }); + await userEvent.clear( + await screen.findByRole("spinbutton", { name: "From" }) + ); + await userEvent.type( + await screen.findByRole("spinbutton", { name: "From" }), + "1990" + ); + await userEvent.type( + screen.getByRole("spinbutton", { name: "To" }), + "1999" + ); await userEvent.click(screen.getByRole("checkbox", { name: "Readable" })); await userEvent.click( screen.getByRole("checkbox", { @@ -212,13 +215,13 @@ describe("Advanced Search clear", () => { screen.getByLabelText("Show only US government documents") ).toBeChecked(); - inputTerms.forEach((val) => { - expect(screen.getByLabelText(val.text)).toHaveValue( + inputTerms.forEach(async (val) => { + expect(await screen.findByRole(val.text)).toHaveValue( inputValues[val.text] ); }); - fireEvent.click(screen.getByRole("button", { name: "Clear" })); + await userEvent.click(screen.getByRole("button", { name: "Clear" })); expect(screen.getByLabelText("english")).not.toBeChecked(); expect(screen.getByLabelText("Readable")).not.toBeChecked(); @@ -240,9 +243,7 @@ describe("Advanced Search clear", () => { test("Deleting search clears it from state", async () => { render(); - fireEvent.change(screen.getByLabelText("Keyword"), { - target: { value: "cat" }, - }); + await userEvent.type(screen.getByLabelText("Keyword"), "cat"); const keywordInput: HTMLInputElement = screen.getByLabelText( "Keyword" diff --git a/src/__tests__/Search.test.tsx b/src/__tests__/Search.test.tsx index c1c7172e..2e0dae36 100644 --- a/src/__tests__/Search.test.tsx +++ b/src/__tests__/Search.test.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { act, fireEvent, screen, within } from "@testing-library/react"; +import { act, cleanup, screen, within } from "@testing-library/react"; import { render } from "./testUtils/render"; import SearchResults from "../components/Search/Search"; import { FacetItem, SearchField } from "../types/DataModel"; @@ -40,6 +40,8 @@ const emptySearchResults: ApiSearchResult = { works: [], }, }; +const clickFiltersButton = async () => + userEvent.click(await screen.findByRole("button", { name: "Filters (0)" })); describe("Renders Search Results Page", () => { beforeEach(() => { @@ -50,6 +52,7 @@ describe("Renders Search Results Page", () => { resizeWindow(300, 1000); }); }); + afterEach(() => cleanup()); test("Digital Research Books Beta doesn't have href attribute", () => { const homepagelinks = screen.getAllByText("Digital Research Books Beta"); @@ -82,8 +85,8 @@ describe("Renders Search Results Page", () => { screen.getByRole("button", { name: "Filters (0)" }) ).toBeInTheDocument(); }); - test("clicking 'filters' button shows filters contents", () => { - fireEvent.click(screen.getByText("Filters (0)")); + test("clicking 'filters' button shows filters contents", async () => { + await clickFiltersButton(); expect( screen.getByRole("combobox", { name: "Items Per Page", hidden: false }) ).toHaveValue("10"); @@ -121,17 +124,12 @@ describe("Renders Search Results Page", () => { }); }); describe("Filters interactions in narrow view", () => { - beforeEach(() => { - fireEvent.click(screen.getByText("Filters (0)")); - }); describe("Per Page filters", () => { - test("Changes Sort By sends new search", () => { - const allSorts = screen.getAllByLabelText("Items Per Page"); - const modalSorts = allSorts[0]; - expect(modalSorts).toBeVisible(); - const wideSorts = allSorts[1]; - expect(wideSorts).not.toBeVisible(); - fireEvent.change(modalSorts, { target: { value: 20 } }); + test("Changes Sort By sends new search", async () => { + await clickFiltersButton(); + const modalItemsPerPage = screen.getAllByLabelText("Items Per Page")[1]; + expect(modalItemsPerPage).toBeVisible(); + await userEvent.selectOptions(modalItemsPerPage, "20"); expect(mockRouter).toMatchObject({ pathname: "/search", query: { @@ -139,22 +137,21 @@ describe("Renders Search Results Page", () => { size: "20", }, }); - expect(modalSorts).toHaveValue("20"); + expect(modalItemsPerPage).toHaveValue("20"); - fireEvent.click(screen.getByRole("button", { name: "Go Back" })); + await userEvent.click(screen.getByRole("button", { name: "Go Back" })); expect( screen.getByRole("button", { name: "Filters (0)" }) ).toBeInTheDocument(); - }); + }, 10000); }); describe("Sorts filters", () => { - test("Changing items sends new search ", () => { + test("Changing items sends new search ", async () => { + await clickFiltersButton(); const allSorts = screen.getAllByLabelText("Sort By"); - const wideSorts = allSorts[1]; - expect(wideSorts).not.toBeVisible(); - const sortBy = allSorts[0]; + const sortBy = allSorts[1]; expect(sortBy).toBeVisible(); - fireEvent.change(sortBy, { target: { value: "Title A-Z" } }); + await userEvent.selectOptions(sortBy, "Title A-Z"); expect(sortBy).toHaveValue("Title A-Z"); expect(mockRouter).toMatchObject({ pathname: "/search", @@ -164,18 +161,19 @@ describe("Renders Search Results Page", () => { }, }); - fireEvent.click(screen.getByRole("button", { name: "Go Back" })); + await userEvent.click(screen.getByRole("button", { name: "Go Back" })); expect( screen.getByRole("button", { name: "Filters (0)" }) ).toBeInTheDocument(); - }); + }, 10000); }); describe("Available Online", () => { - test("Changing checkbox sends new search", () => { + test("Changing checkbox sends new search", async () => { + await clickFiltersButton(); const modalCheckbox = screen.getByRole("checkbox", { name: "Available Online", }); - fireEvent.click(modalCheckbox); + await userEvent.click(modalCheckbox); expect(modalCheckbox).not.toBeChecked; expect(mockRouter).toMatchObject({ pathname: "/search", @@ -184,11 +182,11 @@ describe("Renders Search Results Page", () => { showAll: "true", }, }); - fireEvent.click(screen.getByRole("button", { name: "Go Back" })); + await userEvent.click(screen.getByRole("button", { name: "Go Back" })); expect( screen.getByRole("button", { name: "Filters (1)" }) ).toBeInTheDocument(); - }); + }, 10000); }); describe("Languages filter", () => { const availableLanguages: FacetItem[] = @@ -198,7 +196,8 @@ describe("Renders Search Results Page", () => { FilterLanguagesCommonTests(screen, availableLanguages, true); - test("Clicking new language sends new search", () => { + test("Clicking new language sends new search", async () => { + await clickFiltersButton(); const languages = screen.getByRole("group", { name: "List of Languages", }); @@ -207,7 +206,7 @@ describe("Renders Search Results Page", () => { name: "English (6)", }); - fireEvent.click(englishCheckbox); + await userEvent.click(englishCheckbox); expect(mockRouter).toMatchObject({ pathname: "/search", query: { @@ -216,8 +215,10 @@ describe("Renders Search Results Page", () => { }, }); - fireEvent.click(screen.getByRole("button", { name: "Go Back" })); - fireEvent.click(screen.getByRole("button", { name: "Filters (1)" })); + await userEvent.click(screen.getByRole("button", { name: "Go Back" })); + await userEvent.click( + screen.getByRole("button", { name: "Filters (1)" }) + ); const languages2 = screen.getByRole("group", { name: "List of Languages", @@ -227,15 +228,16 @@ describe("Renders Search Results Page", () => { name: "English (6)", }); expect(englishCheckbox2).toBeChecked(); - }); + }, 10000); }); describe("Format filter", () => { - test("Clicking new format sends new search", () => { + test("Clicking new format sends new search", async () => { + await clickFiltersButton(); const formats = screen.getByRole("group", { name: "Format" }); const downloadable = within(formats).getByRole("checkbox", { name: "Downloadable", }); - fireEvent.click(downloadable); + await userEvent.click(downloadable); expect(mockRouter).toMatchObject({ pathname: "/search", query: { @@ -243,11 +245,11 @@ describe("Renders Search Results Page", () => { query: "keyword:Animal Crossing", }, }); - fireEvent.click(screen.getByRole("button", { name: "Go Back" })); + await userEvent.click(screen.getByRole("button", { name: "Go Back" })); expect( screen.getByRole("button", { name: "Filters (1)" }) ).toBeInTheDocument(); - }); + }, 10000); }); describe("Publication Year", () => { FilterYearsTests( @@ -258,11 +260,12 @@ describe("Renders Search Results Page", () => { ); }); describe("Gov Doc Filter", () => { - test("Clicking show only gov docs sends new search", () => { + test("Clicking show only gov docs sends new search", async () => { + await clickFiltersButton(); const govDocCheckbox = screen.getByRole("checkbox", { name: "Show only US government documents", }); - fireEvent.click(govDocCheckbox); + await userEvent.click(govDocCheckbox); expect(mockRouter).toMatchObject({ pathname: "/search", query: { @@ -270,53 +273,51 @@ describe("Renders Search Results Page", () => { query: "keyword:Animal Crossing", }, }); - fireEvent.click(screen.getByRole("button", { name: "Go Back" })); + await userEvent.click(screen.getByRole("button", { name: "Go Back" })); expect( screen.getByRole("button", { name: "Filters (1)" }) ).toBeInTheDocument(); - }); + }, 10000); }); }); describe("Clear Filters", () => { - test("Renders when a filter is applied", () => { + test("Renders when a filter is applied", async () => { expect( screen.queryByRole("button", { name: "Clear Filters" }) ).not.toBeInTheDocument(); - const filtersButton = screen.getByText("Filters (0)"); - fireEvent.click(filtersButton); + await clickFiltersButton(); const formats = screen.getByRole("group", { name: "Format" }); const downloadable = within(formats).getByRole("checkbox", { name: "Downloadable", }); - fireEvent.click(downloadable); - fireEvent.click(screen.getByRole("button", { name: "Go Back" })); + await userEvent.click(downloadable); + await userEvent.click(screen.getByRole("button", { name: "Go Back" })); expect( screen.getByRole("button", { name: "Clear Filters" }) ).toBeInTheDocument(); - }); + }, 15000); - test("Resets filters when clicked", () => { - const filtersButton = screen.getByText("Filters (0)"); - fireEvent.click(filtersButton); + test("Resets filters when clicked", async () => { + await clickFiltersButton(); const formats = screen.getByRole("group", { name: "Format" }); const downloadable = within(formats).getByRole("checkbox", { name: "Downloadable", }); - fireEvent.click(downloadable); - fireEvent.click(screen.getByRole("button", { name: "Go Back" })); + await userEvent.click(downloadable); + await userEvent.click(screen.getByRole("button", { name: "Go Back" })); const clearFiltersButton = screen.getByRole("button", { name: "Clear Filters", }); - fireEvent.click(clearFiltersButton); + await userEvent.click(clearFiltersButton); expect(mockRouter).toMatchObject({ pathname: "/search", query: { query: "keyword:Animal Crossing", }, }); - }); + }, 15000); }); describe("Search Results", () => { describe("First result has full data", () => { @@ -532,7 +533,7 @@ describe("Renders Search Results Page", () => { query: "keyword:Animal Crossing", }, }); - }); + }, 10000); test("Middle numbers are clickable", async () => { const twoButton = screen.getByRole("link", { name: "Page 2" }); expect(twoButton).toBeInTheDocument(); @@ -544,7 +545,7 @@ describe("Renders Search Results Page", () => { query: "keyword:Animal Crossing", }, }); - }); + }, 10000); }); }); @@ -761,12 +762,12 @@ describe("Renders selected languages in language accordion when there are no mat ); }); - test("Show Russian (0) checkbox", () => { + test("Show Russian (0) checkbox", async () => { const formats = screen.getByRole("group", { name: "Format" }); const requestable = within(formats).getByRole("checkbox", { name: "Requestable", }); - fireEvent.click(requestable); + await userEvent.click(requestable); expect(mockRouter).toMatchObject({ pathname: "/search", query: { diff --git a/src/__tests__/componentHelpers/FilterYears.tsx b/src/__tests__/componentHelpers/FilterYears.tsx index 43a4f3fa..5bbeaf10 100644 --- a/src/__tests__/componentHelpers/FilterYears.tsx +++ b/src/__tests__/componentHelpers/FilterYears.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { fireEvent, screen, within } from "@testing-library/react"; +import { screen, within } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { Filter } from "~/src/types/SearchQuery"; import { MemoryRouter } from "next-router-mock"; @@ -38,7 +38,7 @@ export const FilterYearsTests = ( const applyButton = within(yearGroup).getByRole("button", { name: "Apply", }); - fireEvent.change(fromInput, { target: { value: 1990 } }); + await userEvent.type(fromInput, "1990"); expect(fromInput).toHaveValue(1990); await user.click(applyButton); @@ -60,8 +60,8 @@ export const FilterYearsTests = ( const applyButton = within(yearGroup).getByRole("button", { name: "Apply", }); - fireEvent.change(toInput, { target: { value: 1990 } }); - fireEvent.click(applyButton); + await userEvent.type(toInput, "1990"); + await userEvent.click(applyButton); expect(mockRouter).toMatchObject({ pathname: "/search", @@ -85,8 +85,8 @@ export const FilterYearsTests = ( const applyButton = within(yearGroup).getByRole("button", { name: "Apply", }); - fireEvent.change(fromInput, { target: { value: 1990 } }); - fireEvent.change(toInput, { target: { value: 2000 } }); + await userEvent.type(fromInput, "1990"); + await userEvent.type(toInput, "2000"); await user.click(applyButton); expect(mockRouter).toMatchObject({ @@ -111,8 +111,8 @@ export const FilterYearsTests = ( const applyButton = within(yearGroup).getByRole("button", { name: "Apply", }); - fireEvent.change(fromInput, { target: { value: 1990 } }); - fireEvent.change(toInput, { target: { value: 1890 } }); + await userEvent.type(fromInput, "1990"); + await userEvent.type(toInput, "1890"); await user.click(applyButton); expect( diff --git a/src/__tests__/componentHelpers/SearchForm.tsx b/src/__tests__/componentHelpers/SearchForm.tsx index 4152c981..fd12753d 100644 --- a/src/__tests__/componentHelpers/SearchForm.tsx +++ b/src/__tests__/componentHelpers/SearchForm.tsx @@ -1,4 +1,4 @@ -import { fireEvent, screen } from "@testing-library/react"; +import { screen } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { inputTerms } from "~/src/constants/labels"; import { SearchQuery } from "~/src/types/SearchQuery"; @@ -39,12 +39,12 @@ export const searchFormTests = (mockRouter) => { name: "Select a search category", }); const textInput = screen.getByRole("textbox", { name: "Item Search" }); - fireEvent.change(categoryInput, { target: { value: "author" } }); + await userEvent.selectOptions(categoryInput, "author"); await userEvent.clear(textInput); await userEvent.type(textInput, "Tom Nook"); const searchButton = screen.getByRole("button", { name: "Search" }); - fireEvent.click(searchButton); + await userEvent.click(searchButton); expect( screen.getByRole("combobox", { name: "Select a search category" }) @@ -70,7 +70,7 @@ export const searchFormTests = (mockRouter) => { expect(textInput).toHaveValue(""); const searchButton = screen.getByRole("button", { name: "Search" }); - fireEvent.click(searchButton); + await userEvent.click(searchButton); expect(mockRouter).toMatchObject({}); expect( diff --git a/src/components/Collection/Collection.test.tsx b/src/components/Collection/Collection.test.tsx index 35c6a458..fb110d5b 100644 --- a/src/components/Collection/Collection.test.tsx +++ b/src/components/Collection/Collection.test.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { fireEvent, screen } from "@testing-library/react"; +import { screen } from "@testing-library/react"; import { render } from "../../__tests__/testUtils/render"; import Collection from "./Collection"; import { CollectionQuery, CollectionResult } from "~/src/types/CollectionQuery"; @@ -52,10 +52,10 @@ describe("Renders Collection Page", () => { }); }); describe("Sorts filters", () => { - test("Changing sort by sends new request", () => { + test("Changing sort by sends new request", async () => { const sortBy = screen.getByLabelText("Sort By"); expect(sortBy).toBeVisible(); - fireEvent.change(sortBy, { target: { value: "Title A-Z" } }); + await userEvent.selectOptions(sortBy, "Title A-Z"); expect(sortBy).toHaveValue("Title A-Z"); expect(mockRouter).toMatchObject({ pathname: "/collection/id", @@ -149,10 +149,10 @@ describe("Render Collection Page with >10 items", () => { }); describe("Sorts filters", () => { - test("Changing number of items sends new request", () => { + test("Changing number of items sends new request", async () => { const itemsPerPage = screen.getByLabelText("Items Per Page"); expect(itemsPerPage).toBeVisible(); - fireEvent.change(itemsPerPage, { target: { value: "50" } }); + await userEvent.selectOptions(itemsPerPage, "50"); expect(itemsPerPage).toHaveValue("50"); expect(mockRouter).toMatchObject({ pathname: "/collection/id", diff --git a/src/components/EditionDetail/Edition.test.tsx b/src/components/EditionDetail/Edition.test.tsx index 36c939cd..fa77af87 100644 --- a/src/components/EditionDetail/Edition.test.tsx +++ b/src/components/EditionDetail/Edition.test.tsx @@ -1,6 +1,6 @@ import React from "react"; import Edition from "./Edition"; -import { screen, render, within, fireEvent } from "@testing-library/react"; +import { screen, render, within } from "@testing-library/react"; import { breadcrumbTitles, inputTerms } from "~/src/constants/labels"; import { editionDetail as apiEdition, @@ -8,6 +8,7 @@ import { } from "../../__tests__/fixtures/EditionDetailFixture"; import mockRouter from "next-router-mock"; +import userEvent from "@testing-library/user-event"; jest.mock("next/router", () => require("next-router-mock")); @@ -144,11 +145,11 @@ describe("All Copies Toggle", () => { expect(toggle).not.toBeChecked(); }); - test("clicking the edition toggle sends a new query", () => { + test("clicking the edition toggle sends a new query", async () => { const toggle = screen.getByLabelText( "Show only items currently available online" ) as HTMLInputElement; - fireEvent.click(toggle); + await userEvent.click(toggle); expect(mockRouter).toMatchObject({ pathname: "/", @@ -171,11 +172,11 @@ describe("All Copies Toggle", () => { expect(toggle).toBeChecked(); }); - test("clicking the edition toggle sends a new query", () => { + test("clicking the edition toggle sends a new query", async () => { const toggle = screen.getByLabelText( "Show only items currently available online" ) as HTMLInputElement; - fireEvent.click(toggle); + await userEvent.click(toggle); expect(mockRouter).toMatchObject({ pathname: "/", diff --git a/src/components/Feedback/Feedback.test.tsx b/src/components/Feedback/Feedback.test.tsx index 79d08f22..faac03e6 100644 --- a/src/components/Feedback/Feedback.test.tsx +++ b/src/components/Feedback/Feedback.test.tsx @@ -1,6 +1,7 @@ import React from "react"; -import { fireEvent, render, screen } from "@testing-library/react"; +import { render, screen } from "@testing-library/react"; import Feedback from "./Feedback"; +import userEvent from "@testing-library/user-event"; describe("Feedback", () => { beforeEach(() => { @@ -8,23 +9,23 @@ describe("Feedback", () => { }); describe("Form Submission", () => { - beforeEach(() => { + beforeEach(async () => { const feedbackButton = screen.getByRole("button", { name: "Help and Feedback", }); - fireEvent.click(feedbackButton); + await userEvent.click(feedbackButton); }); const fakeFetch = jest.fn(); window.fetch = fakeFetch; - test("should invoke method when success and feedback set", () => { + test("should invoke method when success and feedback set", async () => { const feedback = screen.getByRole("textbox", { name: "Comment (Required)", }); const commentRadio = screen.getByLabelText("Comment"); - fireEvent.change(feedback, { target: { value: "test value" } }); - fireEvent.click(commentRadio); - fireEvent.click(screen.getByRole("button", { name: "Submit" })); + await userEvent.type(feedback, "test value"); + await userEvent.click(commentRadio); + await userEvent.click(screen.getByRole("button", { name: "Submit" })); expect(fetch).toHaveBeenCalledTimes(1); }); }); diff --git a/src/components/Work/Work.test.tsx b/src/components/Work/Work.test.tsx index 0232807f..5289886f 100644 --- a/src/components/Work/Work.test.tsx +++ b/src/components/Work/Work.test.tsx @@ -1,6 +1,6 @@ import React from "react"; import Work from "./Work"; -import { screen, render, within, fireEvent } from "@testing-library/react"; +import { screen, render, within } from "@testing-library/react"; import { breadcrumbTitles, inputTerms } from "~/src/constants/labels"; import { workDetail as apiWork, @@ -8,6 +8,7 @@ import { workDetailInCollection, } from "../../__tests__/fixtures/WorkDetailFixture"; import mockRouter from "next-router-mock"; +import userEvent from "@testing-library/user-event"; jest.mock("next/router", () => require("next-router-mock")); @@ -105,11 +106,11 @@ describe("Edition Cards and toggles", () => { expect(toggle).not.toBeChecked(); }); - test("clicking the edition toggle sends a new query", () => { + test("clicking the edition toggle sends a new query", async () => { const toggle = screen.getByLabelText( "Show only items currently available online" ) as HTMLInputElement; - fireEvent.click(toggle); + await userEvent.click(toggle); expect(mockRouter).toMatchObject({ pathname: "/", @@ -132,11 +133,11 @@ describe("Edition Cards and toggles", () => { expect(toggle).not.toBeChecked(); }); - test("clicking the edition toggle sends a new query", () => { + test("clicking the edition toggle sends a new query", async () => { const toggle = screen.getByLabelText( "Show only items currently available online" ) as HTMLInputElement; - fireEvent.click(toggle); + await userEvent.click(toggle); expect(mockRouter).toMatchObject({ pathname: "/", @@ -159,11 +160,11 @@ describe("Edition Cards and toggles", () => { expect(toggle).toBeChecked(); }); - test("clicking the edition toggle sends a new query", () => { + test("clicking the edition toggle sends a new query", async () => { const toggle = screen.getByLabelText( "Show only items currently available online" ) as HTMLInputElement; - fireEvent.click(toggle); + await userEvent.click(toggle); expect(mockRouter).toMatchObject({ pathname: "/", From 5dbd0b3ee17926c7a593a13c69ba535ef4c069b1 Mon Sep 17 00:00:00 2001 From: Jackie Quach Date: Wed, 27 Sep 2023 10:17:10 -0400 Subject: [PATCH 2/2] increase timeout --- src/__tests__/Search.test.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/__tests__/Search.test.tsx b/src/__tests__/Search.test.tsx index 2e0dae36..1b00ddfa 100644 --- a/src/__tests__/Search.test.tsx +++ b/src/__tests__/Search.test.tsx @@ -143,7 +143,7 @@ describe("Renders Search Results Page", () => { expect( screen.getByRole("button", { name: "Filters (0)" }) ).toBeInTheDocument(); - }, 10000); + }, 15000); }); describe("Sorts filters", () => { test("Changing items sends new search ", async () => { @@ -165,7 +165,7 @@ describe("Renders Search Results Page", () => { expect( screen.getByRole("button", { name: "Filters (0)" }) ).toBeInTheDocument(); - }, 10000); + }, 15000); }); describe("Available Online", () => { test("Changing checkbox sends new search", async () => { @@ -186,7 +186,7 @@ describe("Renders Search Results Page", () => { expect( screen.getByRole("button", { name: "Filters (1)" }) ).toBeInTheDocument(); - }, 10000); + }, 15000); }); describe("Languages filter", () => { const availableLanguages: FacetItem[] = @@ -228,7 +228,7 @@ describe("Renders Search Results Page", () => { name: "English (6)", }); expect(englishCheckbox2).toBeChecked(); - }, 10000); + }, 15000); }); describe("Format filter", () => { test("Clicking new format sends new search", async () => { @@ -249,7 +249,7 @@ describe("Renders Search Results Page", () => { expect( screen.getByRole("button", { name: "Filters (1)" }) ).toBeInTheDocument(); - }, 10000); + }, 15000); }); describe("Publication Year", () => { FilterYearsTests( @@ -277,7 +277,7 @@ describe("Renders Search Results Page", () => { expect( screen.getByRole("button", { name: "Filters (1)" }) ).toBeInTheDocument(); - }, 10000); + }, 15000); }); }); describe("Clear Filters", () => { @@ -533,7 +533,7 @@ describe("Renders Search Results Page", () => { query: "keyword:Animal Crossing", }, }); - }, 10000); + }, 15000); test("Middle numbers are clickable", async () => { const twoButton = screen.getByRole("link", { name: "Page 2" }); expect(twoButton).toBeInTheDocument(); @@ -545,7 +545,7 @@ describe("Renders Search Results Page", () => { query: "keyword:Animal Crossing", }, }); - }, 10000); + }, 15000); }); });