@loadsmart/loadsmart-ui 7.6.0 → 7.7.0-beta.1

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

@@ -1,1109 +0,0 @@
-import React from 'react'
-import { composeStories } from '@storybook/react'
-
-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, { act, screen, fire, waitFor } from '../../tests/renderer'
-import selectEvent from '../../testing/SelectEvent'
-
-import type { SelectProps, Option } from './Select.types'
-import Select from './Select'
-import type { Selectable } from 'hooks/useSelectable'
-
-const {
-  Playground,
-  SingleAsyncDatasource,
-  SingleCustomOptionRendering,
-  CreatableSync,
-  CreatableAsync,
-} = composeStories(stories)
-
-describe('Select', () => {
-  describe('Generic', () => {
-    const setup = (overrides: Partial<SelectProps>) =>
-      renderer(<Playground {...overrides} />).render()
-
-    it('start collapsed', () => {
-      setup({})
-
-      screen.getByTestId('select-trigger-search-field')
-    })
-
-    it('transfer additional input props to SelectTrigger', () => {
-      const props: Partial<SelectProps> = {
-        getInputProps: () => ({
-          minLength: 11,
-          maxLength: 33,
-        }),
-      }
-
-      setup({ ...props })
-
-      const searchInput = screen.getByTestId('select-trigger-search-field')
-
-      expect(searchInput).toHaveAttribute('minlength', '11')
-      expect(searchInput).toHaveAttribute('maxlength', '33')
-    })
-
-    describe('when disabled', () => {
-      it('does not expand with the available options when search input is clicked', () => {
-        setup({ disabled: true })
-
-        const searchInput = screen.getByLabelText('Select your favorite fruit')
-
-        expect(selectEvent.isMenuExpanded(searchInput)).toBe(false)
-        expect(searchInput).toBeDisabled()
-
-        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 })
-
-        const searchInput = screen.getByLabelText('Select your favorite fruit')
-        const triggerHandle = screen.getByTestId('select-trigger-handle')
-
-        expect(selectEvent.isMenuExpanded(searchInput)).toBe(false)
-        expect(triggerHandle).toBeDisabled()
-
-        fire.click(triggerHandle)
-
-        expect(selectEvent.isMenuExpanded(searchInput)).toBe(false)
-      })
-    })
-
-    describe('when enabled', () => {
-      it('expands with the available options when search input is clicked', async () => {
-        setup({})
-
-        await waitFor(() => {
-          expect(screen.getByTestId('select-trigger-handle')).toBeEnabled()
-        })
-
-        const searchInput = screen.getByLabelText('Select your favorite fruit')
-
-        expect(selectEvent.isMenuExpanded(searchInput)).toBe(false)
-
-        fire.click(searchInput)
-
-        expect(selectEvent.isMenuExpanded(searchInput)).toBe(true)
-
-        const options = await screen.findAllByRole('option')
-
-        for (let i = 0; i < FRUITS.length; i++) {
-          expect(options[i]).toHaveTextContent(FRUITS[i].label)
-        }
-      })
-
-      it('expands with the available options when trigger handle is clicked', async () => {
-        setup({})
-
-        const triggerHandle = screen.getByTestId('select-trigger-handle')
-
-        await waitFor(() => {
-          expect(triggerHandle).toBeEnabled()
-        })
-
-        const searchInput = screen.getByLabelText('Select your favorite fruit')
-
-        expect(selectEvent.isMenuExpanded(searchInput)).toBe(false)
-
-        fire.click(triggerHandle)
-
-        expect(selectEvent.isMenuExpanded(searchInput)).toBe(true)
-
-        const options = await screen.findAllByRole('option')
-
-        for (let i = 0; i < FRUITS.length; i++) {
-          expect(options[i]).toHaveTextContent(FRUITS[i].label)
-        }
-      })
-
-      it('expands only if a query is typed if the options list is empty', async () => {
-        render(<Playground options={undefined} />)
-
-        const searchInput = screen.getByLabelText('Select your favorite fruit')
-        const triggerHandle = screen.getByTestId('select-trigger-handle')
-
-        expect(triggerHandle).toBeDisabled()
-        expect(selectEvent.isMenuExpanded(searchInput)).toBe(false)
-
-        /**
-         * using userEvent.type goes beyond the event dispatching we need here to
-         * make the select component to react and expand the menu; additionally,
-         * it throws the `act` warning in `useClickOutide`'s `handleEvent`, but we do not have any testable evidence
-         * that can make for a valid assertion.
-         * that's why we use `fireEvent.change` instead of `userEvent.type`.
-         */
-        fire.change(searchInput, { target: { value: generator.word() } })
-
-        expect(selectEvent.isMenuExpanded(searchInput)).toBe(true)
-
-        await waitFor(() => {
-          expect(triggerHandle).toBeEnabled()
-        })
-      })
-
-      it('shows correct options when options prop change', async () => {
-        const { rerender } = render(<Playground options={undefined} />)
-
-        const searchInput = screen.getByLabelText('Select your favorite fruit')
-
-        expect(screen.getByTestId('select-trigger-handle')).toBeDisabled()
-        expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
-
-        rerender(<Playground options={[...FRUITS]} />)
-
-        await selectEvent.expand(searchInput)
-
-        await waitFor(() => {
-          screen.getAllByRole('option')
-        })
-
-        const items = screen.getAllByRole('option')
-
-        for (let i = 0; i < FRUITS.length; i++) {
-          expect(items[i]).toHaveTextContent(FRUITS[i].label)
-        }
-      })
-
-      it('expands when user enters a search string', () => {
-        setup({})
-
-        const searchInput = screen.getByLabelText('Select your favorite fruit')
-
-        expect(selectEvent.isMenuExpanded(searchInput)).toBe(false)
-
-        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({})
-
-        const searchInput = screen.getByLabelText('Select your favorite fruit')
-        const searchedFruit = generator.pickone([...FRUITS])
-
-        await selectEvent.search(searchedFruit.label, searchInput)
-
-        const options = await selectEvent.getOptions(searchInput)
-
-        expect(options.length).toBeGreaterThanOrEqual(1)
-        expect(options[0]).toHaveTextContent(searchedFruit.label)
-      })
-
-      it('calls blur when focus is lost', async () => {
-        const onBlur = jest.fn((event?: MouseEvent | TouchEvent | KeyboardEvent) => event)
-
-        setup({ onBlur })
-
-        const selectInput = screen.getByLabelText('Select your favorite fruit')
-
-        await selectEvent.expand(selectInput)
-
-        /**
-         * we are using `act` with manually triggered elements so RTL waits for
-         * all state changes that happen during click and key presses before proceeding to
-         * the assetions.
-         * If you remove these and replace with userEvent, you will see the `act` warning.
-         */
-        act(() => {
-          selectInput.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }))
-          selectInput.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }))
-        })
-
-        act(() => {
-          selectInput.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
-          selectInput.dispatchEvent(new KeyboardEvent('keyup', { key: 'Escape', bubbles: true }))
-        })
-
-        await waitFor(() => {
-          expect(onBlur).toHaveBeenCalled()
-        })
-
-        await selectEvent.expand(selectInput)
-
-        act(() => {
-          selectInput.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }))
-          selectInput.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }))
-        })
-
-        act(() => {
-          document.body.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }))
-          document.body.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }))
-        })
-
-        await waitFor(() => {
-          expect(onBlur).toHaveBeenCalled()
-        })
-      })
-
-      it('shrinks when an option is selected', async () => {
-        setup({})
-
-        const searchInput = screen.getByLabelText('Select your favorite fruit')
-        const searchedFruit = generator.pickone([...FRUITS])
-
-        fire.change(searchInput, {
-          target: { value: searchedFruit.label },
-        })
-
-        expect(selectEvent.isMenuExpanded(searchInput)).toBe(true)
-
-        await selectEvent.select(searchedFruit.label, searchInput)
-
-        expect(selectEvent.isMenuExpanded(searchInput)).toBe(false)
-      })
-    })
-
-    describe('Single selection', () => {
-      it('selects the clicked item', async () => {
-        setup({})
-
-        const searchInput = screen.getByLabelText('Select your favorite fruit')
-        const selectedFruit = generator.pickone([...FRUITS])
-
-        await selectEvent.select(selectedFruit.label, searchInput)
-
-        expect(searchInput).toHaveDisplayValue(selectedFruit.label)
-
-        const selectedOptions = await selectEvent.getSelectedOptions(searchInput)
-        expect(selectedOptions).toHaveLength(1)
-
-        expect(selectedOptions[0]).toHaveTextContent(selectedFruit.label)
-      })
-
-      it('initializes with a selected item', async () => {
-        const selectedFruit = generator.pickone([...FRUITS])
-
-        setup({
-          value: selectedFruit as Option,
-        })
-
-        const searchInput = screen.getByLabelText('Select your favorite fruit')
-        expect(searchInput).toHaveDisplayValue(selectedFruit.label)
-
-        const selectedOptions = await selectEvent.getSelectedOptions(searchInput)
-        expect(selectedOptions).toHaveLength(1)
-
-        expect(selectedOptions[0]).toHaveTextContent(selectedFruit.label)
-      })
-
-      it('updates selected item after the initially selected item changes', async () => {
-        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')
-        expect(searchInput).toHaveDisplayValue(selectedFruit.label)
-
-        let selectedOptions = await selectEvent.getSelectedOptions(searchInput)
-        expect(selectedOptions).toHaveLength(1)
-
-        expect(selectedOptions[0]).toHaveTextContent(selectedFruit.label)
-
-        const newProps = {
-          value: newSelectedFruit as Option,
-        }
-
-        rerender(<Playground {...newProps} />)
-
-        expect(searchInput).toHaveDisplayValue(newSelectedFruit.label)
-
-        selectedOptions = await selectEvent.getSelectedOptions(searchInput)
-        expect(selectedOptions).toHaveLength(1)
-
-        expect(selectedOptions[0]).toHaveTextContent(newSelectedFruit.label)
-      })
-
-      it('unselects the clicked item', async () => {
-        const selectedFruit = generator.pickone([...FRUITS])
-
-        setup({
-          value: selectedFruit as Option,
-        })
-
-        const searchInput = screen.getByLabelText('Select your favorite fruit')
-        expect(searchInput).toHaveDisplayValue(selectedFruit.label)
-
-        const selectedOptions = await selectEvent.getSelectedOptions(searchInput)
-        expect(selectedOptions).toHaveLength(1)
-
-        expect(selectedOptions[0]).toHaveTextContent(selectedFruit.label)
-
-        await selectEvent.unselect(selectedFruit.label, searchInput)
-
-        expect(await selectEvent.getSelectedOptions(searchInput)).toHaveLength(0)
-        expect(searchInput).toHaveDisplayValue('')
-      })
-
-      it('clears selection', async () => {
-        const selectedFruit = generator.pickone([...FRUITS])
-
-        setup({
-          value: selectedFruit as Option,
-        })
-
-        const searchInput = screen.getByLabelText('Select your favorite fruit')
-        expect(searchInput).toHaveDisplayValue(selectedFruit.label)
-
-        const selectedOptions = await selectEvent.getSelectedOptions(searchInput)
-        expect(selectedOptions).toHaveLength(1)
-
-        expect(selectedOptions[0]).toHaveTextContent(selectedFruit.label)
-
-        await selectEvent.clear(searchInput)
-
-        expect(await selectEvent.getSelectedOptions(searchInput)).toHaveLength(0)
-        expect(searchInput).toHaveDisplayValue('')
-        expect(selectEvent.isMenuExpanded(searchInput)).toBe(false)
-      })
-
-      it('removes the clear button', async () => {
-        const selectedFruit = generator.pickone([...FRUITS])
-
-        setup({
-          value: selectedFruit as Option,
-          hideClear: true,
-        })
-
-        const searchInput = screen.getByLabelText('Select your favorite fruit')
-        expect(searchInput).toHaveDisplayValue(selectedFruit.label)
-
-        const selectedOptions = await selectEvent.getSelectedOptions(searchInput)
-        expect(selectedOptions).toHaveLength(1)
-
-        expect(selectedOptions[0]).toHaveTextContent(selectedFruit.label)
-
-        expect(screen.queryByTestId('select-trigger-clear')).not.toBeInTheDocument()
-      })
-    })
-
-    describe('Multi selection', () => {
-      it('selects multiple options', async () => {
-        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.getByTitle('1 selected option')).toHaveTextContent('1')
-
-        await selectEvent.select(secondOption.label, searchInput)
-
-        expect(screen.getByTitle('2 selected options')).toHaveTextContent('2')
-
-        const selectedOptions = await selectEvent.getSelectedOptions(searchInput)
-        expect(selectedOptions).toHaveLength(2)
-
-        const [firstSelection, secondSelection] = selectedOptions
-
-        expect(firstSelection).toHaveTextContent(firstOption.label)
-        expect(secondSelection).toHaveTextContent(secondOption.label)
-      })
-
-      it('unselects a selected option keeping selected the others', async () => {
-        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.getByTitle('3 selected options')).toHaveTextContent('3')
-
-        await selectEvent.unselect(secondOption.label, searchInput)
-
-        const selectedOptions = await selectEvent.getSelectedOptions(searchInput)
-        expect(selectedOptions).toHaveLength(2)
-
-        const [firstSelection, secondSelection] = selectedOptions
-
-        expect(firstSelection).toHaveTextContent(firstOption.label)
-        expect(secondSelection).toHaveTextContent(thirdOption.label)
-      })
-
-      it('clears all selections when clicking the counter close button', async () => {
-        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.getByTitle('3 selected options')).toHaveTextContent('3')
-
-        await selectEvent.clear(searchInput)
-
-        expect(screen.queryByTestId('select-trigger-clear-counter')).not.toBeInTheDocument()
-
-        expect(await selectEvent.getSelectedOptions(searchInput)).toHaveLength(0)
-      })
-    })
-  })
-
-  describe('Async Datasources', () => {
-    const setup = (overrides: Partial<SelectProps>) =>
-      renderer(<SingleAsyncDatasource {...overrides} />).render()
-
-    it('expands with the available options when search input is clicked', async () => {
-      setup({})
-
-      await waitFor(() => {
-        expect(screen.getByTestId('select-trigger-handle')).toBeEnabled()
-      })
-
-      const searchInput = screen.getByLabelText('Select the project manager')
-
-      expect(selectEvent.isMenuExpanded(searchInput)).toBe(false)
-
-      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(options[i]).toHaveTextContent(USERS[i].name)
-      }
-    })
-
-    it('expands with the available options when trigger handle is clicked', async () => {
-      setup({})
-
-      const searchInput = screen.getByLabelText('Select the project manager')
-
-      expect(selectEvent.isMenuExpanded(searchInput)).toBe(false)
-
-      await selectEvent.expand(searchInput)
-
-      expect(selectEvent.isMenuExpanded(searchInput)).toBe(true)
-
-      const options = await selectEvent.getOptions(searchInput)
-
-      for (let i = 0; i < USERS.length; i++) {
-        expect(options[i]).toHaveTextContent(USERS[i].name)
-      }
-    })
-
-    it('filters the available options when user enters a search string', async () => {
-      setup({})
-
-      const searchInput = screen.getByLabelText('Select the project manager')
-      const searchedUser = generator.pickone([...USERS])
-
-      await selectEvent.search(searchedUser.name, searchInput)
-
-      const options = await selectEvent.getOptions(searchInput)
-
-      expect(options.length).toBe(1)
-      expect(options[0]).toHaveTextContent(searchedUser.name)
-    })
-  })
-
-  describe('Override components', () => {
-    const getOptionText = (option: Fruit) => `${option.label}family: ${option.family}`
-    const setup = (overrides: Partial<SelectProps>) =>
-      renderer(<SingleCustomOptionRendering {...overrides} />).render()
-    const CreatableOption = () => {
-      return (
-        <Select.CreatableOption data-testid="custom-creatable">Add item</Select.CreatableOption>
-      )
-    }
-
-    it.each([[{ multiple: true }], [{ multiple: false }]])(
-      'overrides the option component with %s',
-      async (props) => {
-        setup(props)
-
-        const searchInput = screen.getByLabelText('Select your favorite fruit')
-        await selectEvent.expand(searchInput)
-
-        const items = screen.getAllByTestId('custom-option')
-        expect(items).toHaveLength(FRUITS.length)
-
-        for (let i = 0; i < FRUITS.length; i++) {
-          expect(items[i]).toHaveTextContent(getOptionText(FRUITS[i]))
-        }
-      }
-    )
-
-    it('overrides the option component with initial value', async () => {
-      const selectedFruit = generator.pickone([...FRUITS])
-
-      setup({ value: selectedFruit as Option })
-
-      const searchInput = screen.getByLabelText('Select your favorite fruit')
-      await selectEvent.expand(searchInput)
-
-      const customOptions = screen.getAllByTestId('custom-option')
-      expect(customOptions).toHaveLength(FRUITS.length)
-
-      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 optionText = getOptionText(selectedFruit)
-
-      await selectEvent.select(optionText, searchInput)
-      const selectedOptions = await selectEvent.getSelectedOptions(searchInput)
-
-      expect(searchInput).toHaveDisplayValue(selectedFruit.label)
-      expect(selectedOptions).toHaveLength(1)
-      expect(selectedOptions[0]).toHaveTextContent(optionText)
-    })
-
-    it('selects multiple clicked custom items', async () => {
-      const SELECTED_OPTIONS_AMOUNT = 2
-      const options = generator.pickset([...FRUITS], SELECTED_OPTIONS_AMOUNT)
-
-      setup({ multiple: true })
-
-      const searchInput = screen.getByLabelText('Select your favorite fruit')
-
-      for await (const option of options) {
-        const optionText = getOptionText(option)
-        await selectEvent.select(optionText, searchInput)
-      }
-
-      const selectedOptions = await selectEvent.getSelectedOptions(searchInput)
-      expect(selectedOptions).toHaveLength(SELECTED_OPTIONS_AMOUNT)
-
-      for await (const [index, option] of options.entries()) {
-        const optionText = getOptionText(option)
-        expect(selectedOptions[index]).toHaveTextContent(optionText)
-      }
-    })
-
-    it.each([[{ multiple: true }], [{ multiple: false }]])(
-      'overrides the empty component with %s',
-      async (props) => {
-        const Empty = () => {
-          return <Select.Empty data-testid="custom-empty">No fruit found.</Select.Empty>
-        }
-        setup({
-          ...props,
-          components: { Empty },
-        })
-
-        fire.change(screen.getByTestId('select-trigger-search-field'), {
-          target: { value: 'foo' },
-        })
-
-        expect(await screen.findByTestId('custom-empty')).toHaveTextContent('No fruit found.')
-      }
-    )
-
-    it.each([[{ multiple: true }], [{ multiple: false }]])(
-      'overrides the creatable option component - %s',
-      async (args) => {
-        setup({
-          components: { CreatableOption },
-          onCreate: jest.fn(),
-          ...args,
-        })
-
-        fire.change(screen.getByTestId('select-trigger-search-field'), {
-          target: { value: 'foo' },
-        })
-
-        await waitFor(() => {
-          expect(screen.getByTestId('custom-creatable')).toHaveTextContent('Add item')
-        })
-      }
-    )
-
-    it.each([[{ multiple: false }], [{ multiple: true }]])(
-      'calls onCreate when custom creatable option is clicked - %s',
-      async (args) => {
-        const onCreate = jest.fn()
-        setup({
-          components: { CreatableOption },
-          onCreate,
-          ...args,
-        })
-
-        const searchInput = screen.getByLabelText('Select your favorite fruit')
-
-        await act(async () => {
-          fire.change(searchInput, {
-            target: { value: 'foo' },
-          })
-
-          const creatableOption = await screen.findByTestId('custom-creatable')
-
-          fire.click(creatableOption)
-        })
-
-        expect(onCreate).toBeCalledWith('foo')
-      }
-    )
-  })
-
-  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 })
-
-        const searchInput = screen.getByLabelText('Select your favorite fruit')
-        fire.change(searchInput, {
-          target: { value: 'foo' },
-        })
-
-        await waitFor(() => {
-          screen.getByText('No results found.')
-          expect(screen.queryByText('Add "foo"')).not.toBeInTheDocument()
-        })
-      }
-    )
-
-    it.each([[{ multiple: false }], [{ multiple: true }]])(
-      '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()
-        })
-      }
-    )
-
-    it.each([[{ multiple: false }], [{ multiple: true }]])(
-      'renders creatable option at the end of the list when the entered query is not equal one of the available options - %s',
-      async (args) => {
-        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 },
-        })
-
-        await waitFor(() => {
-          expect(screen.getByLabelText(availableOption)).toBeInTheDocument()
-        })
-        expect(screen.getByText(`Add "${query}"`)).toBeInTheDocument()
-      }
-    )
-
-    it.each([[{ multiple: false }], [{ multiple: true }]])(
-      'does not render creatable option at the end of the list when the onCreate prop is not provided - %s',
-      async (args) => {
-        setup({
-          onCreate: null as unknown as undefined,
-          ...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 },
-        })
-
-        await screen.findByLabelText(availableOption)
-        await waitFor(() => {
-          expect(screen.queryByText(`Add "${query}"`)).not.toBeInTheDocument()
-        })
-      }
-    )
-
-    it.each([[{ multiple: false }], [{ multiple: true }]])(
-      'does not render creatable option at the end of the list when the entered query is equal one of the available options - %s',
-      async (args) => {
-        setup({
-          ...args,
-        })
-        const { label: availableOption } = generator.pickone([...FRUITS])
-        const searchInput = screen.getByLabelText('Select your favorite fruit')
-
-        fire.change(searchInput, {
-          target: { value: availableOption },
-        })
-
-        await screen.findByLabelText(availableOption)
-        await waitFor(() => {
-          expect(screen.queryByText(`Add "${availableOption}"`)).not.toBeInTheDocument()
-        })
-      }
-    )
-
-    it.each([[{ multiple: false }], [{ multiple: true }]])(
-      'does not render creatable option when no query is provided - %s',
-      async (args) => {
-        setup({
-          ...args,
-        })
-        const { label: availableOption } = generator.pickone([...FRUITS])
-        const searchInput = screen.getByLabelText('Select your favorite fruit')
-
-        await selectEvent.expand(searchInput)
-
-        await screen.findByLabelText(availableOption)
-        await waitFor(() => {
-          expect(screen.queryByText('Add ""')).not.toBeInTheDocument()
-        })
-      }
-    )
-
-    it.each([[{ multiple: false }], [{ multiple: true }]])(
-      'calls onCreate when creatable option is clicked - %s',
-      async (args) => {
-        const onCreate = jest.fn()
-        setup({ onCreate, ...args })
-        const searchInput = screen.getByLabelText('Select your favorite fruit')
-
-        await act(async () => {
-          fire.change(searchInput, {
-            target: { value: 'foo' },
-          })
-
-          const creatableOption = await screen.findByText('Add "foo"')
-
-          fire.click(creatableOption)
-        })
-
-        expect(onCreate).toBeCalledWith('foo')
-      }
-    )
-
-    it.each([[{ multiple: false }], [{ multiple: true }]])(
-      'calls onChange with the new item when onCreate returns the item - %s',
-      async (args) => {
-        const query = 'foo'
-        const newItem: Fruit = { label: query, value: query, family: '' }
-        const value = args.multiple ? [newItem] : newItem
-        const onChange = jest.fn()
-        const onCreate = jest.fn().mockReturnValue(newItem)
-
-        setup({ onCreate, onChange, ...args })
-
-        const searchInput = screen.getByLabelText('Select your favorite fruit')
-
-        await act(async () => {
-          fire.change(searchInput, {
-            target: { value: query },
-          })
-
-          const creatableOption = await screen.findByText(`Add "${query}"`)
-
-          fire.click(creatableOption)
-        })
-
-        expect(onChange).toBeCalledWith({
-          target: {
-            id: 'select-creatable-sync',
-            name: 'select-creatable-sync',
-            value,
-          },
-        })
-      }
-    )
-
-    it.each([[{ multiple: false }], [{ multiple: true }]])(
-      "does not call onChange when onCreate doesn't return the item - %s",
-      async (args) => {
-        const query = 'foo'
-        const onChange = jest.fn()
-        const onCreate = jest.fn()
-
-        setup({ onCreate, onChange, ...args })
-
-        const searchInput = screen.getByLabelText('Select your favorite fruit')
-
-        await act(async () => {
-          fire.change(searchInput, {
-            target: { value: query },
-          })
-
-          const creatableOption = await screen.findByText(`Add "${query}"`)
-
-          fire.click(creatableOption)
-        })
-
-        expect(onChange).not.toBeCalled()
-      }
-    )
-
-    it.each([[{ multiple: false }], [{ multiple: true }]])(
-      'fetches items after onCreate callback is called - %s',
-      async (args) => {
-        const dsFetch = jest.fn()
-        const datasources = [
-          () => ({
-            type: 'user',
-            adapter: {
-              getKey: jest.fn().mockReturnValue('foo'),
-              getLabel: jest.fn().mockReturnValue('foo'),
-            },
-            fetch: dsFetch,
-          }),
-        ]
-        setup({ datasources, ...args })
-        const searchInput = screen.getByLabelText('Select your favorite fruit')
-
-        await act(async () => {
-          fire.change(searchInput, {
-            target: { value: 'foo' },
-          })
-
-          const creatableOption = await screen.findByText('Add "foo"')
-
-          fire.click(creatableOption)
-        })
-
-        await waitFor(() => {
-          expect(dsFetch).toBeCalledTimes(2)
-        })
-        expect(dsFetch).lastCalledWith({ query: 'foo', regex: expect.anything() })
-      }
-    )
-
-    it.each([[{ multiple: false }], [{ multiple: true }]])(
-      'renders fixed creatable option when isValidNewOption is passed - %s',
-      async (args) => {
-        setup({ ...args, isValidNewOption: true })
-
-        const searchInput = screen.getByLabelText('Select your favorite fruit')
-        await selectEvent.expand(searchInput)
-
-        await waitFor(() => {
-          expect(screen.getByText(/add ""/i)).toBeInTheDocument()
-        })
-      }
-    )
-
-    it.each([[{ multiple: false }], [{ multiple: true }]])(
-      'renders creatable option as first item - %s',
-      async (args) => {
-        setup({ ...args, isValidNewOption: true, createOptionPosition: 'first' })
-
-        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)
-      }
-    )
-
-    it.each([[{ multiple: false }], [{ multiple: true }]])(
-      'renders creatable option as last item - %s',
-      async (args) => {
-        setup({ ...args, isValidNewOption: true, createOptionPosition: 'last' })
-
-        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)
-      }
-    )
-
-    it.each([[{ multiple: false }], [{ multiple: true }]])(
-      'keep creatable option on the list even when any value is selected - %s',
-      async (args) => {
-        const CreatableOption = () => {
-          return (
-            <Select.CreatableOption data-testid="custom-creatable">Add item</Select.CreatableOption>
-          )
-        }
-        const value = generator.pickone([...FRUITS]) as Selectable
-        setup({
-          ...args,
-          isValidNewOption: true,
-          createOptionPosition: 'first',
-          value,
-          components: {
-            CreatableOption,
-          },
-        })
-
-        const searchInput = screen.getByLabelText('Select your favorite fruit')
-        await selectEvent.expand(searchInput)
-        expect(await screen.findByText(/add item/i)).toBeVisible()
-      }
-    )
-
-    it.each([[{ multiple: false }], [{ multiple: true }]])(
-      'show creatable option on the list even when option list is empty - %s',
-      async (args) => {
-        const CreatableOption = () => {
-          return <Select.CreatableOption>Add item</Select.CreatableOption>
-        }
-        setup({
-          ...args,
-          isValidNewOption: true,
-          createOptionPosition: 'first',
-          options: [],
-          components: {
-            CreatableOption,
-          },
-        })
-
-        const searchInput = screen.getByLabelText('Select your favorite fruit')
-        await selectEvent.expand(searchInput)
-        expect(await screen.findByText(/add item/i)).toBeVisible()
-      }
-    )
-  })
-
-  describe('Creatable Async', () => {
-    const setup = (overrides: Partial<SelectProps>) =>
-      renderer(<CreatableAsync {...overrides} />).render()
-
-    it('fetchs items after call onCreate callback - async', async () => {
-      const dsFetch = jest.fn()
-      const onCreate = jest.fn()
-      const datasources = [
-        () => ({
-          type: 'user',
-          adapter: {
-            getKey: jest.fn().mockReturnValue('foo'),
-            getLabel: jest.fn().mockReturnValue('foo'),
-          },
-          fetch: dsFetch,
-        }),
-      ]
-      setup({ datasources, onCreate })
-      const searchInput = screen.getByLabelText('Select the project manager')
-
-      fire.change(searchInput, {
-        target: { value: 'foo' },
-      })
-      const creatableOption = await screen.findByText('Add "foo"')
-      fire.click(creatableOption)
-
-      await waitFor(
-        () => {
-          expect(dsFetch).toBeCalledTimes(2)
-        },
-        { timeout: 5000 }
-      )
-      expect(dsFetch).lastCalledWith({ query: 'foo', regex: expect.anything() })
-    })
-
-    it.each([[{ multiple: false }], [{ multiple: true }]])(
-      'calls onChange with the new item when onCreate resolves the item - %s',
-      async (args) => {
-        const query = 'foo'
-        const newItem = { uuid: query, name: query, _type: 'user' }
-        const value = args.multiple ? [newItem] : newItem
-        const onChange = jest.fn()
-        const onCreate = jest.fn().mockResolvedValue(newItem)
-
-        setup({ onCreate, onChange, ...args })
-        const searchInput = screen.getByLabelText('Select the project manager')
-
-        fire.change(searchInput, {
-          target: { value: query },
-        })
-        await waitFor(() => screen.findByTestId('select-trigger-loading'))
-
-        const creatableOption = await screen.findByText(`Add "${query}"`, undefined, {
-          timeout: 2500,
-        })
-        fire.click(creatableOption)
-
-        await waitFor(() => {
-          expect(onChange).toBeCalledWith({
-            target: {
-              id: 'select-creatable-async',
-              name: 'select-creatable-async',
-              value,
-            },
-          })
-        })
-      }
-    )
-  })
-
-  describe('SelectableKeyType Options', () => {
-    const setup = (overrides: Partial<SelectProps>) =>
-      renderer(<Playground {...overrides} options={SelectableKeyTypeOptions} />).render()
-
-    const expectedValue = (value: unknown) => ({
-      target: {
-        id: 'select-playground',
-        name: 'select-playground',
-        value,
-      },
-    })
-
-    it.each(SelectableKeyTypeOptions)('selects single option: %s', async (option) => {
-      const onChange = jest.fn()
-      setup({ onChange })
-
-      const searchInput = screen.getByLabelText('Select your favorite fruit')
-
-      await selectEvent.select(option.label, searchInput)
-      const selectedOptions = await selectEvent.getSelectedOptions(searchInput)
-      expect(selectedOptions).toHaveLength(1)
-      expect(selectedOptions[0]).toHaveTextContent(option.label)
-      expect(onChange).toBeCalledWith(expectedValue({ _type: 'generic', ...option }))
-    })
-
-    it.each(SelectableKeyTypeOptions)('selects multiple options %s', async (option) => {
-      const onChange = jest.fn()
-      setup({ onChange, multiple: true })
-
-      const searchInput = screen.getByLabelText('Select your favorite fruit')
-
-      await selectEvent.select(option.label, searchInput)
-      const selectedOptions = await selectEvent.getSelectedOptions(searchInput)
-      expect(selectedOptions).toHaveLength(1)
-      expect(selectedOptions[0]).toHaveTextContent(option.label)
-      expect(onChange).toBeCalledWith(expectedValue([{ _type: 'generic', ...option }]))
-    })
-
-    it('selects all options', async () => {
-      setup({ multiple: true })
-
-      const searchInput = screen.getByLabelText('Select your favorite fruit')
-      for (let i = 0; i < SelectableKeyTypeOptions.length; i++) {
-        await selectEvent.select(SelectableKeyTypeOptions[i].label, searchInput)
-      }
-
-      const selectedOptions = await selectEvent.getSelectedOptions(searchInput)
-      expect(selectedOptions).toHaveLength(SelectableKeyTypeOptions.length)
-
-      for (let i = 0; i < selectedOptions.length; i++) {
-        const element = selectedOptions[i]
-        expect(element).toHaveTextContent(SelectableKeyTypeOptions[i].label)
-      }
-
-      await selectEvent.expand(searchInput)
-      expect(screen.getByText('No more options.')).toBeInTheDocument()
-    })
-  })
-})