@salesforce/design-system-react
Version:
Salesforce Lightning Design System for React
386 lines (352 loc) • 16.3 kB
JavaScript
;
var _react = _interopRequireDefault(require("react"));
var _enzyme = require("enzyme");
var _chai = _interopRequireWildcard(require("chai"));
var _chaiEnzyme = _interopRequireDefault(require("chai-enzyme"));
var _enzymeHelpers = require("../../../tests/enzyme-helpers");
var _globalNavigationBar = require("../../../utilities/sample-data/global-navigation-bar");
var _iconSettings = _interopRequireDefault(require("../../icon-settings"));
var _globalNavigationBar2 = _interopRequireDefault(require("../../global-navigation-bar"));
var _region = _interopRequireDefault(require("../../global-navigation-bar/region"));
var _dropdown = _interopRequireDefault(require("../../global-navigation-bar/dropdown"));
var _dropdownTrigger = _interopRequireDefault(require("../../global-navigation-bar/dropdown-trigger"));
var _link = _interopRequireDefault(require("../../global-navigation-bar/link"));
var _label = _interopRequireDefault(require("../../global-navigation-bar/label"));
var _button = _interopRequireDefault(require("../../global-navigation-bar/button"));
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
_chai.default.use((0, _chaiEnzyme.default)());
var COMPONENT_CSS_CLASSES = {
base: 'slds-context-bar',
themePrefix: 'slds-context-bar_theme-'
};
var REGION_CSS_CLASSES = {
primary: 'slds-context-bar__primary',
secondary: 'slds-context-bar__secondary',
tertiary: 'slds-context-bar__tertiary',
appName: 'slds-context-bar__app-name'
};
describe('Global Navigation Bar: ', function () {
// Base defaults
// no required props
/*
Tests
*/
describe('Default Structure', function () {
beforeEach((0, _enzymeHelpers.mountComponent)(_react.default.createElement(_iconSettings.default, {
iconPath: "/assets/icons"
}, _react.default.createElement(_globalNavigationBar2.default, null, _react.default.createElement(_region.default, {
region: "primary"
})))));
afterEach(_enzymeHelpers.unmountComponent);
it('has wrapping div and one primary region', function () {
(0, _chai.expect)(this.wrapper.find(".".concat(COMPONENT_CSS_CLASSES.base))).to.be.present();
(0, _chai.expect)(this.wrapper.find(".".concat(REGION_CSS_CLASSES.primary))).to.be.present();
});
it('Primary region DOES NOT have divider on right', function () {
var primary = this.wrapper.find(".".concat(REGION_CSS_CLASSES.primary));
(0, _chai.expect)(primary).to.not.have.className('slds-context-bar__item_divider-right');
});
});
describe('Optional Properties', function () {
var customCloudProps = _globalNavigationBar.propSets.customCloud.props;
var customThemeProps = _globalNavigationBar.propSets.lightTheme.props;
beforeEach((0, _enzymeHelpers.mountComponent)(_react.default.createElement(_iconSettings.default, {
iconPath: "/assets/icons"
}, _react.default.createElement(_globalNavigationBar2.default, _extends({}, customCloudProps, customThemeProps)))));
afterEach(_enzymeHelpers.unmountComponent);
it('has custom cloud and theme CSS', function () {
var component = this.wrapper.find(".".concat(COMPONENT_CSS_CLASSES.base));
(0, _chai.expect)(component).to.have.className("".concat(COMPONENT_CSS_CLASSES.themePrefix).concat(customCloudProps.cloud));
(0, _chai.expect)(component).to.have.className("".concat(COMPONENT_CSS_CLASSES.themePrefix).concat(customThemeProps.theme));
});
});
describe('Optional Region Structure', function () {
var props = _globalNavigationBar.propSets.base.props;
var buttonClicked = function buttonClicked() {};
var linkClicked = function linkClicked() {};
var dropdownItemClicked = function dropdownItemClicked() {};
beforeEach((0, _enzymeHelpers.mountComponent)(_react.default.createElement(_iconSettings.default, {
iconPath: "/assets/icons"
}, _react.default.createElement(_globalNavigationBar2.default, props, _react.default.createElement(_region.default, {
region: "primary"
}), _react.default.createElement(_region.default, {
region: "secondary",
navigation: true,
dividerPosition: "right"
}, _react.default.createElement(_link.default, {
label: "Home",
id: "home-link",
onClick: linkClicked('Home link clicked')
}), _react.default.createElement(_dropdown.default, {
assistiveText: {
icon: 'Open Menu'
},
id: "primaryDropdown",
label: "Global Navigation Menu Item 1",
onSelect: dropdownItemClicked('Dropdown Menu Item clicked'),
options: _globalNavigationBar.dropdownCollection
}), _react.default.createElement(_link.default, {
active: true,
id: "menu-item-2",
label: "Global Navigation Menu Item 2",
onClick: linkClicked('Link clicked')
}), _react.default.createElement(_dropdown.default, {
active: true,
assistiveText: {
icon: 'Open Menu'
},
id: "primaryDropdownActive",
label: "Global Navigation Menu Item 3",
onSelect: dropdownItemClicked('Dropdown Menu Item clicked'),
options: _globalNavigationBar.dropdownCollection
})), _react.default.createElement(_region.default, {
region: "tertiary"
}, _react.default.createElement(_link.default, {
label: "Actions",
onClick: linkClicked('Link clicked')
}), _react.default.createElement(_button.default, {
active: true,
label: "Button",
id: "global-nav__button",
onClick: buttonClicked('Button clicked')
}), _react.default.createElement(_label.default, {
dividerPosition: "left",
label: "Vandelay Enterprises"
}))))));
afterEach(_enzymeHelpers.unmountComponent);
it('has 1 primary, 1 secondary, and 1 tertiary region', function () {
(0, _chai.expect)(this.wrapper.find(".".concat(REGION_CSS_CLASSES.primary))).to.be.present();
(0, _chai.expect)(this.wrapper.find(".".concat(REGION_CSS_CLASSES.secondary))).to.be.present();
(0, _chai.expect)(this.wrapper.find(".".concat(REGION_CSS_CLASSES.tertiary))).to.be.present();
});
it('Secondary region application is a nav HTML element and has divider on right side', function () {
var nav = this.wrapper.find(".".concat(REGION_CSS_CLASSES.secondary));
(0, _chai.expect)(nav.type()).to.equal('nav');
(0, _chai.expect)(nav).to.have.className('slds-context-bar__item_divider-right');
});
it('displays active items as active', function () {
var activeItems = this.wrapper.find('.slds-is-active');
(0, _chai.expect)(activeItems).to.have.length(3);
});
});
describe('Secondary Region', function () {
beforeEach((0, _enzymeHelpers.mountComponent)(_react.default.createElement(_iconSettings.default, {
iconPath: "/assets/icons"
}, _react.default.createElement(_region.default, {
region: "secondary"
}))));
afterEach(_enzymeHelpers.unmountComponent);
it('Secondary region application is div and not a nav', function () {
var nav = this.wrapper.find(".".concat(REGION_CSS_CLASSES.secondary));
(0, _chai.expect)(nav.type()).to.equal('div');
});
});
describe('GlobalNavigationDropdown child component', function () {
var dropdown;
var eventTest;
var eventHandler = function eventHandler(option, moreData) {
eventTest = {
option: option,
moreData: moreData
};
};
beforeEach(function () {
(0, _enzymeHelpers.mountComponent)(_react.default.createElement(_dropdown.default, {
dividerPosition: "left",
label: "Test",
onSelect: eventHandler,
options: _globalNavigationBar.dropdownCollection
})).call(this);
dropdown = this.wrapper.find('.slds-context-bar__dropdown-trigger');
eventTest = null;
});
afterEach(_enzymeHelpers.unmountComponent);
it('calls onSelect handler properly', function () {
dropdown.find('button.slds-context-bar__button').simulate('click');
this.wrapper.find('.slds-dropdown ul.dropdown__list').childAt(0).find('a').simulate('click');
(0, _chai.expect)(_typeof(eventTest.option)).to.eql('object');
(0, _chai.expect)(_typeof(eventTest.moreData)).to.eql('object');
});
it('renders divider as expected', function () {
(0, _chai.expect)(dropdown.hasClass('slds-context-bar__item_divider-left')).to.eql(true);
});
});
describe('GlobalNavigationDropdownTrigger child component', function () {
var dropdownTrigger;
var eventTest;
var eventHandler = function eventHandler(event, data) {
eventTest = {
event: event,
data: data
};
};
beforeEach(function () {
(0, _enzymeHelpers.mountComponent)(_react.default.createElement(_dropdownTrigger.default, {
dividerPosition: "left",
label: "Test",
onBlur: eventHandler,
onClick: eventHandler,
onFocus: eventHandler,
onKeyDown: eventHandler,
onMouseDown: eventHandler,
onMouseEnter: eventHandler,
onMouseLeave: eventHandler
})).call(this);
dropdownTrigger = this.wrapper.find('.slds-context-bar__dropdown-trigger');
eventTest = null;
});
afterEach(_enzymeHelpers.unmountComponent);
it('has appropriate attributes', function () {
(0, _chai.expect)(dropdownTrigger.text()).to.equal('Test');
});
it('calls onClick handler properly', function () {
dropdownTrigger.simulate('click');
(0, _chai.expect)(_typeof(eventTest.event)).to.eql('object');
});
it('calls onBlur handler properly', function () {
dropdownTrigger.simulate('blur');
(0, _chai.expect)(_typeof(eventTest.event)).to.eql('object');
});
it('calls onFocus handler properly', function () {
dropdownTrigger.simulate('focus');
(0, _chai.expect)(_typeof(eventTest.event)).to.eql('object');
});
it('calls onKeyDown handler properly', function () {
dropdownTrigger.simulate('keydown', {
keyCode: 13
});
(0, _chai.expect)(_typeof(eventTest.event)).to.eql('object');
});
it('calls onMouseDown handler properly', function () {
dropdownTrigger.simulate('mousedown');
(0, _chai.expect)(_typeof(eventTest.event)).to.eql('object');
});
it('calls onMouseEnter handler properly', function () {
dropdownTrigger.simulate('mouseenter');
(0, _chai.expect)(_typeof(eventTest.event)).to.eql('object');
});
it('calls onMouseLeave handler properly', function () {
dropdownTrigger.simulate('mouseleave');
(0, _chai.expect)(_typeof(eventTest.event)).to.eql('object');
});
it('renders divider as expected', function () {
(0, _chai.expect)(dropdownTrigger.hasClass('slds-context-bar__item_divider-left')).to.eql(true);
});
});
describe('GlobalNavigationLink child component', function () {
var aTag;
var eventTest;
var link;
var eventHandler = function eventHandler(event, data) {
eventTest = {
event: event,
data: data
};
};
beforeEach(function () {
(0, _enzymeHelpers.mountComponent)(_react.default.createElement(_link.default, {
dividerPosition: "left",
href: "http://google.com",
label: "Home",
id: "home-link",
onBlur: eventHandler,
onClick: eventHandler,
onFocus: eventHandler,
onKeyDown: eventHandler,
onKeyPress: eventHandler,
onKeyUp: eventHandler,
onMouseEnter: eventHandler,
onMouseLeave: eventHandler
})).call(this);
link = this.wrapper.find('li#home-link');
aTag = link.find('a');
eventTest = null;
});
afterEach(_enzymeHelpers.unmountComponent);
it('has appropriate attributes', function () {
(0, _chai.expect)(link.text()).to.equal('Home');
});
it('calls onClick handler properly', function () {
aTag.simulate('click');
(0, _chai.expect)(_typeof(eventTest.event)).to.eql('object');
(0, _chai.expect)(_typeof(eventTest.data.href)).to.eql('string');
});
it('calls onBlur handler properly', function () {
aTag.simulate('blur');
(0, _chai.expect)(_typeof(eventTest.event)).to.eql('object');
});
it('calls onFocus handler properly', function () {
aTag.simulate('focus');
(0, _chai.expect)(_typeof(eventTest.event)).to.eql('object');
});
it('calls onKeyDown handler properly', function () {
aTag.simulate('keydown', {
keyCode: 13
});
(0, _chai.expect)(_typeof(eventTest.event)).to.eql('object');
});
it('calls onKeyPress handler properly', function () {
aTag.simulate('keypress', {
keyCode: 13
});
(0, _chai.expect)(_typeof(eventTest.event)).to.eql('object');
});
it('calls onKeyUp handler properly', function () {
aTag.simulate('keyup', {
keyCode: 13
});
(0, _chai.expect)(_typeof(eventTest.event)).to.eql('object');
});
it('calls onMouseEnter handler properly', function () {
aTag.simulate('mouseenter');
(0, _chai.expect)(_typeof(eventTest.event)).to.eql('object');
});
it('calls onMouseLeave handler properly', function () {
aTag.simulate('mouseleave');
(0, _chai.expect)(_typeof(eventTest.event)).to.eql('object');
});
it('renders href if passed', function () {
(0, _chai.expect)(link.find('a')).to.have.attr('href', 'http://google.com');
});
it('renders divider as expected', function () {
(0, _chai.expect)(link.hasClass('slds-context-bar__item_divider-left')).to.eql(true);
});
});
describe('GlobalNavigationButton child component', function () {
it('GlobalNavigationBarButton has attributes and onClick runs callback', function () {
var buttonClicked = sinon.spy();
var instance = _react.default.createElement(_button.default, {
label: "Button",
id: "global-nav__button",
onClick: buttonClicked('Button clicked')
});
this.wrapper = (0, _enzyme.mount)(instance, {
attachTo: document.body.appendChild(document.createElement('div'))
});
var link = this.wrapper.find('button#global-nav__button');
(0, _chai.expect)(link.text()).to.equal('Button');
link.simulate('click');
(0, _chai.expect)(buttonClicked.calledOnce).to.be.true;
this.wrapper.unmount();
});
});
describe('GlobalNavigationLabel child component', function () {
it('GlobalNavigationBarLabel has attributes and renders dividerPosition correctly', function () {
var instance = _react.default.createElement(_label.default, {
dividerPosition: "right",
label: "Text",
id: "test-text"
});
this.wrapper = (0, _enzyme.mount)(instance, {
attachTo: document.body.appendChild(document.createElement('div'))
});
var item = this.wrapper.find('span#test-text');
(0, _chai.expect)(this.wrapper.find('span.slds-context-bar__label-action').hasClass('slds-context-bar__item_divider-right')).to.eql(true);
(0, _chai.expect)(item.text()).to.equal('Text');
this.wrapper.unmount();
});
});
});