[Ivan Diaz] - Add first menu test [skip ci]

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(
+            <Menu {..._.extend(defaultProps, props)} />
+        );
+        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 () {
+
+    })
+});

client/src/core-components/menu.js

@@ -31,27 +31,19 @@ const Menu = React.createClass({
     },
 
     renderListItem(item, index) {
+        let iconNode = null;
+
+        if (item.icon) {
+            iconNode = <Icon className="menu__icon" name={item.icon} />;
+        }
+
         return (
             <li {...this.getItemProps(index)}>
-                {this.renderItem(item)}
+                {iconNode}{item.content}
             </li>
         );
     },
 
-    renderItem(item) {
-        return (
-            <span>
-                {(item.icon) ? this.renderIcon(item.icon) : null}{item.content}
-            </span>
-        );
-    },
-
-    renderIcon(icon) {
-        return (
-            <Icon className="menu--icon" name={icon} />
-        );
-    },
-
     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': true,
-            'menu--list-item_selected': (this.props.selectedIndex === index)
+            'menu__list-item_selected': (this.props.selectedIndex === index)
         };
 
         return classNames(classes);

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;
         }
     }

client/src/lib-test/react-mock.js

@@ -1,9 +1,10 @@
 const React = require('react');
+const _ = require('lodash');
 
-module.exports = function () {
+module.exports = function (options) {
-    return React.createClass({
+    return React.createClass(_.extend({
         render() {
-            return <div {...this.props} />;
+            return <div {...this.props}></div>;
         }
-    });
+    }, options));
 };