@kaizen/components 1.52.1 → 1.53.0

package/src/Filter/FilterMultiSelect/context/SelectionProvider/SelectionProvider.spec.tsx

@@ -1,7 +1,9 @@
 import React, { useState } from "react"
+import { StaticIntlProvider } from "@cultureamp/i18n-react-intl"
 import { Selection } from "@react-types/shared"
-import { render, screen, waitFor } from "@testing-library/react"
+import { screen, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { renderWithIntl } from "~tests"
 import { FilterMultiSelect } from "../../FilterMultiSelect"
 import { ListBox } from "../../subcomponents/ListBox"
 import { SearchInput } from "../../subcomponents/SearchInput"
@@ -98,391 +100,470 @@ const SelectionProviderWrapper = ({
   )
 }
 
-describe("<SelectionProviderWrapper /> - Visual content", () => {
-  describe("Given no selectedKeys", () => {
-    it("shows all the options unselected", () => {
-      render(<SelectionProviderWrapper />)
-      expect(
-        screen.getByRole("option", {
-          name: "option-1-label-mock",
-          selected: false,
+describe("<SelectionProvider>", () => {
+  describe("<SelectionProviderWrapper /> - Visual content", () => {
+    describe("Given no selectedKeys", () => {
+      it("shows all the options unselected", async () => {
+        renderWithIntl(<SelectionProviderWrapper />)
+        await waitFor(() => {
+          expect(
+            screen.getByRole("option", {
+              name: "option-1-label-mock",
+              selected: false,
+            })
+          ).toBeVisible()
+          expect(
+            screen.getByRole("option", {
+              name: "option-2-label-mock",
+              selected: false,
+            })
+          ).toBeVisible()
+          expect(
+            screen.getByRole("option", {
+              name: "option-3-label-mock",
+              selected: false,
+            })
+          ).toBeVisible()
         })
-      ).toBeVisible()
-      expect(
-        screen.getByRole("option", {
-          name: "option-2-label-mock",
-          selected: false,
-        })
-      ).toBeVisible()
-      expect(
-        screen.getByRole("option", {
-          name: "option-3-label-mock",
-          selected: false,
-        })
-      ).toBeVisible()
-    })
+      })
 
-    it("labels the listbox with the provided label", () => {
-      render(<SelectionProviderWrapper />)
-      const listBox = screen.getByLabelText("selection-label-mock", {
-        selector: "ul",
+      it("labels the listbox with the provided label", async () => {
+        renderWithIntl(<SelectionProviderWrapper />)
+        await waitFor(() => {
+          const listBox = screen.getByLabelText("selection-label-mock", {
+            selector: "ul",
+          })
+          expect(listBox).toBeInTheDocument()
+        })
       })
-      expect(listBox).toBeInTheDocument()
     })
-  })
 
-  describe("Given selectedKeys is [option-2-value-mock]", () => {
-    it("shows only option 2 is selected", () => {
-      render(
-        <SelectionProviderWrapper
-          selectedKeys={new Set(["option-2-value-mock"])}
-        />
-      )
-      expect(
-        screen.getByRole("option", {
-          name: "option-1-label-mock",
-          selected: false,
+    describe("Given selectedKeys is [option-2-value-mock]", () => {
+      it("shows only option 2 is selected", async () => {
+        renderWithIntl(
+          <SelectionProviderWrapper
+            selectedKeys={new Set(["option-2-value-mock"])}
+          />
+        )
+        await waitFor(() => {
+          expect(
+            screen.getByRole("option", {
+              name: "option-1-label-mock",
+              selected: false,
+            })
+          ).toBeVisible()
+          expect(
+            screen.getByRole("option", {
+              name: "option-2-label-mock",
+              selected: true,
+            })
+          ).toBeVisible()
+          expect(
+            screen.getByRole("option", {
+              name: "option-3-label-mock",
+              selected: false,
+            })
+          ).toBeVisible()
         })
-      ).toBeVisible()
-      expect(
-        screen.getByRole("option", {
-          name: "option-2-label-mock",
-          selected: true,
-        })
-      ).toBeVisible()
-      expect(
-        screen.getByRole("option", {
-          name: "option-3-label-mock",
-          selected: false,
-        })
-      ).toBeVisible()
+      })
     })
-  })
 
-  describe("Given selectedKeys is 'all'", () => {
-    it("shows all options are selected", () => {
-      render(<SelectionProviderWrapper selectedKeys="all" />)
-      expect(
-        screen.getByRole("option", {
-          name: "option-1-label-mock",
-          selected: true,
-        })
-      ).toBeVisible()
-      expect(
-        screen.getByRole("option", {
-          name: "option-2-label-mock",
-          selected: true,
+    describe("Given selectedKeys is 'all'", () => {
+      it("shows all options are selected", async () => {
+        renderWithIntl(<SelectionProviderWrapper selectedKeys="all" />)
+        await waitFor(() => {
+          expect(
+            screen.getByRole("option", {
+              name: "option-1-label-mock",
+              selected: true,
+            })
+          ).toBeVisible()
+          expect(
+            screen.getByRole("option", {
+              name: "option-2-label-mock",
+              selected: true,
+            })
+          ).toBeVisible()
+          expect(
+            screen.getByRole("option", {
+              name: "option-3-label-mock",
+              selected: true,
+            })
+          ).toBeVisible()
         })
-      ).toBeVisible()
-      expect(
-        screen.getByRole("option", {
-          name: "option-3-label-mock",
-          selected: true,
-        })
-      ).toBeVisible()
+      })
     })
   })
-})
 
-describe("<SelectionProviderWrapper /> - Mouse interaction", () => {
-  it("selects the option when clicks on a non-selected option", async () => {
-    render(<SelectionProviderWrapper />)
-    const option1 = screen.getByRole("option", {
-      name: "option-1-label-mock",
-    })
+  describe("<SelectionProviderWrapper /> - Mouse interaction", () => {
+    it("selects the option when clicks on a non-selected option", async () => {
+      renderWithIntl(<SelectionProviderWrapper />)
+      const option1 = screen.getByRole("option", {
+        name: "option-1-label-mock",
+      })
 
-    await user.click(option1)
+      await user.click(option1)
 
-    await waitFor(() => {
-      expect(
-        screen.getByRole("option", {
-          name: "option-1-label-mock",
-          selected: true,
-        })
-      ).toBeVisible()
+      await waitFor(() => {
+        expect(
+          screen.getByRole("option", {
+            name: "option-1-label-mock",
+            selected: true,
+          })
+        ).toBeVisible()
+      })
     })
-  })
 
-  it("fires onSelectionChange when clicks on a option", async () => {
-    const spy = jest.fn()
-    render(<SelectionProviderWrapper onSelectionChange={spy} />)
-    const option1 = screen.getByRole("option", {
-      name: "option-1-label-mock",
-    })
+    it("fires onSelectionChange when clicks on a option", async () => {
+      const spy = jest.fn()
+      renderWithIntl(<SelectionProviderWrapper onSelectionChange={spy} />)
+      const option1 = screen.getByRole("option", {
+        name: "option-1-label-mock",
+      })
 
-    await user.click(option1)
+      await user.click(option1)
 
-    await waitFor(() => {
-      expect(spy).toHaveBeenCalledTimes(1)
+      await waitFor(() => {
+        expect(spy).toHaveBeenCalledTimes(1)
+      })
     })
-  })
 
-  it("selects all options when clicks on Select all button", async () => {
-    render(<SelectionProviderWrapper />)
-    const selectAll = screen.getByRole("button", {
-      name: "Select all",
-    })
+    it("selects all options when clicks on Select all button", async () => {
+      renderWithIntl(<SelectionProviderWrapper />)
+      const selectAll = screen.getByRole("button", {
+        name: "Select all",
+      })
 
-    await user.click(selectAll)
+      await user.click(selectAll)
 
-    await waitFor(() => {
-      expect(
-        screen.getByRole("option", {
-          name: "option-1-label-mock",
-          selected: true,
-        })
-      ).toBeVisible()
+      await waitFor(() => {
+        expect(
+          screen.getByRole("option", {
+            name: "option-1-label-mock",
+            selected: true,
+          })
+        ).toBeVisible()
 
-      expect(
-        screen.getByRole("option", {
-          name: "option-2-label-mock",
-          selected: true,
-        })
-      ).toBeVisible()
+        expect(
+          screen.getByRole("option", {
+            name: "option-2-label-mock",
+            selected: true,
+          })
+        ).toBeVisible()
 
-      expect(
-        screen.getByRole("option", {
-          name: "option-3-label-mock",
-          selected: true,
-        })
-      ).toBeVisible()
+        expect(
+          screen.getByRole("option", {
+            name: "option-3-label-mock",
+            selected: true,
+          })
+        ).toBeVisible()
+      })
     })
-  })
 
-  it("fires onSelectionChange when clicks on Select all button", async () => {
-    const spy = jest.fn()
-    render(<SelectionProviderWrapper onSelectionChange={spy} />)
-    const selectAll = screen.getByRole("button", {
-      name: "Select all",
-    })
+    it("fires onSelectionChange when clicks on Select all button", async () => {
+      const spy = jest.fn()
+      renderWithIntl(<SelectionProviderWrapper onSelectionChange={spy} />)
+      const selectAll = screen.getByRole("button", {
+        name: "Select all",
+      })
 
-    await user.click(selectAll)
+      await user.click(selectAll)
 
-    await waitFor(() => {
-      expect(spy).toHaveBeenCalledTimes(1)
+      await waitFor(() => {
+        expect(spy).toHaveBeenCalledTimes(1)
+      })
     })
-  })
 
-  it("clears all the selection when clicks on Clear button", async () => {
-    render(
-      <SelectionProviderWrapper
-        selectedKeys={new Set(["option-2-value-mock"])}
-      />
-    )
-    const clear = screen.getByRole("button", {
-      name: "Clear selections",
-    })
+    it("clears all the selection when clicks on Clear button", async () => {
+      renderWithIntl(
+        <SelectionProviderWrapper
+          selectedKeys={new Set(["option-2-value-mock"])}
+        />
+      )
+      const clear = screen.getByRole("button", {
+        name: "Clear selections",
+      })
 
-    await user.click(clear)
+      await user.click(clear)
 
-    await waitFor(() => {
-      expect(
-        screen.getByRole("option", {
-          name: "option-1-label-mock",
-          selected: false,
-        })
-      ).toBeVisible()
-      expect(
-        screen.getByRole("option", {
-          name: "option-2-label-mock",
-          selected: false,
-        })
-      ).toBeVisible()
-      expect(
-        screen.getByRole("option", {
-          name: "option-3-label-mock",
-          selected: false,
-        })
-      ).toBeVisible()
+      await waitFor(() => {
+        expect(
+          screen.getByRole("option", {
+            name: "option-1-label-mock",
+            selected: false,
+          })
+        ).toBeVisible()
+        expect(
+          screen.getByRole("option", {
+            name: "option-2-label-mock",
+            selected: false,
+          })
+        ).toBeVisible()
+        expect(
+          screen.getByRole("option", {
+            name: "option-3-label-mock",
+            selected: false,
+          })
+        ).toBeVisible()
+      })
     })
-  })
 
-  it("fires onSelectionChange when clicks on Clear all button", async () => {
-    const spy = jest.fn()
-    render(
-      <SelectionProviderWrapper
-        onSelectionChange={spy}
-        selectedKeys={new Set(["option-2-value-mock"])}
-      />
-    )
-    const clear = screen.getByRole("button", {
-      name: "Clear selections",
+    it("fires onSelectionChange when clicks on Clear all button", async () => {
+      const spy = jest.fn()
+      renderWithIntl(
+        <SelectionProviderWrapper
+          onSelectionChange={spy}
+          selectedKeys={new Set(["option-2-value-mock"])}
+        />
+      )
+      const clear = screen.getByRole("button", {
+        name: "Clear selections",
+      })
+
+      await user.click(clear)
+
+      await waitFor(() => {
+        expect(spy).toHaveBeenCalledTimes(1)
+      })
     })
 
-    await user.click(clear)
+    it("de-selects the option when clicks on a selected option", async () => {
+      renderWithIntl(
+        <SelectionProviderWrapper
+          selectedKeys={new Set(["option-2-value-mock"])}
+        />
+      )
+      const option2 = screen.getByRole("option", {
+        name: "option-2-label-mock",
+        selected: true,
+      })
+
+      await user.click(option2)
 
-    await waitFor(() => {
-      expect(spy).toHaveBeenCalledTimes(1)
+      await waitFor(() => {
+        expect(
+          screen.getByRole("option", {
+            name: "option-2-label-mock",
+            selected: false,
+          })
+        ).toBeVisible()
+      })
     })
   })
 
-  it("de-selects the option when clicks on a selected option", async () => {
-    render(
-      <SelectionProviderWrapper
-        selectedKeys={new Set(["option-2-value-mock"])}
-      />
-    )
-    const option2 = screen.getByRole("option", {
-      name: "option-2-label-mock",
-      selected: true,
-    })
+  describe("<SelectionProviderWrapper /> - Keyboard interaction", () => {
+    describe("Given no selectedKeys", () => {
+      it("focuses on the frist option when tabs onto the list", async () => {
+        renderWithIntl(<SelectionProviderWrapper />)
+        await user.tab()
 
-    await user.click(option2)
+        await waitFor(() => {
+          expect(
+            screen.getByRole("option", { name: "option-1-label-mock" })
+          ).toHaveFocus()
+        })
+      })
+    })
 
-    await waitFor(() => {
-      expect(
-        screen.getByRole("option", {
-          name: "option-2-label-mock",
-          selected: false,
+    describe("Given selectedKeys is [option-2-value-mock, option-3-value-mock]", () => {
+      it("focuses the frist selected option when tabs onto the list", async () => {
+        renderWithIntl(
+          <SelectionProviderWrapper
+            selectedKeys={new Set(["option-2-value-mock"])}
+          />
+        )
+        await user.tab()
+
+        await waitFor(() => {
+          expect(
+            screen.getByRole("option", { name: "option-2-label-mock" })
+          ).toHaveFocus()
         })
-      ).toBeVisible()
+      })
     })
-  })
-})
 
-describe("<SelectionProviderWrapper /> - Keyboard interaction", () => {
-  describe("Given no selectedKeys", () => {
-    it("focuses on the frist option when tabs onto the list", async () => {
-      render(<SelectionProviderWrapper />)
+    it("moves the focus down when hits arrow down key", async () => {
+      renderWithIntl(<SelectionProviderWrapper />)
       await user.tab()
+      await user.keyboard("{ArrowDown}")
 
       await waitFor(() => {
         expect(
-          screen.getByRole("option", { name: "option-1-label-mock" })
+          screen.getByRole("option", { name: "option-2-label-mock" })
         ).toHaveFocus()
       })
     })
-  })
 
-  describe("Given selectedKeys is [option-2-value-mock, option-3-value-mock]", () => {
-    it("focuses the frist selected option when tabs onto the list", async () => {
-      render(
+    it("keeps the focus at the last element when hits arrow down key on it", async () => {
+      renderWithIntl(
         <SelectionProviderWrapper
-          selectedKeys={new Set(["option-2-value-mock"])}
+          selectedKeys={new Set(["option-3-value-mock"])}
         />
       )
       await user.tab()
+      await user.keyboard("{ArrowDown}")
 
       await waitFor(() => {
         expect(
-          screen.getByRole("option", { name: "option-2-label-mock" })
+          screen.getByRole("option", { name: "option-3-label-mock" })
         ).toHaveFocus()
       })
     })
-  })
 
-  it("moves the focus down when hits arrow down key", async () => {
-    render(<SelectionProviderWrapper />)
-    await user.tab()
-    await user.keyboard("{ArrowDown}")
+    it("moves the focus up when hits arrow up key", async () => {
+      renderWithIntl(
+        <SelectionProviderWrapper
+          selectedKeys={new Set(["option-3-value-mock"])}
+        />
+      )
+      await user.tab()
+      await user.keyboard("{ArrowUp}")
 
-    await waitFor(() => {
-      expect(
-        screen.getByRole("option", { name: "option-2-label-mock" })
-      ).toHaveFocus()
+      await waitFor(() => {
+        expect(
+          screen.getByRole("option", { name: "option-2-label-mock" })
+        ).toHaveFocus()
+      })
     })
-  })
 
-  it("keeps the focus at the last element when hits arrow down key on it", async () => {
-    render(
-      <SelectionProviderWrapper
-        selectedKeys={new Set(["option-3-value-mock"])}
-      />
-    )
-    await user.tab()
-    await user.keyboard("{ArrowDown}")
-
-    await waitFor(() => {
-      expect(
-        screen.getByRole("option", { name: "option-3-label-mock" })
-      ).toHaveFocus()
+    it("keeps the focus ring at the first element when hits arrow up key on it", async () => {
+      renderWithIntl(<SelectionProviderWrapper />)
+      await user.tab()
+      await user.keyboard("{ArrowUp}")
+
+      await waitFor(() => {
+        expect(
+          screen.getByRole("option", { name: "option-1-label-mock" })
+        ).toHaveFocus()
+      })
     })
-  })
 
-  it("moves the focus up when hits arrow up key", async () => {
-    render(
-      <SelectionProviderWrapper
-        selectedKeys={new Set(["option-3-value-mock"])}
-      />
-    )
-    await user.tab()
-    await user.keyboard("{ArrowUp}")
-
-    await waitFor(() => {
-      expect(
-        screen.getByRole("option", { name: "option-2-label-mock" })
-      ).toHaveFocus()
+    it("selects the option when hits enter on a non-selected option", async () => {
+      renderWithIntl(<SelectionProviderWrapper />)
+
+      await user.tab()
+      await user.keyboard("{Enter}")
+
+      await waitFor(() => {
+        expect(
+          screen.getByRole("option", {
+            name: "option-1-label-mock",
+            selected: true,
+          })
+        ).toBeVisible()
+      })
     })
-  })
 
-  it("keeps the focus ring at the first element when hits arrow up key on it", async () => {
-    render(<SelectionProviderWrapper />)
-    await user.tab()
-    await user.keyboard("{ArrowUp}")
+    it("de-selects the option when hits enter on a selected option", async () => {
+      renderWithIntl(
+        <SelectionProviderWrapper
+          selectedKeys={new Set(["option-2-value-mock"])}
+        />
+      )
+
+      await user.tab()
+      await user.keyboard("{Enter}")
 
-    await waitFor(() => {
-      expect(
-        screen.getByRole("option", { name: "option-1-label-mock" })
-      ).toHaveFocus()
+      await waitFor(() => {
+        expect(
+          screen.getByRole("option", {
+            name: "option-2-label-mock",
+            selected: false,
+          })
+        ).toBeVisible()
+      })
     })
-  })
 
-  it("selects the option when hits enter on a non-selected option", async () => {
-    render(<SelectionProviderWrapper />)
+    it("fires onSelectionChange when hits enter on a option", async () => {
+      const spy = jest.fn()
+      renderWithIntl(<SelectionProviderWrapper onSelectionChange={spy} />)
 
-    await user.tab()
-    await user.keyboard("{Enter}")
+      await user.tab()
+      await user.keyboard("{Enter}")
 
-    await waitFor(() => {
-      expect(
-        screen.getByRole("option", {
-          name: "option-1-label-mock",
-          selected: true,
-        })
-      ).toBeVisible()
+      await waitFor(() => {
+        expect(spy).toHaveBeenCalledTimes(1)
+      })
     })
   })
 
-  it("de-selects the option when hits enter on a selected option", async () => {
-    render(
-      <SelectionProviderWrapper
-        selectedKeys={new Set(["option-2-value-mock"])}
-      />
-    )
-
-    await user.tab()
-    await user.keyboard("{Enter}")
-
-    await waitFor(() => {
-      expect(
-        screen.getByRole("option", {
-          name: "option-2-label-mock",
-          selected: false,
+  describe("<SelectionProviderWrapper /> - Search Filtering", () => {
+    describe("With no onSearchInputChange callback", () => {
+      it("shows only the matched options", async () => {
+        renderWithIntl(<SelectionProviderWrapper />)
+        const searchInput = screen.getByRole("searchbox")
+        await user.type(searchInput, "1")
+
+        await waitFor(() => {
+          expect(
+            screen.getByRole("option", {
+              name: "option-1-label-mock",
+            })
+          ).toBeVisible()
+          expect(
+            screen.queryByRole("option", {
+              name: "option-2-label-mock",
+            })
+          ).not.toBeInTheDocument()
+          expect(
+            screen.queryByRole("option", {
+              name: "option-3-label-mock",
+            })
+          ).not.toBeInTheDocument()
         })
-      ).toBeVisible()
+      })
     })
-  })
+    describe("With a onSearchInputChange callback", () => {
+      it("Does not filter the matched options", async () => {
+        const onSearchInputChange = jest.fn()
+
+        renderWithIntl(
+          <SelectionProviderWrapper onSearchInputChange={onSearchInputChange} />
+        )
+        const searchInput = screen.getByRole("searchbox")
+        const searchString = "1"
+        await user.type(searchInput, searchString)
+
+        await waitFor(() => {
+          expect(
+            screen.getByRole("option", {
+              name: "option-1-label-mock",
+            })
+          ).toBeVisible()
+          expect(
+            screen.getByRole("option", {
+              name: "option-2-label-mock",
+            })
+          ).toBeVisible()
+          expect(
+            screen.getByRole("option", {
+              name: "option-3-label-mock",
+            })
+          ).toBeVisible()
+        })
+      })
 
-  it("fires onSelectionChange when hits enter on a option", async () => {
-    const spy = jest.fn()
-    render(<SelectionProviderWrapper onSelectionChange={spy} />)
+      it("Calls back to the consumer with the search text", async () => {
+        const onSearchInputChange = jest.fn()
 
-    await user.tab()
-    await user.keyboard("{Enter}")
+        renderWithIntl(
+          <SelectionProviderWrapper onSearchInputChange={onSearchInputChange} />
+        )
+        const searchInput = screen.getByRole("searchbox")
+        const searchString = "1"
+        await user.type(searchInput, searchString)
 
-    await waitFor(() => {
-      expect(spy).toHaveBeenCalledTimes(1)
+        await waitFor(() => {
+          expect(onSearchInputChange).toBeCalledTimes(2)
+          expect(onSearchInputChange).toBeCalledWith(searchString)
+        })
+      })
     })
   })
-})
-
-describe("<SelectionProviderWrapper /> - Search Filtering", () => {
-  describe("With no onSearchInputChange callback", () => {
-    it("shows only the matched options", async () => {
-      render(<SelectionProviderWrapper />)
-      const searchInput = screen.getByRole("searchbox")
-      await user.type(searchInput, "1")
 
+  describe("<SelectionProviderWrapper /> - controlling items from the consumer", () => {
+    it("renders only items passed", async () => {
+      const { rerender } = renderWithIntl(<SelectionProviderWrapper />)
       await waitFor(() => {
         expect(
           screen.getByRole("option", {
@@ -490,40 +571,33 @@ describe("<SelectionProviderWrapper /> - Search Filtering", () => {
           })
         ).toBeVisible()
         expect(
-          screen.queryByRole("option", {
+          screen.getByRole("option", {
             name: "option-2-label-mock",
           })
-        ).not.toBeInTheDocument()
+        ).toBeVisible()
         expect(
-          screen.queryByRole("option", {
+          screen.getByRole("option", {
             name: "option-3-label-mock",
           })
-        ).not.toBeInTheDocument()
+        ).toBeVisible()
       })
-    })
-  })
-  describe("With a onSearchInputChange callback", () => {
-    it("Does not filter the matched options", async () => {
-      const onSearchInputChange = jest.fn()
 
-      render(
-        <SelectionProviderWrapper onSearchInputChange={onSearchInputChange} />
+      rerender(
+        <StaticIntlProvider locale="en">
+          <SelectionProviderWrapper items={itemsMock.slice(2)} />
+        </StaticIntlProvider>
       )
-      const searchInput = screen.getByRole("searchbox")
-      const searchString = "1"
-      await user.type(searchInput, searchString)
-
       await waitFor(() => {
         expect(
-          screen.getByRole("option", {
+          screen.queryByRole("option", {
             name: "option-1-label-mock",
           })
-        ).toBeVisible()
+        ).not.toBeInTheDocument()
         expect(
-          screen.getByRole("option", {
+          screen.queryByRole("option", {
             name: "option-2-label-mock",
           })
-        ).toBeVisible()
+        ).not.toBeInTheDocument()
         expect(
           screen.getByRole("option", {
             name: "option-3-label-mock",
@@ -531,59 +605,5 @@ describe("<SelectionProviderWrapper /> - Search Filtering", () => {
         ).toBeVisible()
       })
     })
-
-    it("Calls back to the consumer with the search text", async () => {
-      const onSearchInputChange = jest.fn()
-
-      render(
-        <SelectionProviderWrapper onSearchInputChange={onSearchInputChange} />
-      )
-      const searchInput = screen.getByRole("searchbox")
-      const searchString = "1"
-      await user.type(searchInput, searchString)
-
-      await waitFor(() => {
-        expect(onSearchInputChange).toBeCalledTimes(2)
-        expect(onSearchInputChange).toBeCalledWith(searchString)
-      })
-    })
-  })
-})
-
-describe("<SelectionProviderWrapper /> - controlling items from the consumer", () => {
-  it("renders only items passed", () => {
-    const { rerender } = render(<SelectionProviderWrapper />)
-    expect(
-      screen.getByRole("option", {
-        name: "option-1-label-mock",
-      })
-    ).toBeVisible()
-    expect(
-      screen.getByRole("option", {
-        name: "option-2-label-mock",
-      })
-    ).toBeVisible()
-    expect(
-      screen.getByRole("option", {
-        name: "option-3-label-mock",
-      })
-    ).toBeVisible()
-
-    rerender(<SelectionProviderWrapper items={itemsMock.slice(2)} />)
-    expect(
-      screen.queryByRole("option", {
-        name: "option-1-label-mock",
-      })
-    ).not.toBeInTheDocument()
-    expect(
-      screen.queryByRole("option", {
-        name: "option-2-label-mock",
-      })
-    ).not.toBeInTheDocument()
-    expect(
-      screen.getByRole("option", {
-        name: "option-3-label-mock",
-      })
-    ).toBeVisible()
   })
 })