chore(deps): update @testing-library/react to ^14.0.0 (#3606)

* chore(deps): update @testing-library/react to ^14.0.0 * refactor(title-block): add data-testid to places with automation id to fix tests * test(filter-multi-select): fix provider tests * test(generic-notification): fix tests * chore(deps): add @testing-library/dom * test(filter-multi-select): fix provider tests (again) * test(title-block): fix tests with userEvent.setup * test(filter-select): fix user events * test(select): fix user events * test(draft-menu): fix user events * test(title-block): fix user events for mobile actions * test(skip-link): fix user events * test(filter): fix user events * test(filter-button-removable): fix user events * test(filter-drp): fix user events * test(date-range-input-field): fix user events * test(filter-drp-field): fix user events * test(date-input-icon-button): fix user events * test(date-picker): fix user events * test(date-input-field): fix user events * test(date-range-picker): fix user events * test(rte-toolbar): fix user events * test(search-input): fix user events * test(filter-ms--clear-button): fix user events * test(filter-ms--select-all-button): fix user events * test(filter-ms--menu-trigger-provider): fix user events * test(title-block): remove automation-id test id config * test(collapsible): fix testid tests * test(likert-scale-legacy): fix testid tests * test(toast-notification-list): remove unneeded testid config * test(toast-notification-manager): fix testid tests * test(modal): fix testid tests * test(likert-scale-legacy): add act where needed * test(collapsible): replace fireEvent with userEvent * test(checkbox): replace fireEvent and automation id * test(radio): replace fireEvent and automation id * test(toggle-switch): replace fireEvent with userEvent * test(guidance-block): replace fireEvent with userEvent * test(modal): replace fireEvent with userEvent * test(menu): replace fireEvent with userEvent * test(tabs): replace fireEvent with userEvent * test(tile--action): replace fireEvent with userEvent * test(navigation-tabs): replace fireEvent with userEvent * test(dropdown): replace fireEvent with userEvent * test(pagination): replace fireEvent with userEvent * test(split-button): replace fireEvent with userEvent * test(time-field): replace fireEvent with userEvent * test(text-area): replace fireEvent with userEvent * test(input-search): replace fireEvent with userEvent * test(input): replace fireEvent with userEvent
cultureamp · May 12, 2023 · 475e6fa · 475e6fa
1 parent 431a020
commit 475e6fa
Show file tree

Hide file tree

Showing 63 changed files with 1,056 additions and 704 deletions.
diff --git a/draft-packages/collapsible/KaizenDraft/Collapsible/Collapsible.spec.tsx b/draft-packages/collapsible/KaizenDraft/Collapsible/Collapsible.spec.tsx
@@ -1,9 +1,10 @@
 import React from "react"
-import { fireEvent, configure, queryByTestId } from "@testing-library/dom"
-import { render } from "@testing-library/react"
+import { queryByTestId } from "@testing-library/dom"
+import { render, waitFor } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
 import { Collapsible, CollapsibleGroup } from ".."
 
-configure({ testIdAttribute: "data-automation-id" })
+const user = userEvent.setup()
 
 describe("<Collapsible />", () => {
   it("renders closed by default", () => {
@@ -74,15 +75,18 @@ describe("<Collapsible />", () => {
     const button = getByTestId("collapsible-button-1")
     const section = getByTestId("collapsible-section-1")
 
-    fireEvent.click(button)
-    expect(section.style.height).toEqual("0px")
+    await user.click(button)
+    await waitFor(() => {
+      expect(section.style.height).toEqual("0px")
+    })
 
-    // TODO: for some reason trying to open a closed section isn't working here
-    // fireEvent.click(button)
-    // expect(section.style.height).toEqual("auto")
+    await user.click(button)
+    await waitFor(() => {
+      expect(section.style.height).toEqual("auto")
+    })
   })
 
-  it("only toggles the height of the clicked panel in a group", () => {
+  it("only toggles the height of the clicked panel in a group", async () => {
     const { getByTestId } = render(
       <CollapsibleGroup>
         <Collapsible id="1" open title="First panel">
@@ -97,8 +101,10 @@ describe("<Collapsible />", () => {
     const button = getByTestId("collapsible-button-1")
     const section = getByTestId("collapsible-section-2")
 
-    fireEvent.click(button)
-    expect(section.style.height).toEqual("auto")
+    await user.click(button)
+    await waitFor(() => {
+      expect(section.style.height).toEqual("auto")
+    })
   })
 
   it("gives precedence to renderHeader over title", () => {
@@ -135,7 +141,7 @@ describe("<Collapsible />", () => {
     ).toBeNull()
   })
 
-  it("runs the onToggle callback", () => {
+  it("runs the onToggle callback", async () => {
     const onToggle = jest.fn()
 
     const { getByTestId } = render(
@@ -146,16 +152,20 @@ describe("<Collapsible />", () => {
 
     const button = getByTestId("collapsible-button-1")
 
-    fireEvent.click(button)
-    expect(onToggle).toHaveBeenCalledTimes(1)
-    expect(onToggle).toHaveBeenCalledWith(false, "1")
-
-    fireEvent.click(button)
-    expect(onToggle).toHaveBeenCalledTimes(2)
-    expect(onToggle).toHaveBeenCalledWith(true, "1")
+    await user.click(button)
+    await waitFor(() => {
+      expect(onToggle).toHaveBeenCalledTimes(1)
+      expect(onToggle).toHaveBeenCalledWith(false, "1")
+    })
+
+    await user.click(button)
+    await waitFor(() => {
+      expect(onToggle).toHaveBeenCalledTimes(2)
+      expect(onToggle).toHaveBeenCalledWith(true, "1")
+    })
   })
 
-  it("respects controlled mode (stays open after click)", () => {
+  it("respects controlled mode (stays open after click)", async () => {
     const { getByTestId } = render(
       <Collapsible id="1" open title="First panel" controlled>
         First panel content
@@ -165,8 +175,10 @@ describe("<Collapsible />", () => {
     const button = getByTestId("collapsible-button-1")
     const section = getByTestId("collapsible-section-1")
 
-    fireEvent.click(button)
-    expect(section.style.height).toEqual("auto")
+    await user.click(button)
+    await waitFor(() => {
+      expect(section.style.height).toEqual("auto")
+    })
   })
 
   it("clear variant has correct class", () => {

diff --git a/draft-packages/collapsible/KaizenDraft/Collapsible/Collapsible.tsx b/draft-packages/collapsible/KaizenDraft/Collapsible/Collapsible.tsx
@@ -96,6 +96,7 @@ export class Collapsible extends React.Component<CollapsibleProps, State> {
           !group && styles.single
         )}
         data-automation-id={automationId || `collapsible-container-${id}`}
+        data-testid={automationId || `collapsible-container-${id}`}
         {...props} // `title` is missing because it is used for the header; requires breaking change to fix
       >
         {/* Disabling these a11y linting errors because there is an IconButton that mitigates these concerns. The onClick here is just an additional layer. */}
@@ -112,13 +113,15 @@ export class Collapsible extends React.Component<CollapsibleProps, State> {
           style={sticky && { top: sticky.top }}
           onClick={this.handleSectionToggle}
           data-automation-id={`collapsible-header-${id}`}
+          data-testid={`collapsible-header-${id}`}
         >
           {renderHeader !== undefined ? (
             renderHeader(title)
           ) : (
             <div
               className={styles.title}
               data-automation-id={`collapsible-button-title-${id}`}
+              data-testid={`collapsible-button-title-${id}`}
             >
               <Heading variant="heading-4" tag="span">
                 {title}
@@ -133,6 +136,7 @@ export class Collapsible extends React.Component<CollapsibleProps, State> {
               aria-expanded={open}
               aria-controls={sectionId}
               data-automation-id={`collapsible-button-${id}`}
+              data-testid={`collapsible-button-${id}`}
               id={buttonId}
               onClick={this.handleButtonPress}
               classNameOverride={styles.chevronButton}
@@ -143,6 +147,7 @@ export class Collapsible extends React.Component<CollapsibleProps, State> {
           <AnimateHeight
             height={open ? "auto" : 0}
             data-automation-id={`collapsible-section-${id}`}
+            data-testid={`collapsible-section-${id}`}
           >
             <div
               id={sectionId}

diff --git a/draft-packages/form/KaizenDraft/Form/Primitives/Checkbox/Checkbox.spec.tsx b/draft-packages/form/KaizenDraft/Form/Primitives/Checkbox/Checkbox.spec.tsx
@@ -1,18 +1,19 @@
 import React from "react"
-import { fireEvent } from "@testing-library/dom"
-import { render } from "@testing-library/react"
-
+import { render, waitFor } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
 import { CheckboxProps } from "./Checkbox"
 import { Checkbox } from "."
 
-const defaultProps: CheckboxProps = {
+const user = userEvent.setup()
+
+const defaultProps = {
   id: "someCheckboxId",
   automationId: "someCheckboxAutomationId",
   checkedStatus: "off",
   disabled: false,
   name: "someCheckboxName",
   onCheck: jest.fn(),
-}
+} satisfies CheckboxProps
 
 const renderCheckbox = (props?: CheckboxProps): ReturnType<typeof render> => {
   const mergedInputProps = { ...defaultProps, ...props }
@@ -21,15 +22,14 @@ const renderCheckbox = (props?: CheckboxProps): ReturnType<typeof render> => {
 }
 
 describe("<Checkbox />", () => {
-  it("calls the `onCheck` event when clicked", () => {
-    const { container } = render(<Checkbox {...defaultProps} />)
-    const checkbox = container.querySelector(
-      `[data-automation-id="${defaultProps.automationId}"]`
-    ) as Node
-
-    fireEvent.click(checkbox)
+  it("calls the `onCheck` event when clicked", async () => {
+    const { getByTestId } = render(<Checkbox {...defaultProps} />)
+    const checkbox = getByTestId(defaultProps.automationId)
 
-    expect(defaultProps.onCheck).toBeCalledTimes(1)
+    await user.click(checkbox)
+    await waitFor(() => {
+      expect(defaultProps.onCheck).toBeCalledTimes(1)
+    })
   })
 
   it("renders a disabled checkbox", () => {

diff --git a/draft-packages/form/KaizenDraft/Form/Primitives/Checkbox/Checkbox.tsx b/draft-packages/form/KaizenDraft/Form/Primitives/Checkbox/Checkbox.tsx
@@ -56,6 +56,7 @@ export const Checkbox = ({
         }
       }}
       data-automation-id={automationId}
+      data-testid={automationId}
       // This is only used as a handle for unit testing
       data-indeterminate={checkedStatus === "mixed"}
       type="checkbox"

diff --git a/draft-packages/form/KaizenDraft/Form/Primitives/Input/Input.spec.tsx b/draft-packages/form/KaizenDraft/Form/Primitives/Input/Input.spec.tsx
@@ -1,9 +1,11 @@
 import React from "react"
-import { fireEvent } from "@testing-library/dom"
-import { render } from "@testing-library/react"
+import { render, waitFor } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
 import { InputProps } from "./Input"
 import { Input } from "."
 
+const user = userEvent.setup()
+
 const defaultInputProps = {
   id: "someInputId",
   inputValue: "someInputValue",
@@ -25,16 +27,15 @@ describe("<Input />", () => {
     ).toBeTruthy()
   })
 
-  it("calls the `onChange` event when text value is updated", () => {
+  it("calls the `onChange` event when text value is updated", async () => {
     const placeholder = "someInputPlaceholder"
     const utils = renderInput({ inputValue: "", placeholder })
     const input = utils.getByPlaceholderText(placeholder)
 
-    fireEvent.change(input, {
-      target: { value: defaultInputProps.inputValue },
+    await user.type(input, "Hello")
+    await waitFor(() => {
+      expect(defaultInputProps.onChange).toBeCalledTimes(5)
     })
-
-    expect(defaultInputProps.onChange).toBeCalledTimes(1)
   })
 
   it("renders a disabled inside of input", () => {

diff --git a/draft-packages/form/KaizenDraft/Form/Primitives/InputSearch/InputSearch.spec.tsx b/draft-packages/form/KaizenDraft/Form/Primitives/InputSearch/InputSearch.spec.tsx
@@ -1,9 +1,11 @@
 import React from "react"
-import { fireEvent } from "@testing-library/dom"
-import { render } from "@testing-library/react"
+import { render, waitFor } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
 import { InputSearchProps } from "./InputSearch"
 import { InputSearch } from "."
 
+const user = userEvent.setup()
+
 const defaultInputProps = {
   id: "someInputId",
   value: "somevalue",
@@ -25,16 +27,15 @@ describe("<InputSearch />", () => {
     ).toBeTruthy()
   })
 
-  it("should call the `onChange` event when text value is updated", () => {
+  it("should call the `onChange` event when text value is updated", async () => {
     const placeholder = "someInputPlaceholder"
     const utils = renderInput({ value: "", placeholder, id: "someInputId" })
     const input = utils.getByPlaceholderText(placeholder)
 
-    fireEvent.change(input, {
-      target: { value: defaultInputProps.value },
+    await user.type(input, "Hello")
+    await waitFor(() => {
+      expect(defaultInputProps.onChange).toBeCalledTimes(5)
     })
-
-    expect(defaultInputProps.onChange).toBeCalledTimes(1)
   })
 
   it("should render a disabled inside of input", () => {

diff --git a/draft-packages/form/KaizenDraft/Form/Primitives/Radio/Radio.spec.tsx b/draft-packages/form/KaizenDraft/Form/Primitives/Radio/Radio.spec.tsx
@@ -1,31 +1,35 @@
 import React from "react"
-import { fireEvent } from "@testing-library/dom"
-import { render } from "@testing-library/react"
+import { render, waitFor } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
 import { Radio, RadioProps } from "./Radio"
 
-const defaultRadioProps: RadioProps = {
+const user = userEvent.setup()
+
+const defaultRadioProps = {
   id: "testRadioId",
   automationId: "RadioAutomationId",
   selectedStatus: false,
   disabled: false,
   name: "RadioName",
   onChange: jest.fn(),
   value: "radio-1",
-}
+} satisfies RadioProps
+
 const renderRadio = (props?: RadioProps): ReturnType<typeof render> => {
   const mergedRadioProps = { ...defaultRadioProps, ...props }
 
   return render(<Radio {...mergedRadioProps} />)
 }
+
 describe("<Radio />", () => {
-  it("calls the `onChange` event when clicked", () => {
-    const { container } = render(<Radio {...defaultRadioProps} />)
-    const radioInput = container.querySelector(
-      `[data-automation-id="${defaultRadioProps.automationId}"]`
-    ) as Node
+  it("calls the `onChange` event when clicked", async () => {
+    const { getByTestId } = render(<Radio {...defaultRadioProps} />)
+    const radioInput = getByTestId(defaultRadioProps.automationId)
 
-    fireEvent.click(radioInput)
-    expect(defaultRadioProps.onChange).toBeCalledTimes(1)
+    await user.click(radioInput)
+    await waitFor(() => {
+      expect(defaultRadioProps.onChange).toBeCalledTimes(1)
+    })
   })
 
   it("has the disabled attribute applied if the disabled prop is true", () => {

diff --git a/draft-packages/form/KaizenDraft/Form/Primitives/Radio/Radio.tsx b/draft-packages/form/KaizenDraft/Form/Primitives/Radio/Radio.tsx
@@ -45,6 +45,7 @@ export const Radio = ({
   <span>
     <input
       data-automation-id={automationId}
+      data-testid={automationId}
       type="radio"
       id={id}
       name={name}

diff --git a/draft-packages/form/KaizenDraft/Form/Primitives/TextArea/TextArea.spec.tsx b/draft-packages/form/KaizenDraft/Form/Primitives/TextArea/TextArea.spec.tsx
@@ -1,7 +1,10 @@
 import React from "react"
-import { fireEvent, render, screen } from "@testing-library/react"
+import { render, screen, waitFor } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
 import { TextArea, TextAreaProps } from "./index"
 
+const user = userEvent.setup()
+
 const defaultTextAreaProps = {
   id: "someTextAreaId",
   value: "Some field value",
@@ -29,14 +32,14 @@ describe("<TextArea />", () => {
     expect(queryByText("default value")).toBeTruthy()
   })
 
-  it("calls the `onChange` event when the value is updated", () => {
+  it("calls the `onChange` event when the value is updated", async () => {
     renderTextArea()
 
-    fireEvent.change(screen.getByRole("textbox"), {
-      target: { value: "Hello" },
-    })
+    await user.type(screen.getByRole("textbox"), "Hello")
 
-    expect(defaultTextAreaProps.onChange).toBeCalledTimes(1)
+    await waitFor(() => {
+      expect(defaultTextAreaProps.onChange).toBeCalledTimes(5)
+    })
   })
 
   it("renders a reversed text area", () => {

diff --git a/draft-packages/form/KaizenDraft/Form/Primitives/ToggleSwitch/ToggleSwitch.spec.tsx b/draft-packages/form/KaizenDraft/Form/Primitives/ToggleSwitch/ToggleSwitch.spec.tsx
@@ -1,8 +1,10 @@
 import React from "react"
-import { fireEvent, render, screen } from "@testing-library/react"
+import { render, screen, waitFor } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
 import { ToggledStatus, ToggleSwitchProps } from "./ToggleSwitch"
 import { ToggleSwitch } from "."
-import "@testing-library/jest-dom"
+
+const user = userEvent.setup()
 
 const defaultToggleSwitchProps = {
   id: "someToggleSwitchId",
@@ -18,11 +20,13 @@ const renderToggleSwitch = (
 }
 
 describe("<ToggleSwitch />", () => {
-  it("calls onToggle when toggle is changed", () => {
+  it("calls onToggle when toggle is changed", async () => {
     renderToggleSwitch()
 
-    fireEvent.click(screen.getByRole("checkbox"))
-    expect(defaultToggleSwitchProps.onToggle).toHaveBeenCalledTimes(1)
+    await user.click(screen.getByRole("checkbox"))
+    await waitFor(() => {
+      expect(defaultToggleSwitchProps.onToggle).toHaveBeenCalledTimes(1)
+    })
   })
 
   it("shows toggledStatus class when status is passed through", async () => {