@salesforce/design-system-react
Version:
Salesforce Lightning Design System for React
299 lines (267 loc) • 9.93 kB
JavaScript
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]); if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
/* eslint-disable react/no-render-return-value */
import React from 'react';
import ReactDOM from 'react-dom';
import assign from 'lodash.assign';
import TestUtils from 'react-dom/test-utils';
import { expect } from 'chai';
import SLDSMenuPicklist from '../../menu-picklist';
import IconSettings from '../../icon-settings';
var Simulate = TestUtils.Simulate;
describe('SLDSMenuPicklist: ', function () {
var body;
var options = [{
label: 'A Option Option Super Super Long',
value: 'A0',
title: 'Greg'
}, {
label: 'B Option',
value: 'B0'
}];
var renderPicklist = function renderPicklist(inst) {
body = document.createElement('div');
document.body.appendChild(body);
/* deepscan-disable REACT_ASYNC_RENDER_RETURN_VALUE */
return ReactDOM.render( /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(IconSettings, {
iconPath: "/assets/icons"
}, inst)), body);
/* deepscan-enable REACT_ASYNC_RENDER_RETURN_VALUE */
};
function removePicklist() {
ReactDOM.unmountComponentAtNode(body);
document.body.removeChild(body);
}
var defaultProps = {
modal: false,
options: options,
placeholder: 'Select a contact',
value: 'C0',
silenceDeprecationWarning: true
};
var createPicklist = function createPicklist(props) {
return /*#__PURE__*/React.createElement(SLDSMenuPicklist, assign({}, defaultProps, props));
};
var getPicklist = function getPicklist(props) {
return renderPicklist(createPicklist(props));
};
var getMenu = function getMenu(dom) {
return dom.querySelector('.slds-dropdown');
};
describe('in modal mode', function () {
var cmp;
var btn;
beforeEach(function () {
cmp = getPicklist({
modal: true
});
var _cmp$getElementsByCla = cmp.getElementsByClassName('slds-button');
var _cmp$getElementsByCla2 = _slicedToArray(_cmp$getElementsByCla, 1);
btn = _cmp$getElementsByCla2[0];
});
afterEach(function () {
removePicklist();
});
it('expands/contracts the dropdown on click', function () {
expect(getMenu(document.body)).to.equal(null);
Simulate.click(btn, {});
expect(getMenu(document.body).className).to.include('slds-dropdown_left');
Simulate.click(btn, {});
expect(getMenu(document.body)).to.equal(null);
});
});
describe('with click handler', function () {
var cmp;
var btn;
var clicked;
beforeEach(function () {
clicked = false;
cmp = getPicklist({
onClick: function onClick() {
clicked = true;
}
});
var _cmp$getElementsByCla3 = cmp.getElementsByClassName('slds-button');
var _cmp$getElementsByCla4 = _slicedToArray(_cmp$getElementsByCla3, 1);
btn = _cmp$getElementsByCla4[0];
});
afterEach(function () {
removePicklist();
});
it('gives the button correct aria properties', function () {
expect(btn.getAttribute('aria-haspopup')).to.equal('true');
});
it('sets the placeholder', function () {
expect(btn.textContent).to.equal('Select a contact');
});
it('expands/contracts the dropdown on click', function () {
expect(getMenu(body)).to.equal(null);
Simulate.click(btn, {});
expect(getMenu(body).className).to.include('slds-dropdown');
Simulate.click(btn, {});
expect(getMenu(body)).to.equal(null);
});
it('preserves click behavior', function () {
expect(clicked).to.be.false;
Simulate.click(btn, {});
expect(clicked).to.be.true;
});
});
describe('expanded with onSelect', function () {
var cmp;
var btn;
var selected;
beforeEach(function () {
selected = false;
cmp = getPicklist({
onSelect: function onSelect(i) {
selected = i;
}
});
var _cmp$getElementsByCla5 = cmp.getElementsByClassName('slds-button');
var _cmp$getElementsByCla6 = _slicedToArray(_cmp$getElementsByCla5, 1);
btn = _cmp$getElementsByCla6[0];
Simulate.click(btn, {});
});
afterEach(function () {
removePicklist();
});
it('selects an item', function () {
expect(selected).to.be.false;
var items = getMenu(body).querySelectorAll('.slds-dropdown__item');
Simulate.click(items[1].querySelector('a'), {});
expect(selected.value).to.equal('B0');
});
});
describe('disabled', function () {
var cmp;
var btn;
var clicked;
beforeEach(function () {
clicked = false;
cmp = getPicklist({
disabled: true,
onClick: function onClick() {
clicked = true;
}
});
var _cmp$getElementsByCla7 = cmp.getElementsByClassName('slds-button');
var _cmp$getElementsByCla8 = _slicedToArray(_cmp$getElementsByCla7, 1);
btn = _cmp$getElementsByCla8[0];
});
afterEach(function () {
removePicklist();
});
it("doesn't open", function () {
Simulate.click(btn, {});
expect(getMenu(body)).to.equal(null);
});
it('prevents click behavior', function () {
expect(clicked).to.be.false;
Simulate.click(btn, {});
expect(clicked).to.be.false;
});
});
describe('accessible markup', function () {
var cmp;
var btn;
beforeEach(function () {
cmp = getPicklist({});
var _cmp$getElementsByCla9 = cmp.getElementsByClassName('slds-button');
var _cmp$getElementsByCla10 = _slicedToArray(_cmp$getElementsByCla9, 1);
btn = _cmp$getElementsByCla10[0];
});
afterEach(function () {
removePicklist();
});
it('<ul> has role menu & aria-labelledby', function () {
Simulate.click(btn, {});
var ulRole = getMenu(body).querySelector('ul').getAttribute('role');
var ulAria = getMenu(body).querySelector('ul').getAttribute('aria-labelledby');
expect(ulRole).to.equal('menu');
expect(ulAria).to.equal(btn.getAttribute('id'));
});
it('<a> inside <li> has role menuitem', function () {
Simulate.click(btn, {});
var items = getMenu(body).querySelectorAll('.slds-dropdown__item a');
var anchorRole = items[1].getAttribute('role');
var match = anchorRole === 'menuitem' || anchorRole === 'menuitemradio' || anchorRole === 'menuitemcheckbox';
expect(match).to.be.true;
});
});
describe('Keyboard behavior', function () {
var cmp;
var btn;
var selected;
beforeEach(function () {
selected = false;
cmp = getPicklist({
onSelect: function onSelect(i) {
selected = i;
}
});
var _cmp$getElementsByCla11 = cmp.getElementsByClassName('slds-button');
var _cmp$getElementsByCla12 = _slicedToArray(_cmp$getElementsByCla11, 1);
btn = _cmp$getElementsByCla12[0];
});
afterEach(function () {
removePicklist();
});
it('opens menu with enter', function () {
expect(getMenu(body)).to.equal(null);
Simulate.keyDown(btn, {
key: 'Enter',
keyCode: 13,
which: 13
});
expect(getMenu(body)).to.not.equal(null);
});
it('opens menu with down arrow key', function () {
expect(getMenu(body)).to.equal(null);
Simulate.keyDown(btn, {
key: 'Down',
keyCode: 40,
which: 40
});
expect(getMenu(body)).to.not.equal(null);
});
it('selects an item with keyboard', function () {
Simulate.click(btn, {});
expect(selected).to.be.false;
var menu = getMenu(body);
Simulate.keyDown(menu, {
key: 'Down',
keyCode: 40,
which: 40
});
Simulate.keyDown(menu, {
key: 'Down',
keyCode: 40,
which: 40
});
Simulate.keyDown(menu, {
key: 'Enter',
keyCode: 13,
which: 13
});
expect(selected.value).to.equal('B0');
});
it('closes Menu on esc', function () {
expect(getMenu(body)).to.equal(null);
Simulate.click(btn, {});
expect(getMenu(body)).to.not.equal(null);
var menuItems = getMenu(body).querySelectorAll('.slds-dropdown__item');
Simulate.keyDown(menuItems[1].querySelector('a'), {
key: 'Esc',
keyCode: 27,
which: 27
});
expect(getMenu(body)).to.equal(null);
});
});
});
//# sourceMappingURL=picklist-base.browser-test.js.map