Add autocomplete test part three
This commit is contained in:
LautaroCesso
parent
118b7e97cf
commit
e63809400c
|
|
@ -44,7 +44,7 @@ class DemoPage extends React.Component {
|
|||
|
||||
render() {
|
||||
let itemsList = [
|
||||
{id: 45, name: 'Lautaro', content: 'Lautaro.', color: 'gray'},
|
||||
{id: 45, name: 'lautaro', content: 'Lautaro.', color: 'gray'},
|
||||
{id: 46, name: 'dsafa', content: 'dsafa', color: 'black'},
|
||||
{id: 47, name: 'asdasdasd', content: 'asdasdasd.', color: 'red'},
|
||||
{id: 48, name: '123123123', content: '123123123.', color: 'blue'},
|
||||
|
|
@ -54,15 +54,17 @@ class DemoPage extends React.Component {
|
|||
return (
|
||||
<div>
|
||||
<Autocomplete
|
||||
items={itemsList}
|
||||
values={this.state.selectedList}
|
||||
onChange={selectedList => this.setState({selectedList: selectedList})} />
|
||||
<button onClick={() => this.setState({selectedList: []})}>clear</button>
|
||||
|
||||
items={itemsList}
|
||||
values={this.state.selectedList}
|
||||
onChange={selectedList => this.setState({selectedList: selectedList})} />
|
||||
<button onClick={() =>
|
||||
this.setState({
|
||||
selectedList: [], })
|
||||
}>clear</button>
|
||||
<Autocomplete
|
||||
values={this.state.selectedList2}
|
||||
getItemListFromQuery={searchApi}
|
||||
onChange={selectedList => this.setState({selectedList2: selectedList})} />
|
||||
values={this.state.selectedList2}
|
||||
getItemListFromQuery={searchApi}
|
||||
onChange={selectedList => this.setState({selectedList2: selectedList})} />
|
||||
<button onClick={() => {
|
||||
this.setState({selectedList2: []});
|
||||
}}>clear</button>
|
||||
|
|
|
|||
|
|
@ -49,14 +49,14 @@ const searchApi = spy((query, blacklist = []) => {
|
|||
});
|
||||
|
||||
describe('Autocomplete component with external api', function () {
|
||||
let selectedList2 = [], autocompleteInput, autocompleteDropdown;
|
||||
let selectedList = [], autocompleteInput, autocompleteDropdown, autocompleteWithExternalApi, tag;
|
||||
function renderAutocomplete(props) {
|
||||
selectedList2 = [];
|
||||
selectedList = [];
|
||||
|
||||
let autocompleteWithExternalApi = TestUtils.renderIntoDocument(
|
||||
autocompleteWithExternalApi = TestUtils.renderIntoDocument(
|
||||
<Autocomplete
|
||||
getItemListFromQuery={searchApi}
|
||||
onChange={selectedList => selectedList2 = selectedList} />
|
||||
onChange={selectedListAutocomplete => selectedList = selectedListAutocomplete} />
|
||||
);
|
||||
|
||||
autocompleteInput = TestUtils.scryRenderedDOMComponentsWithClass(autocompleteWithExternalApi, 'autocomplete__input')[0];
|
||||
|
|
@ -69,132 +69,432 @@ describe('Autocomplete component with external api', function () {
|
|||
});
|
||||
|
||||
it('should open menu with list', function() {
|
||||
expect(searchApi).to.have.been.calledWith("", selectedList2.map(item => item.id));
|
||||
expect(searchApi).to.have.been.calledWith("", selectedList.map(item => item.id));
|
||||
expect(selectedList.length).to.equal(0);
|
||||
|
||||
autocompleteInput.value = "ho";
|
||||
TestUtils.Simulate.change(autocompleteInput);
|
||||
|
||||
expect(autocompleteDropdown.props.opened).to.equal(true);
|
||||
expect(autocompleteDropdown.props.loading).to.equal(true);
|
||||
return timeout(function () {
|
||||
expect(searchApi).to.have.been.calledWith("ho", selectedList2.map(item => item.id));
|
||||
expect(autocompleteDropdown.props.loading).to.equal(false);
|
||||
expect(autocompleteDropdown.props.items.length).to.equal(4);
|
||||
expect(selectedList2.length).to.equal(0);
|
||||
autocompleteDropdown.props.onChange({index: 1});
|
||||
expect(searchApi).to.have.been.calledWith("", selectedList2.map(item => item.id));
|
||||
expect(selectedList2[0].name).to.equal("honduras");
|
||||
expect(autocompleteDropdown.props.opened).to.equal(false);
|
||||
}, 360);
|
||||
expect(selectedList.length).to.equal(0);
|
||||
});
|
||||
|
||||
it('should select item if enter is pressed', function() {
|
||||
expect(searchApi).to.have.been.calledWith("", selectedList2.map(item => item.id));
|
||||
expect(searchApi).to.have.been.calledWith("", selectedList.map(item => item.id));
|
||||
expect(selectedList.length).to.equal(0);
|
||||
|
||||
autocompleteInput.value = "argentina";
|
||||
TestUtils.Simulate.change(autocompleteInput);
|
||||
|
||||
expect(autocompleteDropdown.props.opened).to.equal(true);
|
||||
expect(autocompleteDropdown.props.loading).to.equal(true);
|
||||
return timeout(function () {
|
||||
expect(searchApi).to.have.been.calledWith("argentina", selectedList2.map(item => item.id));
|
||||
|
||||
return timeout(function() {
|
||||
expect(autocompleteDropdown.props.loading).to.equal(false);
|
||||
expect(searchApi).to.have.been.calledWith("argentina", selectedList.map(item => item.id));
|
||||
expect(autocompleteDropdown.props.items.length).to.equal(1);
|
||||
expect(selectedList2.length).to.equal(0);
|
||||
expect(autocompleteDropdown.props.items[0].name).to.equal("argentina");
|
||||
expect(autocompleteDropdown.props.items[0].id).to.equal(10);
|
||||
expect(selectedList.length).to.equal(0);
|
||||
|
||||
autocompleteDropdown.props.onChange({index: 0});
|
||||
expect(searchApi).to.have.been.calledWith("", selectedList2.map(item => item.id));
|
||||
expect(selectedList2.length).to.equal(1);
|
||||
|
||||
expect(autocompleteDropdown.props.opened).to.equal(false);
|
||||
expect(searchApi).to.have.been.calledWith("", selectedList.map(item => item.id));
|
||||
expect(selectedList.length).to.equal(1);
|
||||
expect(selectedList[0].name).to.equal("argentina");
|
||||
expect(selectedList[0].id).to.equal(10);
|
||||
}, 360);
|
||||
});
|
||||
|
||||
it("should sinc", function() {
|
||||
expect(searchApi).to.have.been.calledWith("", selectedList2.map(item => item.id));
|
||||
it('should sinc', function() {
|
||||
expect(searchApi).to.have.been.calledWith("", selectedList.map(item => item.id));
|
||||
expect(selectedList.length).to.equal(0);
|
||||
|
||||
autocompleteInput.value = "brazilq";
|
||||
TestUtils.Simulate.change(autocompleteInput);
|
||||
|
||||
expect(autocompleteDropdown.props.opened).to.equal(true);
|
||||
expect(autocompleteDropdown.props.loading).to.equal(true);
|
||||
return timeout(function () {
|
||||
expect(searchApi).to.have.not.been.calledWith("brazil", selectedList2.map(item => item.id));
|
||||
|
||||
return timeout(function() {
|
||||
expect(autocompleteDropdown.props.loading).to.equal(true);
|
||||
expect(searchApi).to.have.not.been.calledWith("brazil", selectedList.map(item => item.id));
|
||||
expect(selectedList.length).to.equal(0);
|
||||
|
||||
autocompleteInput.value = "brazil";
|
||||
TestUtils.Simulate.change(autocompleteInput);
|
||||
return timeout(function () {
|
||||
expect(searchApi).to.have.been.calledWith("brazil", selectedList2.map(item => item.id));
|
||||
expect(autocompleteDropdown.props.opened).to.equal(true);
|
||||
|
||||
expect(autocompleteDropdown.props.opened).to.equal(true);
|
||||
expect(autocompleteDropdown.props.loading).to.equal(true);
|
||||
|
||||
return timeout(function() {
|
||||
expect(autocompleteDropdown.props.loading).to.equal(false);
|
||||
expect(searchApi).to.have.been.calledWith("brazil", selectedList.map(item => item.id));
|
||||
expect(autocompleteDropdown.props.items.length).to.equal(1);
|
||||
expect(selectedList2.length).to.equal(0);
|
||||
expect(autocompleteDropdown.props.items[0].name).to.equal("brazil");
|
||||
expect(autocompleteDropdown.props.items[0].id).to.equal(30);
|
||||
expect(selectedList.length).to.equal(0);
|
||||
|
||||
autocompleteDropdown.props.onChange({index: 0});
|
||||
expect(searchApi).to.have.been.calledWith("", selectedList2.map(item => item.id));
|
||||
|
||||
expect(autocompleteDropdown.props.opened).to.equal(false);
|
||||
expect(selectedList2.length).to.equal(1);
|
||||
expect(selectedList2[0].name).to.equal("brazil");
|
||||
expect(searchApi).to.have.been.calledWith("", selectedList.map(item => item.id));
|
||||
expect(autocompleteDropdown.props.opened).to.equal(false);
|
||||
expect(selectedList.length).to.equal(1);
|
||||
expect(selectedList[0].name).to.equal("brazil");
|
||||
expect(selectedList[0].id).to.equal(30);
|
||||
|
||||
autocompleteDropdown.props.onMenuToggle(true);
|
||||
|
||||
expect(autocompleteDropdown.props.opened).to.equal(true);
|
||||
expect(autocompleteDropdown.props.items.length).to.equal(0);
|
||||
}, 360);
|
||||
}, 50);
|
||||
}, 25);
|
||||
});
|
||||
|
||||
it("should delete item if backspace is pressed and input value is '' ", function() {
|
||||
expect(searchApi).to.have.been.calledWith("", selectedList2.map(item => item.id));
|
||||
autocompleteInput.value = "za";
|
||||
TestUtils.Simulate.change(autocompleteInput);
|
||||
expect(autocompleteDropdown.props.opened).to.equal(true);
|
||||
expect(autocompleteDropdown.props.loading).to.equal(true);
|
||||
return timeout(function () {
|
||||
expect(searchApi).to.have.been.calledWith("za", selectedList2.map(item => item.id));
|
||||
autocompleteDropdown.props.onChange({index: 3});
|
||||
expect(searchApi).to.have.been.calledWith("", selectedList2.map(item => item.id));
|
||||
expect(selectedList2[0].name).to.equal("zambia");
|
||||
expect(selectedList2.length).to.equal(1);
|
||||
TestUtils.Simulate.keyDown(autocompleteInput, {key: 'backspace', keyCode: 8, which: 8});
|
||||
expect(searchApi).to.have.been.calledWith("", selectedList2.map(item => item.id));
|
||||
expect(selectedList2.length).to.equal(0);
|
||||
autocompleteInput.value = "";
|
||||
TestUtils.Simulate.change(autocompleteInput);
|
||||
expect(searchApi).to.have.been.calledWith("", selectedList2.map(item => item.id));
|
||||
TestUtils.Simulate.keyDown(autocompleteInput, {key: 'backspace', keyCode: 8, which: 8});
|
||||
expect(searchApi).to.have.been.calledWith("", selectedList2.map(item => item.id));
|
||||
expect(selectedList2.length).to.equal(0);
|
||||
}, 360);
|
||||
});
|
||||
it('should delete item if backspace is pressed and input value is ""', function() {
|
||||
expect(searchApi).to.have.been.calledWith("", selectedList.map(item => item.id));
|
||||
expect(selectedList.length).to.equal(0);
|
||||
|
||||
it("should ...", function() {
|
||||
expect(searchApi).to.have.been.calledWith("", selectedList2.map(item => item.id));
|
||||
autocompleteInput.value = "ang";
|
||||
TestUtils.Simulate.change(autocompleteInput);
|
||||
|
||||
expect(autocompleteDropdown.props.opened).to.equal(true);
|
||||
expect(autocompleteDropdown.props.loading).to.equal(true);
|
||||
return timeout(function () {
|
||||
expect(searchApi).to.have.been.calledWith("ang", selectedList2.map(item => item.id));
|
||||
|
||||
return timeout(function() {
|
||||
expect(autocompleteDropdown.props.loading).to.equal(false);
|
||||
expect(searchApi).to.have.been.calledWith("ang", selectedList.map(item => item.id));
|
||||
expect(autocompleteDropdown.props.items.length).to.equal(3);
|
||||
expect(autocompleteDropdown.props.items[0].name).to.equal("angola");
|
||||
expect(autocompleteDropdown.props.items[0].id).to.equal(6);
|
||||
expect(selectedList.length).to.equal(0);
|
||||
|
||||
autocompleteDropdown.props.onChange({index: 0});
|
||||
expect(searchApi).to.have.been.calledWith("", selectedList2.map(item => item.id));
|
||||
expect(selectedList2[0].name).to.equal("angola");
|
||||
expect(selectedList2.length).to.equal(1);
|
||||
|
||||
expect(autocompleteDropdown.props.opened).to.equal(false);
|
||||
expect(searchApi).to.have.been.calledWith("", selectedList.map(item => item.id));
|
||||
expect(selectedList.length).to.equal(1);
|
||||
expect(selectedList[0].name).to.equal("angola");
|
||||
expect(selectedList[0].id).to.equal(6);
|
||||
|
||||
autocompleteInput.value = "ang";
|
||||
TestUtils.Simulate.change(autocompleteInput);
|
||||
|
||||
expect(autocompleteDropdown.props.opened).to.equal(true);
|
||||
expect(autocompleteDropdown.props.loading).to.equal(true);
|
||||
|
||||
return timeout(function() {
|
||||
expect(searchApi).to.have.been.calledWith("ang", selectedList2.map(item => item.id));
|
||||
expect(autocompleteDropdown.props.loading).to.equal(false);
|
||||
expect(searchApi).to.have.been.calledWith("ang", selectedList.map(item => item.id));
|
||||
expect(autocompleteDropdown.props.items.length).to.equal(2);
|
||||
expect(autocompleteDropdown.props.items[0].name).to.equal("anguilla");
|
||||
expect(autocompleteDropdown.props.items[0].id).to.equal(7);
|
||||
expect(selectedList.length).to.equal(1);
|
||||
|
||||
autocompleteDropdown.props.onChange({index: 0});
|
||||
expect(searchApi).to.have.been.calledWith("", selectedList2.map(item => item.id));
|
||||
expect(selectedList2.length).to.equal(2);
|
||||
expect(selectedList2[1].name).to.equal("anguilla");
|
||||
|
||||
expect(autocompleteDropdown.props.opened).to.equal(false);
|
||||
expect(searchApi).to.have.been.calledWith("", selectedList.map(item => item.id));
|
||||
expect(selectedList.length).to.equal(2);
|
||||
expect(selectedList[0].name).to.equal("angola");
|
||||
expect(selectedList[0].id).to.equal(6);
|
||||
expect(selectedList[1].name).to.equal("anguilla");
|
||||
expect(selectedList[1].id).to.equal(7);
|
||||
expect(autocompleteDropdown.props.items.length).to.equal(1);
|
||||
expect(autocompleteDropdown.props.items[0].name).to.equal("bangladesh");
|
||||
expect(autocompleteDropdown.props.items[0].id).to.equal(18);
|
||||
|
||||
TestUtils.Simulate.keyDown(autocompleteInput, {key: 'backspace', keyCode: 8, which: 8});
|
||||
expect(selectedList2.length).to.equal(1);
|
||||
expect(searchApi).to.have.been.calledWith("", selectedList2.map(item => item.id));
|
||||
|
||||
expect(searchApi).to.have.been.calledWith("", selectedList.map(item => item.id));
|
||||
expect(selectedList.length).to.equal(1);
|
||||
expect(selectedList[0].name).to.equal("angola");
|
||||
expect(selectedList[0].id).to.equal(6);
|
||||
|
||||
autocompleteInput.value = "ang";
|
||||
TestUtils.Simulate.change(autocompleteInput);
|
||||
|
||||
expect(autocompleteDropdown.props.opened).to.equal(true);
|
||||
expect(autocompleteDropdown.props.loading).to.equal(true);
|
||||
|
||||
return timeout(function() {
|
||||
expect(searchApi).to.have.been.calledWith("ang", selectedList2.map(item => item.id));
|
||||
expect(autocompleteDropdown.props.loading).to.equal(false);
|
||||
expect(searchApi).to.have.been.calledWith("ang", selectedList.map(item => item.id));
|
||||
expect(autocompleteDropdown.props.items.length).to.equal(2);
|
||||
expect(autocompleteDropdown.props.items[0].name).to.equal("anguilla");
|
||||
expect(autocompleteDropdown.props.items[0].id).to.equal(7);
|
||||
expect(selectedList.length).to.equal(1);
|
||||
}, 360);
|
||||
},360);
|
||||
}, 360);
|
||||
});
|
||||
|
||||
it("should delete item if click is pressed", function() {
|
||||
expect(searchApi).to.have.been.calledWith("", selectedList.map(item => item.id));
|
||||
expect(selectedList.length).to.equal(0);
|
||||
|
||||
autocompleteInput.value = "ang";
|
||||
TestUtils.Simulate.change(autocompleteInput);
|
||||
|
||||
expect(autocompleteDropdown.props.opened).to.equal(true);
|
||||
expect(autocompleteDropdown.props.loading).to.equal(true);
|
||||
|
||||
return timeout(function () {
|
||||
expect(autocompleteDropdown.props.loading).to.equal(false);
|
||||
expect(searchApi).to.have.been.calledWith("ang", selectedList.map(item => item.id));
|
||||
expect(autocompleteDropdown.props.items.length).to.equal(3);
|
||||
expect(selectedList.length).to.equal(0);
|
||||
|
||||
autocompleteDropdown.props.onChange({index: 0});
|
||||
|
||||
expect(autocompleteDropdown.props.opened).to.equal(false);
|
||||
expect(searchApi).to.have.been.calledWith("", selectedList.map(item => item.id));
|
||||
expect(selectedList.length).to.equal(1);
|
||||
expect(selectedList[0].name).to.equal("angola");
|
||||
expect(selectedList[0].id).to.equal(6);
|
||||
|
||||
tag = TestUtils.scryRenderedComponentsWithType(autocompleteWithExternalApi, Tag)[0];
|
||||
tag.props.onRemoveClick({ preventDefault: stub() });
|
||||
|
||||
expect(selectedList.length).to.equal(0);
|
||||
|
||||
autocompleteInput.value = "ang";
|
||||
TestUtils.Simulate.change(autocompleteInput);
|
||||
|
||||
expect(autocompleteDropdown.props.opened).to.equal(true);
|
||||
expect(autocompleteDropdown.props.loading).to.equal(true);
|
||||
|
||||
return timeout(function () {
|
||||
expect(autocompleteDropdown.props.loading).to.equal(false);
|
||||
expect(searchApi).to.have.been.calledWith("ang", selectedList.map(item => item.id));
|
||||
expect(autocompleteDropdown.props.items.length).to.equal(3);
|
||||
expect(autocompleteDropdown.props.items[0].name).to.equal("angola");
|
||||
expect(autocompleteDropdown.props.items[0].id).to.equal(6);
|
||||
expect(selectedList.length).to.equal(0);
|
||||
}, 360);
|
||||
}, 360);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Autocomplete component with items', function() {
|
||||
let selectedList = [], autocompleteInput, autocompleteDropdown, itemsList, autocomplete;
|
||||
function renderAutocomplete(props) {
|
||||
selectedList = [];
|
||||
itemsList = [
|
||||
{id: 45, name: 'lautaro', content: 'Lautaro.', color: 'gray'},
|
||||
{id: 46, name: 'dsafa', content: 'dsafa', color: 'black'},
|
||||
{id: 47, name: 'asdasdasd', content: 'asdasdasd.', color: 'red'},
|
||||
{id: 48, name: '123123123', content: '123123123.', color: 'blue'},
|
||||
{id: 49, name: 'hola', content: 'hola', color: 'green'},
|
||||
];
|
||||
|
||||
autocomplete = TestUtils.renderIntoDocument(
|
||||
<Autocomplete
|
||||
items={itemsList}
|
||||
onChange={selectedListAutocomplete => selectedList = selectedListAutocomplete} />
|
||||
);
|
||||
|
||||
autocompleteInput = TestUtils.scryRenderedDOMComponentsWithClass(autocomplete, 'autocomplete__input')[0];
|
||||
autocompleteDropdown = TestUtils.scryRenderedComponentsWithType(autocomplete, DropDown)[0];
|
||||
}
|
||||
|
||||
beforeEach(function() {
|
||||
renderAutocomplete();
|
||||
});
|
||||
|
||||
it('should open menu with list', function() {
|
||||
expect(selectedList.length).to.equal(0);
|
||||
|
||||
autocompleteInput.value = "la";
|
||||
TestUtils.Simulate.change(autocompleteInput);
|
||||
|
||||
expect(autocompleteDropdown.props.opened).to.equal(true);
|
||||
expect(autocompleteDropdown.props.items.length).to.equal(2);
|
||||
});
|
||||
|
||||
it('should select item if enter is pressed', function() {
|
||||
expect(selectedList.length).to.equal(0);
|
||||
|
||||
autocompleteInput.value = "la";
|
||||
TestUtils.Simulate.change(autocompleteInput);
|
||||
|
||||
expect(autocompleteDropdown.props.opened).to.equal(true);
|
||||
expect(autocompleteDropdown.props.items.length).to.equal(2);
|
||||
expect(autocompleteDropdown.props.items[0].name).to.equal("lautaro");
|
||||
expect(autocompleteDropdown.props.items[0].id).to.equal(45);
|
||||
expect(autocompleteDropdown.props.items[1].name).to.equal("hola");
|
||||
expect(autocompleteDropdown.props.items[1].id).to.equal(49);
|
||||
|
||||
autocompleteDropdown.props.onChange({index: 0});
|
||||
|
||||
expect(autocompleteDropdown.props.opened).to.equal(false);
|
||||
expect(selectedList.length).to.equal(1);
|
||||
expect(selectedList[0].name).to.equal("lautaro");
|
||||
expect(selectedList[0].id).to.equal(45);
|
||||
|
||||
autocompleteInput.value = "";
|
||||
TestUtils.Simulate.change(autocompleteInput);
|
||||
|
||||
expect(autocompleteDropdown.props.opened).to.equal(true);
|
||||
expect(autocompleteDropdown.props.items.length).to.equal(4);
|
||||
expect(autocompleteDropdown.props.items[0].name).to.equal("dsafa");
|
||||
expect(autocompleteDropdown.props.items[0].id).to.equal(46);
|
||||
expect(autocompleteDropdown.props.items[1].name).to.equal("asdasdasd");
|
||||
expect(autocompleteDropdown.props.items[1].id).to.equal(47);
|
||||
expect(autocompleteDropdown.props.items[2].name).to.equal("123123123");
|
||||
expect(autocompleteDropdown.props.items[2].id).to.equal(48);
|
||||
expect(autocompleteDropdown.props.items[3].name).to.equal("hola");
|
||||
expect(autocompleteDropdown.props.items[3].id).to.equal(49);
|
||||
|
||||
autocompleteDropdown.props.onChange({index: 2});
|
||||
|
||||
expect(autocompleteDropdown.props.opened).to.equal(false);
|
||||
expect(selectedList.length).to.equal(2);
|
||||
expect(selectedList[0].name).to.equal("lautaro");
|
||||
expect(selectedList[0].id).to.equal(45);
|
||||
expect(selectedList[1].name).to.equal("123123123");
|
||||
expect(selectedList[1].id).to.equal(48);
|
||||
|
||||
autocompleteInput.value = "";
|
||||
TestUtils.Simulate.change(autocompleteInput);
|
||||
|
||||
expect(autocompleteDropdown.props.opened).to.equal(true);
|
||||
expect(autocompleteDropdown.props.items.length).to.equal(3);
|
||||
expect(autocompleteDropdown.props.items[0].name).to.equal("dsafa");
|
||||
expect(autocompleteDropdown.props.items[0].id).to.equal(46);
|
||||
expect(autocompleteDropdown.props.items[1].name).to.equal("asdasdasd");
|
||||
expect(autocompleteDropdown.props.items[1].id).to.equal(47);
|
||||
expect(autocompleteDropdown.props.items[2].name).to.equal("hola");
|
||||
expect(autocompleteDropdown.props.items[2].id).to.equal(49);
|
||||
|
||||
autocompleteInput.value = "lau";
|
||||
TestUtils.Simulate.change(autocompleteInput);
|
||||
|
||||
expect(autocompleteDropdown.props.opened).to.equal(true);
|
||||
expect(autocompleteDropdown.props.items.length).to.equal(0);
|
||||
|
||||
autocompleteInput.value = "la";
|
||||
TestUtils.Simulate.change(autocompleteInput);
|
||||
|
||||
expect(autocompleteDropdown.props.opened).to.equal(true);
|
||||
expect(autocompleteDropdown.props.items.length).to.equal(1);
|
||||
expect(autocompleteDropdown.props.items[0].name).to.equal("hola");
|
||||
expect(autocompleteDropdown.props.items[0].id).to.equal(49);
|
||||
|
||||
autocompleteDropdown.props.onChange({index: 0});
|
||||
|
||||
expect(autocompleteDropdown.props.opened).to.equal(false);
|
||||
expect(selectedList.length).to.equal(3);
|
||||
expect(selectedList[0].name).to.equal("lautaro");
|
||||
expect(selectedList[0].id).to.equal(45);
|
||||
expect(selectedList[1].name).to.equal("123123123");
|
||||
expect(selectedList[1].id).to.equal(48);
|
||||
expect(selectedList[2].name).to.equal("hola");
|
||||
expect(selectedList[2].id).to.equal(49);
|
||||
});
|
||||
|
||||
it('should delete item if (backspace or click) is pressed and input value is "" ', function() {
|
||||
expect(selectedList.length).to.equal(0);
|
||||
|
||||
autocompleteInput.value = "123";
|
||||
TestUtils.Simulate.change(autocompleteInput);
|
||||
|
||||
expect(autocompleteDropdown.props.opened).to.equal(true);
|
||||
expect(autocompleteDropdown.props.items.length).to.equal(1);
|
||||
expect(autocompleteDropdown.props.items[0].name).to.equal("123123123");
|
||||
expect(autocompleteDropdown.props.items[0].id).to.equal(48);
|
||||
|
||||
autocompleteDropdown.props.onChange({index: 0});
|
||||
|
||||
expect(autocompleteDropdown.props.opened).to.equal(false);
|
||||
expect(selectedList.length).to.equal(1);
|
||||
expect(selectedList[0].name).to.equal("123123123");
|
||||
expect(selectedList[0].id).to.equal(48);
|
||||
|
||||
autocompleteInput.value = "la";
|
||||
TestUtils.Simulate.change(autocompleteInput);
|
||||
|
||||
expect(autocompleteDropdown.props.opened).to.equal(true);
|
||||
expect(autocompleteDropdown.props.items.length).to.equal(2);
|
||||
expect(autocompleteDropdown.props.items[0].name).to.equal("lautaro");
|
||||
expect(autocompleteDropdown.props.items[0].id).to.equal(45);
|
||||
expect(autocompleteDropdown.props.items[1].name).to.equal("hola");
|
||||
expect(autocompleteDropdown.props.items[1].id).to.equal(49);
|
||||
|
||||
autocompleteDropdown.props.onChange({index: 1});
|
||||
|
||||
expect(autocompleteDropdown.props.opened).to.equal(false);
|
||||
expect(selectedList.length).to.equal(2);
|
||||
expect(selectedList[0].name).to.equal("123123123");
|
||||
expect(selectedList[0].id).to.equal(48);
|
||||
expect(selectedList[1].name).to.equal("hola");
|
||||
expect(selectedList[1].id).to.equal(49);
|
||||
|
||||
autocompleteInput.value = "l";
|
||||
TestUtils.Simulate.change(autocompleteInput);
|
||||
|
||||
expect(autocompleteDropdown.props.opened).to.equal(true);
|
||||
expect(autocompleteDropdown.props.items.length).to.equal(1);
|
||||
expect(autocompleteDropdown.props.items[0].name).to.equal("lautaro");
|
||||
expect(autocompleteDropdown.props.items[0].id).to.equal(45);
|
||||
|
||||
autocompleteDropdown.props.onChange({index: 0});
|
||||
|
||||
expect(autocompleteDropdown.props.opened).to.equal(false);
|
||||
expect(selectedList.length).to.equal(3);
|
||||
expect(selectedList[0].name).to.equal("123123123");
|
||||
expect(selectedList[0].id).to.equal(48);
|
||||
expect(selectedList[1].name).to.equal("hola");
|
||||
expect(selectedList[1].id).to.equal(49);
|
||||
expect(selectedList[2].name).to.equal("lautaro");
|
||||
expect(selectedList[2].id).to.equal(45);
|
||||
|
||||
TestUtils.Simulate.keyDown(autocompleteInput, {key: 'backspace', keyCode: 8, which: 8});
|
||||
|
||||
expect(selectedList.length).to.equal(2);
|
||||
|
||||
autocompleteInput.value = "asd";
|
||||
TestUtils.Simulate.change(autocompleteInput);
|
||||
TestUtils.Simulate.keyDown(autocompleteInput, {key: 'backspace', keyCode: 8, which: 8});
|
||||
|
||||
expect(selectedList.length).to.equal(2);
|
||||
expect(selectedList[0].name).to.equal("123123123");
|
||||
expect(selectedList[0].id).to.equal(48);
|
||||
expect(selectedList[1].name).to.equal("hola");
|
||||
expect(selectedList[1].id).to.equal(49);
|
||||
|
||||
tag = TestUtils.scryRenderedComponentsWithType(autocomplete, Tag)[0];
|
||||
tag.props.onRemoveClick({ preventDefault: stub() });
|
||||
|
||||
expect(selectedList.length).to.equal(1);
|
||||
expect(selectedList[0].name).to.equal("hola");
|
||||
expect(selectedList[0].id).to.equal(49);
|
||||
|
||||
autocompleteInput.value = "a";
|
||||
TestUtils.Simulate.change(autocompleteInput);
|
||||
TestUtils.Simulate.keyDown(autocompleteInput, {key: 'backspace', keyCode: 8, which: 8});
|
||||
TestUtils.Simulate.keyDown(autocompleteInput, {key: 'backspace', keyCode: 8, which: 8});
|
||||
TestUtils.Simulate.keyDown(autocompleteInput, {key: 'backspace', keyCode: 8, which: 8});
|
||||
TestUtils.Simulate.keyDown(autocompleteInput, {key: 'backspace', keyCode: 8, which: 8});
|
||||
TestUtils.Simulate.keyDown(autocompleteInput, {key: 'backspace', keyCode: 8, which: 8});
|
||||
|
||||
expect(selectedList.length).to.equal(1);
|
||||
|
||||
autocompleteInput.value = "";
|
||||
TestUtils.Simulate.change(autocompleteInput);
|
||||
TestUtils.Simulate.keyDown(autocompleteInput, {key: 'backspace', keyCode: 8, which: 8});
|
||||
|
||||
expect(selectedList.length).to.equal(0);
|
||||
|
||||
TestUtils.Simulate.keyDown(autocompleteInput, {key: 'backspace', keyCode: 8, which: 8});
|
||||
TestUtils.Simulate.keyDown(autocompleteInput, {key: 'backspace', keyCode: 8, which: 8});
|
||||
TestUtils.Simulate.keyDown(autocompleteInput, {key: 'backspace', keyCode: 8, which: 8});
|
||||
TestUtils.Simulate.keyDown(autocompleteInput, {key: 'backspace', keyCode: 8, which: 8});
|
||||
|
||||
expect(selectedList.length).to.equal(0);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,267 +0,0 @@
|
|||
import React from 'react';
|
||||
import _ from 'lodash';
|
||||
import keyCode from 'keycode';
|
||||
|
||||
import DropDown from 'core-components/drop-down';
|
||||
import Tag from 'core-components/tag';
|
||||
|
||||
const ItemsSchema = React.PropTypes.arrayOf(React.PropTypes.shape({
|
||||
id: React.PropTypes.number,
|
||||
name: React.PropTypes.string,
|
||||
content: React.PropTypes.string,
|
||||
color: React.PropTypes.string,
|
||||
}));
|
||||
|
||||
class AutocompleteDropDown extends React.Component {
|
||||
|
||||
static propTypes = {
|
||||
items: ItemsSchema,
|
||||
onChange: React.PropTypes.func,
|
||||
values: ItemsSchema,
|
||||
onRemoveClick: React.PropTypes.func,
|
||||
onTagSelected: React.PropTypes.func,
|
||||
getItemListFromQuery: React.PropTypes.func,
|
||||
disabled: React.PropTypes.bool,
|
||||
};
|
||||
|
||||
id = 1;
|
||||
|
||||
state = {
|
||||
selectedItems: [],
|
||||
inputValue: "",
|
||||
opened: false,
|
||||
highlightedIndex: 0,
|
||||
itemsFromQuery: [],
|
||||
loading: false,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
const { getItemListFromQuery, } = this.props;
|
||||
|
||||
this.setTimeout = _.throttle((query) => {
|
||||
let id = ++this.id;
|
||||
|
||||
getItemListFromQuery(query, this.getSelectedItems().map(item => item.id))
|
||||
.then(result => {
|
||||
if(id === this.id)
|
||||
this.setState({
|
||||
itemsFromQuery: result,
|
||||
loading: false,
|
||||
});
|
||||
})
|
||||
.catch(() => this.setState({
|
||||
loading: false,
|
||||
}));
|
||||
}, 300, {leading: false});
|
||||
|
||||
this.searchApi("");
|
||||
}
|
||||
|
||||
render() {
|
||||
let inputWidth = 0;
|
||||
|
||||
if(this.span) {
|
||||
this.span.style.display = 'inline';
|
||||
this.span.textContent = this.state.inputValue;
|
||||
inputWidth = Math.ceil(this.span.getBoundingClientRect().width)-31;
|
||||
this.span.style.display = 'none';
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="autocomplete">
|
||||
<label className="autocomplete__label" onClick={(e) => e.stopPropagation()}>
|
||||
<DropDown
|
||||
className="autocomplete__drop-down"
|
||||
items={this.getDropdownList()}
|
||||
size="large"
|
||||
onChange={e => this.onChangeDropDown(e)}
|
||||
onMenuToggle={b => this.onMenuToggle(b)}
|
||||
opened={this.state.opened}
|
||||
onHighlightedIndexChange={n => this.onHighlightedIndexChange(n)}
|
||||
highlightedIndex={this.state.highlightedIndex}
|
||||
loading={this.state.loading}
|
||||
>
|
||||
{this.renderSelectedItems()}
|
||||
<input
|
||||
className="autocomplete__input"
|
||||
id="query"
|
||||
ref={input => this.input = input}
|
||||
value={this.state.inputValue}
|
||||
onKeyDown={e => this.onKeyDown(e)}
|
||||
onChange={e => this.onChangeInput(e.target.value)}
|
||||
style={this.span ? {width: inputWidth} : {}} />
|
||||
<span className="sizer" ref={span => this.span = span} />
|
||||
</DropDown>
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderSelectedItems() {
|
||||
return this.getSelectedItems().map(item => this.renderSelectedItem(item));
|
||||
}
|
||||
|
||||
renderSelectedItem(item) {
|
||||
return <Tag
|
||||
name={item.name}
|
||||
color={item.color}
|
||||
showDeleteButton
|
||||
onRemoveClick={this.onRemoveClick.bind(this,item.id)}
|
||||
key={item.id} />
|
||||
}
|
||||
|
||||
getDropdownList() {
|
||||
const {
|
||||
items,
|
||||
} = this.props;
|
||||
let dropdownList = [];
|
||||
|
||||
if(items !== undefined) {
|
||||
const list = this.getUnselectedList(items, this.getSelectedItems());
|
||||
|
||||
dropdownList = list.filter(s => _.includes(s.name, this.state.inputValue));
|
||||
} else {
|
||||
dropdownList = this.getUnselectedList(this.state.itemsFromQuery, this.getSelectedItems());
|
||||
}
|
||||
|
||||
return dropdownList;
|
||||
}
|
||||
|
||||
getUnselectedList(list, selectedList) {
|
||||
return list.filter(item => !_.some(selectedList, item));
|
||||
}
|
||||
|
||||
getSelectedItems() {
|
||||
const { values, } = this.props;
|
||||
|
||||
return (values !== undefined) ? values : this.state.selectedItems;
|
||||
}
|
||||
|
||||
onRemoveClick(itemId, event) {
|
||||
const {
|
||||
onChange,
|
||||
onRemoveClick,
|
||||
} = this.props;
|
||||
const newList = this.getSelectedItems().filter(item => item.id != itemId);
|
||||
event.preventDefault();
|
||||
|
||||
this.setState({
|
||||
selectedItems: newList,
|
||||
opened: false,
|
||||
highlightedIndex: 0,
|
||||
});
|
||||
|
||||
onChange && onChange(newList);
|
||||
onRemoveClick && onRemoveClick(itemId);
|
||||
this.searchApi("", newList);
|
||||
}
|
||||
|
||||
onChangeDropDown(e) {
|
||||
const {
|
||||
onChange,
|
||||
onTagSelected,
|
||||
} = this.props;
|
||||
|
||||
if(this.getDropdownList().length) {
|
||||
const itemSelected = this.getDropdownList()[e.index];
|
||||
const newList = [...this.getSelectedItems(), itemSelected];
|
||||
|
||||
this.setState({
|
||||
selectedItems: newList,
|
||||
inputValue: "",
|
||||
highlightedIndex: 0,
|
||||
});
|
||||
|
||||
onChange && onChange(newList);
|
||||
onTagSelected && onTagSelected(itemSelected.id);
|
||||
this.searchApi("", newList);
|
||||
}
|
||||
}
|
||||
|
||||
onChangeInput(str) {
|
||||
const { getItemListFromQuery, } = this.props;
|
||||
|
||||
this.setState({
|
||||
inputValue: str,
|
||||
opened: true,
|
||||
highlightedIndex: 0,
|
||||
});
|
||||
|
||||
if(getItemListFromQuery !== undefined) {
|
||||
this.setState({
|
||||
loading: true,
|
||||
});
|
||||
|
||||
this.setTimeout(str);
|
||||
}
|
||||
}
|
||||
|
||||
onMenuToggle(b) {
|
||||
this.setState({
|
||||
opened: b,
|
||||
});
|
||||
}
|
||||
|
||||
onHighlightedIndexChange(n) {
|
||||
this.setState({
|
||||
highlightedIndex: n,
|
||||
});
|
||||
}
|
||||
|
||||
onKeyDown(event) {
|
||||
const {
|
||||
onChange,
|
||||
onRemoveClick,
|
||||
} = this.props;
|
||||
|
||||
if(this.props.disabled) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if(keyCode(event) === "space") {
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
if(keyCode(event) === "backspace" && this.state.inputValue === "") {
|
||||
const lastSelectedItemsIndex = this.getSelectedItems().length-1;
|
||||
const newList = this.getSelectedItems().slice(0, lastSelectedItemsIndex);
|
||||
this.setState({
|
||||
selectedItems: newList,
|
||||
highlightedIndex: 0,
|
||||
});
|
||||
onChange && onChange(newList);
|
||||
|
||||
if(this.getSelectedItems().length) {
|
||||
const itemId = this.getSelectedItems()[lastSelectedItemsIndex].id;
|
||||
|
||||
onRemoveClick && onRemoveClick(itemId);
|
||||
}
|
||||
|
||||
this.searchApi("", newList);
|
||||
}
|
||||
}
|
||||
|
||||
searchApi(query, blacklist=this.getSelectedItems()) {
|
||||
const { getItemListFromQuery, } = this.props;
|
||||
|
||||
if(getItemListFromQuery !== undefined) {
|
||||
getItemListFromQuery(query, blacklist.map(item => item.id))
|
||||
.then(result => {
|
||||
this.setState({
|
||||
itemsFromQuery: result,
|
||||
loading: false,
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.setState({
|
||||
loading: false,
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default AutocompleteDropDown;
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
@import "../scss/vars";
|
||||
|
||||
.autocomplete {
|
||||
margin-bottom: 30px;
|
||||
text-align: left;
|
||||
|
||||
&__drop-down {
|
||||
.drop-down__current-item {
|
||||
cursor: text;
|
||||
background-color: $very-light-grey;
|
||||
border: 1px solid $grey;
|
||||
min-height: 38px;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: $primary-blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&__input {
|
||||
display: inline-block;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
outline: none;
|
||||
padding-left: 5px;
|
||||
width: 10px;
|
||||
max-width: 100%;
|
||||
min-width: 10px;
|
||||
}
|
||||
|
||||
.sizer {
|
||||
line-height: 1.21428571em;
|
||||
padding: .67857143em 2.1em .67857143em 1em;
|
||||
display: none;
|
||||
white-space: pre;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue