Added tests for Autocomplete kewDown->ArrowDown event handlers

erichhsun · Feb 22, 2016 · d7597b4 · d7597b4
1 parent a3873ce
commit d7597b4
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 1 deletion.
diff --git a/lib/Autocomplete.js b/lib/Autocomplete.js
@@ -107,7 +107,7 @@ let Autocomplete = React.createClass({
   },
 
   keyDownHandlers: {
-    ArrowDown () {
+    ArrowDown (event) {
       event.preventDefault()
       var { highlightedIndex } = this.state
       var index = (

diff --git a/lib/__tests__/Autocomplete-test.js b/lib/__tests__/Autocomplete-test.js
@@ -59,6 +59,50 @@ describe('acceptance tests', () => {
   });
 });
 
+describe('Autocomplete kewDown->ArrowDown event handlers', () => {
+
+  var autocompleteWrapper = mount(AutocompleteComponentJSX({}));
+  var autocompleteInputWrapper = autocompleteWrapper.find('input');
+
+  it('should highlight the 1st item in the menu when none is selected', () => {
+    autocompleteWrapper.setState({'isOpen': true});
+    autocompleteWrapper.setState({'highlightedIndex': null});
+
+    autocompleteInputWrapper.simulate('keyDown', { key : "ArrowDown", keyCode: 40, which: 40 });
+
+    expect(autocompleteWrapper.state('isOpen')).to.be.true;
+    expect(autocompleteWrapper.state('highlightedIndex')).to.equal(0);
+  });
+
+  it('should highlight the "n+1" item in the menu when "n" is selected', () => {
+    autocompleteWrapper.setState({'isOpen': true});
+
+    var n = 4;
+    // Set input to be an empty value, which displays all 50 states as items in the menu
+    autocompleteInputWrapper.simulate('change', { target: { value: '' } });
+    autocompleteWrapper.setState({'highlightedIndex': n});
+
+    autocompleteInputWrapper.simulate('keyDown', { key : "ArrowDown", keyCode: 40, which: 40 });
+
+    expect(autocompleteWrapper.state('isOpen')).to.be.true;
+    expect(autocompleteWrapper.state('highlightedIndex')).to.equal(n+1);
+  });
+
+  it('should highlight the 1st item in the menu when the last is selected', () => {
+    autocompleteWrapper.setState({'isOpen': true});
+
+    // Set input to be an empty value, which displays all 50 states as items in the menu
+    autocompleteInputWrapper.simulate('change', { target: { value: '' } });
+    autocompleteWrapper.setState({'highlightedIndex': 49});
+
+    autocompleteInputWrapper.simulate('keyDown', { key : "ArrowDown", keyCode: 40, which: 40 });
+
+    expect(autocompleteWrapper.state('isOpen')).to.be.true;
+    expect(autocompleteWrapper.state('highlightedIndex')).to.equal(0);
+  });
+
+});
+
 describe('Autocomplete kewDown->Enter event handlers', () => {
 
   var autocompleteWrapper = mount(AutocompleteComponentJSX({}));