tyler.durden
/
opensupports
mirror of https://github.com/opensupports/opensupports.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add autocomplete test part two

This commit is contained in:
LautaroCesso 2020-01-17 20:41:44 -03:00
parent 0dd8e75241
commit 118b7e97cf
4 changed files with 104 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/app/demo/components-demo-page.js
View File

@ -59,10 +59,6 @@ class DemoPage extends React.Component {
onChange={selectedList => this.setState({selectedList: selectedList})} /> onChange={selectedList => this.setState({selectedList: selectedList})} />
<button onClick={() => this.setState({selectedList: []})}>clear</button> <button onClick={() => this.setState({selectedList: []})}>clear</button>
<Autocomplete
getItemListFromQuery={searchApi}
onChange={selectedList => this.setState({selectedList2: selectedList})} />
<Autocomplete <Autocomplete
values={this.state.selectedList2} values={this.state.selectedList2}
getItemListFromQuery={searchApi} getItemListFromQuery={searchApi}

160
client/src/core-components/__tests__/autocomplete-test.js
View File

@ -49,66 +49,81 @@ const searchApi = spy((query, blacklist = []) => {
}); });
describe('Autocomplete component with external api', function () { describe('Autocomplete component with external api', function () {
let selectedList2 = []; let selectedList2 = [], autocompleteInput, autocompleteDropdown;
function renderAutocomplete(props) {
selectedList2 = [];
let autocompleteWithExternalApi = TestUtils.renderIntoDocument( let autocompleteWithExternalApi = TestUtils.renderIntoDocument(
<Autocomplete <Autocomplete
getItemListFromQuery={searchApi} getItemListFromQuery={searchApi}
onChange={selectedList => selectedList2 = selectedList} /> onChange={selectedList => selectedList2 = selectedList} />
); );
let autocompleteInput = TestUtils.scryRenderedDOMComponentsWithClass(autocompleteWithExternalApi, 'autocomplete__input')[0]; autocompleteInput = TestUtils.scryRenderedDOMComponentsWithClass(autocompleteWithExternalApi, 'autocomplete__input')[0];
let autocompleteDropdown = TestUtils.scryRenderedComponentsWithType(autocompleteWithExternalApi, DropDown)[0]; autocompleteDropdown = TestUtils.scryRenderedComponentsWithType(autocompleteWithExternalApi, DropDown)[0];
}
describe('writing in input', function() { describe('writing in input', function() {
expect(searchApi).to.have.been.calledWith(); beforeEach(function() {
renderAutocomplete();
});
it('should open menu with list', function() { it('should open menu with list', function() {
expect(searchApi).to.have.been.calledWith("", selectedList2.map(item => item.id));
autocompleteInput.value = "ho"; autocompleteInput.value = "ho";
TestUtils.Simulate.change(autocompleteInput); TestUtils.Simulate.change(autocompleteInput);
expect(autocompleteDropdown.props.opened).to.equal(true); expect(autocompleteDropdown.props.opened).to.equal(true);
expect(autocompleteDropdown.props.loading).to.equal(true); expect(autocompleteDropdown.props.loading).to.equal(true);
return timeout(function () { 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.loading).to.equal(false);
expect(autocompleteDropdown.props.items.length).to.equal(4); expect(autocompleteDropdown.props.items.length).to.equal(4);
}, 360).then(function () { expect(selectedList2.length).to.equal(0);
autocompleteDropdown.props.onMenuToggle(false); 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); expect(autocompleteDropdown.props.opened).to.equal(false);
}); }, 360);
}); });
it('should select item if enter is pressed', function() { it('should select item if enter is pressed', function() {
selectedList2 = []; expect(searchApi).to.have.been.calledWith("", selectedList2.map(item => item.id));
autocompleteInput.value = "argentina"; autocompleteInput.value = "argentina";
TestUtils.Simulate.change(autocompleteInput); TestUtils.Simulate.change(autocompleteInput);
expect(autocompleteDropdown.props.opened).to.equal(true); expect(autocompleteDropdown.props.opened).to.equal(true);
expect(autocompleteDropdown.props.loading).to.equal(true); expect(autocompleteDropdown.props.loading).to.equal(true);
return timeout(function () { return timeout(function () {
expect(searchApi).to.have.been.calledWith("argentina", selectedList2.map(item => item.id));
expect(autocompleteDropdown.props.loading).to.equal(false); expect(autocompleteDropdown.props.loading).to.equal(false);
expect(autocompleteDropdown.props.items.length).to.equal(1); expect(autocompleteDropdown.props.items.length).to.equal(1);
expect(selectedList2.length).to.equal(0); expect(selectedList2.length).to.equal(0);
autocompleteDropdown.props.onChange({index:0}); autocompleteDropdown.props.onChange({index: 0});
expect(searchApi).to.have.been.calledWith("", selectedList2.map(item => item.id));
expect(selectedList2.length).to.equal(1); expect(selectedList2.length).to.equal(1);
expect(autocompleteDropdown.props.opened).to.equal(false); expect(autocompleteDropdown.props.opened).to.equal(false);
}, 360) }, 360);
}); });
it("should sinc", function() { it("should sinc", function() {
selectedList2 = []; expect(searchApi).to.have.been.calledWith("", selectedList2.map(item => item.id));
autocompleteInput.value = "brazilq"; autocompleteInput.value = "brazilq";
TestUtils.Simulate.change(autocompleteInput); TestUtils.Simulate.change(autocompleteInput);
expect(autocompleteDropdown.props.opened).to.equal(true); expect(autocompleteDropdown.props.opened).to.equal(true);
expect(autocompleteDropdown.props.loading).to.equal(true); expect(autocompleteDropdown.props.loading).to.equal(true);
return timeout(function () { return timeout(function () {
expect(searchApi).to.have.not.been.calledWith("brazil", selectedList2.map(item => item.id));
autocompleteInput.value = "brazil"; autocompleteInput.value = "brazil";
TestUtils.Simulate.change(autocompleteInput); TestUtils.Simulate.change(autocompleteInput);
return timeout(function () { 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.items.length).to.equal(1); expect(autocompleteDropdown.props.items.length).to.equal(1);
expect(selectedList2.length).to.equal(0); expect(selectedList2.length).to.equal(0);
autocompleteDropdown.props.onChange({index: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(autocompleteDropdown.props.opened).to.equal(false);
expect(selectedList2.length).to.equal(2); expect(selectedList2.length).to.equal(1);
expect(selectedList2[0].name).to.equal("argentina"); expect(selectedList2[0].name).to.equal("brazil");
expect(selectedList2[1].name).to.equal("brazil");
autocompleteDropdown.props.onMenuToggle(true); autocompleteDropdown.props.onMenuToggle(true);
expect(autocompleteDropdown.props.opened).to.equal(true); expect(autocompleteDropdown.props.opened).to.equal(true);
expect(autocompleteDropdown.props.items.length).to.equal(0); expect(autocompleteDropdown.props.items.length).to.equal(0);
@ -117,58 +132,69 @@ describe('Autocomplete component with external api', function () {
}); });
it("should delete item if backspace is pressed and input value is '' ", function() { it("should delete item if backspace is pressed and input value is '' ", function() {
autocompleteInput.value = "Z"; expect(searchApi).to.have.been.calledWith("", selectedList2.map(item => item.id));
TestUtils.Simulate.change(autocompleteInput); autocompleteInput.value = "za";
TestUtils.Simulate.keyDown(autocompleteInput, {key: 'backspace', keyCode: 8, which: 8});
expect(selectedList2.length).to.equal(2);
autocompleteInput.value = "";
TestUtils.Simulate.change(autocompleteInput);
TestUtils.Simulate.keyDown(autocompleteInput, {key: 'backspace', keyCode: 8, which: 8});
expect(selectedList2.length).to.equal(1);
expect(selectedList2[0].name).to.equal("argentina");
});
});
it('123123123', function() {
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(autocompleteDropdown.props.loading).to.equal(false);
expect(autocompleteDropdown.props.items.length).to.equal(4);
}, 360).then(function () {
autocompleteDropdown.props.onMenuToggle(false);
expect(autocompleteDropdown.props.opened).to.equal(false);
autocompleteWithExternalApi.props.onChange([...selectedList2, {asd: "asd"}, ]);
expect(selectedList2.length).to.equal(1);
autocompleteWithExternalApi.props.onChange([...selectedList2, {asd: "asd"}, ]);
expect(selectedList2.length).to.equal(2);
autocompleteWithExternalApi.props.onChange(selectedList2.slice(0, selectedList2.length-1));
expect(selectedList2.length).to.equal(1);
autocompleteInput.value = "123";
TestUtils.Simulate.change(autocompleteInput); TestUtils.Simulate.change(autocompleteInput);
expect(autocompleteDropdown.props.opened).to.equal(true); expect(autocompleteDropdown.props.opened).to.equal(true);
expect(autocompleteDropdown.props.loading).to.equal(true); expect(autocompleteDropdown.props.loading).to.equal(true);
return timeout(function () { return timeout(function () {
expect(autocompleteDropdown.props.loading).to.equal(false); expect(searchApi).to.have.been.calledWith("za", selectedList2.map(item => item.id));
expect(autocompleteDropdown.props.items.length).to.equal(0); autocompleteDropdown.props.onChange({index: 3});
}, 360).then(function () { expect(searchApi).to.have.been.calledWith("", selectedList2.map(item => item.id));
autocompleteDropdown.props.onMenuToggle(false); expect(selectedList2[0].name).to.equal("zambia");
expect(autocompleteDropdown.props.opened).to.equal(false);
autocompleteWithExternalApi.props.onChange(selectedList2);
expect(selectedList2.length).to.equal(1); 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(1 == 2).to.equal(true); 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 ...", 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));
expect(autocompleteDropdown.props.items.length).to.equal(3);
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);
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.items.length).to.equal(2);
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.items.length).to.equal(1);
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));
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.items.length).to.equal(2);
expect(autocompleteDropdown.props.items[0].name).to.equal("anguilla");
}, 360);
},360);
}, 360);
});
}); });
}); });

