From c280ad926a98d0ec910f2b8d796d06feac849b00 Mon Sep 17 00:00:00 2001 From: Torgeir Pedersen Cook Date: Tue, 21 Feb 2017 16:34:46 +0100 Subject: [PATCH] SuggestionItem tests --- src/suggestion/suggestion-item.js | 3 +- src/suggestion/suggestion-item.test.js | 43 ++++++++++++++++---------- 2 files changed, 28 insertions(+), 18 deletions(-) diff --git a/src/suggestion/suggestion-item.js b/src/suggestion/suggestion-item.js index 9bd84b9643..795f9d6718 100644 --- 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 index 81c20f0fdf..95b66fd706 100644 --- a/src/suggestion/suggestion-item.test.js +++ b/src/suggestion/suggestion-item.test.js @@ -2,22 +2,24 @@ 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(''); 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({}} - item={{header: 'header'}} + onSelect={onSelect} + item={item()} isHighlighted={isHighlighted} + refHighlightedSuggestion={refHighlightedSuggestion} render={({header}) =>

{header}

} />); } @@ -25,28 +27,35 @@ function mountSuggestionItem(isHighlighted = true) { describe('', () => { it('item is rendered', () => { - const wrapper = mountSuggestionItem(); + const wrapper = renderSuggestionItem(); const li = wrapper.find('li'); assert.equal(li.childAt(0).html(), '

header

'); }); 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())); }); });