@salesforce/design-system-react
Version:
Salesforce Lightning Design System for React
221 lines (186 loc) • 8.15 kB
JavaScript
;
var _react = require("react");
var _react2 = _interopRequireDefault(_react);
var _reactDom = require("react-dom");
var _reactDom2 = _interopRequireDefault(_reactDom);
var _reactModal = require("react-modal");
var _reactModal2 = _interopRequireDefault(_reactModal);
var _chai = require("chai");
var _enzyme = require("enzyme");
var _lodash = require("lodash.assign");
var _lodash2 = _interopRequireDefault(_lodash);
var _reactAddonsTestUtils = require("react-addons-test-utils");
var _reactAddonsTestUtils2 = _interopRequireDefault(_reactAddonsTestUtils);
var _iconSettings = require("../../icon-settings");
var _iconSettings2 = _interopRequireDefault(_iconSettings);
var _appLauncher = require("../../app-launcher");
var _appLauncher2 = _interopRequireDefault(_appLauncher);
var _tile = require("../../app-launcher/tile");
var _tile2 = _interopRequireDefault(_tile);
var _section = require("../../app-launcher/section");
var _section2 = _interopRequireDefault(_section);
var _search = require("../../input/search");
var _search2 = _interopRequireDefault(_search);
var _button = require("../../button");
var _button2 = _interopRequireDefault(_button);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/* eslint-disable react/no-find-dom-node */
var should = chai.should();
var Simulate = _reactAddonsTestUtils2.default.Simulate;
describe('SLDS APP LAUNCHER *******************************************', function () {
var handles = {
appLauncher: null,
appLauncherIcon: null,
modal: null
};
var defaultAppLauncherProps = {
isOpen: true
};
var createAppLauncher = function createAppLauncher(props) {
return _react2.default.createElement(_appLauncher2.default, (0, _lodash2.default)({}, defaultAppLauncherProps, props), _react2.default.createElement(_section2.default, {
title: "All Items"
}, _react2.default.createElement(_tile2.default, {
title: "Marketing Cloud"
}), _react2.default.createElement(_tile2.default, {
title: "Support Cloud"
})));
};
function mountAppLauncher(props) {
handles.appLauncher = (0, _enzyme.mount)(_react2.default.createElement(_iconSettings2.default, {
iconPath: "/assets/icons"
}, createAppLauncher(props)));
handles.appLauncherIcon = handles.appLauncher.find('.slds-context-bar__icon-action');
/*
* How to write tests for react-modal using portal
* http://remarkablemark.org/blog/2017/05/17/testing-react-modal/
*/
var portalNode = _reactDom2.default.findDOMNode(handles.appLauncher.find(_reactModal2.default).node.portal); // eslint-disable-line react/no-find-dom-node
// Wrap the modal portal in an Enzyme wrapper
handles.modal = new _enzyme.ReactWrapper(handles.appLauncher.find(_reactModal2.default).node.portal, true);
}
function cleanDom() {
// Removes the modal container element from the bottom of the DOM, this will prevent the 'setState' errors
// gotta be a better way to do this..
var modalWrapper = document.documentElement.querySelectorAll('.ReactModalPortal')[0];
if (modalWrapper) {
modalWrapper.parentNode.removeChild(modalWrapper);
}
} // ///////////////////////
// ////// T O D O ////////
// ///////////////////////
// APP LAUNCHER -----
// tabs?
// if you pass a isOpen prop, you must control the component with it (this.state.isOpen will now work)
// (#591, waiting on #590) modal content has classes: slds-modal__content slds-app-launcher__content slds-p-around--medium
describe('App Launcher', function () {
var onClose;
beforeEach(function () {
onClose = sinon.spy();
mountAppLauncher({
modalClassName: 'custom-modal-class',
modalHeaderButton: _react2.default.createElement(_button2.default, {
label: "App Exchange"
}),
onClose: onClose,
search: _react2.default.createElement(_search2.default, {
assistiveText: "Find an app"
}),
title: 'App Launcher!'
});
});
afterEach(function () {
cleanDom();
});
it('renders modal', function () {
should.exist(handles.modal);
});
it('renders custom modal class', function () {
should.exist(handles.modal.find('.custom-modal-class'));
});
it('renders modal header', function () {
should.exist(handles.modal.find('.slds-app-launcher__header'));
});
it('app launcher title can be set', function () {
(0, _chai.expect)(handles.modal.contains(_react2.default.createElement("h2", {
className: "slds-text-heading--medium"
}, "App Launcher!"))).to.equal(true);
});
it('renders search bar', function () {
should.exist(handles.modal.find(_search2.default));
});
it('renders search bar with proper class', function () {
should.exist(handles.modal.find('.slds-app-launcher__header-search'));
});
it('renders `modalHeaderButton`', function () {
should.exist(handles.modal.find(_button2.default).at(1));
});
it('closing modal fires callback', function () {
Simulate.click(handles.modal.find('.slds-modal__close').node);
(0, _chai.expect)(onClose.calledOnce).to.be.true; // eslint-disable-line no-unused-expressions
});
it('close modal callback receives original event as arg', function () {
Simulate.click(handles.modal.find('.slds-modal__close').node);
(0, _chai.expect)(onClose.args.length).to.equal(1);
});
it('renders modal content', function () {
should.exist(handles.modal.find('.slds-modal__content .slds-app-launcher__content .slds-p-around--medium'));
});
it('app launcher can be passed children', function () {
should.exist(handles.modal.find('SLDSAppLauncherSection'));
(0, _chai.expect)(handles.modal.find('SLDSAppLauncherTile').length).to.equal(2);
});
});
describe('App Launcher Icon', function () {
var triggerOnClick;
beforeEach(function () {
triggerOnClick = sinon.spy();
mountAppLauncher({
assistiveText: {
trigger: 'Custom Icon Assistive Text'
},
triggerOnClick: triggerOnClick
});
});
afterEach(function () {
cleanDom();
});
it('renders App Launcer icon', function () {
should.exist(handles.appLauncherIcon);
});
it('renders all App Launcher dots', function () {
(0, _chai.expect)(handles.appLauncherIcon.find('.slds-icon-waffle').containsAllMatchingElements([_react2.default.createElement("span", {
className: "slds-r1"
}), _react2.default.createElement("span", {
className: "slds-r2"
}), _react2.default.createElement("span", {
className: "slds-r3"
}), _react2.default.createElement("span", {
className: "slds-r4"
}), _react2.default.createElement("span", {
className: "slds-r5"
}), _react2.default.createElement("span", {
className: "slds-r6"
}), _react2.default.createElement("span", {
className: "slds-r7"
}), _react2.default.createElement("span", {
className: "slds-r8"
}), _react2.default.createElement("span", {
className: "slds-r9"
})])).to.equal(true);
});
it('App Launcher Icon link has proper classes', function () {
(0, _chai.expect)(handles.appLauncherIcon.find('button').node.className).to.include('slds-icon-waffle_container slds-context-bar__button');
});
it('clicking App Launcher Icon fires callback', function () {
Simulate.click(handles.appLauncherIcon.find('button').node);
(0, _chai.expect)(triggerOnClick.calledOnce).to.be.true; // eslint-disable-line no-unused-expressions
});
it('App Launcher Icon callback receives original event as arg', function () {
Simulate.click(handles.appLauncherIcon.find('button').node);
(0, _chai.expect)(triggerOnClick.args.length).to.equal(1);
});
it('renders assistive text from prop', function () {
(0, _chai.expect)(handles.appLauncherIcon.find('.slds-assistive-text').text()).to.equal('Custom Icon Assistive Text');
});
});
});