1
client/src/core-components/autocomplete.js
View File

@ -163,7 +163,6 @@ class Autocomplete extends React.Component {
} = this.props; } = this.props;
if(this.getDropdownList().length) { if(this.getDropdownList().length) {
console.log("asdsad");
const itemSelected = this.getDropdownList()[e.index]; const itemSelected = this.getDropdownList()[e.index];
const newList = [...this.getSelectedItems(), itemSelected]; const newList = [...this.getSelectedItems(), itemSelected];

19
client/src/core-components/drop-down.js
View File

@ -256,19 +256,22 @@ class DropDown extends React.Component {
onMenuToggle, onMenuToggle,
onHighlightedIndexChange, onHighlightedIndexChange,
onChange, onChange,
loading,
} = this.props; } = this.props;
this.setState({ if (!loading){
opened: false, this.setState({
selectedIndex: index, opened: false,
highlightedIndex: index selectedIndex: index,
}); highlightedIndex: index
});
onHighlightedIndexChange && onHighlightedIndexChange(index); onHighlightedIndexChange && onHighlightedIndexChange(index);
onMenuToggle && onMenuToggle(false); onMenuToggle && onMenuToggle(false);
onChange && onChange({ index }); onChange && onChange({ index });
}
} }
handleListMouseDown(event) { handleListMouseDown(event) {