From 5f70d73660704e196c4411341a5c88f29a866ae9 Mon Sep 17 00:00:00 2001 From: Alexander Fedyashov Date: Tue, 6 Jun 2017 12:17:05 +0300 Subject: [PATCH] test(Dropdown): add missing tests --- .../Types/ContainerExampleContainer.js | 22 ++-- src/modules/Dropdown/Dropdown.js | 23 +--- test/specs/modules/Dropdown/Dropdown-test.js | 118 ++++++++++++++++-- 3 files changed, 116 insertions(+), 47 deletions(-) diff --git a/docs/app/Examples/elements/Container/Types/ContainerExampleContainer.js b/docs/app/Examples/elements/Container/Types/ContainerExampleContainer.js index ee3ce5bbb2..3f45a31c48 100644 --- a/docs/app/Examples/elements/Container/Types/ContainerExampleContainer.js +++ b/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 = () => ( -
- -
- -
+const ContainerExampleContainer = () => ( + +

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.

+ ) -export default DropdownExampleSearchSelection +export default ContainerExampleContainer diff --git a/src/modules/Dropdown/Dropdown.js b/src/modules/Dropdown/Dropdown.js index c835a65846..a5dc3e7dab 100644 --- a/src/modules/Dropdown/Dropdown.js +++ b/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 diff --git a/test/specs/modules/Dropdown/Dropdown-test.js b/test/specs/modules/Dropdown/Dropdown-test.js index 9a2730206c..e57bfe539f 100644 --- a/test/specs/modules/Dropdown/Dropdown-test.js +++ b/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() + 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() + + wrapper.simulate('click') + dropdownMenuIsOpen() + + wrapper.simulate('click') + dropdownMenuIsClosed() + }) + + it("opens the dropdown when it's searchable, but don't close", () => { + wrapperMount() + + 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() + + wrapper.simulate('click') + dropdownMenuIsClosed() + }) + }) + + describe('onFocus', () => { + it('is called with (event, props)', () => { + const onFocus = sandbox.spy() + wrapperMount() + wrapper.simulate('focus') + + onFocus.should.have.been.calledOnce() + onFocus.should.have.been.calledWithMatch({ }, { options }) + }) + + it("opens the dropdown when it's not searchable", () => { + wrapperMount() + + wrapper.simulate('focus') + dropdownMenuIsOpen() + }) + + it("opens the dropdown when it's searchable", () => { + wrapperMount() + + wrapper.simulate('focus') + dropdownMenuIsOpen() + }) + + it("don't open the dropdown when it's searchable and minCharacters is more that default value", () => { + wrapperMount() + + 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() + + 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() + 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() - - 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() @@ -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() + wrapper.simulate('click') + + wrapper.find('input.search') + .simulate('change', { target: { value: 'foo' } }) + domEvent.keyDown(document, { key: 'Enter' }) + + dropdownMenuIsOpen() + }) }) describe('no results message', () => {