Add functions to ContextualMenuItem to open and close menus on command

common/changes/office-ui-fabric-react/keyou-contextual-menu-item-functions_2018-05-02-18-14.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Add ContextualMenuItem functions to open and close menus",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}

packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.test.tsx

@@ -2,12 +2,14 @@ import * as React from 'react';
 import { Promise } from 'es6-promise';
 import * as ReactTestUtils from 'react-dom/test-utils';
 import {
-  KeyCodes
+  KeyCodes,
+  createRef
 } from '../../Utilities';
 import { FocusZoneDirection } from '../../FocusZone';
 
 import { ContextualMenu, canAnyMenuItemsCheck } from './ContextualMenu';
 import { IContextualMenuItem, ContextualMenuItemType } from './ContextualMenu.types';
+import { IContextualMenuRenderItem } from './ContextualMenuItem.types';
 import { LayerBase as Layer } from '../Layer/Layer.base';
 
 describe('ContextualMenu', () => {
@@ -859,4 +861,162 @@ describe('ContextualMenu', () => {
       expect(canAnyMenuItemsCheck(items)).toEqual(true);
     });
   });
+
+  describe('IContextualMenuRenderItem function tests', () => {
+    const contextualItem = createRef<IContextualMenuRenderItem>();
+    let menuDismissed: boolean;
+    const onDismiss = (ev?: any, dismissAll?: boolean) => { menuDismissed = true; };
+
+    describe('for a button element', () => {
+      beforeEach(() => {
+        menuDismissed = false;
+        const menu: IContextualMenuItem[] = [
+          {
+            name: 'Test1',
+            key: 'Test1',
+            componentRef: contextualItem,
+            subMenuProps: {
+              items: [
+                {
+                  name: 'Test2',
+                  key: 'Test2',
+                  className: 'SubMenuClass'
+                },
+                {
+                  name: 'Test3',
+                  key: 'Test3',
+                  className: 'SubMenuClass'
+                }
+              ],
+            }
+          }
+        ];
+        ReactTestUtils.renderIntoDocument<ContextualMenu>(
+          <ContextualMenu
+            onDismiss={ onDismiss }
+            items={ menu }
+          />
+        );
+      });
+
+      it('openSubMenu will open the item`s submenu if present', () => {
+        contextualItem.value!.openSubMenu();
+        expect(document.querySelector('.SubMenuClass')).not.toEqual(null);
+      });
+
+      it('dismissSubMenu will close the item`s submenu if present', () => {
+        contextualItem.value!.openSubMenu();
+        expect(document.querySelector('.SubMenuClass')).not.toEqual(null);
+        contextualItem.value!.dismissSubMenu();
+        expect(document.querySelector('.SubMenuClass')).toEqual(null);
+      });
+
+      it('dismissMenu will close the item`s menu', () => {
+        contextualItem.value!.dismissMenu();
+        expect(menuDismissed).toEqual(true);
+      });
+    });
+
+    describe('for a split button element', () => {
+      beforeEach(() => {
+        menuDismissed = false;
+        const menu: IContextualMenuItem[] = [
+          {
+            name: 'Test1',
+            key: 'Test1',
+            componentRef: contextualItem,
+            split: true,
+            subMenuProps: {
+              items: [
+                {
+                  name: 'Test2',
+                  key: 'Test2',
+                  className: 'SubMenuClass'
+                },
+                {
+                  name: 'Test3',
+                  key: 'Test3',
+                  className: 'SubMenuClass'
+                }
+              ],
+            }
+          }
+        ];
+        ReactTestUtils.renderIntoDocument<ContextualMenu>(
+          <ContextualMenu
+            onDismiss={ onDismiss }
+            items={ menu }
+          />
+        );
+      });
+
+      it('openSubMenu will open the item`s submenu if present', () => {
+        contextualItem.value!.openSubMenu();
+        expect(document.querySelector('.SubMenuClass')).not.toEqual(null);
+      });
+
+      it('dismissSubMenu will close the item`s submenu if present', () => {
+        contextualItem.value!.openSubMenu();
+        expect(document.querySelector('.SubMenuClass')).not.toEqual(null);
+        contextualItem.value!.dismissSubMenu();
+        expect(document.querySelector('.SubMenuClass')).toEqual(null);
+      });
+
+      it('dismissMenu will close the item`s menu', () => {
+        contextualItem.value!.dismissMenu();
+        expect(menuDismissed).toEqual(true);
+      });
+    });
+
+    describe('for an anchor element', () => {
+      beforeEach(() => {
+        menuDismissed = false;
+        const menu: IContextualMenuItem[] = [
+          {
+            name: 'Test1',
+            key: 'Test1',
+            componentRef: contextualItem,
+            href: '#test',
+            subMenuProps: {
+              items: [
+                {
+                  name: 'Test2',
+                  key: 'Test2',
+                  className: 'SubMenuClass'
+                },
+                {
+                  name: 'Test3',
+                  key: 'Test3',
+                  className: 'SubMenuClass'
+                }
+              ],
+            }
+          }
+        ];
+        ReactTestUtils.renderIntoDocument<ContextualMenu>(
+          <ContextualMenu
+            onDismiss={ onDismiss }
+            items={ menu }
+          />
+        );
+      });
+
+      it('openSubMenu will open the item`s submenu if present', () => {
+        contextualItem.value!.openSubMenu();
+        expect(document.querySelector('.SubMenuClass')).not.toEqual(null);
+      });
+
+      it('dismissSubMenu will close the item`s submenu if present', () => {
+        contextualItem.value!.openSubMenu();
+        expect(document.querySelector('.SubMenuClass')).not.toEqual(null);
+        contextualItem.value!.dismissSubMenu();
+        expect(document.querySelector('.SubMenuClass')).toEqual(null);
+      });
+
+      it('dismissMenu will close the item`s menu', () => {
+        contextualItem.value!.dismissMenu();
+        expect(menuDismissed).toEqual(true);
+      });
+    });
+  });
 });