Repository: h2oai/wave
File: ui/src/dropdown.test.tsx (TypeScript)

Code before:
      expect(getAllByRole('listitem')).toHaveLength(40) // Fluent Detaillist uses virtualization, so only first 40 listitems are rendered.
      fireEvent.change(getByTestId(`${name}-search`), { target: { value: '22' } })
      expect(getAllByRole('listitem')).toHaveLength(1)
      fireEvent.click(getByText('Select'))
      fireEvent.click(getByTestId(name))
      expect(getAllByRole('listitem')).toHaveLength(40) // Fluent Detaillist uses virtualization, so only first 40 listitems are rendered.
    })

    it('Resets filtered items on single valued submit', () => {
      const { getByTestId, getAllByRole } = render(<XDropdown model={dialogProps} />)

      fireEvent.click(getByTestId(name))
      expect(getAllByRole('listitem')).toHaveLength(40) // Fluent Detaillist uses virtualization, so only first 40 listitems are rendered.
      fireEvent.change(getByTestId(`${name}-search`), { target: { value: '22' } })
      expect(getAllByRole('listitem')).toHaveLength(1)
      fireEvent.click(getAllByRole('checkbox')[0])
      fireEvent.click(getByTestId(name))
      expect(getAllByRole('listitem')).toHaveLength(40) // Fluent Detaillist uses virtualization, so only first 40 listitems are rendered.
    })

    it(`Displays dialog when choices > 100 and 'popup' prop is not provided`, () => {
      const { getByTestId, getAllByRole  } = render(<XDropdown model={dialogProps} />)

      fireEvent.click(getByTestId(name))

      expect(getAllByRole('dialog')).toBeDefined()
    })

    it(`Displays dialog when choices > 100 and 'popup' prop is set as 'auto'`, () => {
      const { getByTestId, getAllByRole  } = render(<XDropdown model={dialogProps} />)

      fireEvent.click(getByTestId(name))

      expect(getAllByRole('dialog')).toBeDefined()
    })

    it(`Displays dialog when choices < 100 and 'popup' prop is set as 'always'`, () => {
      dialogProps.popup = 'always'
      dialogProps.choices = [{ name: 'A' }]
      const { getByTestId, getAllByRole  } = render(<XDropdown model={dialogProps} />)

      fireEvent.click(getByTestId(name))

      expect(getAllByRole('dialog')).toBeDefined()
    })

    it(`Displays dialog when choices > 100 and 'popup' prop is set as 'never'`, () => {
      dialogProps.popup = 'never'
      const { getByTestId, getAllByRole  } = render(<XDropdown model={dialogProps} />)

      fireEvent.click(getByTestId(name))

Review comment (suggestion):
No need for `getAll` since there should always be just a single dialog. Also `toBeDefined` is not that great of an assertion, more readable would be `toBeVisible` or `toBeInTheDocument`. Apply the same to the rest of test cases as well.

```suggestion
const { getByTestId, queryByRole } = render(<XDropdown model={dialogProps} />)

      expect(queryByRole('dialog')).not.toBeInTheDocument()
      fireEvent.click(getByTestId(name))
      expect(queryByRole('dialog')).toBeInTheDocument()
```

Code after:
      expect(getAllByRole('listitem')).toHaveLength(40) // Fluent Detaillist uses virtualization, so only first 40 listitems are rendered.
      fireEvent.change(getByTestId(`${name}-search`), { target: { value: '22' } })
      expect(getAllByRole('listitem')).toHaveLength(1)
      fireEvent.click(getByText('Select'))
      fireEvent.click(getByTestId(name))
      expect(getAllByRole('listitem')).toHaveLength(40) // Fluent Detaillist uses virtualization, so only first 40 listitems are rendered.
    })

    it('Resets filtered items on single valued submit', () => {
      const { getByTestId, getAllByRole } = render(<XDropdown model={dialogProps} />)

      fireEvent.click(getByTestId(name))
      expect(getAllByRole('listitem')).toHaveLength(40) // Fluent Detaillist uses virtualization, so only first 40 listitems are rendered.
      fireEvent.change(getByTestId(`${name}-search`), { target: { value: '22' } })
      expect(getAllByRole('listitem')).toHaveLength(1)
      fireEvent.click(getAllByRole('checkbox')[0])
      fireEvent.click(getByTestId(name))
      expect(getAllByRole('listitem')).toHaveLength(40) // Fluent Detaillist uses virtualization, so only first 40 listitems are rendered.
    })

    it(`Displays dialog when choices > 100 and 'popup' prop is not provided`, () => {
      const { getByTestId, queryByRole } = render(<XDropdown model={dialogProps} />)

      expect(queryByRole('dialog')).not.toBeInTheDocument()
      fireEvent.click(getByTestId(name))
      expect(queryByRole('dialog')).toBeInTheDocument()
    })

    it(`Displays dialog when choices > 100 and 'popup' prop is set as 'auto'`, () => {
      const { getByTestId, queryByRole } = render(<XDropdown model={dialogProps} />)

      expect(queryByRole('dialog')).not.toBeInTheDocument()
      fireEvent.click(getByTestId(name))
      expect(queryByRole('dialog')).toBeInTheDocument()
    })

    it(`Displays dialog when choices < 100 and 'popup' prop is set as 'always'`, () => {
      dialogProps.popup = 'always'
      dialogProps.choices = [{ name: 'A' }]
      const { getByTestId, queryByRole } = render(<XDropdown model={dialogProps} />)

      expect(queryByRole('dialog')).not.toBeInTheDocument()
      fireEvent.click(getByTestId(name))
      expect(queryByRole('dialog')).toBeInTheDocument()
    })

    it(`Does not displays dialog when choices > 100 and 'popup' prop is set as 'never'`, () => {
      dialogProps.popup = 'never'
      const { getByTestId, queryByRole } = render(<XDropdown model={dialogProps} />)

      fireEvent.click(getByTestId(name))