Skip to content

Commit

Permalink
Merge pull request #445 from NYPL/SFR-1780_replace_fireEvent
Browse files Browse the repository at this point in the history 
SFR-1780: Replace fireEvent with userEvent
  • Loading branch information
@jackiequach
jackiequach authored Sep 29, 2023
2 parents 3060540 + 5dbd0b3 commit 02757ca
Show file tree
Hide file tree
Showing 9 changed files with 158 additions and 152 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
- Remove TemplateFooter components
- Replace Template components with custom DrbTemplate component to reduce repeat components
- Upgrade to NYPL Design System 1.7.3
- Replace fireEvent with userEvent

## [0.17.4]

Expand Down
119 changes: 60 additions & 59 deletions src/__tests__/AdvancedSearch.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -68,29 +68,28 @@ describe("Advanced Search submit", () => {
test("Submits well formed query", async () => {
render(<AdvancedSearch languages={defaultLanguages} />);

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 = {
Expand All @@ -106,12 +105,11 @@ describe("Advanced Search submit", () => {
test("Submits only year start and subject", async () => {
render(<AdvancedSearch languages={defaultLanguages} />);

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" }));

Expand All @@ -128,12 +126,11 @@ describe("Advanced Search submit", () => {
test("Submits only year end and author", async () => {
render(<AdvancedSearch languages={defaultLanguages} />);

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" }));

Expand All @@ -157,15 +154,15 @@ describe("Advanced Search submit", () => {
test("show error on invalid year", async () => {
render(<AdvancedSearch languages={defaultLanguages} />);

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" }));

Expand All @@ -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", {
Expand All @@ -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();
Expand All @@ -240,9 +243,7 @@ describe("Advanced Search clear", () => {
test("Deleting search clears it from state", async () => {
render(<AdvancedSearch languages={defaultLanguages} />);

fireEvent.change(screen.getByLabelText("Keyword"), {
target: { value: "cat" },
});
await userEvent.type(screen.getByLabelText("Keyword"), "cat");

const keywordInput: HTMLInputElement = screen.getByLabelText(
"Keyword"
Expand Down
Loading

1 comment on commit 02757ca

@vercel
Copy link

@vercel vercel bot commented on 02757ca Sep 29, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

sfr-bookfinder-front-end – ./

sfr-bookfinder-front-end.vercel.app
sfr-bookfinder-front-end-git-development-nypl.vercel.app
sfr-bookfinder-front-end-nypl.vercel.app

Please sign in to comment.