test(Menu): add, update, and fix tests

Author: levithomason

src/collections/Menu/MenuHeader.js

@@ -17,7 +17,7 @@ function MenuHeader(props) {
 }
 
 MenuHeader._meta = {
-  name: 'MenuItem',
+  name: 'MenuHeader',
   type: META.TYPES.COLLECTION,
   parent: 'Menu',
 }
@@ -29,10 +29,10 @@ MenuHeader.propTypes = {
     PropTypes.func,
   ]),
 
-  /** Primary content of the MenuItem. */
+  /** Primary content */
   children: PropTypes.node,
 
-  /** Classes that will be added to the MenuItem className. */
+  /** Additional classes */
   className: PropTypes.string,
 }
 

src/collections/Menu/MenuItem.js

@@ -83,8 +83,4 @@ MenuItem.propTypes = {
   position: PropTypes.oneOf(MenuItem._meta.props.position),
 }
 
-MenuItem.defaultProps = {
-  as: 'a',
-}
-
 export default MenuItem

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

@@ -1,21 +1,27 @@
-import faker from 'faker'
 import React from 'react'
 
 import Menu from 'src/collections/Menu/Menu'
 import MenuItem from 'src/collections/Menu/MenuItem'
+import MenuHeader from 'src/collections/Menu/MenuHeader'
+import MenuMenu from 'src/collections/Menu/MenuMenu'
 import * as common from 'test/specs/commonTests'
 
 describe('Menu', () => {
   common.isConformant(Menu)
   common.hasUIClassName(Menu)
+  common.hasSubComponents(Menu, [MenuHeader, MenuItem, MenuMenu])
+
+  common.propKeyOnlyToClassName(Menu, 'compact')
+  common.propKeyOnlyToClassName(Menu, 'inverted')
+  common.propKeyOnlyToClassName(Menu, 'pointing')
+  common.propKeyOnlyToClassName(Menu, 'secondary')
+  common.propKeyOnlyToClassName(Menu, 'stackable')
+  common.propKeyOnlyToClassName(Menu, 'vertical')
+
   common.rendersChildren(Menu)
-  common.hasSubComponents(Menu, [MenuItem])
 
-  describe('initial state', () => {
-    it('inherits activeItem from props', () => {
-      const activeItem = faker.hacker.noun()
-      shallow(<Menu activeItem={activeItem} />)
-        .should.have.state('activeItem', activeItem)
-    })
+  it('renders a `div` by default', () => {
+    shallow(<Menu />)
+      .should.have.tagName('div')
   })
 })

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

@@ -0,0 +1,7 @@
+import MenuHeader from 'src/collections/Menu/MenuHeader'
+import * as common from 'test/specs/commonTests'
+
+describe('MenuHeader', () => {
+  common.isConformant(MenuHeader)
+  common.rendersChildren(MenuHeader)
+})

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

@@ -1,9 +1,8 @@
 import React from 'react'
 
-import Menu from 'src/collections/Menu/Menu'
 import MenuItem from 'src/collections/Menu/MenuItem'
 import * as common from 'test/specs/commonTests'
-import { sandbox } from 'test/utils/sandbox'
+import { sandbox } from 'test/utils'
 
 describe('MenuItem', () => {
   common.isConformant(MenuItem)
@@ -18,13 +17,6 @@ describe('MenuItem', () => {
       .should.have.tagName('div')
   })
 
-  describe('active', () => {
-    it('is not by default', () => {
-      shallow(<MenuItem name='item' />)
-        .should.not.have.className('active')
-    })
-  })
-
   describe('name', () => {
     it('uses the name prop as text', () => {
       shallow(<MenuItem name='This is an item' />)
@@ -33,28 +25,21 @@ describe('MenuItem', () => {
   })
 
   describe('onClick', () => {
-    it('is called when clicked', () => {
-      const handleClick = sandbox.spy()
+    it('is called with (e, { name, index }) when clicked', () => {
+      const spy = sandbox.spy()
+      const event = { target: null }
+      const props = { name: 'home', index: 0 }
 
-      const wrapper = shallow(<MenuItem onClick={handleClick} />)
-      wrapper.simulate('click')
+      shallow(<MenuItem onClick={spy} {...props} />)
+        .simulate('click', event)
 
-      handleClick.should.have.been.called()
+      spy.should.have.been.calledOnce()
+      spy.should.have.been.calledWithMatch(event, props)
     })
+
     it('renders an `a` tag', () => {
       shallow(<MenuItem onClick={() => null} />)
         .should.have.tagName('a')
     })
-    it('is called when the item is clicked', () => {
-      const props = {
-        onClick: sandbox.spy(),
-      }
-
-      // mount to get click event to propagate on click
-      mount(<MenuItem {...props} />)
-        .simulate('click')
-
-      props.onClick.should.have.been.calledOnce()
-    })
   })
 })

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

@@ -0,0 +1,8 @@
+import MenuMenu from 'src/collections/Menu/MenuMenu'
+import * as common from 'test/specs/commonTests'
+
+describe('MenuMenu', () => {
+  common.isConformant(MenuMenu)
+  common.rendersChildren(MenuMenu)
+  common.propValueOnlyToClassName(MenuMenu, 'position')
+})