Merge pull request #132 from react-component/adding-test

chore: improve coverage and one minor bug fix

src/DOMWrap.jsx

@@ -14,13 +14,13 @@ const DOMWrap = createReactClass({
   getDefaultProps() {
     return {
       tag: 'div',
+      className: '',
     };
   },
 
   render() {
     const props = { ...this.props };
     if (!props.visible) {
-      props.className = props.className || '';
       props.className += ` ${props.hiddenClassName}`;
     }
     const Tag = props.tag;

src/Menu.jsx

@@ -175,22 +175,8 @@ const Menu = createReactClass({
     return transitionName;
   },
 
-  isInlineMode() {
-    return this.props.mode === 'inline';
-  },
-
-  lastOpenSubMenu() {
-    let lastOpen = [];
-    const { openKeys } = this.store.getState();
-    if (openKeys.length) {
-      lastOpen = this.getFlatInstanceArray().filter((c) => {
-        return c && openKeys.indexOf(c.props.eventKey) !== -1;
-      });
-    }
-    return lastOpen[0];
-  },
-
-  renderMenuItem(c, i, subIndex, subMenuKey) {
+  renderMenuItem(c, i, subMenuKey) {
+    /* istanbul ignore if */
     if (!c) {
       return null;
     }
@@ -201,7 +187,7 @@ const Menu = createReactClass({
       triggerSubMenuAction: this.props.triggerSubMenuAction,
       subMenuKey,
     };
-    return this.renderCommonMenuItem(c, i, subIndex, extraProps);
+    return this.renderCommonMenuItem(c, i, extraProps);
   },
 
   render() {

src/MenuItem.jsx

@@ -10,7 +10,7 @@ import { noop } from './util';
 
 /* eslint react/no-is-mounted:0 */
 
-const MenuItem = createReactClass({
+export const MenuItem = createReactClass({
   displayName: 'MenuItem',
 
   propTypes: {

src/MenuItemGroup.jsx

@@ -17,9 +17,9 @@ const MenuItemGroup = createReactClass({
     return { disabled: true };
   },
 
-  renderInnerMenuItem(item, subIndex) {
+  renderInnerMenuItem(item) {
     const { renderMenuItem, index } = this.props;
-    return renderMenuItem(item, index, subIndex, this.props.subMenuKey);
+    return renderMenuItem(item, index, this.props.subMenuKey);
   },
 
   render() {

src/MenuMixin.js

@@ -49,14 +49,9 @@ export function getActiveKey(props, originalActiveKey) {
   return activeKey;
 }
 
-function saveRef(index, subIndex, c) {
+function saveRef(index, c) {
   if (c) {
-    if (subIndex !== undefined) {
-      this.instanceArray[index] = this.instanceArray[index] || [];
-      this.instanceArray[index][subIndex] = c;
-    } else {
-      this.instanceArray[index] = c;
-    }
+    this.instanceArray[index] = c;
   }
 }
 
@@ -106,6 +101,7 @@ const MenuMixin = {
   },
 
   // all keyboard events callbacks run from here at first
+  // FIXME: callback is currently used by rc-select, should be more explicit
   onKeyDown(e, callback) {
     const keyCode = e.keyCode;
     let handled;
@@ -129,10 +125,6 @@ const MenuMixin = {
         callback(activeItem);
       }
 
-      return 1;
-    } else if (activeItem === undefined) {
-      e.preventDefault();
-      updateActiveKey(this.getStore(), this.getEventKey(), null);
       return 1;
     }
   },
@@ -154,25 +146,10 @@ const MenuMixin = {
   },
 
   getFlatInstanceArray() {
-    let instanceArray = this.instanceArray;
-    const hasInnerArray = instanceArray.some((a) => {
-      return Array.isArray(a);
-    });
-    if (hasInnerArray) {
-      instanceArray = [];
-      this.instanceArray.forEach((a) => {
-        if (Array.isArray(a)) {
-          instanceArray.push.apply(instanceArray, a);
-        } else {
-          instanceArray.push(a);
-        }
-      });
-      this.instanceArray = instanceArray;
-    }
-    return instanceArray;
+    return this.instanceArray;
   },
 
-  renderCommonMenuItem(child, i, subIndex, extraProps) {
+  renderCommonMenuItem(child, i, extraProps) {
     const state = this.getStore().getState();
     const props = this.props;
     const key = getKeyFromChildrenIndex(child, props.eventKey, i);
@@ -188,7 +165,7 @@ const MenuMixin = {
       parentMenu: this,
       // customized ref function, need to be invoked manually in child's componentDidMount
       manualRef: childProps.disabled ? undefined :
-        createChainedFunction(child.ref, saveRef.bind(this, i, subIndex)),
+        createChainedFunction(child.ref, saveRef.bind(this, i)),
       eventKey: key,
       active: !childProps.disabled && isActive,
       multiple: props.multiple,
@@ -241,7 +218,7 @@ const MenuMixin = {
       >
         {React.Children.map(
           props.children,
-          (c, i, subIndex) => this.renderMenuItem(c, i, subIndex, props.eventKey || '0-menu-'),
+          (c, i) => this.renderMenuItem(c, i, props.eventKey || '0-menu-'),
         )}
       </DOMWrap>
       /*eslint-enable */

src/SubMenu.jsx

@@ -10,7 +10,7 @@ import SubPopupMenu from './SubPopupMenu';
 import placements from './placements';
 import {
   noop,
-  loopMenuItemRecusively,
+  loopMenuItemRecursively,
   getMenuIdFromSubMenuEventKey,
 } from './util';
 
@@ -96,6 +96,20 @@ const SubMenu = createReactClass({
     this.componentDidUpdate();
   },
 
+  adjustWidth() {
+    /* istanbul ignore if */
+    if (!this.subMenuTitle || !this.menuInstance) {
+      return;
+    }
+    const popupMenu = ReactDOM.findDOMNode(this.menuInstance);
+    if (popupMenu.offsetWidth >= this.subMenuTitle.offsetWidth) {
+      return;
+    }
+
+    /* istanbul ignore next */
+    popupMenu.style.minWidth = `${this.subMenuTitle.offsetWidth}px`;
+  },
+
   componentDidUpdate() {
     const { mode, parentMenu, manualRef } = this.props;
 
@@ -108,26 +122,21 @@ const SubMenu = createReactClass({
       return;
     }
 
-    this.minWidthTimeout = setTimeout(() => {
-      if (!this.subMenuTitle || !this.menuInstance) {
-        return;
-      }
-      const popupMenu = ReactDOM.findDOMNode(this.menuInstance);
-      if (popupMenu.offsetWidth >= this.subMenuTitle.offsetWidth) {
-        return;
-      }
-      popupMenu.style.minWidth = `${this.subMenuTitle.offsetWidth}px`;
-    }, 0);
+    this.minWidthTimeout = setTimeout(() => this.adjustWidth(), 0);
   },
 
   componentWillUnmount() {
     const { onDestroy, eventKey } = this.props;
     if (onDestroy) {
       onDestroy(eventKey);
     }
+
+    /* istanbul ignore if */
     if (this.minWidthTimeout) {
       clearTimeout(this.minWidthTimeout);
     }
+
+    /* istanbul ignore if */
     if (this.mouseenterTimeout) {
       clearTimeout(this.mouseenterTimeout);
     }
@@ -314,7 +323,7 @@ const SubMenu = createReactClass({
 
   isChildrenSelected() {
     const ret = { find: false };
-    loopMenuItemRecusively(this.props.children, this.props.selectedKeys, ret);
+    loopMenuItemRecursively(this.props.children, this.props.selectedKeys, ret);
     return ret.find;
   },
 
@@ -454,7 +463,8 @@ const SubMenu = createReactClass({
 
 SubMenu.isSubMenu = 1;
 
-export default connect(({ openKeys, activeKey }, { eventKey, subMenuKey }) => ({
+export default connect(({ openKeys, activeKey, selectedKeys }, { eventKey, subMenuKey }) => ({
   isOpen: openKeys.indexOf(eventKey) > -1,
   active: activeKey[subMenuKey] === eventKey,
+  selectedKeys,
 }))(SubMenu);

src/SubPopupMenu.js

@@ -37,9 +37,7 @@ const SubPopupMenu = createReactClass({
 
   componentDidMount() {
     // invoke customized ref to expose component to mixin
-    if (this.props.manualRef) {
-      this.props.manualRef(this);
-    }
+    this.props.manualRef(this);
   },
 
   onDeselect(selectInfo) {
@@ -59,14 +57,16 @@ const SubPopupMenu = createReactClass({
   },
 
   onDestroy(key) {
+    /* istanbul ignore next */
     this.props.onDestroy(key);
   },
 
   getOpenTransitionName() {
     return this.props.openTransitionName;
   },
 
-  renderMenuItem(c, i, subIndex, subMenuKey) {
+  renderMenuItem(c, i, subMenuKey) {
+    /* istanbul ignore next */
     if (!c) {
       return null;
     }
@@ -77,24 +77,28 @@ const SubPopupMenu = createReactClass({
       triggerSubMenuAction: props.triggerSubMenuAction,
       subMenuKey,
     };
-    return this.renderCommonMenuItem(c, i, subIndex, extraProps);
+    return this.renderCommonMenuItem(c, i, extraProps);
   },
 
   render() {
     const props = { ...this.props };
-
     const haveRendered = this.haveRendered;
     this.haveRendered = true;
 
     this.haveOpened = this.haveOpened || props.visible || props.forceSubMenuRender;
+    // never rendered not planning to, don't render
     if (!this.haveOpened) {
       return null;
     }
 
-    const transitionAppear = !(!haveRendered && props.visible && props.mode === 'inline');
+    // don't show transition on first rendering (no animation for opened menu)
+    // show appear transition if it's not visible (not sure why)
+    // show appear transition if it's not inline mode
+    const transitionAppear = haveRendered || !props.visible || !props.mode === 'inline';
 
     props.className += ` ${props.prefixCls}-sub`;
     const animProps = {};
+
     if (props.openTransitionName) {
       animProps.transitionName = props.openTransitionName;
     } else if (typeof props.openAnimation === 'object') {

src/util.js

@@ -27,23 +27,24 @@ export function loopMenuItem(children, cb) {
   });
 }
 
-export function loopMenuItemRecusively(children, keys, ret) {
+export function loopMenuItemRecursively(children, keys, ret) {
+  /* istanbul ignore if */
   if (!children || ret.find) {
     return;
   }
   React.Children.forEach(children, (c) => {
-    if (ret.find) {
-      return;
-    }
     if (c) {
-      const construt = c.type;
-      if (!construt || !(construt.isSubMenu || construt.isMenuItem || construt.isMenuItemGroup)) {
+      const construct = c.type;
+      if (!construct
+            ||
+          !(construct.isSubMenu || construct.isMenuItem || construct.isMenuItemGroup)
+      ) {
         return;
       }
       if (keys.indexOf(c.key) !== -1) {
         ret.find = true;
       } else if (c.props.children) {
-        loopMenuItemRecusively(c.props.children, keys, ret);
+        loopMenuItemRecursively(c.props.children, keys, ret);
       }
     }
   });

tests/Menu.spec.js

@@ -33,13 +33,12 @@ describe('Menu', () => {
 
     ['vertical', 'horizontal', 'inline'].forEach((mode) => {
       it(`renders ${mode} menu correctly`, () => {
-        const wrapper = render(createMenu({ [mode]: true }));
+        const wrapper = render(createMenu({ mode }));
         expect(renderToJson(wrapper)).toMatchSnapshot();
       });
     });
   });
 
-
   it('set activeKey', () => {
     const wrapper = mount(
       <Menu activeKey="1">