fix(Popover): Update tests to implement findBy instead of waitFor, in…

… queries
micromedio · Jun 15, 2021 · 799484e · 799484e
1 parent 05e7d07
commit 799484e
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 22 deletions.
diff --git a/src/components/Autocomplete/Autocomplete.test.tsx b/src/components/Autocomplete/Autocomplete.test.tsx
@@ -130,7 +130,7 @@ describe("Autocomplete", () => {
 
   it("should filter options based on input value", async () => {
     const onInputValueChange = jest.fn()
-    const { getByRole, rerender } = render(
+    const { getByRole, findByRole, rerender } = render(
       <Autocomplete<AutocompleteItem>
         onInputValueChange={onInputValueChange}
         onSelectedItemChange={jest.fn()}
@@ -179,7 +179,7 @@ describe("Autocomplete", () => {
       target: { value: mockedOptions[0].label },
     })
 
-    const menuElement = await waitFor(() => getByRole("listbox"))
+    const menuElement = await findByRole("listbox")
 
     await waitFor(() =>
       expect(onInputValueChange).toHaveBeenCalledWith({
@@ -346,7 +346,7 @@ describe("Autocomplete", () => {
 
   it("should clear the input when no results are shown", async () => {
     const onInputValueChange = jest.fn()
-    const { getByRole } = render(
+    const { getByRole, findByRole } = render(
       <Autocomplete<AutocompleteItem>
         label="Label"
         optionalText="optional"
@@ -372,7 +372,7 @@ describe("Autocomplete", () => {
 
     const customInputValue = "Custom value"
 
-    const inputElement = await waitFor(() => getByRole("textbox"))
+    const inputElement = getByRole("textbox")
     fireEvent.click(inputElement)
     fireEvent.change(inputElement, { target: { value: customInputValue } })
 
@@ -384,9 +384,7 @@ describe("Autocomplete", () => {
       type: useCombobox.stateChangeTypes.InputChange,
     })
 
-    const clearButton = await waitFor(() =>
-      getByRole("button", { name: /clear/i })
-    )
+    const clearButton = await findByRole("button", { name: /clear/i })
     fireEvent.click(clearButton)
 
     expect(onInputValueChange).toHaveBeenLastCalledWith({

diff --git a/src/components/DateSelect/DateSelect.test.tsx b/src/components/DateSelect/DateSelect.test.tsx
@@ -44,11 +44,14 @@ describe("DateSelect", () => {
     )
 
     userEvent.click(screen.getByText(/select an option/i))
-    await waitFor(() => userEvent.click(screen.getByText(/today/i)))
-    expect(onChange).toHaveBeenCalledWith({
-      from: "12/05/2021",
-      to: "12/05/2021",
-    })
+    userEvent.click(await screen.findByText(/today/i))
+
+    await waitFor(() =>
+      expect(onChange).toHaveBeenCalledWith({
+        from: "12/05/2021",
+        to: "12/05/2021",
+      })
+    )
   })
 
   test("select button shows current selected item text", async () => {
@@ -82,10 +85,14 @@ describe("DateSelect", () => {
     expect(
       screen.queryByRole("button", { name: /set/i })
     ).not.toBeInTheDocument()
-    await waitFor(() => userEvent.click(screen.getByText(/custom/i)))
-    expect(screen.getByRole("textbox", { name: /to/i })).toBeInTheDocument()
-    expect(screen.getByRole("textbox", { name: /from/i })).toBeInTheDocument()
-    expect(screen.getByRole("button", { name: /set/i })).toBeInTheDocument()
+    const customClikElement = await screen.findByText(/custom/i)
+    userEvent.click(customClikElement)
+
+    await waitFor(() => {
+      expect(screen.getByRole("textbox", { name: /to/i })).toBeInTheDocument()
+      expect(screen.getByRole("textbox", { name: /from/i })).toBeInTheDocument()
+      expect(screen.getByRole("button", { name: /set/i })).toBeInTheDocument()
+    })
   })
 
   test("custom date cannot be set if 'from' date is after 'to' date", async () => {

diff --git a/src/components/Select/Select.test.tsx b/src/components/Select/Select.test.tsx
@@ -81,7 +81,7 @@ describe("Select", () => {
     it("allows to add and remove a multi select item", async () => {
       const onSelectedItemsChangeMock = jest.fn()
 
-      const { getByText, getByRole } = render(
+      const { findByText, getByRole } = render(
         <ControlledMultiSelectTemplate
           onSelectedItemsChange={onSelectedItemsChangeMock}
         >
@@ -94,7 +94,7 @@ describe("Select", () => {
       fireEvent.click(button)
 
       /** Try to select an option */
-      const option = await waitFor(() => getByText(mockedOptions[1].label))
+      const option = await findByText(mockedOptions[1].label)
 
       fireEvent.click(option)
 
@@ -109,7 +109,7 @@ describe("Select", () => {
     it("allows to user to perform bulk actions to select and deselect items", async () => {
       const onSelectedItemsChangeMock = jest.fn()
 
-      const { getByText, getByRole } = render(
+      const { getByText, findByText, getByRole } = render(
         <ControlledMultiSelectTemplate
           onSelectedItemsChange={onSelectedItemsChangeMock}
         >
@@ -122,7 +122,7 @@ describe("Select", () => {
       fireEvent.click(button)
 
       /** Trigger bulk actions */
-      const selectAllOption = await waitFor(() => getByText("Select all"))
+      const selectAllOption = await findByText("Select all")
       fireEvent.click(selectAllOption)
 
       const deselectAllOptions = getByText("Deselect all")

diff --git a/src/components/Selector/Selector.test.tsx b/src/components/Selector/Selector.test.tsx
@@ -77,7 +77,7 @@ describe("Selector", () => {
     it("allows to add and remove a multi select item", async () => {
       const onSelectedItemsChangeMock = jest.fn()
 
-      const { getByText, getByRole } = render(
+      const { findByText, getByRole } = render(
         <ControlledMultiSelectorTemplate
           onSelectedItemsChange={onSelectedItemsChangeMock}
           options={mockedOptions}
@@ -89,7 +89,7 @@ describe("Selector", () => {
       fireEvent.click(button)
 
       /** Try to select an option */
-      const option = await waitFor(() => getByText(mockedOptions[1].label))
+      const option = await findByText(mockedOptions[1].label)
 
       fireEvent.click(option)