@salesforce/design-system-react
Version:
Salesforce Lightning Design System for React
196 lines (181 loc) • 7.18 kB
JavaScript
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
/* eslint-disable react/no-render-return-value */
import React from 'react';
import ReactDOM from 'react-dom';
import { expect } from 'chai';
import TestUtils from 'react-dom/test-utils';
import SLDSTooltip from '../../tooltip';
import SLDSButton from '../../button';
var Simulate = TestUtils.Simulate,
findRenderedDOMComponentWithTag = TestUtils.findRenderedDOMComponentWithTag;
describe('SLDSTooltip: ', function () {
var _this = this;
var body;
var defaultTrigger = /*#__PURE__*/React.createElement(SLDSButton, {
label: "Hover me for tooltip"
});
var defaultTextContent = 'This is more info. blah blah.';
var defaultProps = {
content: /*#__PURE__*/React.createElement("span", {
className: "tooltip-content",
style: {
width: 30
}
}, defaultTextContent),
hasStaticAlignment: true,
id: 'myTooltip123'
};
afterEach(function () {
try {
Array.prototype.forEach.call(document.body.querySelectorAll('.drop'), function (component) {
return document.body.removeChild(component);
});
if (body) {
document.body.removeChild(body);
}
} catch (e) {
/* empty */
}
});
var createBody = function createBody() {
var target = document.createElement('h1');
target.textContent = 'Tooltip Tip Target';
body = document.createElement('div');
body.style.height = '300px';
body.style.width = '300px';
body.appendChild(target);
document.body.appendChild(body);
};
var renderTooltip = function renderTooltip(inst) {
return ReactDOM.render(inst, body);
}; // deepscan-disable-line REACT_ASYNC_RENDER_RETURN_VALUE
var createTooltip = function createTooltip(props, kids) {
return /*#__PURE__*/React.createElement(SLDSTooltip, props, kids);
};
var generateTooltip = function generateTooltip(props, kids) {
return renderTooltip(createTooltip(props, kids));
};
var getTip = function getTip(dom) {
return dom.querySelector('.slds-popover_tooltip');
};
describe('component basic props render', function () {
var rootNode;
beforeEach(function () {
createBody();
rootNode = generateTooltip(_objectSpread(_objectSpread({}, defaultProps), {}, {
align: 'top'
}), defaultTrigger);
});
it('is not open', function () {
expect(getTip(document.body)).to.equal(null);
});
describe('expanded', function () {
var tip;
var trigger;
beforeEach(function (done) {
trigger = findRenderedDOMComponentWithTag(rootNode, 'button');
Simulate.mouseEnter(trigger, {});
setTimeout(function () {
tip = getTip(document.body);
done();
}, 0);
});
it('places bottom aligned tooltip at the trigger if no target', function (done) {
// "Magic Number" in pixels, based on size of trigger, CSS, and DropJS offset
var tooltipOffset = 46;
var tipBounds = tip.getBoundingClientRect();
var triggerBounds = trigger.getBoundingClientRect();
expect(tipBounds.top).to.be.within(triggerBounds.top - tooltipOffset, triggerBounds.top);
done();
});
it('adds nubbin', function () {
expect(tip.className).to.include('slds-nubbin_bottom');
});
it('closes', function (done) {
Simulate.mouseLeave(trigger, {});
setTimeout(function () {
expect(getTip(document.body)).to.be.null;
done();
}, 60);
});
});
});
describe('Custom props work as expected', function () {
it('isOpen is false', function (done) {
var rootNode = generateTooltip(_objectSpread(_objectSpread({}, defaultProps), {}, {
isOpen: false
}), defaultTrigger);
setTimeout(function () {
var trigger = findRenderedDOMComponentWithTag(rootNode, 'button');
Simulate.mouseEnter(trigger, {});
setTimeout(function () {
expect(getTip(document.body)).to.be.null;
done();
}, 0);
}, 0);
});
it('isOpen is true', function (done) {
var contentRendered;
var tooltipContentRendered = function tooltipContentRendered(component) {
_this.tip = getTip(document.body);
if (!contentRendered) {
expect(component).to.not.be.null;
contentRendered = true;
done();
}
};
generateTooltip(_objectSpread(_objectSpread({}, defaultProps), {}, {
// overwrite default content
content: /*#__PURE__*/React.createElement("span", {
ref: tooltipContentRendered,
className: "tooltip-content",
style: {
width: 30
}
}, defaultTextContent),
isOpen: true
}), defaultTrigger);
});
});
/*
// Commented out until fully understood.
describe('using target', () => {
let rootNode, trigger;
beforeEach(() => {
const content = (<span style={{width: 30}}>This is more info. blah blah.</span>);
createBody();
rootNode = generateTooltip({
align: 'bottom',
content: content,
target: body.firstChild
}, React.createElement(SLDSButton, {}), ['Hover me for tooltip']);
trigger = document.body.querySelector('[role=tooltip]').firstChild;
})
describe('expanded', () => {
let tip;
beforeEach((done) => {
expect(getTip(document.body)).to.equal(null);
setTimeout(() => {
Simulate.mouseEnter(trigger, {})
setTimeout(() => {
tip = getTip(document.body);
done();
}, 200);
}, 200);
});
it('sets the tooltip close to the target, not the trigger', () => {
// "Magic Number" in pixels, based on size of trigger and CSS
const tooltipOffset = 40;
const tipBounds = tip.getBoundingClientRect();
const targetBounds = body.firstChild.getBoundingClientRect();
console.log(tipBounds);
console.log(targetBounds);
expect(tipBounds.bottom).to.be.within(targetBounds.bottom, targetBounds.bottom + tooltipOffset);
})
})
})
*/
});
//# sourceMappingURL=tooltip.browser-test.js.map