@salesforce/design-system-react
Version:
Salesforce Lightning Design System for React
215 lines (210 loc) • 7.12 kB
JavaScript
import React from 'react';
import chai, { expect } from 'chai';
import chaiEnzyme from 'chai-enzyme';
import { mount } from 'enzyme';
import sinon from 'sinon';
import IconSettings from '../../../components/icon-settings';
import SplitViewListbox from '../../../components/split-view/listbox';
chai.use(chaiEnzyme());
var listOptions = [{
id: 'option1',
label: 'Riley Shultz',
topRightText: '99',
bottomLeftText: 'Biotech, Inc.',
bottomRightText: 'Nurturing'
}, {
id: 'option2',
label: 'Jason A. - VP of Sales',
topRightText: '92',
bottomLeftText: 'Case Management Solutions',
bottomRightText: 'Contacted'
}, {
id: 'option3',
label: 'Josh Smith',
topRightText: '90',
bottomLeftText: 'Acme, Inc.',
bottomRightText: 'Contacted'
}, {
id: 'option4',
label: 'Bobby Tree',
topRightText: '89',
bottomLeftText: 'Salesforce, Inc.',
bottomRightText: 'Closing'
}];
describe('SLDSSplitView - Listbox', function () {
var component;
var WrappedComponent = function WrappedComponent(props) {
return /*#__PURE__*/React.createElement(IconSettings, {
iconPath: "/assets/icons"
}, /*#__PURE__*/React.createElement(SplitViewListbox, props));
};
var mountComponent = function mountComponent(props) {
return mount( /*#__PURE__*/React.createElement(WrappedComponent, props));
};
var expectItemFocused = function expectItemFocused(value) {
var anchors = component.find('li > a');
listOptions.forEach(function (item, index) {
expect(anchors.get(index).props.tabIndex).to.equal(index === value ? 0 : -1);
});
};
var expectItemSelected = function expectItemSelected(value) {
var itemIndex = Array.isArray(value) ? value : [value];
var anchors = component.find('li > a');
listOptions.forEach(function (item, index) {
itemIndex.includes(index) ? expect(anchors.at(index).prop('aria-selected')).to.be.true : expect(anchors.at(index).prop('aria-selected')).to.be.false;
});
};
describe('When the component is mounted', function () {
it('should focus the first selected item', function () {
component = mountComponent({
options: listOptions,
selection: [listOptions[1]],
events: {
onSelect: sinon.spy()
}
});
expectItemFocused(1);
});
it('should focus the first item when there is no selection', function () {
component = mountComponent({
options: listOptions,
events: {
onSelect: sinon.spy()
}
});
expectItemFocused(0);
});
});
describe('When a list item is selected', function () {
describe('and single select only', function () {
it('should focus the item that is clicked', function () {
component = mountComponent({
options: listOptions,
events: {
onSelect: function onSelect() {}
}
});
component.find('li > a').at(2).simulate('click');
expectItemFocused(2);
});
it('should select the item that is clicked', function () {
component = mountComponent({
options: listOptions,
events: {
onSelect: function onSelect(event, _ref) {
var selectedItems = _ref.selectedItems;
component.setProps({
selection: selectedItems
});
}
}
});
component.find('li > a').at(2).simulate('click');
expectItemSelected(2);
});
describe('and using the keyboard', function () {
beforeEach(function () {
component = mountComponent({
options: listOptions,
selection: [listOptions[1]],
events: {
onSelect: function onSelect(event, _ref2) {
var selectedItems = _ref2.selectedItems;
component.setProps({
selection: selectedItems
});
}
}
});
});
describe('and "ctrl a" keyed', function () {
it('should not select all list items', function () {
component.find('ul').simulate('keyDown', {
key: 'a',
ctrlKey: true
});
expectItemSelected([1]);
});
});
it('and arrow key up it should focus the previous item', function () {
component.find('ul').simulate('keyDown', {
key: 'ArrowUp'
});
expectItemFocused(0);
});
it('and arrow key down it should focus the next item', function () {
component.find('ul').simulate('keyDown', {
key: 'ArrowDown'
});
expectItemFocused(2);
});
it('and arrow key up followed by click/enter should select the previous item', function () {
component.find('ul').simulate('keyDown', {
key: 'ArrowUp'
});
component.find('ul li a').at(0).simulate('click');
expectItemSelected(0);
});
it('and arrow key down followed by click/enter should select the next item', function () {
component.find('ul').simulate('keyDown', {
key: 'ArrowDown'
});
component.find('ul li a').at(2).simulate('click');
expectItemSelected(2);
});
});
});
describe('and multiple select enabled', function () {
beforeEach(function () {
component = mountComponent({
multiple: true,
options: listOptions,
events: {
onSelect: function onSelect(event, _ref3) {
var selectedItems = _ref3.selectedItems;
component.setProps({
selection: selectedItems
});
}
}
});
});
it('should select multiple items when clicked and the metaKey is pressed', function () {
var anchors = component.find('li > a');
anchors.at(2).simulate('click');
anchors.at(3).simulate('click', {
metaKey: true
});
expectItemSelected([2, 3]);
});
it('should select multiple items when clicked and the shiftKey is pressed', function () {
var anchors = component.find('li > a');
anchors.at(1).simulate('click');
anchors.at(3).simulate('click', {
shiftKey: true
});
expectItemSelected([1, 2, 3]);
});
describe('and "ctrl a" keyed', function () {
it('should select all list items', function () {
component.find('ul').simulate('keyDown', {
key: 'a',
ctrlKey: true
});
expectItemSelected([0, 1, 2, 3]);
});
it('should de-select all list items when all the list items are already selected', function () {
component.setProps({
selection: listOptions
});
component.find('ul').simulate('keyDown', {
key: 'a',
ctrlKey: true
});
expectItemSelected([]);
});
});
});
});
});
//# sourceMappingURL=split-view.listbox.browser-test.js.map