@salesforce/design-system-react
Version:
Salesforce Lightning Design System for React
265 lines (241 loc) • 8.63 kB
JavaScript
;
var _react = require("react");
var _react2 = _interopRequireDefault(_react);
var _reactDom = require("react-dom");
var _reactDom2 = _interopRequireDefault(_reactDom);
var _lodash = require("lodash.assign");
var _lodash2 = _interopRequireDefault(_lodash);
var _testUtils = require("react-dom/test-utils");
var _testUtils2 = _interopRequireDefault(_testUtils);
var _chai = require("chai");
var _modal = require("../../modal");
var _modal2 = _interopRequireDefault(_modal);
var _iconSettings = require("../../icon-settings");
var _iconSettings2 = _interopRequireDefault(_iconSettings);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/* eslint-disable react/no-find-dom-node */
var Simulate = _testUtils2.default.Simulate;
describe('SLDSModal: ', function () {
var container;
var renderedNode;
afterEach(function () {
_reactDom2.default.unmountComponentAtNode(container);
document.body.removeChild(container);
container = null;
});
var defaultProps = {
align: 'top',
children: _react2.default.createElement("div", null, "hello")
};
var renderModal = function renderModal(modalInstance) {
container = document.createElement('div');
var opener = _react2.default.createElement("button", null, _react2.default.createElement(_iconSettings2.default, {
iconPath: "/assets/icons"
}, modalInstance));
document.body.appendChild(container);
renderedNode = _reactDom2.default.render(opener, container);
return renderedNode;
};
var createModal = function createModal(props) {
return _react2.default.createElement(_modal2.default, (0, _lodash2.default)({}, defaultProps, props));
};
var getModal = function getModal(props) {
return renderModal(createModal(props));
};
var getModalNode = function getModalNode(dom) {
return dom.querySelector('.slds-modal');
};
describe('Styling', function () {
beforeEach(function () {
getModal({
containerClassName: 'container-class-name-test',
contentClassName: 'content-class-name-test',
contentStyle: {
height: '500px'
},
isOpen: true,
portalClassName: 'portal-class-name-test'
});
});
it('has correct containerClassName, contentClassName, contentStyle, and portalClassName', function () {
var modalContainer = getModalNode(document.body).querySelector('.slds-modal__container.container-class-name-test');
(0, _chai.expect)(modalContainer).to.exist;
var modalContent = getModalNode(document.body).querySelector('.slds-modal__content.content-class-name-test');
(0, _chai.expect)(modalContent).to.exist;
(0, _chai.expect)(modalContent.style.height).to.equal('500px');
var modalPortal = document.querySelector('body > .portal-class-name-test');
(0, _chai.expect)(modalPortal).to.exist;
});
});
describe('Closed modal', function () {
beforeEach(function () {
getModal({
isOpen: false
});
});
it('updates the overflow', function () {
(0, _chai.expect)(document.body.style.overflow).to.equal('inherit');
});
it('does not render to the body', function () {
(0, _chai.expect)(getModalNode(document.body)).to.be.null;
});
});
describe('Open modal', function () {
var cmp;
var closed;
var modal;
beforeEach(function () {
closed = false;
cmp = getModal({
assistiveText: {
closeButton: 'Exit'
},
isOpen: true,
size: 'large',
containerClassName: 'my-custom-class',
onRequestClose: function onRequestClose() {
closed = true;
}
});
modal = getModalNode(document.body);
});
it('adds the large class', function () {
(0, _chai.expect)(modal.className).to.include('slds-modal--large');
});
it('adds custom classname from modal container prop', function () {
(0, _chai.expect)(modal.firstChild.className).to.include('my-custom-class');
});
it('renders correct assistive text/title for close button', function () {
var closeBtn = modal.querySelector('.slds-modal__close');
(0, _chai.expect)(closeBtn.title).to.equal('Exit');
});
it('calls onRequestClose', function () {
var closeBtn = modal.querySelector('.slds-modal__close');
(0, _chai.expect)(closed).to.be.false;
Simulate.click(closeBtn, {});
(0, _chai.expect)(closed).to.be.true;
});
});
describe('Proper HTML markup', function () {
it('dismissible modal has role=dialog', function () {
var cmp = getModal({
isOpen: true
});
var modal = getModalNode(document.body);
var role = modal.getAttribute('role');
(0, _chai.expect)(role).to.equal('dialog');
});
it('non-dismissible modal has role=alertdialog', function () {
var cmp = getModal({
isOpen: true,
dismissible: false
});
var modal = getModalNode(document.body);
var role = modal.getAttribute('role');
(0, _chai.expect)(role).to.equal('alertdialog');
});
});
describe('Open with custom header and header className', function () {
var modal;
beforeEach(function () {
getModal({
header: _react2.default.createElement("div", {
id: "art-vandelay"
}, "Art vandelay"),
headerClassName: 'art-vandelay',
isOpen: true
});
modal = getModalNode(document.body);
});
it('adds the header', function () {
var customHeader = modal.querySelector('#art-vandelay');
(0, _chai.expect)(customHeader).to.not.be.null;
});
it('adds the custom header class', function () {
(0, _chai.expect)(modal.querySelector('.slds-modal__header').className).to.include('art-vandelay');
});
});
describe('Open with Prompt and Footer', function () {
var modal;
beforeEach(function () {
var feet = _react2.default.createElement("div", {
className: "toes"
}, "Toes");
getModal({
isOpen: true,
prompt: 'warning',
title: 'are you sure?',
footer: feet
});
modal = getModalNode(document.body);
});
it('adds the footer', function () {
var footer = modal.querySelector('.slds-modal__footer');
(0, _chai.expect)(footer.className).to.include('slds-theme--default');
});
it('adds the prompt class', function () {
(0, _chai.expect)(modal.className).to.include('slds-modal--prompt');
});
it('adds the prompt theme class', function () {
(0, _chai.expect)(modal.querySelector('.slds-modal__header').className).to.include('slds-theme--warning');
});
it('adds the footer html content', function () {
(0, _chai.expect)(modal.querySelector('.toes').innerHTML).to.equal('Toes');
});
});
describe('Open Directional', function () {
var modal;
beforeEach(function () {
var feet = [_react2.default.createElement("div", {
className: "toes"
}, "Toe 1"), _react2.default.createElement("div", {
className: "toes"
}, "Toe 2")];
getModal({
isOpen: true,
directional: true,
footer: feet
});
modal = getModalNode(document.body);
});
it('adds the footer', function () {
var footer = modal.querySelector('.slds-modal__footer--directional');
(0, _chai.expect)(footer.className).to.include('slds-modal__footer');
});
});
describe('Keyboard behavior', function () {
var modal;
beforeEach(function () {
var feet = [_react2.default.createElement("button", {
className: "cancel"
}, "Cancel"), _react2.default.createElement("button", {
className: "save"
}, "Save")];
getModal({
isOpen: true,
directional: true,
footer: feet
});
modal = getModalNode(document.body);
});
it('first tab focuses close button', function () {// There an issue with this test, functionality works fine.
// setTimeout(() => {
// Simulate.keyDown(modal, {
// key: 'Tab',
// keyCode: 9,
// which: 9,
// });
// setTimeout(() => {
// expect(document.activeElement.className).to.include(
// 'slds-modal__close'
// );
// done();
// }, 200);
// }, 200);
});
it('enter on close button works', function () {// TODO: simulate enter on close button and modal is undefined
});
it('traps focus inside Modal', function () {// TODO: simulate tabbing around inside of Modal
});
});
});