diff --git a/client/src/core-components/__tests__/menu-test.js b/client/src/core-components/__tests__/menu-test.js new file mode 100644 index 00000000..b02961cb --- /dev/null +++ b/client/src/core-components/__tests__/menu-test.js @@ -0,0 +1,66 @@ +// LIBS +const _ = require('lodash'); + +// MOCKS +const Icon = ReactMock(); + +// COMPONENTS +const Menu = requireUnit('core-components/menu', { + 'core-components/icon': Icon +}); + +describe('Menu component', function () { + let menu, items, icons; + + function renderMenu(props) { + let defaultProps = { + items: [ + {content: 'First Item', icon: 'ICON_1'}, + {content: 'Second Item', icon: 'ICON_2'}, + {content: 'Third Item', icon: 'ICON_3'}, + {content: 'Fourth Item', icon: 'ICON_4'} + ] + }; + + + menu = TestUtils.renderIntoDocument( + + ); + items = TestUtils.scryRenderedDOMComponentsWithTag(menu, 'li'); + icons = TestUtils.scryRenderedComponentsWithType(menu, Icon); + } + + it('should render items with icons', function () { + renderMenu({ + items: [ + {content: 'First Item', icon: 'ICON_1'}, + {content: 'Second Item', icon: 'ICON_2'}, + {content: 'Third Item', icon: 'ICON_3'}, + {content: 'Fourth Item', icon: 'ICON_4'} + ] + }); + + expect(items.length).to.equal(4); + expect(items[0].textContent).to.equal('First Item'); + expect(items[1].textContent).to.equal('Second Item'); + expect(items[2].textContent).to.equal('Third Item'); + expect(items[3].textContent).to.equal('Fourth Item'); + + items.forEach((item, index) => { + expect(item.className).to.contain('menu__list-item'); + expect(item.childNodes[0]).to.equal(ReactDOM.findDOMNode(icons[index])); + }); + }); + + it('should add custom class if passsed', function () { + + }); + + it('should add selected class to selected index', function () { + + }); + + it('should call onItemClick if an item is clicked', function () { + + }) +}); diff --git a/client/src/core-components/menu.js b/client/src/core-components/menu.js index 3b144174..22a86606 100644 --- a/client/src/core-components/menu.js +++ b/client/src/core-components/menu.js @@ -31,27 +31,19 @@ const Menu = React.createClass({ }, renderListItem(item, index) { + let iconNode = null; + + if (item.icon) { + iconNode = ; + } + return (
  • - {this.renderItem(item)} + {iconNode}{item.content}
  • ); }, - renderItem(item) { - return ( - - {(item.icon) ? this.renderIcon(item.icon) : null}{item.content} - - ); - }, - - renderIcon(icon) { - return ( - - ); - }, - getProps() { var props = _.clone(this.props); @@ -80,8 +72,8 @@ const Menu = React.createClass({ getItemClass(index) { let classes = { - 'menu--list-item': true, - 'menu--list-item_selected': (this.props.selectedIndex === index) + 'menu__list-item': true, + 'menu__list-item_selected': (this.props.selectedIndex === index) }; return classNames(classes); diff --git a/client/src/core-components/menu.scss b/client/src/core-components/menu.scss index 6e7365a3..e872f7b1 100644 --- a/client/src/core-components/menu.scss +++ b/client/src/core-components/menu.scss @@ -8,7 +8,7 @@ list-style-type: none; cursor: pointer; - &--list-item { + &__list-item { padding: 8px; &:hover { @@ -17,13 +17,13 @@ } } - &--icon { + &__icon { margin-right: 8px; margin-bottom: 2px; } &_secondary { - .menu--list-item:hover { + .menu__list-item:hover { background-color: $secondary-blue; } } diff --git a/client/src/lib-test/react-mock.js b/client/src/lib-test/react-mock.js index d8511872..a5cd8142 100644 --- a/client/src/lib-test/react-mock.js +++ b/client/src/lib-test/react-mock.js @@ -1,9 +1,10 @@ const React = require('react'); +const _ = require('lodash'); -module.exports = function () { - return React.createClass({ +module.exports = function (options) { + return React.createClass(_.extend({ render() { - return
    ; + return
    ; } - }); + }, options)); }; \ No newline at end of file