@loadsmart/loadsmart-ui 5.10.1 → 5.11.1

package/src/components/Select/Select.test.tsx

@@ -5,8 +5,8 @@ import { render } from '@testing-library/react'
 
 import { SelectableKeyTypeOptions, Fruit, FRUITS, USERS } from './Select.fixtures'
 import * as stories from './Select.stories'
-import generator from '../../../tests/generator'
-import renderer, { screen, fire, waitFor } from '../../../tests/renderer'
+import generator from '../../tests/generator'
+import renderer, { act, screen, fire, waitFor } from '../../tests/renderer'
 import selectEvent from '../../testing/SelectEvent'
 
 import type { SelectProps, Option } from './Select.types'
@@ -22,24 +22,6 @@ const {
   CreatableAsync,
 } = composeStories(stories)
 
-async function expandSelect(waitForOptionsToBeAvailable = false) {
-  await waitFor(() => {
-    expect(screen.getByTestId('select-trigger-handle')).toBeEnabled()
-  })
-
-  fire.click(screen.getByTestId('select-trigger-handle'))
-
-  await waitFor(() => {
-    screen.queryByRole('listbox')
-  })
-
-  if (waitForOptionsToBeAvailable) {
-    await waitFor(() => {
-      screen.getAllByRole('option')
-    })
-  }
-}
-
 describe('Select', () => {
   describe('Generic', () => {
     const setup = (overrides: Partial<SelectProps>) =>
@@ -55,23 +37,28 @@ describe('Select', () => {
       it('does not expand with the available options when search input is clicked', () => {
         setup({ disabled: true })
 
-        expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
-        expect(screen.getByTestId('select-trigger-search-field')).toBeDisabled()
+        const searchInput = screen.getByLabelText('Select your favorite fruit')
 
-        fire.click(screen.getByTestId('select-trigger-search-field'))
+        expect(selectEvent.isMenuExpanded(searchInput)).toBe(false)
+        expect(searchInput).toBeDisabled()
 
-        expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
+        fire.click(searchInput)
+
+        expect(selectEvent.isMenuExpanded(searchInput)).toBe(false)
       })
 
       it('does not expand with the available options when trigger handle is clicked', () => {
         setup({ disabled: true })
 
-        expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
-        expect(screen.getByTestId('select-trigger-handle')).toBeDisabled()
+        const searchInput = screen.getByLabelText('Select your favorite fruit')
+        const triggerHandle = screen.getByTestId('select-trigger-handle')
 
-        fire.click(screen.getByTestId('select-trigger-handle'))
+        expect(selectEvent.isMenuExpanded(searchInput)).toBe(false)
+        expect(triggerHandle).toBeDisabled()
 
-        expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
+        fire.click(triggerHandle)
+
+        expect(selectEvent.isMenuExpanded(searchInput)).toBe(false)
       })
     })
 
@@ -79,40 +66,38 @@ describe('Select', () => {
       it('expands with the available options when search input is clicked', async () => {
         setup({})
 
-        expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
-
         await waitFor(() => {
           expect(screen.getByTestId('select-trigger-handle')).toBeEnabled()
         })
 
-        fire.click(screen.getByTestId('select-trigger-search-field'))
+        const searchInput = screen.getByLabelText('Select your favorite fruit')
+
+        expect(selectEvent.isMenuExpanded(searchInput)).toBe(false)
 
-        expect(await screen.findByRole('listbox')).toBeInTheDocument()
+        fire.click(searchInput)
 
-        await waitFor(() => {
-          screen.getAllByRole('option')
-        })
+        expect(selectEvent.isMenuExpanded(searchInput)).toBe(true)
 
-        const items = screen.getAllByRole('option')
+        const options = await selectEvent.getOptions(searchInput)
 
         for (let i = 0; i < FRUITS.length; i++) {
-          expect(items[i]).toHaveTextContent(FRUITS[i].label)
+          expect(options[i]).toHaveTextContent(FRUITS[i].label)
         }
       })
 
       it('expands with the available options when trigger handle is clicked', async () => {
         setup({})
 
-        expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
+        const searchInput = screen.getByLabelText('Select your favorite fruit')
 
-        await expandSelect(true)
+        expect(selectEvent.isMenuExpanded(searchInput)).toBe(false)
 
-        expect(screen.getByRole('listbox')).toBeInTheDocument()
+        await selectEvent.expand(searchInput)
 
-        const items = screen.getAllByRole('option')
+        const options = await selectEvent.getOptions(searchInput)
 
         for (let i = 0; i < FRUITS.length; i++) {
-          expect(items[i]).toHaveTextContent(FRUITS[i].label)
+          expect(options[i]).toHaveTextContent(FRUITS[i].label)
         }
       })
 
@@ -120,17 +105,19 @@ describe('Select', () => {
         render(<Playground options={undefined} />)
 
         const searchInput = screen.getByLabelText('Select your favorite fruit')
+        const triggerHandle = screen.getByTestId('select-trigger-handle')
 
-        expect(screen.getByTestId('select-trigger-handle')).toBeDisabled()
-        expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
+        expect(triggerHandle).toBeDisabled()
+        expect(selectEvent.isMenuExpanded(searchInput)).toBe(false)
 
         userEvent.type(searchInput, generator.word())
 
         await selectEvent.expand(searchInput)
 
+        expect(selectEvent.isMenuExpanded(searchInput)).toBe(true)
+
         await waitFor(() => {
-          expect(screen.getByTestId('select-trigger-handle')).toBeEnabled()
-          expect(screen.queryByRole('listbox')).toBeInTheDocument()
+          expect(triggerHandle).toBeEnabled()
         })
       })
 
@@ -157,33 +144,32 @@ describe('Select', () => {
         }
       })
 
-      it('expands when user enters a search string', async () => {
+      it('expands when user enters a search string', () => {
         setup({})
 
-        expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
+        const searchInput = screen.getByLabelText('Select your favorite fruit')
 
-        fire.change(screen.getByTestId('select-trigger-search-field'), { target: { value: 'foo' } })
+        expect(selectEvent.isMenuExpanded(searchInput)).toBe(false)
 
-        await waitFor(() => expect(screen.queryByRole('listbox')).toBeInTheDocument())
+        fire.change(searchInput, { target: { value: 'foo' } })
+
+        expect(selectEvent.isMenuExpanded(searchInput)).toBe(true)
       })
 
       it('filters the available options when user enters a search string', async () => {
         setup({})
 
-        expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
+        const searchInput = screen.getByLabelText('Select your favorite fruit')
+        const searchedFruit = generator.pickone([...FRUITS])
 
-        const indexToSearch = generator.natural({ min: 0, max: FRUITS.length - 1 })
-        fire.change(screen.getByTestId('select-trigger-search-field'), {
-          target: { value: FRUITS[indexToSearch].label },
+        fire.change(searchInput, {
+          target: { value: searchedFruit.label },
         })
 
-        let items = [] as HTMLElement[]
-        await waitFor(() => {
-          items = screen.getAllByRole('option')
-        })
+        const options = await selectEvent.getOptions(searchInput)
 
-        expect(items.length).toBeGreaterThanOrEqual(1)
-        expect(items[0]).toHaveTextContent(FRUITS[indexToSearch].label)
+        expect(options.length).toBeGreaterThanOrEqual(1)
+        expect(options[0]).toHaveTextContent(searchedFruit.label)
       })
 
       it('calls blur when focus is lost', async () => {
@@ -242,10 +228,11 @@ describe('Select', () => {
       })
 
       it('updates selected item after the initially selected item changes', async () => {
-        const selectedFruit = generator.pickone([...FRUITS])
+        const [selectedFruit, newSelectedFruit] = generator.pickset([...FRUITS], 2)
         const props = {
           value: selectedFruit as Option,
         }
+
         const { rerender } = render(<Playground {...props} />)
 
         const searchInput = screen.getByLabelText('Select your favorite fruit')
@@ -256,7 +243,6 @@ describe('Select', () => {
 
         expect(selectedOptions[0]).toHaveTextContent(selectedFruit.label)
 
-        const newSelectedFruit = generator.pickone([...FRUITS])
         const newProps = {
           value: newSelectedFruit as Option,
         }
@@ -316,19 +302,18 @@ describe('Select', () => {
 
     describe('Multi selection', () => {
       it('selects multiple options', async () => {
-        const [firstOption, secondOption] = FRUITS
+        const [firstOption, secondOption] = generator.pickset([...FRUITS], 2)
+
         setup({ multiple: true })
 
         const searchInput = screen.getByLabelText('Select your favorite fruit')
         await selectEvent.select(firstOption.label, searchInput)
 
-        expect(screen.getByTestId('select-trigger-clear-counter')).toHaveTextContent('1')
-        expect(screen.getByTitle('1 selected option')).toBeInTheDocument()
+        expect(screen.getByTitle('1 selected option')).toHaveTextContent('1')
 
         await selectEvent.select(secondOption.label, searchInput)
 
-        expect(screen.getByTestId('select-trigger-clear-counter')).toHaveTextContent('2')
-        expect(screen.getByTitle('2 selected options')).toBeInTheDocument()
+        expect(screen.getByTitle('2 selected options')).toHaveTextContent('2')
 
         const selectedOptions = await selectEvent.getSelectedOptions(searchInput)
         expect(selectedOptions).toHaveLength(2)
@@ -340,13 +325,14 @@ describe('Select', () => {
       })
 
       it('unselects a selected option keeping selected the others', async () => {
-        const [firstOption, secondOption, thirdOption] = FRUITS
+        const [firstOption, secondOption, thirdOption] = generator.pickset([...FRUITS], 3)
+
         setup({ multiple: true, value: [firstOption, secondOption, thirdOption] as Option[] })
 
         const searchInput = screen.getByLabelText('Select your favorite fruit')
         expect(await selectEvent.getSelectedOptions(searchInput)).toHaveLength(3)
 
-        expect(screen.getByTestId('select-trigger-clear-counter')).toHaveTextContent('3')
+        expect(screen.getByTitle('3 selected options')).toHaveTextContent('3')
 
         await selectEvent.unselect(secondOption.label, searchInput)
 
@@ -360,19 +346,19 @@ describe('Select', () => {
       })
 
       it('clears all selections when clicking the counter close button', async () => {
-        const [firstOption, secondOption, thirdOption] = FRUITS
+        const [firstOption, secondOption, thirdOption] = generator.pickset([...FRUITS], 3)
         setup({ multiple: true, value: [firstOption, secondOption, thirdOption] as Option[] })
 
         const searchInput = screen.getByLabelText('Select your favorite fruit')
         expect(await selectEvent.getSelectedOptions(searchInput)).toHaveLength(3)
 
-        expect(screen.getByTestId('select-trigger-clear-counter')).toHaveTextContent('3')
+        expect(screen.getByTitle('3 selected options')).toHaveTextContent('3')
 
         await selectEvent.clear(searchInput)
 
         expect(screen.queryByTestId('select-trigger-clear-counter')).not.toBeInTheDocument()
 
-        expect(screen.queryByRole('option', { selected: true })).not.toBeInTheDocument()
+        expect(await selectEvent.getSelectedOptions(searchInput)).toHaveLength(0)
       })
     })
   })
@@ -384,59 +370,59 @@ describe('Select', () => {
     it('expands with the available options when search input is clicked', async () => {
       setup({})
 
-      expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
+      await waitFor(() => {
+        expect(screen.getByTestId('select-trigger-handle')).toBeEnabled()
+      })
 
-      await expandSelect(true)
+      const searchInput = screen.getByLabelText('Select the project manager')
 
-      expect(screen.getByRole('listbox')).toBeInTheDocument()
+      expect(selectEvent.isMenuExpanded(searchInput)).toBe(false)
 
-      const items = screen.getAllByRole('option')
+      fire.click(searchInput)
+
+      await waitFor(() => {
+        expect(selectEvent.isMenuExpanded(searchInput)).toBe(true)
+      })
+
+      const options = await selectEvent.getOptions(searchInput)
 
       for (let i = 0; i < USERS.length; i++) {
-        expect(items[i]).toHaveTextContent(USERS[i].name)
+        expect(options[i]).toHaveTextContent(USERS[i].name)
       }
     })
 
     it('expands with the available options when trigger handle is clicked', async () => {
       setup({})
 
-      expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
+      const searchInput = screen.getByLabelText('Select the project manager')
 
-      await expandSelect(true)
+      expect(selectEvent.isMenuExpanded(searchInput)).toBe(false)
 
-      expect(screen.getByRole('listbox')).toBeInTheDocument()
+      await selectEvent.expand(searchInput)
 
-      const items = screen.getAllByRole('option')
+      expect(selectEvent.isMenuExpanded(searchInput)).toBe(true)
+
+      const options = await selectEvent.getOptions(searchInput)
 
       for (let i = 0; i < USERS.length; i++) {
-        expect(items[i]).toHaveTextContent(USERS[i].name)
+        expect(options[i]).toHaveTextContent(USERS[i].name)
       }
     })
 
     it('filters the available options when user enters a search string', async () => {
       setup({})
 
-      expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
+      const searchInput = screen.getByLabelText('Select the project manager')
+      const searchedUser = generator.pickone([...USERS])
 
-      const indexToSearch = generator.natural({ min: 0, max: USERS.length - 1 })
-      fire.change(screen.getByTestId('select-trigger-search-field'), {
-        target: { value: USERS[indexToSearch].name },
+      fire.change(searchInput, {
+        target: { value: searchedUser.name },
       })
 
-      await waitFor(() => screen.findByTestId('select-trigger-loading'))
-
-      let items = [] as HTMLElement[]
-      await waitFor(
-        () => {
-          items = screen.getAllByRole('option')
-        },
-        {
-          timeout: 2500,
-        }
-      )
+      const options = await selectEvent.getOptions(searchInput)
 
-      expect(items.length).toBe(1)
-      expect(items[0]).toHaveTextContent(USERS[indexToSearch].name)
+      expect(options.length).toBe(1)
+      expect(options[0]).toHaveTextContent(searchedUser.name)
     })
   })
 
@@ -455,7 +441,8 @@ describe('Select', () => {
       async (props) => {
         setup(props)
 
-        await expandSelect(true)
+        const searchInput = screen.getByLabelText('Select your favorite fruit')
+        await selectEvent.expand(searchInput)
 
         const items = screen.getAllByTestId('custom-option')
         expect(items).toHaveLength(FRUITS.length)
@@ -467,28 +454,28 @@ describe('Select', () => {
     )
 
     it('overrides the option component with initial value', async () => {
-      const [firstOption, secondOption] = FRUITS
-      setup({ multiple: true, value: [firstOption, secondOption] as Option[] })
+      const selectedFruit = generator.pickone([...FRUITS])
 
-      await expandSelect(true)
+      setup({ value: selectedFruit as Option })
 
-      expect(screen.getAllByTestId('custom-option')).toHaveLength(2)
+      const searchInput = screen.getByLabelText('Select your favorite fruit')
+      await selectEvent.expand(searchInput)
 
-      await waitFor(() => {
-        expect(screen.getAllByTestId('custom-option')).toHaveLength(FRUITS.length)
-      })
+      const customOptions = screen.getAllByTestId('custom-option')
+      expect(customOptions).toHaveLength(FRUITS.length)
 
-      const items = screen.getAllByTestId('custom-option')
-      for (let i = 0; i < FRUITS.length; i++) {
-        expect(items[i]).toHaveTextContent(getOptionText(FRUITS[i]))
-      }
+      const selectedOptions = await selectEvent.getSelectedOptions(searchInput)
+
+      expect(selectedOptions).toHaveLength(1)
+      expect(selectedOptions[0]).toHaveTextContent(selectedFruit.label)
     })
 
     it('selects custom item clicked', async () => {
+      const selectedFruit = generator.pickone<Fruit>([...FRUITS])
+
       setup({})
 
       const searchInput = screen.getByLabelText('Select your favorite fruit')
-      const selectedFruit = generator.pickone<Fruit>([...FRUITS])
       const optionText = getOptionText(selectedFruit)
 
       await selectEvent.select(optionText, searchInput)
@@ -500,11 +487,12 @@ describe('Select', () => {
     })
 
     it('selects multiple clicked custom items', async () => {
+      const SELECTED_OPTIONS_AMOUNT = 2
+      const options = generator.pickset([...FRUITS], SELECTED_OPTIONS_AMOUNT)
+
       setup({ multiple: true })
 
-      const SELECTED_OPTIONS_AMOUNT = 2
       const searchInput = screen.getByLabelText('Select your favorite fruit')
-      const options = generator.pickset([...FRUITS], SELECTED_OPTIONS_AMOUNT)
 
       for await (const option of options) {
         const optionText = getOptionText(option)
@@ -569,12 +557,17 @@ describe('Select', () => {
         })
 
         const searchInput = screen.getByLabelText('Select your favorite fruit')
-        fire.change(searchInput, {
-          target: { value: 'foo' },
+
+        await act(async () => {
+          fire.change(searchInput, {
+            target: { value: 'foo' },
+          })
+
+          const creatableOption = await screen.findByTestId('custom-creatable')
+
+          fire.click(creatableOption)
         })
 
-        const creatableOption = await screen.findByTestId('custom-creatable')
-        fire.click(creatableOption)
         expect(onCreate).toBeCalledWith('foo')
       }
     )
@@ -583,13 +576,11 @@ describe('Select', () => {
   describe('Creatable sync', () => {
     const setup = (overrides: Partial<SelectProps>) =>
       renderer(<CreatableSync {...overrides} />).render()
-
     it.each([[{ multiple: false }], [{ multiple: true }]])(
       'does not render the creatable option when onCreate callback is not provided - %s',
       async (args) => {
         setup({ onCreate: (null as unknown) as undefined, ...args })
 
-        await expandSelect(true)
         const searchInput = screen.getByLabelText('Select your favorite fruit')
         fire.change(searchInput, {
           target: { value: 'foo' },
@@ -606,12 +597,10 @@ describe('Select', () => {
       'renders creatable option when onCreate callback is provided - %s',
       async (args) => {
         setup({ ...args })
-
         const searchInput = screen.getByLabelText('Select your favorite fruit')
         fire.change(searchInput, {
           target: { value: 'foo' },
         })
-
         await waitFor(() => {
           expect(screen.getByText('Add "foo"')).toBeInTheDocument()
         })
@@ -624,8 +613,8 @@ describe('Select', () => {
         setup({ ...args })
         const { label: availableOption } = generator.pickone([...FRUITS])
         const query = availableOption.slice(0, availableOption.length - 1)
-
         const searchInput = screen.getByLabelText('Select your favorite fruit')
+
         fire.change(searchInput, {
           target: { value: query },
         })
@@ -646,8 +635,8 @@ describe('Select', () => {
         })
         const { label: availableOption } = generator.pickone([...FRUITS])
         const query = availableOption.slice(0, availableOption.length - 1)
-
         const searchInput = screen.getByLabelText('Select your favorite fruit')
+
         fire.change(searchInput, {
           target: { value: query },
         })
@@ -666,8 +655,8 @@ describe('Select', () => {
           ...args,
         })
         const { label: availableOption } = generator.pickone([...FRUITS])
-
         const searchInput = screen.getByLabelText('Select your favorite fruit')
+
         fire.change(searchInput, {
           target: { value: availableOption },
         })
@@ -686,8 +675,9 @@ describe('Select', () => {
           ...args,
         })
         const { label: availableOption } = generator.pickone([...FRUITS])
+        const searchInput = screen.getByLabelText('Select your favorite fruit')
 
-        await expandSelect()
+        await selectEvent.expand(searchInput)
 
         await screen.findByLabelText(availableOption)
         await waitFor(() => {
@@ -701,14 +691,18 @@ describe('Select', () => {
       async (args) => {
         const onCreate = jest.fn()
         setup({ onCreate, ...args })
-
         const searchInput = screen.getByLabelText('Select your favorite fruit')
-        fire.change(searchInput, {
-          target: { value: 'foo' },
+
+        await act(async () => {
+          fire.change(searchInput, {
+            target: { value: 'foo' },
+          })
+
+          const creatableOption = await screen.findByText('Add "foo"')
+
+          fire.click(creatableOption)
         })
 
-        const creatableOption = await screen.findByText('Add "foo"')
-        fire.click(creatableOption)
         expect(onCreate).toBeCalledWith('foo')
       }
     )
@@ -725,11 +719,16 @@ describe('Select', () => {
         setup({ onCreate, onChange, ...args })
 
         const searchInput = screen.getByLabelText('Select your favorite fruit')
-        fire.change(searchInput, {
-          target: { value: query },
+
+        await act(async () => {
+          fire.change(searchInput, {
+            target: { value: query },
+          })
+
+          const creatableOption = await screen.findByText(`Add "${query}"`)
+
+          fire.click(creatableOption)
         })
-        const creatableOption = await screen.findByText(`Add "${query}"`)
-        fire.click(creatableOption)
 
         expect(onChange).toBeCalledWith({
           target: {
@@ -751,11 +750,16 @@ describe('Select', () => {
         setup({ onCreate, onChange, ...args })
 
         const searchInput = screen.getByLabelText('Select your favorite fruit')
-        fire.change(searchInput, {
-          target: { value: query },
+
+        await act(async () => {
+          fire.change(searchInput, {
+            target: { value: query },
+          })
+
+          const creatableOption = await screen.findByText(`Add "${query}"`)
+
+          fire.click(creatableOption)
         })
-        const creatableOption = await screen.findByText(`Add "${query}"`)
-        fire.click(creatableOption)
 
         expect(onChange).not.toBeCalled()
       }
@@ -776,13 +780,17 @@ describe('Select', () => {
           }),
         ]
         setup({ datasources, ...args })
-
         const searchInput = screen.getByLabelText('Select your favorite fruit')
-        fire.change(searchInput, {
-          target: { value: 'foo' },
+
+        await act(async () => {
+          fire.change(searchInput, {
+            target: { value: 'foo' },
+          })
+
+          const creatableOption = await screen.findByText('Add "foo"')
+
+          fire.click(creatableOption)
         })
-        const creatableOption = await screen.findByText('Add "foo"')
-        fire.click(creatableOption)
 
         await waitFor(() => {
           expect(dsFetch).toBeCalledTimes(2)
@@ -796,7 +804,8 @@ describe('Select', () => {
       async (args) => {
         setup({ ...args, isValidNewOption: true })
 
-        await expandSelect(false)
+        const searchInput = screen.getByLabelText('Select your favorite fruit')
+        await selectEvent.expand(searchInput)
 
         await waitFor(() => {
           expect(screen.getByText(/add ""/i)).toBeInTheDocument()
@@ -809,12 +818,12 @@ describe('Select', () => {
       async (args) => {
         setup({ ...args, isValidNewOption: true, createOptionPosition: 'first' })
 
-        await expandSelect(true)
+        const searchInput = screen.getByLabelText('Select your favorite fruit')
+        await selectEvent.expand(searchInput)
 
         await waitFor(() => {
           expect(screen.getByText(/add ""/i)).toBeInTheDocument()
         })
-
         expect(screen.getAllByTestId('dropdown-menu-item')[0]).toHaveTextContent(/add ""/i)
       }
     )
@@ -824,14 +833,13 @@ describe('Select', () => {
       async (args) => {
         setup({ ...args, isValidNewOption: true, createOptionPosition: 'last' })
 
-        await expandSelect(true)
+        const searchInput = screen.getByLabelText('Select your favorite fruit')
+        await selectEvent.expand(searchInput)
 
         await waitFor(() => {
           expect(screen.getByText(/add ""/i)).toBeInTheDocument()
         })
-
         const options = screen.getAllByTestId('dropdown-menu-item')
-
         expect(options[options.length - 1]).toHaveTextContent(/add ""/i)
       }
     )
@@ -844,9 +852,7 @@ describe('Select', () => {
             <Select.CreatableOption data-testid="custom-creatable">Add item</Select.CreatableOption>
           )
         }
-
         const value = generator.pickone([...FRUITS]) as Selectable
-
         setup({
           ...args,
           isValidNewOption: true,
@@ -857,7 +863,8 @@ describe('Select', () => {
           },
         })
 
-        await expandSelect(true)
+        const searchInput = screen.getByLabelText('Select your favorite fruit')
+        await selectEvent.expand(searchInput)
         expect(await screen.findByText(/add item/i)).toBeVisible()
       }
     )
@@ -868,7 +875,6 @@ describe('Select', () => {
         const CreatableOption = () => {
           return <Select.CreatableOption>Add item</Select.CreatableOption>
         }
-
         setup({
           ...args,
           isValidNewOption: true,
@@ -879,7 +885,8 @@ describe('Select', () => {
           },
         })
 
-        await expandSelect(true)
+        const searchInput = screen.getByLabelText('Select your favorite fruit')
+        await selectEvent.expand(searchInput)
         expect(await screen.findByText(/add item/i)).toBeVisible()
       }
     )