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

Code before:
      })
  
      it('Sets args to manually selected option', () => {
        const { getByRole, getByTitle } = render(<XCombobox model={{ ...comboboxProps }} />)
        fireEvent.click(getByRole('presentation', { hidden: true }))
        fireEvent.click(getByTitle('A'))
        expect(wave.args[name]).toBe('A')

        fireEvent.click(getByRole('presentation', { hidden: true }))
        fireEvent.click(getByTitle('B'))
        expect(wave.args[name]).toBe('B')
      })

      it('Calls sync when trigger is on', () => {
        const { getByRole, getByText } = render(<XCombobox model={{ ...comboboxProps, trigger: true }} />)
    
        fireEvent.click(getByRole('presentation', { hidden: true }))
        fireEvent.click(getByText('A'))
    
        expect(pushMock).toHaveBeenCalled()
      })

      it('Sets wave args as string when a new valued is typed after init', () => {
        const { getByRole } = render(<XCombobox model={{ ...comboboxProps, value: 'A' }} />)
    
        userEvent.type(getByRole('combobox'), '{backspace}D{enter}')
    
        expect(wave.args[name]).toBe('D')
      })
    })

    describe('Prop changes - update values dynamically from Wave app', () => {
      it('Displays new options in options list when "choices" prop is updated', () => {
        const { getByRole, getAllByRole, rerender } = render(<XCombobox model={{ ...comboboxProps, value: 'A' }} />)
        fireEvent.click(getByRole('presentation', { hidden: true }))
        expect(getAllByRole('option')).toHaveLength(3)
  
        rerender(<XCombobox model={{ ...comboboxProps, choices: ['A', 'B'] }} />)
        expect(getAllByRole('option')).toHaveLength(2)
      })

      it('Updates combobox value when "value" prop changes', () => {
        const { getByRole, getByText, rerender } = render(<XCombobox model={{ ...comboboxProps, value: 'A' }} />)
        expect(getByRole('combobox')).toHaveValue('A')
        expect(wave.args[name]).toEqual('A')
  
        rerender(<XCombobox model={{ ...comboboxProps, value: 'B' }} />)
        expect(getByRole('combobox')).toHaveValue('B')
        expect(wave.args[name]).toEqual('B')
        
        fireEvent.click(getByRole('presentation', { hidden: true }))

Review comment (suggestion):
Enter shouldn't be required.
```suggestion
        userEvent.type(getByRole('combobox'), '{backspace}D')
```

Code after:
      })
  
      it('Sets args to manually selected option', () => {
        const { getByRole, getByTitle } = render(<XCombobox model={{ ...comboboxProps }} />)
        fireEvent.click(getByRole('presentation', { hidden: true }))
        fireEvent.click(getByTitle('A'))
        expect(wave.args[name]).toBe('A')

        fireEvent.click(getByRole('presentation', { hidden: true }))
        fireEvent.click(getByTitle('B'))
        expect(wave.args[name]).toBe('B')
      })

      it('Calls sync when trigger is on', () => {
        const { getByRole, getByText } = render(<XCombobox model={{ ...comboboxProps, trigger: true }} />)
    
        fireEvent.click(getByRole('presentation', { hidden: true }))
        fireEvent.click(getByText('A'))
    
        expect(pushMock).toHaveBeenCalled()
      })

      it('Sets wave args as string when a new valued is typed and enter is pressed - after init', () => {
        const { getByRole } = render(<XCombobox model={{ ...comboboxProps, value: 'A' }} />)
        expect(wave.args[name]).toBe('A')
        userEvent.type(getByRole('combobox'), '{backspace}D{enter}')
        expect(wave.args[name]).toBe('D')
      })

      it('Sets wave args as string when a new valued is typed and user clicks away - after init', () => {
        const { getByRole } = render(<XCombobox model={{ ...comboboxProps, value: 'A' }} />)
    
        expect(wave.args[name]).toBe('A')

        userEvent.type(getByRole('combobox'), '{backspace}D')
        // fireEvent.blur(getByRole('combobox')) doesn't trigger blur. Might be related to https://github.com/testing-library/user-event/issues/592
        getByRole('combobox').blur()
        fireEvent.focusOut(getByRole('combobox'))

        expect(getByRole('combobox')).not.toHaveFocus()
        expect(wave.args[name]).toBe('D')
      })

      it('Sets wave args as string when a new valued is typed and tab is pressed - after init', () => {
        const { getByRole } = render(<XCombobox model={{ ...comboboxProps, value: 'A' }} />)
    
        expect(wave.args[name]).toBe('A')

        userEvent.type(getByRole('combobox'), '{backspace}D')
        userEvent.tab()