feat: add test cases and examples

examples/.storybook/addons.js

@@ -1,2 +1,2 @@
 import '@storybook/addon-options/register'
-import '@storybook/addon-actions/register'
+// import '@storybook/addon-actions/register'

examples/stories/example.tsx

@@ -1,23 +1,149 @@
 import { Menu, MenuItem } from 'or-menu'
 import React, { PureComponent } from 'react'
 
-const subNav = (
-  <div className="">
-    <div>123</div>
-    <div>345</div>
-    <div>2345</div>
-  </div>
-)
 export default class Example extends PureComponent<{}, {}> {
   render() {
     return (
-      <div>
+      <div className="example-wrapper">
         <Menu>
-          <MenuItem subNav={subNav}>MAKEUP</MenuItem>
-          <MenuItem subNav={subNav}>CLOTHING</MenuItem>
-          <MenuItem subNav={subNav}>HANDBAGS</MenuItem>
+          <MenuItem subNav={subNav1}>MAKEUP</MenuItem>
+          <MenuItem subNav={subNav2}>PERFUME</MenuItem>
+          <MenuItem subNav={subNav3}>HANDBAGS</MenuItem>
+          <MenuItem subNav={subNav4}>ACCESSORIES</MenuItem>
+          <MenuItem subNav={subNav1}>MAKEUP</MenuItem>
+          <MenuItem subNav={subNav2}>CLOTHING</MenuItem>
+          <MenuItem subNav={subNav3}>HANDBAGS</MenuItem>
+          <MenuItem>NO-SUBNAV</MenuItem>
         </Menu>
       </div>
     )
   }
 }
+
+const subNav1 = (
+  <div className="sub-nav-overlay">
+    <div className="item-wrapper">
+      <div className="title">FACE</div>
+      <div>New Arrivals</div>
+      <div>Foundation</div>
+      <div>Concealer</div>
+      <div>Blush</div>
+      <div>Powder</div>
+      <div>Primer</div>
+    </div>
+    <div className="item-wrapper">
+      <div className="title">LIP</div>
+      <div>Lipstick</div>
+      <div>Liquid Lipcolor</div>
+      <div>Lip Gloss</div>
+      <div>Lip Pencil</div>
+      <div>Matte Finish</div>
+    </div>
+    <div className="item-wrapper">
+      <div className="title">COLLECTIONS</div>
+      <div>New Arrivals</div>
+      <div>Pure Color</div>
+      <div>Poppy</div>
+      <div>Suger</div>
+      <div>Sunset Collection</div>
+    </div>
+    <div className="item-wrapper">
+      <div className="image image-1" />
+    </div>
+  </div>
+)
+
+const subNav2 = (
+  <div className="sub-nav-overlay">
+    <div className="item-wrapper">
+      <div className="title">MEN</div>
+      <div>Wood Sage & Sea Salt</div>
+      <div>Orris & Sandalwood</div>
+      <div>Lime Basil & Mandarin</div>
+      <div>Amber & Lavender</div>
+      <div>Pomegranate Noir</div>
+    </div>
+    <div className="item-wrapper">
+      <div className="title">WOMEN</div>
+      <div>English Pear</div>
+      <div>Lime Basil</div>
+      <div>Honeysuckle & Davana </div>
+      <div>Red Roses</div>
+      <div>Wild Bluebel</div>
+    </div>
+    <div className="item-wrapper">
+      <div className="title">GIFTS</div>
+      <div>Home Candle</div>
+      <div>Deluxe Candle</div>
+      <div>Cologne</div>
+      <div>Grapefruit Candle</div>
+    </div>
+    <div className="item-wrapper">
+      <div className="image image-2" />
+    </div>
+  </div>
+)
+
+const subNav3 = (
+  <div className="sub-nav-overlay">
+    <div className="item-wrapper">
+      <div className="title">TOTES</div>
+      <div>New Arrivals</div>
+      <div>Foundation</div>
+      <div>Concealer</div>
+      <div>Blush</div>
+      <div>Powder</div>
+      <div>Primer</div>
+    </div>
+    <div className="item-wrapper">
+      <div className="title">SATCHES</div>
+      <div>Lipstick</div>
+      <div>Liquid Lipcolor</div>
+      <div>Lip Gloss</div>
+      <div>Lip Pencil</div>
+      <div>Matte Finish</div>
+    </div>
+    <div className="item-wrapper">
+      <div className="title">COLLECTIONS</div>
+      <div>New Arrivals</div>
+      <div>Pure Color</div>
+      <div>Poppy</div>
+      <div>Suger</div>
+      <div>Sunset Collection</div>
+    </div>
+    <div className="item-wrapper">
+      <div className="image image-3" />
+    </div>
+  </div>
+)
+
+const subNav4 = (
+  <div className="sub-nav-overlay">
+    <div className="item-wrapper">
+      <div className="title">MEN</div>
+      <div>Wood Sage & Sea Salt</div>
+      <div>Orris & Sandalwood</div>
+      <div>Lime Basil & Mandarin</div>
+      <div>Amber & Lavender</div>
+      <div>Pomegranate Noir</div>
+    </div>
+    <div className="item-wrapper">
+      <div className="title">WOMEN</div>
+      <div>English Pear</div>
+      <div>Lime Basil</div>
+      <div>Honeysuckle & Davana </div>
+      <div>Red Roses</div>
+      <div>Wild Bluebel</div>
+    </div>
+    <div className="item-wrapper">
+      <div className="title">GIFTS</div>
+      <div>Home Candle</div>
+      <div>Deluxe Candle</div>
+      <div>Cologne</div>
+      <div>Grapefruit Candle</div>
+    </div>
+    <div className="item-wrapper">
+      <div className="image image-4" />
+    </div>
+  </div>
+)

