components#AutoComplete TypeScript Examples

The following examples show how to use components#AutoComplete. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.test.tsx    From geist-ui with MIT License 5 votes vote down vote up 
describe('AutoComplete', () => {
  it('should render correctly', () => {
    const wrapper = mount(<AutoComplete />)
    expect(() => wrapper.unmount()).not.toThrow()
    expect(<AutoComplete />).toMatchSnapshot()
  })

  it('should support sizes and status', () => {
    const wrapper = mount(
      <div>
        <AutoComplete type="secondary" />
        <AutoComplete type="success" />
        <AutoComplete />
        <AutoComplete />
      </div>,
    )
    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('should set input value from initial value', () => {
    let wrapper = mount(<AutoComplete initialValue="value" />)
    let input = wrapper.find('input').at(0).getDOMNode()
    expect((input as HTMLInputElement).value).toEqual('value')

    wrapper = mount(<AutoComplete value="value2" />)
    input = wrapper.find('input').at(0).getDOMNode()
    expect((input as HTMLInputElement).value).toEqual('value2')
  })

  it('should render clear icon', async () => {
    const wrapper = mount(<AutoComplete initialValue="value" />)
    expect(wrapper.find('svg').length).toBe(0)

    await act(async () => {
      wrapper.setProps({ clearable: true })
    })
    expect(wrapper.find('svg').length).toBe(1)

    wrapper.find('svg').simulate('click', nativeEvent)
    const input = wrapper.find('input').at(0).getDOMNode()
    expect((input as HTMLInputElement).value).toEqual('')
  })

  it('should reponse width change', async () => {
    const wrapper = mount(<AutoComplete initialValue="value" width="100px" />)
    expect(wrapper.prop('width')).toEqual('100px')
    await act(async () => {
      wrapper.setProps({ width: '200px' })
    })

    expect(wrapper.prop('width')).toEqual('200px')
  })

  it('should forward ref by default', () => {
    const ref = React.createRef<HTMLInputElement>()
    const wrapper = mount(<AutoComplete ref={ref} />)
    expect(ref.current).not.toBeNull()
    expect(() => wrapper.unmount()).not.toThrow()
  })
})
Example #2
Source File: use-input.test.tsx    From geist-ui with MIT License 5 votes vote down vote up 
describe('UseInput', () => {
  it('should follow change with use-input', () => {
    let log = ''
    const logSpy = jest.spyOn(console, 'log').mockImplementation(msg => (log = msg))
    const MockInput: React.FC<{ value?: string }> = ({ value }) => {
      const { state, setState, bindings } = useInput('')
      useEffect(() => {
        if (value) setState(value)
      }, [value])
      useEffect(() => {
        if (state) console.log(state)
      }, [state])
      return <AutoComplete {...bindings} />
    }

    const wrapper = mount(<MockInput />)
    wrapper.setProps({ value: 'test' })
    const input = wrapper.find('input').at(0).getDOMNode() as HTMLInputElement

    expect(input.value).toEqual('test')
    expect(log).toContain('test')

    log = ''
    wrapper
      .find('input')
      .at(0)
      .simulate('change', { target: { value: 'test-change' } })
    expect(log).toContain('test-change')
    logSpy.mockRestore()
  })

  it('should follow change with use-input', () => {
    const MockInput: React.FC<{ value?: string; resetValue?: boolean }> = ({
      value,
      resetValue,
    }) => {
      const { reset, setState, bindings } = useInput('')
      useEffect(() => {
        if (value) setState(value)
      }, [value])
      useEffect(() => {
        if (resetValue) reset()
      }, [resetValue])
      return <AutoComplete {...bindings} />
    }

    const wrapper = mount(<MockInput />)
    wrapper.setProps({ value: 'test' })
    let input = wrapper.find('input').at(0).getDOMNode() as HTMLInputElement
    expect(input.value).toEqual('test')

    wrapper.setProps({ resetValue: true })
    input = wrapper.find('input').at(0).getDOMNode() as HTMLInputElement
    expect(input.value).toEqual('')
  })
})
Example #3
Source File: search.test.tsx    From geist-ui with MIT License 4 votes vote down vote up 
describe('AutoComplete Search', () => {
  it('should render options element', () => {
    const wrapper = mount(<AutoComplete options={mockOptions} />)
    wrapper.find('input').at(0).simulate('focus')
    let dropdown = wrapper.find('.auto-complete-dropdown').children()
    expect(dropdown.length).not.toBe(0)

    wrapper.find('input').at(0).simulate('blur')
    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('should update value when dropdown clicked', () => {
    let value = ''
    const wrapper = mount(
      <AutoComplete options={mockOptions} onChange={val => (value = val)} />,
    )
    wrapper.find('input').at(0).simulate('focus')
    wrapper.find('.item').at(0).simulate('click', nativeEvent)
    expect(value).toEqual('london')
  })

  it('should ignore events when disabled', () => {
    let value = ''
    const wrapper = mount(
      <AutoComplete disabled options={mockOptions} onChange={val => (value = val)} />,
    )
    wrapper.find('input').at(0).simulate('focus')
    wrapper.find('.item').at(0).simulate('click', nativeEvent)
    expect(value).not.toEqual('london')
  })

  it('should render searching component', async () => {
    let wrapper = mount(<AutoComplete searching={false} options={mockOptions} />)
    await act(async () => {
      wrapper.setProps({ searching: true })
    })
    wrapper.find('input').at(0).simulate('focus')
    let dropdown = wrapper.find('.auto-complete-dropdown')
    expect(dropdown.text()).not.toContain('london')

    const loading = wrapper.find('.loading')
    expect(loading.length).not.toBe(0)

    wrapper = mount(
      <AutoComplete searching options={mockOptions}>
        <AutoComplete.Searching>
          <span>waiting...</span>
        </AutoComplete.Searching>
      </AutoComplete>,
    )
    wrapper.find('input').at(0).simulate('focus')
    dropdown = wrapper.find('.auto-complete-dropdown')
    expect(dropdown.text()).toContain('waiting')
  })

  it('should hide empty component', () => {
    let wrapper = render(
      <AutoComplete placeholder="Enter here">
        <AutoComplete.Empty hidden />
      </AutoComplete>,
    )
    expect(wrapper).toMatchSnapshot()

    wrapper = render(
      <AutoComplete placeholder="Enter here">
        <AutoComplete.Empty>empty</AutoComplete.Empty>
      </AutoComplete>,
    )
    expect(wrapper).toMatchSnapshot()

    const mountWrapper = mount(
      <AutoComplete placeholder="Enter here" initialValue="value">
        <AutoComplete.Empty>empty</AutoComplete.Empty>
      </AutoComplete>,
    )
    mountWrapper.find('input').at(0).simulate('focus')
    const text = mountWrapper.find('.auto-complete-dropdown').text()
    expect(text).toContain('empty')

    const mountWrapper2 = mount(
      <AutoComplete placeholder="Enter here" initialValue="value">
        <AutoComplete.Empty hidden>empty</AutoComplete.Empty>
      </AutoComplete>,
    )
    mountWrapper2.find('input').at(0).simulate('focus')
    const text2 = mountWrapper2.find('.auto-complete-dropdown').text()
    expect(text2).not.toContain('empty')
  })

  it('should trigger search handler', () => {
    const handler = jest.fn()
    const wrapper = mount(<AutoComplete initialValue="value" onSearch={handler} />)
    const input = wrapper.find('input').at(0)
    input.simulate('focus')
    input.simulate('change')
    ;(input.getDOMNode() as HTMLInputElement).value = 'value'
    expect(handler).toHaveBeenCalled()
  })

  it('should trigger select and change handler', () => {
    const selectHandler = jest.fn()
    const changeHandler = jest.fn()
    const wrapper = mount(
      <AutoComplete
        options={mockOptions}
        initialValue="value"
        onSelect={selectHandler}
        onChange={changeHandler}
      />,
    )
    wrapper.find('input').at(0).simulate('focus')
    wrapper.find('.item').at(0).simulate('click', nativeEvent)
    expect(selectHandler).toHaveBeenCalled()
    expect(changeHandler).toHaveBeenCalled()
  })

  it('should work with custom options', () => {
    const changeHandler = jest.fn()
    const makeOption = (label: string, value: string): any => (
      <AutoComplete.Option value={value}>
        <span>{label}</span>
      </AutoComplete.Option>
    )
    const options = mockOptions.map(
      ({ label, value }) => makeOption(label, value) as typeof AutoComplete.Option,
    )
    const wrapper = mount(<AutoComplete options={options} onChange={changeHandler} />)
    wrapper.find('input').at(0).simulate('focus')
    wrapper.find('.item').at(0).simulate('click', nativeEvent)
    expect(changeHandler).toHaveBeenCalled()
  })

  it('should work correctly without options', () => {
    const wrapper = mount(<AutoComplete options={[]} />)
    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('value should be reset when freeSolo disabled', async () => {
    const wrapper = mount(<AutoComplete initialValue="value" disableFreeSolo />)
    const input = wrapper.find('input').at(0)
    input.simulate('focus')
    input.simulate('change', { target: { value: 'test' } })
    expect((input.getDOMNode() as HTMLInputElement).value).toEqual('test')
    input.simulate('blur')
    await updateWrapper(wrapper, 200)
    expect((input.getDOMNode() as HTMLInputElement).value).toEqual('value')
  })
})