lucid-ui
Version:
A UI component library from AppNexus.
144 lines (131 loc) • 8.17 kB
JavaScript
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
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; }
import React from 'react';
import { shallow } from 'enzyme';
import LoadingSkeleton from './LoadingSkeleton';
describe('LoadingSkeleton.tsx', function () {
var props = {
isLoading: false,
children: {},
className: 'classNameTest',
style: {},
width: 100,
height: 100,
header: undefined,
isPanel: false,
hasOverlay: false,
numRows: 1,
numColumns: 1,
Skeleton: {}
};
var fakeSkeleton = {};
describe('isLoading === false', function () {
var testProps = _objectSpread(_objectSpread({}, props), {}, {
isLoading: false
});
it('renders children only', function () {
var component = shallow( /*#__PURE__*/React.createElement(LoadingSkeleton, testProps));
expect(component.find('[data-test-id="loadingSkeleton-Children"]').exists()).toEqual(true);
});
it('passes className to children', function () {
var testProps = _objectSpread(_objectSpread({}, props), {}, {
isLoading: false
});
var component = shallow( /*#__PURE__*/React.createElement(LoadingSkeleton, testProps));
expect(component.find('[data-test-id="loadingSkeleton-Children"]').prop('className')).toEqual('classNameTest');
testProps = _objectSpread(_objectSpread({}, props), {}, {
className: 'component1ClassName'
});
var component1 = shallow( /*#__PURE__*/React.createElement(LoadingSkeleton, testProps));
expect(component1.find('[data-test-id="loadingSkeleton-Children"]').prop('className')).toEqual('component1ClassName');
});
});
describe('isLoading === true, Skeleton is falsy', function () {
describe('renders LoadingIndicator with overlay', function () {
it('renders LoadingIndicator with overlay if hasOverlay is true', function () {
var testProps = _objectSpread(_objectSpread({}, props), {}, {
hasOverlay: true
});
var component = shallow( /*#__PURE__*/React.createElement(LoadingSkeleton, _extends({}, testProps, {
isLoading: true,
Skeleton: undefined
})));
expect(component.find('[data-test-id="loadingSkeleton-Children"]').exists()).toEqual(false);
expect(component.find('[data-test-id="loadingSkeleton-Skeleton"]').exists()).toEqual(false);
expect(component.find('[data-test-id="loadingSkeleton-LoadingIndicator"]').exists()).toEqual(true);
expect(component.find('[data-test-id="loadingSkeleton-LoadingIndicator"]').prop('hasOverlay')).toEqual(true);
});
it('renders LoadingIndicator without overlay if hasOverlay is false', function () {
var component = shallow( /*#__PURE__*/React.createElement(LoadingSkeleton, {
isLoading: true,
hasOverlay: false
}));
expect(component.find('[data-test-id="loadingSkeleton-Children"]').exists()).toEqual(false);
expect(component.find('[data-test-id="loadingSkeleton-Skeleton"]').exists()).toEqual(false);
expect(component.find('[data-test-id="loadingSkeleton-LoadingIndicator"]').exists()).toEqual(true);
expect(component.find('[data-test-id="loadingSkeleton-LoadingIndicator"]').prop('hasOverlay')).toEqual(false);
});
});
});
describe('isLoading === true, Skeleton is truthy', function () {
var testProps = _objectSpread(_objectSpread({}, props), {}, {
isLoading: true,
Skeleton: fakeSkeleton
});
describe('Skeleton based on numRows and numColumns', function () {
it('renders single Skeleton if numRows: null, numColumns: null,', function () {
var component = shallow( /*#__PURE__*/React.createElement(LoadingSkeleton, testProps));
expect(component.find('[data-test-id="loadingSkeleton-Children"]').exists()).toEqual(false);
expect(component.find('[data-test-id="loadingSkeleton-LoadingIndicator"]').exists()).toEqual(false);
expect(component.find('[data-test-id="loadingSkeleton-ReactPlaceholder"]').length).toEqual(1);
expect(component.find('[data-test-id="loadingSkeleton-ReactPlaceholder"]').prop('className')).toEqual('lucid-LoadingSkeleton-animatedSkeleton ' + props.className);
});
it('renders single Skeleton if numRows: 1, numColumns: 1,', function () {
var testPropsRowsAndNumbers = _objectSpread(_objectSpread({}, testProps), {}, {
numRows: 1,
numColumns: 1
});
var component = shallow( /*#__PURE__*/React.createElement(LoadingSkeleton, testPropsRowsAndNumbers));
expect(component.find('[data-test-id="loadingSkeleton-Children"]').exists()).toEqual(false);
expect(component.find('[data-test-id="loadingSkeleton-LoadingIndicator"]').exists()).toEqual(false);
expect(component.find('[data-test-id="loadingSkeleton-ReactPlaceholder"]').length).toEqual(1);
expect(component.find('[data-test-id="loadingSkeleton-ReactPlaceholder"]').prop('className')).toEqual('lucid-LoadingSkeleton-animatedSkeleton ' + props.className);
});
it('renders Skeletons matrix', function () {
var rows = Math.floor(Math.random() * 100 + 1);
var columns = Math.floor(Math.random() * 100 + 1);
var testPropsMatrix = _objectSpread(_objectSpread({}, testProps), {}, {
numRows: rows,
numColumns: columns
});
var component = shallow( /*#__PURE__*/React.createElement(LoadingSkeleton, testPropsMatrix));
expect(component.find('[data-test-id="loadingSkeleton-SkeletonColumn"]').length).toEqual(columns);
expect(component.find('[data-test-id="loadingSkeleton-ReactPlaceholder"]').length).toEqual(columns * rows);
});
});
describe('Skeleton use of Panel', function () {
it('renders Panel if isPanel is true', function () {
var testPropsPanel = _objectSpread(_objectSpread({}, testProps), {}, {
numRows: 1,
numColumns: 1,
isPanel: true
});
var component = shallow( /*#__PURE__*/React.createElement(LoadingSkeleton, testPropsPanel));
expect(component.find('[data-test-id="loadingSkeleton-ReactPlaceholder"]').length).toEqual(1);
expect(component.find('[data-test-id="loadingSkeleton-Panel"]').length).toEqual(1);
});
it('does not render Panel if isPanel is false', function () {
var testPropsPanel = _objectSpread(_objectSpread({}, testProps), {}, {
numRows: 1,
numColumns: 1,
isPanel: false
});
var component = shallow( /*#__PURE__*/React.createElement(LoadingSkeleton, testPropsPanel));
expect(component.find('[data-test-id="loadingSkeleton-ReactPlaceholder"]').length).toEqual(1);
expect(component.find('[data-test-id="loadingSkeleton-Panel"]').length).toEqual(0);
});
});
});
});