test(Dropdown): add missing tests

docs/app/Examples/elements/Container/Types/ContainerExampleContainer.js

@@ -1,18 +1,12 @@
-import React from 'react'
-import { Dropdown } from 'semantic-ui-react'
+/* eslint-disable max-len */
 
-const countryOptions = [
-   { key: 'af', value: 'af', flag: 'af', text: 'Afghanistan' },
-   { key: 'ae', value: 'ae', flag: 'ae', text: 'United Arab Emirates' },
-   { key: 'us', value: 'us', flag: 'us', text: 'United States' },
-]
+import React from 'react'
+import { Container } from 'semantic-ui-react'
 
-const DropdownExampleSearchSelection = () => (
-  <div>
-    <Dropdown placeholder='Min 1' fluid search selection options={countryOptions} />
-    <br />
-    <Dropdown placeholder='Min 3' fluid search selection minCharacters={3} options={countryOptions} />
-  </div>
+const ContainerExampleContainer = () => (
+  <Container>
+    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.</p>
+  </Container>
 )
 
-export default DropdownExampleSearchSelection
+export default ContainerExampleContainer

src/modules/Dropdown/Dropdown.js

@@ -494,10 +494,8 @@ export default class Dropdown extends Component {
   // onChange needs to receive a value
   // can't rely on props.value if we are controlled
   handleChange = (e, value) => {
-    debug('handleChange()')
-    debug(value)
-    const { onChange } = this.props
-    if (onChange) onChange(e, { ...this.props, value })
+    debug('handleChange()', value)
+    _.invoke(this.props, 'onChange', e, { ...this.props, value })
   }
 
   closeOnChange = (e) => {
@@ -1025,22 +1023,7 @@ export default class Dropdown extends Component {
     this.setState({ focus: hasFocus })
   }
 
-  toggle = (e) => {
-    if (!this.state.open) {
-      this.open(e)
-      return
-    }
-
-    const { search } = this.props
-    const options = this.getMenuOptions()
-
-    if (search && _.isEmpty(options)) {
-      e.preventDefault()
-      return
-    }
-
-    this.close(e)
-  }
+  toggle = e => this.state.open ? this.close(e) : this.open(e)
 
   // ----------------------------------------
   // Render

test/specs/modules/Dropdown/Dropdown-test.js

@@ -1420,6 +1420,76 @@ describe('Dropdown', () => {
     })
   })
 
+  describe('onClick', () => {
+    it('is called with (event, props)', () => {
+      const onClick = sandbox.spy()
+      wrapperMount(<Dropdown onClick={onClick} options={options} />)
+      wrapper.simulate('click', { stopPropagation: _.noop })
+
+      onClick.should.have.been.calledOnce()
+      onClick.should.have.been.calledWithMatch({ }, { options })
+    })
+
+    it("toggles the dropdown when it's not searchable", () => {
+      wrapperMount(<Dropdown options={options} />)
+
+      wrapper.simulate('click')
+      dropdownMenuIsOpen()
+
+      wrapper.simulate('click')
+      dropdownMenuIsClosed()
+    })
+
+    it("opens the dropdown when it's searchable, but don't close", () => {
+      wrapperMount(<Dropdown options={options} search />)
+
+      wrapper.simulate('click')
+      dropdownMenuIsOpen()
+
+      wrapper.simulate('click')
+      dropdownMenuIsOpen()
+    })
+
+    it("don't open the dropdown when it's searchable and minCharacters is more that default value", () => {
+      wrapperMount(<Dropdown minCharacters={3} options={options} search />)
+
+      wrapper.simulate('click')
+      dropdownMenuIsClosed()
+    })
+  })
+
+  describe('onFocus', () => {
+    it('is called with (event, props)', () => {
+      const onFocus = sandbox.spy()
+      wrapperMount(<Dropdown onFocus={onFocus} options={options} />)
+      wrapper.simulate('focus')
+
+      onFocus.should.have.been.calledOnce()
+      onFocus.should.have.been.calledWithMatch({ }, { options })
+    })
+
+    it("opens the dropdown when it's not searchable", () => {
+      wrapperMount(<Dropdown options={options} />)
+
+      wrapper.simulate('focus')
+      dropdownMenuIsOpen()
+    })
+
+    it("opens the dropdown when it's searchable", () => {
+      wrapperMount(<Dropdown options={options} search />)
+
+      wrapper.simulate('focus')
+      dropdownMenuIsOpen()
+    })
+
+    it("don't open the dropdown when it's searchable and minCharacters is more that default value", () => {
+      wrapperMount(<Dropdown minCharacters={3} options={options} search />)
+
+      wrapper.simulate('focus')
+      dropdownMenuIsClosed()
+    })
+  })
+
   describe('onSearchChange', () => {
     it('is called with (event, value) on search input change', () => {
       const spy = sandbox.spy()
@@ -1430,6 +1500,30 @@ describe('Dropdown', () => {
       spy.should.have.been.calledOnce()
       spy.should.have.been.calledWithMatch({ target: { value: 'a' } }, 'a')
     })
+
+    it("don't open the menu on change if query's length is less than minCharacters", () => {
+      wrapperMount(<Dropdown minCharacters={3} options={options} selection search />)
+
+      dropdownMenuIsClosed()
+
+      // simulate search with query's length is less than minCharacters
+      wrapper
+        .find('input.search')
+        .simulate('change', { target: { value: 'a' } })
+
+      dropdownMenuIsClosed()
+    })
+
+    it("closes the opened menu on change if query's length is less than minCharacters", () => {
+      wrapperMount(<Dropdown minCharacters={3} options={options} selection search />)
+      const input = wrapper.find('input.search')
+
+      input.simulate('change', { target: { value: 'abc' } })
+      dropdownMenuIsOpen()
+
+      input.simulate('change', { target: { value: 'a' } })
+      dropdownMenuIsClosed()
+    })
   })
 
   describe('options', () => {
@@ -1618,19 +1712,6 @@ describe('Dropdown', () => {
       dropdownMenuIsOpen()
     })
 
-    it("Don't open the menu on change if query's length is less than minCharacters", () => {
-      wrapperMount(<Dropdown options={options} selection search minCharacters={4} />)
-
-      dropdownMenuIsClosed()
-
-      // simulate search with query's length is less than minCharacters
-      wrapper
-        .find('input.search')
-        .simulate('change', { target: { value: faker.hacker.noun().substring(0, 1) } })
-
-      dropdownMenuIsClosed()
-    })
-
     it('does not call onChange on query change', () => {
       const onChangeSpy = sandbox.spy()
       wrapperMount(<Dropdown options={options} selection search onChange={onChangeSpy} />)
@@ -1737,6 +1818,17 @@ describe('Dropdown', () => {
         .at(1)
         .should.not.have.prop('selected', true)
     })
+
+    it('does not close the menu when options are empty', () => {
+      wrapperMount(<Dropdown options={options} search selection />)
+      wrapper.simulate('click')
+
+      wrapper.find('input.search')
+        .simulate('change', { target: { value: 'foo' } })
+      domEvent.keyDown(document, { key: 'Enter' })
+
+      dropdownMenuIsOpen()
+    })
   })
 
   describe('no results message', () => {