examples/stories/index.story.tsx

@@ -23,8 +23,7 @@ storiesOf('or-menu', module)
       }
     })
   )
-  .add('basic', () => <MenuItem>Test</MenuItem>)
-  .add('sample', () => <Example />, {
+  .add('example', () => <Example />, {
     info: {
       source: false,
       text: previewCode(require('!!raw-loader!./example.tsx'))

examples/stories/styles.scss

@@ -1,6 +1,50 @@
+.example-wrapper {
+  .or-menu {
+    padding: 0 100px;
+  }
+
+  .sub-nav-overlay {
+    display: flex;
+
+    .item-wrapper {
+      margin: 0 50px;
+
+      .title {
+        font-weight: 500;
+        color: #111;
+        line-height: 2;
+      }
+
+      .image {
+        width: 144px;
+        height: 144px;
+        background-size: contain;
+
+        &.image-1 {
+          background-image: url('../public/images/face.png');
+        }
+
+        &.image-2 {
+          background-image: url('../public/images/perfume.png');
+        }
+
+        &.image-3 {
+          background-image: url('../public/images/lip.png');
+        }
+
+        &.image-4 {
+          background-image: url('../public/images/ear.png');
+        }
+      }
+    }
+  }
+}
+
 .or-sub-nav {
-  width: 800px;
+  width: 100vw;
   height: 400px;
+  padding: 40px 20px;
   background-color: #fff;
-  opacity: .8;
+  color: #555;
+  line-height: 1.5;
 }

src/MenuItem.tsx

@@ -7,9 +7,15 @@ interface Props {
    */
   classname?: string
 
+  /**
+   * menuItem title
+   */
   children: string
 
-  subNav: React.ReactElement<any>
+  /**
+   * the sub-nav appears when the mouse moves over the menuItem title
+   */
+  subNav?: React.ReactElement<any>
 }
 
 export class MenuItem extends PureComponent<Props, {}> {
@@ -34,7 +40,8 @@ export class MenuItem extends PureComponent<Props, {}> {
         onMouseLeave={this.handleMouseLeave}
       >
         <div className="or-menu-item-name">{children}</div>
-        {this.state.active && <div className="or-sub-nav">{subNav}</div>}
+        {this.state.active &&
+          subNav && <div className="or-sub-nav">{subNav}</div>}
       </div>
     )
   }

src/styles.scss

@@ -1,26 +1,33 @@
 @import "~or-theme";
 
-.or-menu-item {
+.or-menu {
   position: relative;
+}
+
+.or-menu-item {
   display: inline-block;
   margin: 0 5px;
   font-family: $font-family;
 
   &.or-menu-item-active {
     .or-menu-item-name {
-      border-bottom: 1px solid $gray8;
+      border-bottom-color: $gray8;
     }
   }
 
   .or-menu-item-name {
     padding: 2px;
     cursor: pointer;
     font-weight: 500;
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+    border-bottom-color: transparent;
   }
 
   .or-sub-nav {
     position: absolute;
+    left: 0;
+    top: 100%;
     z-index: 99;
-    padding: 20px;
   }
 }

tests/Menu.test.tsx

@@ -0,0 +1,76 @@
+import { mount } from 'enzyme'
+import React from 'react'
+
+import { Menu, MenuItem } from '../src'
+
+describe('MenuItem', () => {
+  it('should render properly', () => {
+    const wrapper = mount(renderMenu())
+    expect(wrapper.find('.or-menu').length).toBe(1)
+    expect(wrapper.find('.or-menu-item').length).toBe(8)
+  })
+
+  it('simulate mouse events with sub-nav', () => {
+    const wrapper = mount(renderMenu())
+    wrapper
+      .find('.or-menu-item')
+      .at(0)
+      .simulate('mouseEnter')
+    expect(
+      wrapper
+        .find('.or-menu-item')
+        .at(0)
+        .hasClass('or-menu-item-active')
+    ).toBe(true)
+    expect(
+      wrapper
+        .find('.or-menu-item')
+        .at(0)
+        .find('.or-sub-nav').length
+    ).toBe(1)
+    expect(
+      wrapper
+        .find('.or-menu-item')
+        .at(1)
+        .hasClass('or-menu-item-active')
+    ).toBe(false)
+
+    wrapper
+      .find('.or-menu-item')
+      .at(0)
+      .simulate('mouseLeave')
+    expect(
+      wrapper
+        .find('.or-menu-item')
+        .at(0)
+        .hasClass('or-menu-item-active')
+    ).toBe(false)
+    expect(
+      wrapper
+        .find('.or-menu-item')
+        .at(1)
+        .hasClass('or-menu-item-active')
+    ).toBe(false)
+  })
+})
+
+const subNav = (
+  <div className="sub-nav-overlay">
+    <div>New Arrivals</div>
+  </div>
+)
+
+function renderMenu() {
+  return (
+    <Menu>
+      <MenuItem subNav={subNav}>MAKEUP</MenuItem>
+      <MenuItem subNav={subNav}>PERFUME</MenuItem>
+      <MenuItem subNav={subNav}>HANDBAGS</MenuItem>
+      <MenuItem subNav={subNav}>ACCESSORIES</MenuItem>
+      <MenuItem subNav={subNav}>MAKEUP</MenuItem>
+      <MenuItem subNav={subNav}>CLOTHING</MenuItem>
+      <MenuItem subNav={subNav}>HANDBAGS</MenuItem>
+      <MenuItem>NO-SUBNAV</MenuItem>
+    </Menu>
+  )
+}