SuggestionItem tests

SpareBank1 · Feb 21, 2017 · c280ad9 · c280ad9
1 parent 6a65ed3
commit c280ad9
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 18 deletions.
diff --git a/src/suggestion/suggestion-item.js b/src/suggestion/suggestion-item.js
@@ -11,7 +11,7 @@ class SuggestionItem extends Component{
           }
         }}
         role='option'
-        onMouseDown={() => {onSelect(item, true)}}
+        onMouseDown={() => {onSelect(item)}}
         className={isHighlighted ? 'account-suggestion__highlighted account-suggestion' : 'account-suggestion'}
         tabIndex={-1}
       >
@@ -25,6 +25,7 @@ SuggestionItem.propTypes = {
   isHighlighted: PropTypes.bool.isRequired,
   render: PropTypes.func.isRequired,
   onSelect: PropTypes.func.isRequired,
+  refHighlightedSuggestion: PropTypes.func.isRequired,
 };
 
 export default SuggestionItem;
diff --git a/src/suggestion/suggestion-item.test.js b/src/suggestion/suggestion-item.test.js
@@ -2,51 +2,60 @@ import {mount} from 'enzyme';
 import {assert} from 'chai';
 import React from 'react';
 import  SuggestionItem from './suggestion-item';
+import sinon from 'sinon';
+
 import jsdom from 'jsdom'
 
 const doc = jsdom.jsdom('<!doctype html><html><body></body></html>');
 global.document = doc;
 global.window = doc.defaultView;
 
-function assertHasFocus(wrapper, focus = true) {
-  const testWrapperFocus = wrapper.node === document.activeElement;
-  focus ? assert.isTrue(testWrapperFocus) : assert.isFalse(testWrapperFocus);
+function item() {
+  return {header: 'header'};
 }
 
-function mountSuggestionItem(isHighlighted = true) {
+function renderSuggestionItem(isHighlighted = true, refHighlightedSuggestion = ()=>{}, onSelect = ()=>{}) {
   return mount(<SuggestionItem
-    onSelect={()=>{}}
-    item={{header: 'header'}}
+    onSelect={onSelect}
+    item={item()}
     isHighlighted={isHighlighted}
+    refHighlightedSuggestion={refHighlightedSuggestion}
     render={({header}) => <h1>{header}</h1>}
   />);
 }
 
 describe('<SuggestionItem />', () => {
 
   it('item is rendered', () => {
-    const wrapper = mountSuggestionItem();
+    const wrapper = renderSuggestionItem();
     const li = wrapper.find('li');
 
     assert.equal(li.childAt(0).html(), '<h1>header</h1>');
   });
 
   it('isHighlighted', () => {
-    const wrapper = mountSuggestionItem();
-    const li = wrapper.find('li');
+    const refHighlightedSuggestionSpy = sinon.spy();
+    const wrapper = renderSuggestionItem(true, refHighlightedSuggestionSpy);
 
-    assert.isTrue(wrapper.hasClass('--highlighted'));
-    assert.equal(li.props().tabIndex, 0);
-    assertHasFocus(li);
+    assert.isTrue(wrapper.hasClass('account-suggestion__highlighted'));
+    assert.isTrue(wrapper.hasClass('account-suggestion'));
+    assert.isTrue(refHighlightedSuggestionSpy.calledOnce);
   });
 
 
   it('not Highlighted', () => {
-    const wrapper = mountSuggestionItem(false);
-    const li = wrapper.find('li');
+    const refHighlightedSuggestionSpy = sinon.spy();
+    const wrapper = renderSuggestionItem(false, refHighlightedSuggestionSpy);
+
+    assert.isFalse(wrapper.hasClass('account-suggestion__highlighted'));
+    assert.isTrue(wrapper.hasClass('account-suggestion'));
+    assert.isFalse(refHighlightedSuggestionSpy.called);
+  });
 
-    assert.isFalse(wrapper.hasClass('--highlighted'));
-    assert.equal(li.props().tabIndex, -1);
-    assertHasFocus(li, false);
+  it('onSelect called', () => {
+    const onSelectSpy = sinon.spy();
+    const wrapper = renderSuggestionItem(true, ()=>{}, onSelectSpy);
+    wrapper.simulate('mousedown');
+    assert.isTrue(onSelectSpy.calledWith(item()));
   });
 });