@salesforce/design-system-react
Version:
Salesforce Lightning Design System for React
269 lines (226 loc) • 9.03 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 */
/* eslint-disable react/no-find-dom-node */
import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-dom/test-utils';
import { expect } from 'chai';
import assign from 'lodash.assign';
import SLDSButton from '../../button';
import IconSettings from '../../icon-settings';
var Simulate = TestUtils.Simulate;
var mockCallback = sinon.spy();
describe('SLDSButton: ', function () {
var defaultProps = {
label: 'Neutral',
onClick: mockCallback,
variant: 'neutral'
};
var renderButton = function renderButton(instance) {
var ref = /*#__PURE__*/React.createRef();
TestUtils.renderIntoDocument( /*#__PURE__*/React.createElement(IconSettings, {
iconPath: "/assets/icons"
}, /*#__PURE__*/React.createElement("div", {
ref: ref
}, instance)));
return ReactDOM.findDOMNode(ref.current);
};
var createButton = function createButton(props) {
return /*#__PURE__*/React.createElement(SLDSButton, assign({}, defaultProps, props));
};
var getButton = function getButton(props) {
return renderButton(createButton(props));
};
describe('Basic Button Props Render', function () {
var cmp;
var btn;
beforeEach(function () {
cmp = getButton({
id: 'custom-id',
text: 'Brand',
theme: 'brand',
style: {
background: 'rgb(18, 49, 35)'
}
});
var _cmp$getElementsByCla = cmp.getElementsByClassName('slds-button');
var _cmp$getElementsByCla2 = _slicedToArray(_cmp$getElementsByCla, 1);
btn = _cmp$getElementsByCla2[0];
});
it('renders correct label', function () {
expect(btn.textContent).to.equal('Neutral');
});
it('renders correct variant styles', function () {
expect(btn.className).to.include('slds-button_neutral');
});
it('renders custom id', function () {
expect(btn.getAttribute('id')).to.equal('custom-id');
});
it('renders custom styles', function () {
btn.style.backgroundColor.should.equal('rgb(18, 49, 35)');
});
});
describe('Form Props Render ', function () {
var cmp;
var btn;
var formAction = 'http://localhost/some/url';
beforeEach(function () {
cmp = getButton({
id: 'custom-id',
formAction: formAction
});
var _cmp$getElementsByCla3 = cmp.getElementsByClassName('slds-button');
var _cmp$getElementsByCla4 = _slicedToArray(_cmp$getElementsByCla3, 1);
btn = _cmp$getElementsByCla4[0];
});
it('renders formAction prop', function () {
expect(btn.formAction).to.equal(formAction);
});
});
describe('Data Props Render ', function () {
var cmp;
var btn;
beforeEach(function () {
cmp = getButton({
id: 'custom-id',
'data-some-attribute': 'some value'
});
var _cmp$getElementsByCla5 = cmp.getElementsByClassName('slds-button');
var _cmp$getElementsByCla6 = _slicedToArray(_cmp$getElementsByCla5, 1);
btn = _cmp$getElementsByCla6[0];
});
it('renders data-some-attribute prop', function () {
expect(btn.getAttribute('data-some-attribute')).to.equal('some value');
});
});
describe('Icon with Label Button Props Render', function () {
var cmp;
var btn;
var svg;
beforeEach(function () {
cmp = getButton({
label: 'Neutral with Icon',
iconName: 'download',
iconCategory: 'action',
iconPosition: 'right',
variant: 'neutral'
});
var _cmp$getElementsByCla7 = cmp.getElementsByClassName('slds-button');
var _cmp$getElementsByCla8 = _slicedToArray(_cmp$getElementsByCla7, 1);
btn = _cmp$getElementsByCla8[0];
var _cmp$getElementsByCla9 = cmp.getElementsByClassName('slds-button__icon');
var _cmp$getElementsByCla10 = _slicedToArray(_cmp$getElementsByCla9, 1);
svg = _cmp$getElementsByCla10[0];
});
it('renders label', function () {
expect(btn.textContent).to.equal('Neutral with Icon');
});
it('renders icon', function () {
expect(svg.className.baseVal).to.include('slds-button__icon_right');
});
});
describe('Icon Button Props render', function () {
var cmp;
var asstText;
var svg;
beforeEach(function () {
cmp = getButton({
assistiveText: {
icon: 'my settings'
},
variant: 'icon',
iconCategory: 'utility',
iconName: 'settings',
iconSize: 'small',
iconVariant: 'bare'
});
var _cmp$getElementsByCla11 = cmp.getElementsByClassName('slds-assistive-text');
var _cmp$getElementsByCla12 = _slicedToArray(_cmp$getElementsByCla11, 1);
asstText = _cmp$getElementsByCla12[0];
var _cmp$getElementsByTag = cmp.getElementsByTagName('svg');
var _cmp$getElementsByTag2 = _slicedToArray(_cmp$getElementsByTag, 1);
svg = _cmp$getElementsByTag2[0];
});
it('renders label', function () {
expect(asstText.textContent).to.equal('my settings');
});
it('renders icon styles', function () {
expect(svg.className.baseVal).to.include('slds-button__icon');
});
});
describe('(icon path) Icon Button renders assistive text', function () {
var cmp;
var asstText;
beforeEach(function () {
cmp = getButton({
assistiveText: {
icon: 'News'
},
iconSize: 'large',
iconPath: '/assets/icons/utility-sprite/svg/symbols.svg#announcement',
title: 'announcement'
});
var _cmp$getElementsByCla13 = cmp.getElementsByClassName('slds-assistive-text');
var _cmp$getElementsByCla14 = _slicedToArray(_cmp$getElementsByCla13, 1);
asstText = _cmp$getElementsByCla14[0];
});
it('renders label', function () {
expect(asstText.textContent).to.equal('News');
});
});
describe('External Path Icon Button renders', function () {
var cmp;
var use;
var svgHref;
before(function () {
cmp = getButton({
assistiveText: {
icon: 'announcement'
},
variant: 'icon',
iconPath: '/assets/icons/utility-sprite/svg/symbols.svg#announcement',
iconSize: 'large',
iconVariant: 'bare'
});
var _cmp$getElementsByTag3 = cmp.getElementsByTagName('use');
var _cmp$getElementsByTag4 = _slicedToArray(_cmp$getElementsByTag3, 1);
use = _cmp$getElementsByTag4[0];
svgHref = use.getAttribute('href');
});
it('renders svg', function () {
expect(svgHref).to.equal('/assets/icons/utility-sprite/svg/symbols.svg#announcement');
});
});
describe('Button Clickable', function () {
var cmp;
var btn;
var clicked;
function setClick() {
clicked = true;
}
beforeEach(function () {
clicked = false;
cmp = getButton({
label: 'Neutral',
variant: 'neutral',
onClick: setClick
});
var _cmp$getElementsByCla15 = cmp.getElementsByClassName('slds-button');
var _cmp$getElementsByCla16 = _slicedToArray(_cmp$getElementsByCla15, 1);
btn = _cmp$getElementsByCla16[0];
});
it('can be clicked', function () {
/* eslint-disable no-unused-expressions */
expect(clicked).to.be.false;
Simulate.click(btn, {});
expect(clicked).to.be.true;
/* eslint-enable no-unused-expressions */
});
});
});
//# sourceMappingURL=button.browser-test.js.map