@salesforce/design-system-react
Version:
Salesforce Lightning Design System for React
287 lines (277 loc) • 11.6 kB
JavaScript
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 IconSettings from '../../icon-settings';
import SLDSButton from '../../button';
import Settings from '../../settings';
import SLDSCheckbox from '../../checkbox'; // const { Simulate } = TestUtils;
import SLDSWelcomeMat from '../../welcome-mat';
import SLDSWelcomeMatTile from '../../welcome-mat/tile';
import WelcomeMatInfoBadge from '../../welcome-mat/info-badge';
describe('SLDSWelcomeMat: ', function () {
var container;
var renderedNode; // set "app node" fixture, so no warnings are triggered.
var appNode = document.createElement('span');
appNode.id = 'app';
document.body.appendChild(appNode);
Settings.setAppElement('#app');
after(function () {
document.body.removeChild(appNode);
appNode = null;
});
afterEach(function () {
ReactDOM.unmountComponentAtNode(container);
document.body.removeChild(container);
container = null;
});
var renderWelcomeMat = function renderWelcomeMat(welcomeMatInstance) {
container = document.createElement('div');
var opener =
/*#__PURE__*/
React.createElement(IconSettings, {
iconPath: "/assets/icons"
}, welcomeMatInstance);
document.body.appendChild(container);
renderedNode = ReactDOM.render(opener, container); // deepscan-disable-line REACT_ASYNC_RENDER_RETURN_VALUE
return renderedNode;
};
var title = 'The Lightning Experience is here!';
var description = 'This is a sample description for the welcome mat';
var labels = {
title: title,
description: description
};
var defaultProps = {
isOpen: true,
labels: labels
};
var createWelcomeMat = function createWelcomeMat(props) {
return (
/*#__PURE__*/
React.createElement(SLDSWelcomeMat, assign({}, defaultProps, props))
);
};
var getWelcomeMat = function getWelcomeMat(props) {
return renderWelcomeMat(createWelcomeMat(props));
};
var getWelcomeMatNode = function getWelcomeMatNode(dom) {
return dom.querySelector('.slds-modal');
};
var tiles = [
/*#__PURE__*/
React.createElement(SLDSWelcomeMatTile, {
title: "Welcome to Salesforce!",
description: "Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet.",
icon: "animal_and_nature",
href: "javascript:void(0);",
isComplete: true
}),
/*#__PURE__*/
React.createElement(SLDSWelcomeMatTile, {
title: "Learn About OpenCTI!",
description: "Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet.",
icon: "call",
href: "javascript:void(0);",
isComplete: true
}),
/*#__PURE__*/
React.createElement(SLDSWelcomeMatTile, {
title: "Power Up the Utility Bar",
description: "Tap into case history or share notes with fellow agents\u2014it all happens on the utility bar.",
href: "javascript:void(0);",
icon: "call"
}),
/*#__PURE__*/
React.createElement(SLDSWelcomeMatTile, {
title: "Customize your view",
description: "Tailor your cases to your team's workflow with custom list views.",
href: "javascript:void(0);",
icon: "upload"
}),
/*#__PURE__*/
React.createElement(SLDSWelcomeMatTile, {
title: "Share the Knowledge",
description: "Harness your team's collective know-how with our powerful knowledge base.",
href: "javascript:void(0);",
icon: "knowledge_base"
})];
describe('Steps Variant', function () {
beforeEach(function () {
getWelcomeMat({
variant: 'steps',
labels: labels,
children: tiles,
id: 'welcome-mat-test'
});
});
it('renders welcome mat', function () {
var WelcomeMatContainer = getWelcomeMatNode(document.body).querySelector('.slds-welcome-mat');
expect(WelcomeMatContainer).to.exist;
expect(WelcomeMatContainer.querySelector('.slds-welcome-mat__content')).to.exist;
expect(WelcomeMatContainer.querySelector('.slds-welcome-mat__info')).to.exist;
expect(WelcomeMatContainer.querySelector('.slds-welcome-mat__tiles')).to.exist;
expect(WelcomeMatContainer.querySelector('.slds-welcome-mat__tiles').childElementCount).to.eql(5);
expect(WelcomeMatContainer.querySelectorAll('.slds-welcome-mat__tile_complete').length).to.eql(2);
});
it('tile links have correct href', function () {
var WelcomeMatTiles = getWelcomeMatNode(document.body).querySelectorAll('.slds-welcome-mat__tile a');
WelcomeMatTiles.forEach(function (tile) {
expect(tile.href).to.eql.toString('javascript:void(0)');
});
});
it('shows labels correctly', function () {
var WelcomeMatInfo = getWelcomeMatNode(document.body).querySelector('.slds-welcome-mat__info');
expect(WelcomeMatInfo.querySelector('.slds-welcome-mat__info-title').textContent).to.eql(title);
expect(WelcomeMatInfo.querySelector('.slds-welcome-mat__info-description').textContent).to.eql(description);
expect(WelcomeMatInfo.querySelector('.slds-welcome-mat__info-progress p').textContent).to.eql('2/5 units completed');
});
});
describe('Info-Only Variant', function () {
beforeEach(function () {
getWelcomeMat({
variant: 'info-only',
labels: labels,
id: 'welcome-mat-test',
children: tiles,
doNotShowAgainCheckbox:
/*#__PURE__*/
React.createElement(SLDSCheckbox, {
assistiveText: {
label: "Don't show this again"
},
labels: {
label: "Don't show this again"
}
}),
onRenderInfoActions: function onRenderInfoActions() {
return (
/*#__PURE__*/
React.createElement(SLDSButton, {
type: "button",
variant: "brand",
title: "Learn More",
label: "Learn More"
})
);
}
});
});
it('renders welcome mat', function () {
var WelcomeMatContainer = getWelcomeMatNode(document.body).querySelector('.slds-welcome-mat');
expect(WelcomeMatContainer).to.exist;
expect(WelcomeMatContainer.querySelector('.slds-welcome-mat__content')).to.exist;
expect(WelcomeMatContainer.querySelector('.slds-welcome-mat__info')).to.exist;
expect(WelcomeMatContainer.querySelector('.slds-welcome-mat__tiles')).to.exist;
expect(WelcomeMatContainer.querySelectorAll('.slds-welcome-mat__tile_info-only').length).to.eql(5);
});
it('shows info action button and do not show checkbox', function () {
var WelcomeMatContainer = getWelcomeMatNode(document.body).querySelector('.slds-welcome-mat');
expect(WelcomeMatContainer.querySelector('.slds-welcome-mat__info-actions')).to.exist;
expect(WelcomeMatContainer.querySelector('.slds-welcome-mat__info-actions button')).to.exist;
expect(WelcomeMatContainer.querySelector('.slds-checkbox')).to.exist;
});
});
describe('Splash Variant', function () {
beforeEach(function () {
getWelcomeMat({
variant: 'splash',
labels: labels,
id: 'welcome-mat-test',
doNotShowAgainCheckbox:
/*#__PURE__*/
React.createElement(SLDSCheckbox, {
assistiveText: {
label: "Don't show this again"
},
labels: {
label: "Don't show this again"
}
}),
onRenderInfoActions: function onRenderInfoActions() {
return (
/*#__PURE__*/
React.createElement(SLDSButton, {
type: "button",
variant: "brand",
title: "Learn More",
label: "Learn More"
})
);
}
});
});
it('renders welcome mat', function () {
var WelcomeMatContainer = getWelcomeMatNode(document.body).querySelector('.slds-welcome-mat');
expect(WelcomeMatContainer).to.exist;
expect(WelcomeMatContainer.querySelector('.slds-welcome-mat__content')).to.exist;
expect(WelcomeMatContainer.querySelector('.slds-welcome-mat__info')).to.exist;
});
it('does not render any tiles', function () {
var WelcomeMatContainer = getWelcomeMatNode(document.body).querySelector('.slds-welcome-mat');
expect(WelcomeMatContainer.querySelector('.slds-welcome-mat__tiles')).to.not.exist;
});
it('shows info action button and do not show checkbox', function () {
var WelcomeMatContainer = getWelcomeMatNode(document.body).querySelector('.slds-welcome-mat');
expect(WelcomeMatContainer.querySelector('.slds-welcome-mat__info-actions')).to.exist;
expect(WelcomeMatContainer.querySelector('.slds-welcome-mat__info-actions button')).to.exist;
expect(WelcomeMatContainer.querySelector('.slds-checkbox')).to.exist;
});
});
describe('Trailhead Variant', function () {
beforeEach(function () {
getWelcomeMat({
variant: 'trailhead-connected',
labels: labels,
children: tiles,
infoBadge:
/*#__PURE__*/
React.createElement(WelcomeMatInfoBadge, {
image: "/assets/images/welcome-mat/trailhead_badge@2x.png",
onCompleteRenderActions: function onCompleteRenderActions() {
return (
/*#__PURE__*/
React.createElement(React.Fragment, null,
/*#__PURE__*/
React.createElement("p", null, "Cha-ching! You earned the badge."),
/*#__PURE__*/
React.createElement(SLDSButton, {
className: "slds-m-top_medium",
type: "button",
variant: "brand",
title: "View on your Trailblazer Profile",
label: "View on your Trailblazer Profile"
}))
);
}
},
/*#__PURE__*/
React.createElement("p", null,
/*#__PURE__*/
React.createElement("strong", null, "Lightning Explorer"))),
id: 'welcome-mat-test'
});
});
it('renders welcome mat', function () {
var WelcomeMatContainer = getWelcomeMatNode(document.body).querySelector('.slds-welcome-mat');
expect(WelcomeMatContainer).to.exist;
expect(WelcomeMatContainer.querySelector('.slds-welcome-mat__content')).to.exist;
expect(WelcomeMatContainer.querySelector('.slds-welcome-mat__info')).to.exist;
expect(WelcomeMatContainer.querySelector('.slds-welcome-mat__tiles')).to.exist;
ReactDOM.unmountComponentAtNode(container);
expect(WelcomeMatContainer.querySelector('.slds-welcome-mat__tiles').childElementCount).to.eql(5);
expect(WelcomeMatContainer.querySelectorAll('.slds-welcome-mat__tile_complete').length).to.eql(2);
});
it('shows trailhead badge', function () {
var WelcomeMatInfo = getWelcomeMatNode(document.body).querySelector('.slds-welcome-mat__info');
expect(WelcomeMatInfo.querySelector('.slds-welcome-mat__info-badge')).to.exist;
expect(WelcomeMatInfo.querySelector('.slds-welcome-mat__info-progress p strong').textContent).to.eql('Lightning Explorer');
});
it('shows labels correctly', function () {
var WelcomeMatInfo = getWelcomeMatNode(document.body).querySelector('.slds-welcome-mat__info');
expect(WelcomeMatInfo.querySelector('.slds-welcome-mat__info-title').textContent).to.eql(title);
expect(WelcomeMatInfo.querySelector('.slds-welcome-mat__info-description').textContent).to.eql(description);
});
});
});
//# sourceMappingURL=welcome-mat.browser-test.js.map