test(auto-complete): add testcase

components/auto-complete/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AutoComplete should render correctly 1`] = `
+<AutoComplete
+  className=""
+  clearable={false}
+  disabled={false}
+  initialValue=""
+  options={Array []}
+  size="medium"
+/>
+`;

components/auto-complete/__tests__/index.test.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import { AutoComplete } from '../../index'
+import { nativeEvent } from '../../../tests/utils'
+
+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 status="secondary" />
+        <AutoComplete status="success" />
+        <AutoComplete size="mini" />
+        <AutoComplete size="large" />
+      </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', () => {
+    const wrapper = mount(<AutoComplete initialValue="value" />)
+    expect(wrapper.find('svg').length).toBe(0)
+  
+    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', () => {
+    const wrapper = mount(<AutoComplete initialValue="value" width="100px" />)
+    expect(wrapper.prop('width')).toEqual('100px')
+    
+    wrapper.setProps({ width: '200px' })
+    expect(wrapper.prop('width')).toEqual('200px')
+  })
+})

components/auto-complete/__tests__/search.test.tsx

@@ -0,0 +1,142 @@
+import React from 'react'
+import { mount, render } from 'enzyme'
+import { AutoComplete } from '../../index'
+import { nativeEvent } from '../../../tests/utils'
+const mockOptions = [
+  { label: 'London', value: 'london' },
+]
+
+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', () => {
+    let wrapper = mount(
+      <AutoComplete searching={false} options={mockOptions}/>
+    )
+    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()
+  })
+
+})