office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
133 lines (131 loc) • 6.42 kB
JavaScript
;
/* tslint:disable:no-unused-variable */
var React = require('react');
/* tslint:enable:no-unused-variable */
var ReactTestUtils = require('react-addons-test-utils');
var Utilities_1 = require('../../Utilities');
var FocusZone_1 = require('../../FocusZone');
var expect = chai.expect;
var ContextualMenu_1 = require('./ContextualMenu');
describe('ContextualMenu', function () {
afterEach(function () {
while (window.document.body.children.length) {
window.document.body.removeChild(window.document.body.children[0]);
}
});
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;
});
});
//# sourceMappingURL=ContextualMenu.test.js.map