update menu test

Author: levithomason

test/specs/collections/Menu/Menu-test.js

@@ -1,67 +1,73 @@
-import _ from 'lodash';
+import faker from 'faker';
 import React from 'react';
 import {Simulate} from 'react-addons-test-utils';
 import {Menu, MenuItem} from 'stardust';
 
+let string;
 describe('Menu', () => {
-  it('should render children', () => {
-    const renderedMenu = render(
-      <Menu>
-        <span className='sd-test-span'>Hello</span>
-      </Menu>
-    ).findClass('sd-menu');
-    renderedMenu.props.children.should.be.ok;
-    let childComponentClass;
-    React.Children.forEach(renderedMenu.props.children, (child, i) => {
-      if (i === 0) {
-        childComponentClass = child.props.className;
-      }
-    });
-    childComponentClass.should.equal('sd-test-span');
+  beforeEach(() => {
+    string = faker.hacker.phrase();
   });
-});
 
-describe('MenuItem', () => {
-  it('should have name property', () => {
-    const renderedMenuItem = render(<MenuItem name='This is an item' />).findClass('sd-menu-item');
-    _.includes(renderedMenuItem.props.children, 'This is an item').should.be.true;
-  });
-  it('should not have a label by default', () => {
-    const renderedMenuLabel = render(<MenuItem name='item' />).scryClass('sd-menu-label');
-    _.isEmpty(renderedMenuLabel).should.be.true;
-  });
-  it('should not have active class by default', () => {
-    const renderedMenuItem = render(<MenuItem name='item' />).scryClass('active');
-    _.isEmpty(renderedMenuItem).should.be.true;
-  });
-  it('should render a label if prop given', () => {
-    const renderedMenuLabel = render(<MenuItem name='item' label='37' />).findClass('sd-menu-label');
-    renderedMenuLabel.should.be.ok;
-    renderedMenuLabel.props.children.should.equal('37');
-  });
-  it('should have active class if first child', () => {
-    const renderedMenuItems = render(
-      <Menu>
-        <MenuItem name='item1' />
-        <MenuItem name='item2' />
-      </Menu>
-    ).scryClass('sd-menu-item');
-    _.first(renderedMenuItems).props.className.should.contain('active');
-    _.last(renderedMenuItems).props.className.should.not.contain('active');
+  it('should render children', () => {
+    // TODO: Menu does not render child text without a containing element
+    render(<Menu><i>{string}</i></Menu>)
+      .assertText(string);
   });
 
-  it('should have active class after click', () => {
-    const renderedMenuItems = render(
-      <Menu>
-        <MenuItem name='item1' className='firstItem' />
-        <MenuItem name='item2' className='secondItem'/>
-      </Menu>
-    );
-    const firstItem = renderedMenuItems.findClass('firstItem');
-    const secondItem = renderedMenuItems.findClass('secondItem');
-    const secondNode = secondItem.getDOMNode();
-    Simulate.click(secondNode);
-    firstItem.props.className.should.not.contain('active');
-    secondItem.props.className.should.contain('active');
+  describe('MenuItem', () => {
+    it('uses the name prop as text', () => {
+      render(<MenuItem name='This is an item' />)
+        .assertText('This is an item');
+    });
+    it('should not have a label by default', () => {
+      render(<MenuItem name='item' />)
+        .scryClass('sd-menu-label')
+        .should.have.length(0);
+    });
+    it('should not have active class by default', () => {
+      render(<MenuItem name='item' />)
+        .scryClass('active')
+        .should.have.length(0);
+    });
+    it('should render a label if prop given', () => {
+      render(<MenuItem name='item' label='37' />)
+        .findClass('sd-menu-label')
+        .textContent
+        .should.equal('37');
+    });
+    it('should have active class if first child', () => {
+      const [firstItem, secondItem] = render(
+        <Menu>
+          <MenuItem name='item1' />
+          <MenuItem name='item2' />
+        </Menu>
+      ).scryClass('sd-menu-item');
+
+      firstItem
+        .getAttribute('class')
+        .should.contain('active');
+      secondItem
+        .getAttribute('class')
+        .should.not.contain('active');
+    });
+
+    it('should have active class after click', () => {
+      const [firstItem, secondItem] = render(
+        <Menu>
+          <MenuItem name='item1' />
+          <MenuItem name='item2' />
+        </Menu>
+      ).scryClass('sd-menu-item');
+
+      Simulate.click(secondItem);
+
+      firstItem
+        .getAttribute('class')
+        .should.not.contain('active');
+      secondItem
+        .getAttribute('class')
+        .should.contain('active');
+    });
   });
 });

test/specs/collections/Message/Message-test.js

@@ -15,7 +15,8 @@ describe('Message', () => {
   });
   describe('without header', () => {
     it('has no header', () => {
-      render(<Message />).scryClass('sd-message-header')
+      render(<Message />)
+        .scryClass('sd-message-header')
         .should.have.a.lengthOf(0);
     });
   });
@@ -29,11 +30,13 @@ describe('Message', () => {
   });
   describe('without icon', () => {
     it('has no icon', () => {
-      render(<Message />).scryClass('sd-message-icon')
+      render(<Message />)
+        .scryClass('sd-message-icon')
         .should.have.a.lengthOf(0);
     });
     it('has no "content" wrapper', () => {
-      render(<Message />).scryClass('sd-message-content')
+      render(<Message />)
+        .scryClass('sd-message-content')
         .should.have.a.lengthOf(0);
     });
   });
@@ -54,7 +57,8 @@ describe('Message', () => {
   });
   describe('not dismissable', () => {
     it('has no close icon', () => {
-      render(<Message />).scryClass('sd-message-close-icon')
+      render(<Message />)
+        .scryClass('sd-message-close-icon')
         .should.have.a.lengthOf(0);
     });
   });