lucid-ui
Version:
A UI component library from AppNexus.
290 lines (274 loc) • 13.4 kB
JavaScript
import _forEach from "lodash/forEach";
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) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_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; }
import React from 'react';
import { mount, shallow } from 'enzyme';
import assert from 'assert';
import sinon from 'sinon';
import { common } from '../../util/generic-tests';
import { buildModernHybridComponent } from '../../util/state-management';
import { SingleSelectDumb as SingleSelect } from '../SingleSelect/SingleSelect';
import { PaginatorDumb as Paginator } from './Paginator';
import * as reducers from './Paginator.reducers';
import selectors from './Paginator.selectors';
import Button from '../Button/Button';
import TextField from '../TextField/TextField';
describe('Paginator', function () {
common(Paginator);
describe('render', function () {
describe('hasPageSizeSelector', function () {
it('should not render page size selector', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Paginator, null));
assert(!wrapper.find('.lucid-Paginator-page-size-container').exists(), 'must be true');
});
it('should render page size selector', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Paginator, {
hasPageSizeSelector: true
}));
assert.equal(wrapper.find('.lucid-Paginator-page-size-container').length, 1, 'must be 1');
});
it('should render a TextField', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Paginator, null));
assert.equal(wrapper.find(TextField).length, 1, 'must be 1');
});
it('should render two buttons', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Paginator, null));
assert.equal(wrapper.find(Button).length, 2, 'must be 2');
});
});
});
describe('props', function () {
describe('isDisabled', function () {
it('should set isDisabled on next and previous buttons', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Paginator, {
selectedPageIndex: 1,
totalCount: 30,
isDisabled: true
}));
var buttons = wrapper.find(Button);
buttons.forEach(function (button) {
assert(button.prop('isDisabled'), 'must be true');
});
});
it('should set isDisabled on page size selector SingleSelect', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Paginator, {
hasPageSizeSelector: true,
selectedPageIndex: 1,
totalCount: 30,
isDisabled: true
}));
var pageSizeSelectorWrapper = wrapper.find('.lucid-Paginator-page-size-container').first().shallow().find(SingleSelect).shallow();
assert(pageSizeSelectorWrapper.prop('isDisabled'), 'must be true');
});
});
describe('selectedPageIndex', function () {
it('should set the value of the TextField to selectedPageIndex + 1', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Paginator, {
selectedPageIndex: 1
}));
var textFieldWrapper = wrapper.find(TextField).first().shallow();
assert.equal(textFieldWrapper.prop('value'), 2, 'must be 2');
});
});
describe('selectedPageSizeIndex', function () {
it('should propagate to page size selector selectedIndex prop', function () {
var selectedPageSizeIndex = 1;
var wrapper = shallow( /*#__PURE__*/React.createElement(Paginator, {
hasPageSizeSelector: true,
selectedPageSizeIndex: selectedPageSizeIndex
}));
var pageSizeSelectorWrapper = wrapper.find('.lucid-Paginator-page-size-container').first().shallow().find(SingleSelect);
assert.equal(pageSizeSelectorWrapper.prop('selectedIndex'), selectedPageSizeIndex, 'must be 1');
});
});
describe('SingleSelect', function () {
it('should propagate SingleSelect props through to SingleSelect component', function () {
var explicitSingleSelectProps = {
menuMaxHeight: 3,
DropMenu: {}
};
var wrapper = shallow( /*#__PURE__*/React.createElement(Paginator, {
hasPageSizeSelector: true,
SingleSelect: explicitSingleSelectProps
}));
var singleSelectProps = wrapper.find('.lucid-Paginator-page-size-container').first().shallow().find(SingleSelect).props();
_forEach(explicitSingleSelectProps, function (prop, name) {
assert.strictEqual(singleSelectProps[name], prop);
});
});
});
describe('totalPages', function () {
it('should appear in "of {totalPages}" span', function () {
var totalPages = 5;
var wrapper = shallow( /*#__PURE__*/React.createElement(Paginator, {
totalPages: totalPages
}));
assert.equal(wrapper.find('span').text(), "of ".concat(totalPages), 'must be "of 5"');
});
});
describe('totalCount', function () {
it('should generate `totalPages` from `totalCount`', function () {
var HybridPaginator = buildModernHybridComponent(Paginator, {
reducers: reducers,
selectors: selectors
});
var totalCount = 100;
var wrapper = shallow( /*#__PURE__*/React.createElement(HybridPaginator, {
totalCount: totalCount,
pageSizeOptions: [10]
}));
assert.equal(wrapper.find(Paginator).shallow().find('span').text(), 'of 10', 'must be "of 10"');
});
});
describe('pageSizeOptions', function () {
it('should propagate to `SingleSelect` as `SingleSelect.Option`s', function () {
var pageSizeOptions = [1, 2, 3, 4, 5];
var wrapper = shallow( /*#__PURE__*/React.createElement(Paginator, {
hasPageSizeSelector: true,
pageSizeOptions: pageSizeOptions
}));
var options = wrapper.find('.lucid-Paginator-page-size-container').first().find(SingleSelect).first().children();
assert.equal(options.length, 5, 'must be 5');
options.forEach(function (option, i) {
assert(option.is(SingleSelect.Option), 'must be true');
assert.equal(option.children().text(), pageSizeOptions[i]);
});
});
});
describe('TextField', function () {
it('should propagate TextField props through to TextField component', function () {
var explicitTextFieldProps = {
style: {},
isMultiline: true,
rows: 2,
className: 'foo',
debounceLevel: 50
};
var wrapper = shallow( /*#__PURE__*/React.createElement(Paginator, {
TextField: explicitTextFieldProps
}));
var textFieldProps = wrapper.find(TextField).first().props();
_forEach(explicitTextFieldProps, function (prop, name) {
assert.strictEqual(textFieldProps[name], prop);
});
});
});
describe('onPageSelect', function () {
var wrapper;
afterEach(function () {
if (wrapper) {
wrapper.unmount();
}
});
describe('previous button', function () {
it('should get called with the correct args when previous is clicked', function () {
var onPageSelect = sinon.spy();
wrapper = mount( /*#__PURE__*/React.createElement(Paginator, {
selectedPageIndex: 1,
totalPages: 3,
onPageSelect: onPageSelect
}));
wrapper.find('button').first().simulate('click');
assert(onPageSelect.calledOnce);
var _onPageSelect$firstCa = _slicedToArray(onPageSelect.firstCall.args, 2),
pageIndex = _onPageSelect$firstCa[0],
totalPages = _onPageSelect$firstCa[1];
assert.equal(pageIndex, 0, 'must be 0');
assert.equal(totalPages, 3, 'must be 3');
});
});
describe('next button', function () {
it('should get called with the correct args when next is clicked', function () {
var onPageSelect = sinon.spy();
wrapper = mount( /*#__PURE__*/React.createElement(Paginator, {
selectedPageIndex: 1,
totalPages: 3,
onPageSelect: onPageSelect
}));
wrapper.find('button').first().simulate('click');
assert(onPageSelect.calledOnce);
var _onPageSelect$firstCa2 = _slicedToArray(onPageSelect.firstCall.args, 2),
pageIndex = _onPageSelect$firstCa2[0],
totalPages = _onPageSelect$firstCa2[1];
assert.equal(pageIndex, 0, 'must be 0');
assert.equal(totalPages, 3, 'must be 3');
});
});
describe('input', function () {
_forEach(['onBlur', 'onSubmit'], function (propName) {
it("should get called with the correct args ".concat(propName), function () {
var onPageSelect = sinon.spy();
wrapper = mount( /*#__PURE__*/React.createElement(Paginator, {
selectedPageIndex: 1,
totalPages: 3,
onPageSelect: onPageSelect
}));
wrapper.find(TextField).prop(propName)(1, 3);
assert(onPageSelect.calledOnce);
var _onPageSelect$firstCa3 = _slicedToArray(onPageSelect.firstCall.args, 2),
pageIndex = _onPageSelect$firstCa3[0],
totalPages = _onPageSelect$firstCa3[1];
assert.equal(pageIndex, 0, 'must be 0');
assert.equal(totalPages, 3, 'must be 3');
});
});
});
});
describe('onPageSizeSelect', function () {
it('should be passed through to SingleSelect as `onSelect`', function () {
var onPageSizeSelect = function onPageSizeSelect() {};
var wrapper = shallow( /*#__PURE__*/React.createElement(Paginator, {
hasPageSizeSelector: true,
onPageSizeSelect: onPageSizeSelect
}));
assert.strictEqual(wrapper.find(SingleSelect).prop('onSelect'), onPageSizeSelect);
});
});
describe('showTotalObjects', function () {
it('should not show a total count when totalCount is null', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Paginator, {
showTotalObjects: true
}));
expect(wrapper.find('.lucid-Paginator-total-count')).toHaveLength(0);
});
it('should show a total count', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Paginator, {
showTotalObjects: true,
totalCount: 101
}));
expect(wrapper.exists('.lucid-Paginator-total-count')).toEqual(true);
expect(wrapper.find('.lucid-Paginator-total-count').text()).toContain('101 Objects');
});
it('should show a total count', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Paginator, {
showTotalObjects: true,
totalCount: 1
}));
expect(wrapper.exists('.lucid-Paginator-total-count')).toEqual(true);
expect(wrapper.find('.lucid-Paginator-total-count').text()).toContain('1 Object');
});
});
describe('objectLabel for total count', function () {
it('should show the objectLabel with totalCount = 1', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Paginator, {
showTotalObjects: true,
totalCount: 1,
objectLabel: "test123"
}));
expect(wrapper.find('.lucid-Paginator-total-count').text()).toContain('1 test123');
});
it('should show the objectLabelPlural with totalCount = 2', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Paginator, {
showTotalObjects: true,
totalCount: 2,
objectLabelPlural: "twocounts"
}));
expect(wrapper.find('.lucid-Paginator-total-count').text()).toContain('2 twocounts');
});
});
});
});