From 7ad2385677d9c30ccc342b4ae9d32863020689c8 Mon Sep 17 00:00:00 2001 From: Alexander Valchev Date: Fri, 8 Apr 2016 14:58:55 +0300 Subject: [PATCH] fix(dropdownlist): fix open/close behaviour when list item is clicked --- src/DropDownList.jsx | 5 +++-- src/ListDefaultItem.jsx | 3 ++- src/ListItem.jsx | 3 ++- test/ComboBox.jsx | 9 +++++---- test/DropDownList.jsx | 34 +++++++++++++++------------------- test/Helpers.jsx | 5 +++++ test/List.jsx | 9 +++++---- test/ListItem.jsx | 3 ++- 8 files changed, 39 insertions(+), 32 deletions(-) diff --git a/src/DropDownList.jsx b/src/DropDownList.jsx index 48549de..67d8da2 100644 --- a/src/DropDownList.jsx +++ b/src/DropDownList.jsx @@ -345,6 +345,7 @@ export default class DropDownList extends React.Component { //TODO: aria attributes, title - + {this.renderValue()} - + diff --git a/src/ListDefaultItem.jsx b/src/ListDefaultItem.jsx index ffa5178..b040ee0 100644 --- a/src/ListDefaultItem.jsx +++ b/src/ListDefaultItem.jsx @@ -33,7 +33,8 @@ export default class ListDefaultItem extends React.Component { event.preventDefault(); }; - onClick = () => { + onClick = (event) => { + event.preventDefault(); const dataItem = this.props.dataItem; this.props.onClick((typeof(dataItem) === "object" ? dataItem : null)); }; diff --git a/src/ListItem.jsx b/src/ListItem.jsx index eae98f0..72ba31e 100644 --- a/src/ListItem.jsx +++ b/src/ListItem.jsx @@ -41,7 +41,8 @@ export default class ListItem extends React.Component { event.preventDefault(); }; - onClick = () => { + onClick = (event) => { + event.preventDefault(); this.props.onClick(this.props.dataItem, this.props.index); }; diff --git a/test/ComboBox.jsx b/test/ComboBox.jsx index d3d9c38..174f43b 100644 --- a/test/ComboBox.jsx +++ b/test/ComboBox.jsx @@ -1,5 +1,6 @@ import * as React from 'react'; import { shallow } from 'enzyme'; +import { click } from './Helpers'; import List from '../src/List'; import ListItem from '../src/ListItem'; import ComboBox from '../src/ComboBox'; @@ -56,7 +57,7 @@ describe('ComboBox', () => { expect(result.state('dataItem')).toEqual(null); expect(result.state('value')).toEqual(''); - items.at(1).shallow().simulate('click'); + click(items.at(1).shallow()); expect(result.state('dataItem')).toEqual(data[1]); expect(result.state('value')).toEqual(data[1].value); }); @@ -67,7 +68,7 @@ describe('ComboBox', () => { expect(result.state('dataItem')).toEqual(null); expect(result.state('value')).toEqual(''); - items.at(1).shallow().simulate('click'); + click(items.at(1).shallow()); expect(result.state('dataItem')).toEqual(primitives[1]); expect(result.state('value')).toEqual(primitives[1]); }); @@ -77,7 +78,7 @@ describe('ComboBox', () => { result = shallow(); const items = result.find(ComboBox).shallow().find(List).shallow().find(ListItem); - items.at(3).shallow().simulate('click'); + click(items.at(3).shallow()); expect(spy).toHaveBeenCalledWith(data[3].value); }); @@ -86,7 +87,7 @@ describe('ComboBox', () => { result = shallow(); const items = result.find(ComboBox).shallow().find(List).shallow().find(ListItem); - items.at(2).shallow().simulate('click'); + click(items.at(2).shallow()); expect(spy).toHaveBeenCalledWith(primitives[2]); }); }); diff --git a/test/DropDownList.jsx b/test/DropDownList.jsx index 0e035d2..ad336cf 100644 --- a/test/DropDownList.jsx +++ b/test/DropDownList.jsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { shallow } from 'enzyme'; import keycode from 'keycode'; -import { keyPress, lastCallArgs } from './Helpers'; +import { click, keyPress, lastCallArgs } from './Helpers'; import List from '../src/List'; import ListItem from '../src/ListItem'; @@ -187,7 +187,7 @@ describe('DropDownList list click', () => { ); const items = result.find(List).shallow().find(ListItem); - items.at(1).shallow().simulate('click'); + click(items.at(1).shallow()); expect(spy).toHaveBeenCalledWith({ text: "bar", value: 2 }); }); @@ -197,7 +197,7 @@ describe('DropDownList list click', () => { result = shallow(); const items = result.find(List).shallow().find(ListItem); - items.at(1).shallow().simulate('click'); + click(items.at(1).shallow()); expect(spy).toHaveBeenCalledWith("bar"); }); @@ -216,11 +216,11 @@ describe('DropDownList list click', () => { ); const items = result.find(List).shallow().find(ListItem); - items.at(1).shallow().simulate('click'); + click(items.at(1).shallow()); expect(spy).not.toHaveBeenCalled(); }); - it('should fire onOpen on arrow click', () => { + it('should fire onOpen on DropDownList click', () => { const spy = jasmine.createSpy('spy'); const mock = function() {}; result = shallow( @@ -232,13 +232,12 @@ describe('DropDownList list click', () => { valueField="value" /> ); - const arrow = result.find("span.k-select"); - arrow.simulate("click"); + click(result); expect(spy).toHaveBeenCalled(); }); - it('should NOT fire onOpen for disabled component on arrow click', () => { + it('should NOT fire onOpen for disabled component on DropDownList click', () => { const spy = jasmine.createSpy('spy'); result = shallow( { valueField="value" /> ); - const arrow = result.find("span.k-select"); - arrow.simulate("click"); + click(result); expect(spy).not.toHaveBeenCalled(); }); - it('should NOT fire onOpen on arrow click when the list has no data and no defaultItem', () => { + it('should NOT fire onOpen on DropDownList click when the list has no data and no defaultItem', () => { const spy = jasmine.createSpy('spy'); result = shallow(); - const arrow = result.find("span.k-select"); - arrow.simulate("click"); + click(result); expect(spy).not.toHaveBeenCalled(); }); - it('should fire onOpen on arrow click when the list has no data but is filterable', () => { + it('should fire onOpen on DropDownList click when the list has no data but is filterable', () => { const spy = jasmine.createSpy('spy'); result = shallow( { valueField="value" /> ); - const arrow = result.find("span.k-select"); - arrow.simulate("click"); + click(result); expect(spy).toHaveBeenCalled(); }); }); @@ -919,7 +915,7 @@ describe('DropDownList change event', () => { result = shallow(); const items = result.find(DropDownList).shallow().find(List).shallow().find(ListItem); - items.at(1).shallow().simulate('click'); + click(items.at(1).shallow()); expect(spy).toHaveBeenCalledWith("bar"); }); @@ -937,7 +933,7 @@ describe('DropDownList change event', () => { ); const defaultItem = result.find(DropDownList).shallow().find(ListDefaultItem).shallow(); - defaultItem.simulate('click'); + click(defaultItem); expect(spy).toHaveBeenCalledWith(null); }); @@ -947,7 +943,7 @@ describe('DropDownList change event', () => { result = shallow(); const defaultItem = result.find(DropDownList).shallow().find(ListDefaultItem).shallow(); - defaultItem.simulate('click'); + click(defaultItem); expect(spy).toHaveBeenCalledWith(null); }); diff --git a/test/Helpers.jsx b/test/Helpers.jsx index c5b7f0f..e4d3bae 100644 --- a/test/Helpers.jsx +++ b/test/Helpers.jsx @@ -1,3 +1,7 @@ +function click(shallowWrapper, args) { + shallowWrapper.simulate('click', { preventDefault: function() {}, ...args }); +} + function keyPress(shallowWrapper, key) { let charCode, keyCode; charCode = keyCode = String(key).charCodeAt(0); @@ -9,6 +13,7 @@ function lastCallArgs(spy) { } export { + click, keyPress, lastCallArgs }; diff --git a/test/List.jsx b/test/List.jsx index e2e12d6..d538cd0 100644 --- a/test/List.jsx +++ b/test/List.jsx @@ -1,5 +1,6 @@ import * as React from 'react'; import { shallow } from 'enzyme'; +import { click } from './Helpers'; import ListItem from '../src/ListItem'; import List from '../src/List'; @@ -49,10 +50,10 @@ describe('List', () => { result = shallow(); const items = result.find(ListItem); - items.at(0).shallow().simulate('click'); + click(items.at(0).shallow()); expect(spy).toHaveBeenCalledWith({ text: 'foo', value: 1 }, 0); - items.at(1).shallow().simulate('click'); + click(items.at(1).shallow()); expect(spy).toHaveBeenCalledWith({ text: 'bar', value: 2 }, 1); }); @@ -61,10 +62,10 @@ describe('List', () => { result = shallow(); const items = result.find(ListItem); - items.at(0).shallow().simulate('click'); + click(items.at(0).shallow()); expect(spy).toHaveBeenCalledWith("foo", 0); - items.at(1).shallow().simulate('click'); + click(items.at(1).shallow()); expect(spy).toHaveBeenCalledWith("bar", 1); }); }); diff --git a/test/ListItem.jsx b/test/ListItem.jsx index 728b7ae..a0533a8 100644 --- a/test/ListItem.jsx +++ b/test/ListItem.jsx @@ -1,5 +1,6 @@ import * as React from 'react'; import { shallow } from 'enzyme'; +import { click } from './Helpers'; import ListItem from '../src/ListItem'; describe('ListItem', () => { @@ -41,7 +42,7 @@ describe('ListItem', () => { const spy = jasmine.createSpy('spy'); const index = 1; result = shallow(); - result.simulate('click'); + click(result); expect(spy).toHaveBeenCalledWith({ text: 'foo', value: 1 }, index); }); });