office-ui-fabric-react/lib-amd/components/ContextualMenu/ContextualMenu.test.js

Reusable React components for building experiences for Office 365.

define(["require", "exports", "react", "react-addons-test-utils", "../../Utilities", "../../FocusZone", "./ContextualMenu", "./ContextualMenu.Props"], function (require, exports, React, ReactTestUtils, Utilities_1, FocusZone_1, ContextualMenu_1, ContextualMenu_Props_1) {
    "use strict";
    var expect = chai.expect;
    describe('ContextualMenu', function () {
        afterEach(function () {
            for (var i = 0; i < document.body.children.length; i++) {
                if (document.body.children[i].tagName === 'DIV') {
                    document.body.removeChild(document.body.children[i]);
                    i--;
                }
            }
        });
        it('does not have a scrollbar due to an overflowing icon', function () {
            var items = [
                { name: 'TestText 1', key: 'TestKey1', canCheck: true, isChecked: true },
                { name: 'TestText 2', key: 'TestKey2', canCheck: true, isChecked: true },
                { name: 'TestText 3', key: 'TestKey3', canCheck: true, isChecked: true },
                { name: 'TestText 4', key: 'TestKey4', canCheck: true, isChecked: true },
            ];
            ReactTestUtils.renderIntoDocument(React.createElement(ContextualMenu_1.ContextualMenu, { items: items }));
            var menuList = document.querySelector('.ms-ContextualMenu-list');
            expect(menuList.scrollHeight).to.be.lte(menuList.offsetHeight, 'ContextualMenu is showing a scrollbar due to checkmark');
        });
        it('closes on left arrow if it is a submenu', function () {
            var items = [
                { name: 'TestText 1', key: 'TestKey1' },
                { name: 'TestText 2', key: 'TestKey2' },
                { name: 'TestText 3', key: 'TestKey3' },
                { name: 'TestText 4', key: 'TestKey4' },
            ];
            var spyCalled = false;
            var onDismissSpy = function (ev, dismissAll) { spyCalled = true; };
            ReactTestUtils.renderIntoDocument(React.createElement(ContextualMenu_1.ContextualMenu, { items: items, isSubMenu: true, onDismiss: onDismissSpy }));
            var menuList = document.querySelector('ul.ms-ContextualMenu-list');
            ReactTestUtils.Simulate.keyDown(menuList, { which: Utilities_1.KeyCodes.left });
            expect(spyCalled).to.be.true;
        });
        it('does not close on left arrow if it is a submenu with horizontal arrowDirection', function () {
            var items = [
                { name: 'TestText 1', key: 'TestKey1' },
                { name: 'TestText 2', key: 'TestKey2' },
                { name: 'TestText 3', key: 'TestKey3' },
                { name: 'TestText 4', key: 'TestKey4' },
            ];
            var spyCalled = false;
            var onDismissSpy = function (ev, dismissAll) { spyCalled = true; };
            ReactTestUtils.renderIntoDocument(React.createElement(ContextualMenu_1.ContextualMenu, { items: items, isSubMenu: true, onDismiss: onDismissSpy, arrowDirection: FocusZone_1.FocusZoneDirection.horizontal }));
            var menuList = document.querySelector('ul.ms-ContextualMenu-list');
            ReactTestUtils.Simulate.keyDown(menuList, { which: Utilities_1.KeyCodes.left });
            expect(spyCalled).to.be.false;
        });
        it('does not close on left arrow if it is a submenu with bidirectional arrowDirection', function () {
            var items = [
                { name: 'TestText 1', key: 'TestKey1' },
                { name: 'TestText 2', key: 'TestKey2' },
                { name: 'TestText 3', key: 'TestKey3' },
                { name: 'TestText 4', key: 'TestKey4' },
            ];
            var spyCalled = false;
            var onDismissSpy = function (ev, dismissAll) { spyCalled = true; };
            ReactTestUtils.renderIntoDocument(React.createElement(ContextualMenu_1.ContextualMenu, { items: items, isSubMenu: true, onDismiss: onDismissSpy, arrowDirection: FocusZone_1.FocusZoneDirection.horizontal }));
            var menuList = document.querySelector('ul.ms-ContextualMenu-list');
            ReactTestUtils.Simulate.keyDown(menuList, { which: Utilities_1.KeyCodes.left });
            expect(spyCalled).to.be.false;
        });
        it('opens a submenu item on right arrow', function () {
            var items = [
                {
                    name: 'TestText 1',
                    key: 'TestKey1',
                    subMenuProps: {
                        items: [
                            {
                                name: 'SubmenuText 1',
                                key: 'SubmenuKey1',
                                className: 'SubMenuClass'
                            }
                        ]
                    }
                },
            ];
            ReactTestUtils.renderIntoDocument(React.createElement(ContextualMenu_1.ContextualMenu, { items: items }));
            var menuItem = document.querySelector('button.ms-ContextualMenu-link');
            ReactTestUtils.Simulate.keyDown(menuItem, { which: Utilities_1.KeyCodes.right });
            expect(document.querySelector('.SubMenuClass')).to.exist;
        });
        it('opens a submenu item on click', function () {
            var items = [
                {
                    name: 'TestText 1',
                    key: 'TestKey1',
                    subMenuProps: {
                        items: [
                            {
                                name: 'SubmenuText 1',
                                key: 'SubmenuKey1',
                                className: 'SubMenuClass'
                            }
                        ]
                    }
                },
            ];
            ReactTestUtils.renderIntoDocument(React.createElement(ContextualMenu_1.ContextualMenu, { items: items }));
            var menuItem = document.querySelector('button.ms-ContextualMenu-link');
            ReactTestUtils.Simulate.click(menuItem);
            expect(document.querySelector('.SubMenuClass')).to.exist;
        });
        it('still works with deprecated IContextualMenuItem.items property', function () {
            var items = [
                {
                    name: 'TestText 1',
                    key: 'TestKey1',
                    items: [
                        {
                            name: 'SubmenuText 1',
                            key: 'SubmenuKey1',
                            className: 'SubMenuClass'
                        }
                    ]
                },
            ];
            ReactTestUtils.renderIntoDocument(React.createElement(ContextualMenu_1.ContextualMenu, { items: items }));
            var menuItem = document.querySelector('button.ms-ContextualMenu-link');
            ReactTestUtils.Simulate.keyDown(menuItem, { which: Utilities_1.KeyCodes.right });
            expect(document.querySelector('.SubMenuClass')).to.exist;
        });
        it('renders headers properly', function () {
            var items = [
                {
                    name: 'TestText 1',
                    key: 'TestKey1',
                    itemType: ContextualMenu_Props_1.ContextualMenuItemType.Header
                },
                {
                    name: 'TestText 2',
                    key: 'TestKey3'
                },
                {
                    name: 'TestText 3',
                    key: 'TestKey3',
                    itemType: ContextualMenu_Props_1.ContextualMenuItemType.Header
                }
            ];
            ReactTestUtils.renderIntoDocument(React.createElement(ContextualMenu_1.ContextualMenu, { items: items }));
            var menuItems = document.querySelectorAll('li');
            expect(menuItems.length).to.be.eq(4, 'This menu has an incorrect number of items');
            var headerOne = menuItems[0];
            var dividerOne = menuItems[2];
            var headerTwo = menuItems[3];
            expect(headerOne.className).to.not.contain('divider', 'The first item is a divider and it should be a header');
            expect(headerOne.firstElementChild.className).to.contain('header', 'The first item was not a header');
            expect(dividerOne.className).to.contain('divider', 'The third item in the contextualmenu was not a divider');
            expect(headerTwo.firstElementChild.className).to.contain('header', 'The final item was not a header');
        });
        it('does not return a value if no items are given', function () {
            ReactTestUtils.renderIntoDocument(React.createElement(ContextualMenu_1.ContextualMenu, { items: [] }));
            var menuList = document.querySelector('.ms-ContextualMenu-list');
            expect(menuList).to.be.eq(null, 'ContextualMenu is not return null even though no items are provided');
        });
    });
});

//# sourceMappingURL=ContextualMenu.test.js.map