lucid-ui
Version:
A UI component library from AppNexus.
762 lines (740 loc) • 33.9 kB
JavaScript
import _isEqual from "lodash/isEqual";
import _noop from "lodash/noop";
import _has from "lodash/has";
import _get from "lodash/get";
import React from 'react';
import { shallow, mount } from 'enzyme';
import sinon from 'sinon';
import assert from 'assert';
import { common } from '../../util/generic-tests';
import DataTable from './DataTable';
import ScrollTable from '../ScrollTable/ScrollTable';
import Checkbox from '../Checkbox/Checkbox';
import EmptyStateWrapper from '../EmptyStateWrapper/EmptyStateWrapper';
import DragCaptureZone from '../DragCaptureZone/DragCaptureZone';
var Column = DataTable.Column,
ColumnGroup = DataTable.ColumnGroup;
var _DataTable$EmptyState = DataTable.EmptyStateWrapper,
Title = _DataTable$EmptyState.Title,
Body = _DataTable$EmptyState.Body;
var testData = [{
id: '01',
first_name: 'Isaac',
last_name: 'Newton',
email: 'inewton@example.com',
occupation: 'Physicist',
isDisabled: true,
isSelected: true,
isActive: true
}, {
id: '02',
first_name: 'Albert',
last_name: 'Einstein',
email: 'aeinstein@example.com',
occupation: 'Physicist',
isDisabled: false,
isSelected: false,
isActive: false
}, {
id: '03',
first_name: 'Leonardo',
last_name: 'da Vinci',
email: 'ldvinci@example.com',
occupation: 'Engineer',
isDisabled: true,
isSelected: true,
isActive: true
}, {
id: '04',
first_name: 'Aristotle',
last_name: '--',
email: 'aristotle@example.com',
occupation: 'Tutor',
isDisabled: false,
isSelected: false,
isActive: false
}, {
id: '05',
first_name: 'Galileo',
last_name: 'Galilei',
email: 'ggalilei@example.com',
occupation: 'Physicist',
isDisabled: false,
isSelected: true,
isActive: true
}, {
id: '06',
first_name: 'Charles',
last_name: 'Darwin',
email: 'cdarwin@example.com',
occupation: 'Biologist',
isDisabled: true,
isSelected: false,
isActive: false
}, {
id: '07',
first_name: 'Alexander',
last_name: 'Macedon',
email: 'amacedon@example.com',
occupation: 'Head of State',
isDisabled: true,
isSelected: false,
isActive: true
}, {
id: '08',
first_name: 'Plato',
last_name: 'Plato',
email: 'plato@example.com',
occupation: 'Philosopher',
isDisabled: false,
isSelected: true,
isActive: false
}, {
id: '09',
first_name: 'Mahatma',
last_name: 'Gandhi',
email: 'mgandhi@example.com',
occupation: 'Politician',
isDisabled: true,
isSelected: true,
isActive: false
}, {
id: '10',
first_name: 'William',
last_name: 'Shakespeare',
email: 'wshakespear@example.com',
occupation: 'Playwright',
isDisabled: false,
isSelected: false,
isActive: true
}];
describe('DataTable', function () {
common(DataTable, {
selectRoot: function selectRoot(wrapper) {
return wrapper.find(ScrollTable);
}
});
describe('render', function () {
it('should render a minimal ScrollTable', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(DataTable, {
data: []
}));
var scrollTableWrapper = wrapper.find(ScrollTable).shallow();
assert(scrollTableWrapper.is('.lucid-DataTable'), 'must have the component className');
assert.equal(scrollTableWrapper.find(ScrollTable.Thead).length, 1, 'must contain a Thead');
assert.equal(scrollTableWrapper.find(ScrollTable.Tbody).length, 1, 'must contain a Tbody');
});
});
describe('props', function () {
describe('data', function () {
it('should render 10 empty rows by default if data is an empty array', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(DataTable, {
data: []
}));
var TrWrapper = wrapper.find(ScrollTable).shallow().find(ScrollTable.Tbody).shallow().find(ScrollTable.Tr);
assert.equal(TrWrapper.length, 10, 'should render 10 empty rows');
});
it('should render a row for each element in the array if data size is greater than or equal to 10', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(DataTable, {
data: testData
}));
var TrWrapper = wrapper.find(ScrollTable).shallow().find(ScrollTable.Tbody).shallow().find(ScrollTable.Tr);
assert.equal(TrWrapper.length, testData.length, 'number of rendered rows must match size of the data array');
});
it('should render a cell in each row for each object property in the array elements', function () {
var testDataWithEmptyCells = [{
id: 1,
first_name: 'Isaac',
email: 'inewton@example.com',
occupation: 'Physicist',
isDisabled: true,
isSelected: true,
isActive: true
}, {
id: 2,
first_name: 'Albert',
last_name: null,
email: 'aeinstein@example.com',
occupation: 'Physicist',
isDisabled: false,
isSelected: false,
isActive: false
}];
var wrapper = shallow( /*#__PURE__*/React.createElement(DataTable, {
data: testDataWithEmptyCells
}, /*#__PURE__*/React.createElement(Column, {
field: "id",
title: "ID"
}), /*#__PURE__*/React.createElement(Column, {
field: "first_name",
title: "First"
}), /*#__PURE__*/React.createElement(Column, {
field: "last_name",
title: "Last"
}), /*#__PURE__*/React.createElement(Column, {
field: "email",
title: "Email"
}), /*#__PURE__*/React.createElement(Column, {
field: "occupation",
title: "Occupation"
}))); // select the rows of the rendered table
var trsWrapper = wrapper.find(ScrollTable).shallow().find(ScrollTable.Tbody).shallow().find(ScrollTable.Tr); // for each row check that the correct cells are rendered in order
trsWrapper.forEach(function (trWrapper, index) {
if (index < 2) {
var tdsWrapper = trWrapper.shallow().find(ScrollTable.Td);
assert.equal(trWrapper.props().isDisabled, _get(testDataWithEmptyCells[index], 'isDisabled'), 'row must be passed `isDisabled`');
assert.equal(trWrapper.props().isSelected, _get(testDataWithEmptyCells[index], 'isSelected'), 'row must be passed `isSelected`');
assert.equal(trWrapper.props().isActive, _get(testDataWithEmptyCells[index], 'isActive'), 'row must be passed `isActive`');
assert.equal(tdsWrapper.at(0).children().text(), _get(testDataWithEmptyCells[index], 'id'), 'first cell must match id of current row');
assert(!tdsWrapper.at(0).prop('isEmpty'), 'should not be marked as empty, despite not being a string');
assert.equal(tdsWrapper.at(1).children().text(), _get(testDataWithEmptyCells[index], 'first_name'), 'second cell must match first_name of current row');
assert.equal(tdsWrapper.at(2).children().text(), '--', 'third (empty) cell should be `--`');
assert.equal(tdsWrapper.at(3).children().text(), _get(testDataWithEmptyCells[index], 'email'), 'fourth cell must match email of current row');
assert.equal(tdsWrapper.at(4).children().text(), _get(testDataWithEmptyCells[index], 'occupation'), 'fifth cell must match occupation of current row');
}
});
});
it('should render without prop warning for isSelected when data is empty array', function () {
var emptyData = [];
var wrapper = shallow( /*#__PURE__*/React.createElement(DataTable, {
isSelectable: true,
data: emptyData
}));
expect(wrapper.find(Checkbox).props().isSelected).toEqual(false);
});
});
describe('minRows', function () {
it('should render 10 empty rows if data is an empty array', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(DataTable, {
data: []
}));
var TrWrapper = wrapper.find(ScrollTable).shallow().find(ScrollTable.Tbody).shallow().find(ScrollTable.Tr);
assert.equal(TrWrapper.length, 10, 'should render 10 empty rows');
});
it('should render a row for each element in the array if there is more data than `minRows`', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(DataTable, {
data: testData,
minRows: 7
}));
var TrWrapper = wrapper.find(ScrollTable).shallow().find(ScrollTable.Tbody).shallow().find(ScrollTable.Tr);
assert.equal(TrWrapper.length, testData.length, 'number of rendered rows must match size of the data array');
});
it('should render at least the number of `minRows` if there is less data than `minRows`', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(DataTable, {
data: testData,
minRows: 14
}));
var TrWrapper = wrapper.find(ScrollTable).shallow().find(ScrollTable.Tbody).shallow().find(ScrollTable.Tr);
assert.equal(TrWrapper.length, 14, 'number of rendered rows must match `minRows` value');
});
});
describe('isSelectable', function () {
it('should render a checkbox in the first column of each row', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(DataTable, {
isSelectable: true,
data: testData
}, /*#__PURE__*/React.createElement(Column, {
field: "id",
title: "ID"
}), /*#__PURE__*/React.createElement(Column, {
field: "first_name",
title: "First"
}), /*#__PURE__*/React.createElement(Column, {
field: "last_name",
title: "Last"
}), /*#__PURE__*/React.createElement(Column, {
field: "email",
title: "Email"
}), /*#__PURE__*/React.createElement(Column, {
field: "occupation",
title: "Occupation"
}))); // select the rows of the rendered table body
var bodyTrsWrapper = wrapper.find(ScrollTable).shallow().find(ScrollTable.Tbody).shallow().find(ScrollTable.Tr); // for each row check that isSelectable matches
bodyTrsWrapper.forEach(function (trWrapper) {
var tdsWrapper = trWrapper.shallow().find(ScrollTable.Td);
var tdArray = tdsWrapper.map(function (tdWrapper) {
return tdWrapper.shallow();
});
assert.equal(tdArray[0].find(Checkbox).length, 1, 'first cell must be a checkbox');
});
});
it('should default to false', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(DataTable, {
data: testData
}, /*#__PURE__*/React.createElement(Column, {
field: "id",
title: "ID"
}), /*#__PURE__*/React.createElement(Column, {
field: "first_name",
title: "First"
}), /*#__PURE__*/React.createElement(Column, {
field: "last_name",
title: "Last"
}), /*#__PURE__*/React.createElement(Column, {
field: "email",
title: "Email"
}), /*#__PURE__*/React.createElement(Column, {
field: "occupation",
title: "Occupation"
}))); // select the rows of the rendered table body
var bodyTrsWrapper = wrapper.find(ScrollTable).shallow().find(ScrollTable.Tbody).shallow().find(ScrollTable.Tr); // for each row check that isSelectable matches
bodyTrsWrapper.forEach(function (trWrapper) {
var tdsWrapper = trWrapper.shallow().find(ScrollTable.Td);
var tdArray = tdsWrapper.map(function (tdWrapper) {
return tdWrapper.shallow();
});
assert.equal(tdArray[0].find(Checkbox).length, 0, 'first cell must not be a checkbox');
});
});
});
describe('isActionable', function () {
it('should pass thru to the underlying ScrollTable rows', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(DataTable, {
isActionable: true,
data: testData
})); // select the rows of the rendered table
var trsWrapper = wrapper.find(ScrollTable).shallow().find(ScrollTable.Tbody).shallow().find(ScrollTable.Tr); // for each row check that isActionable matches
trsWrapper.forEach(function (trWrapper) {
assert.equal(trWrapper.prop('isActionable'), true);
});
});
it('should default to false', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(DataTable, {
data: testData
})); // select the rows of the rendered table
var trsWrapper = wrapper.find(ScrollTable).shallow().find(ScrollTable.Tbody).shallow().find(ScrollTable.Tr); // for each row check that isActionable is false
trsWrapper.forEach(function (trWrapper) {
assert.equal(trWrapper.prop('isActionable'), false);
});
});
});
describe('onSelect', function () {
it('should be triggered when a checkbox is selected passing params row data and index', function () {
var onSelect = sinon.spy();
var wrapper = shallow( /*#__PURE__*/React.createElement(DataTable, {
isSelectable: true,
onSelect: onSelect,
data: testData
}, /*#__PURE__*/React.createElement(Column, {
field: "id",
title: "ID"
}), /*#__PURE__*/React.createElement(Column, {
field: "first_name",
title: "First"
}), /*#__PURE__*/React.createElement(Column, {
field: "last_name",
title: "Last"
}), /*#__PURE__*/React.createElement(Column, {
field: "email",
title: "Email"
}), /*#__PURE__*/React.createElement(Column, {
field: "occupation",
title: "Occupation"
}))); // select the rows of the rendered table body
var bodyTrsWrapper = wrapper.find(ScrollTable).shallow().find(ScrollTable.Tbody).shallow().find(ScrollTable.Tr); // for each row check that isSelectable matches
bodyTrsWrapper.forEach(function (trWrapper, index) {
var tdsWrapper = trWrapper.shallow().find(ScrollTable.Td);
var tdArray = tdsWrapper.map(function (tdWrapper) {
return tdWrapper.shallow();
});
var checkBoxOnSelectFunction = tdArray[0].find(Checkbox).prop('onSelect'); // @ts-ignore
checkBoxOnSelectFunction({});
assert.equal(onSelect.callCount, index + 1, 'must be called');
assert.equal(onSelect.getCall(index).args[0], testData[index], 'first arg must match the selected row data');
assert.equal(onSelect.getCall(index).args[1], index, 'second arg must match the clicked row index');
assert(_has(onSelect.getCall(index).args[2], 'props'), 'third arg must include props');
assert(_has(onSelect.getCall(index).args[2], 'event'), 'third arg must include event');
});
});
it('should have inDeterminate on the header checkbox when data is partially selected', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(DataTable, {
isSelectable: true,
data: testData
}, /*#__PURE__*/React.createElement(Column, {
field: "id",
title: "ID"
}), /*#__PURE__*/React.createElement(Column, {
field: "first_name",
title: "First"
}), /*#__PURE__*/React.createElement(Column, {
field: "last_name",
title: "Last"
}), /*#__PURE__*/React.createElement(Column, {
field: "email",
title: "Email"
}), /*#__PURE__*/React.createElement(Column, {
field: "occupation",
title: "Occupation"
}))); // select the rows of the rendered table head
var headTrsWrapper = wrapper.find(ScrollTable).shallow().find(ScrollTable.Thead).shallow().find(ScrollTable.Tr);
var firstHeadCellWrapper = headTrsWrapper.shallow().find(ScrollTable.Th).first();
var selectAllCheckboxWrapper = firstHeadCellWrapper.find(Checkbox);
assert.equal(true, selectAllCheckboxWrapper.prop('isIndeterminate'), 'The CheckBox should be in an indeterminate state');
});
});
describe('onSelectAll', function () {
it('should be triggered when a checkbox is selected passing params row data and index', function () {
var onSelectAll = sinon.spy();
var wrapper = shallow( /*#__PURE__*/React.createElement(DataTable, {
isSelectable: true,
onSelectAll: onSelectAll,
data: testData
}, /*#__PURE__*/React.createElement(Column, {
field: "id",
title: "ID"
}), /*#__PURE__*/React.createElement(Column, {
field: "first_name",
title: "First"
}), /*#__PURE__*/React.createElement(Column, {
field: "last_name",
title: "Last"
}), /*#__PURE__*/React.createElement(Column, {
field: "email",
title: "Email"
}), /*#__PURE__*/React.createElement(Column, {
field: "occupation",
title: "Occupation"
}))); // select the rows of the rendered table head
var headTrsWrapper = wrapper.find(ScrollTable).shallow().find(ScrollTable.Thead).shallow().find(ScrollTable.Tr);
var firstHeadCellWrapper = headTrsWrapper.shallow().find(ScrollTable.Th).first();
var selectAllCheckboxWrapper = firstHeadCellWrapper.find(Checkbox);
var checkboxSelectAllFunction = selectAllCheckboxWrapper.prop('onSelect'); //@ts-ignore
checkboxSelectAllFunction({});
assert(onSelectAll.called, 'onSelectAll handler must be called');
});
});
describe('onRowClick', function () {
it('should be triggered when row is clicked', function () {
var onRowClick = sinon.spy();
var wrapper = shallow( /*#__PURE__*/React.createElement(DataTable, {
isActionable: true,
onRowClick: onRowClick,
data: testData
}, /*#__PURE__*/React.createElement(Column, {
field: "id",
title: "ID"
}), /*#__PURE__*/React.createElement(Column, {
field: "first_name",
title: "First"
}), /*#__PURE__*/React.createElement(Column, {
field: "last_name",
title: "Last"
}), /*#__PURE__*/React.createElement(Column, {
field: "email",
title: "Email"
}), /*#__PURE__*/React.createElement(Column, {
field: "occupation",
title: "Occupation"
}))); // select the rows of the rendered table body
var bodyTrsWrapper = wrapper.find(ScrollTable).shallow().find(ScrollTable.Tbody).shallow().find(ScrollTable.Tr); // for each row check that isSelectable matches
bodyTrsWrapper.forEach(function (trWrapper, index) {
var rowClickFunction = trWrapper.prop('onClick'); // @ts-ignore
rowClickFunction({
target: {
tagName: 'tr'
}
});
assert.equal(onRowClick.callCount, index + 1, 'must be called');
assert.equal(onRowClick.getCall(index).args[0], testData[index], 'first arg must match the selected row data');
assert.equal(onRowClick.getCall(index).args[1], index, 'second arg must match the clicked row index');
assert(_has(onRowClick.getCall(index).args[2], 'props'), 'third arg must include props');
assert(_has(onRowClick.getCall(index).args[2], 'event'), 'third arg must include event');
});
});
});
describe('onSort', function () {
it('should be triggered when a column header with `isSortable` is clicked', function () {
var onSort = sinon.spy();
var wrapper = shallow( /*#__PURE__*/React.createElement(DataTable, {
isActionable: true,
onSort: onSort,
data: testData
}, /*#__PURE__*/React.createElement(Column, {
field: "id",
isSortable: true,
title: "ID"
}), /*#__PURE__*/React.createElement(Column, {
field: "first_name",
isSortable: true,
title: "First"
}), /*#__PURE__*/React.createElement(Column, {
field: "last_name",
isSortable: true,
title: "Last"
}), /*#__PURE__*/React.createElement(Column, {
field: "email",
isSortable: true,
title: "Email"
}), /*#__PURE__*/React.createElement(Column, {
field: "occupation",
isSortable: true,
title: "Occupation"
}))); // select the rows of the rendered table head
var headTrsWrapper = wrapper.find(ScrollTable).shallow().find(ScrollTable.Thead).shallow().find(ScrollTable.Tr);
var thsWrapper = headTrsWrapper.shallow().find(ScrollTable.Th);
var tdArray = thsWrapper.map(function (tdWrapper) {
return tdWrapper.shallow();
});
var mockEvent = {
stopPropagation: _noop,
preventDefault: _noop
};
tdArray[0].simulate('click', mockEvent);
assert.equal(onSort.callCount, 1, 'must be called once');
assert.equal(onSort.getCall(0).args[0], 'id', 'first arg must be passed `id` as the field name');
assert(_has(onSort.getCall(0).args[1], 'props'), 'last arg must be passed props');
assert(_has(onSort.getCall(0).args[1], 'event'), 'last arg must be passed event');
tdArray[1].simulate('click', mockEvent);
assert.equal(onSort.callCount, 2, 'must be called twice');
assert.equal(onSort.getCall(1).args[0], 'first_name', 'first arg must be passed `first_name` as the field name');
assert(_has(onSort.getCall(1).args[1], 'props'), 'last arg must be passed props');
assert(_has(onSort.getCall(1).args[1], 'event'), 'last arg must be passed event');
tdArray[2].simulate('click', mockEvent);
assert.equal(onSort.callCount, 3, 'must be called three times');
assert.equal(onSort.getCall(2).args[0], 'last_name', 'first arg must be passed `last_name` as the field name');
assert(_has(onSort.getCall(2).args[1], 'props'), 'last arg must be passed props');
assert(_has(onSort.getCall(2).args[1], 'event'), 'last arg must be passed event');
tdArray[3].simulate('click', mockEvent);
assert.equal(onSort.callCount, 4, 'must be called four times');
assert.equal(onSort.getCall(3).args[0], 'email', 'first arg must be passed `email` as the field name');
assert(_has(onSort.getCall(3).args[1], 'props'), 'last arg must be passed props');
assert(_has(onSort.getCall(3).args[1], 'event'), 'last arg must be passed event');
tdArray[4].simulate('click', mockEvent);
assert.equal(onSort.callCount, 5, 'must be called five times');
assert.equal(onSort.getCall(4).args[0], 'occupation', 'first arg must be passed `occupation` as the field name');
assert(_has(onSort.getCall(4).args[1], 'props'), 'last arg must be passed props');
assert(_has(onSort.getCall(4).args[1], 'event'), 'last arg must be passed event');
});
});
describe('isLoading', function () {
it('should show a `LoadingIndicator` if `isLoading`', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(DataTable, {
data: [],
isLoading: true
}));
var loadingIndicatorWrapper = wrapper.find(EmptyStateWrapper).shallow().find('LoadingIndicator');
assert(loadingIndicatorWrapper.prop('isLoading'));
});
});
describe('anchorMessage', function () {
it('should position the `LoadingMessage`/`EmpyStateMessage` near the top of the table', function () {
var loadingWrapper = shallow( /*#__PURE__*/React.createElement(DataTable, {
data: [],
isLoading: true,
anchorMessage: true
}));
var loadingOverlayWrapper = loadingWrapper.find(EmptyStateWrapper).shallow().find('LoadingIndicator').shallow().find('OverlayWrapper');
assert(loadingOverlayWrapper.prop('anchorMessage'));
var emptyWrapper = shallow( /*#__PURE__*/React.createElement(DataTable, {
data: [],
anchorMessage: true
}));
var emptyOverlayWrapper = emptyWrapper.find(EmptyStateWrapper).shallow().find('OverlayWrapper');
assert(emptyOverlayWrapper.prop('anchorMessage'));
});
});
describe('isFullWidth', function () {
it('should apply the `&-full-width` class if `isFullWidth` is true', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(DataTable, {
data: [],
isFullWidth: true
}));
assert(wrapper.find(ScrollTable).hasClass('lucid-DataTable-full-width'));
});
});
describe('isResize', function () {
it('should show a `resizer` if `isResizable equals to true`', function () {
var onResize = jest.fn();
var wrapper = mount( /*#__PURE__*/React.createElement(DataTable, {
hasFixedHeader: true,
onResize: onResize,
data: testData
}, /*#__PURE__*/React.createElement(Column, {
minWidth: 50,
field: "id",
isResizable: true,
title: "ID"
}), /*#__PURE__*/React.createElement(Column, {
field: "first_name",
isResizable: true,
title: "First"
}), /*#__PURE__*/React.createElement(Column, {
field: "last_name",
isResizable: true,
title: "Last"
}), /*#__PURE__*/React.createElement(Column, {
field: "email",
isResizable: true,
title: "Email"
}), /*#__PURE__*/React.createElement(Column, {
field: "occupation",
isResizable: true,
title: "Occupation"
})));
var dragCaptureZoneWrapper = wrapper.find(DragCaptureZone).at(1);
var mockEvent = new Event('mouseup');
dragCaptureZoneWrapper.prop('onDragEnd')({
dx: 100,
dy: 0,
pageX: 100,
pageY: 0
}, {
event: mockEvent,
props: {}
});
});
});
});
describe('child components', function () {
describe('Column', function () {
it('should render a column in the header for each Column defined', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(DataTable, {
data: testData
}, /*#__PURE__*/React.createElement(Column, {
field: "id",
title: "ID"
}), /*#__PURE__*/React.createElement(Column, {
field: "first_name",
title: "First"
}), /*#__PURE__*/React.createElement(Column, {
field: "last_name",
title: "Last"
}), /*#__PURE__*/React.createElement(Column, {
field: "email",
title: "Email"
}), /*#__PURE__*/React.createElement(Column, {
field: "occupation",
title: "Occupation"
}))); // select the rows of the rendered table head
var headTrsWrapper = wrapper.find(ScrollTable).shallow().find(ScrollTable.Thead).shallow().find(ScrollTable.Tr);
var thsWrapper = headTrsWrapper.shallow().find(ScrollTable.Th);
var tdArray = thsWrapper.map(function (tdWrapper) {
return tdWrapper.shallow();
});
assert.equal(tdArray[0].text(), 'ID', 'first column must render correct title');
assert.equal(tdArray[1].text(), 'First', 'second column must render correct title');
assert.equal(tdArray[2].text(), 'Last', 'third column must render correct title');
assert.equal(tdArray[3].text(), 'Email', 'fourth column must render correct title');
assert.equal(tdArray[4].text(), 'Occupation', 'last column must render correct title');
});
});
describe('ColumnGroup', function () {
it('should render a cell with colspan in the header for each Column defined within', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(DataTable, {
data: testData
}, /*#__PURE__*/React.createElement(Column, {
field: "id",
title: "ID"
}), /*#__PURE__*/React.createElement(ColumnGroup, {
title: "Name"
}, /*#__PURE__*/React.createElement(Column, {
field: "first_name",
title: "First"
}), /*#__PURE__*/React.createElement(Column, {
field: "last_name",
title: "Last"
})), /*#__PURE__*/React.createElement(Column, {
field: "email",
title: "Email"
}), /*#__PURE__*/React.createElement(Column, {
field: "occupation",
title: "Occupation"
}))); // select the rows of the rendered table head
var headTrsWrapper = wrapper.find(ScrollTable).shallow().find(ScrollTable.Thead).shallow().find(ScrollTable.Tr);
var thsFirstRowWrapper = headTrsWrapper.at(0).shallow().find(ScrollTable.Th);
var thsSecondRowWrapper = headTrsWrapper.at(1).shallow().find(ScrollTable.Th);
var thFirstRowArray = thsFirstRowWrapper.map(function (thWrapper) {
return thWrapper.shallow();
});
var thSecondRowArray = thsSecondRowWrapper.map(function (thWrapper) {
return thWrapper.shallow();
});
assert.equal(thFirstRowArray[0].text(), 'ID', 'must render correct title');
assert.equal(thFirstRowArray[0].prop('rowSpan'), 2, 'rowSpan must be 2');
assert.equal(thFirstRowArray[1].text(), 'Name', 'must render correct title for grouped column');
assert.equal(thFirstRowArray[1].prop('colSpan'), 2, 'colSpan must be 2 for grouped column');
assert.equal(thSecondRowArray[0].text(), 'First', 'must render correct title');
assert(!_isEqual(thSecondRowArray[0].prop('rowSpan'), 2), 'rowSpan must not be 2');
assert.equal(thSecondRowArray[1].text(), 'Last', 'must render correct title');
assert(!_isEqual(thSecondRowArray[1].prop('rowSpan'), 2), 'rowSpan must not be 2');
assert.equal(thFirstRowArray[2].text(), 'Email', 'must render correct title');
assert.equal(thFirstRowArray[2].prop('rowSpan'), 2, 'rowSpan must be 2');
assert.equal(thFirstRowArray[3].text(), 'Occupation', 'must render correct title');
assert.equal(thFirstRowArray[3].prop('rowSpan'), 2, 'rowSpan must be 2');
});
it('should default to align=center', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(DataTable, {
data: testData
}, /*#__PURE__*/React.createElement(Column, {
field: "id",
title: "ID"
}), /*#__PURE__*/React.createElement(ColumnGroup, {
title: "Name"
}, /*#__PURE__*/React.createElement(Column, {
field: "first_name",
title: "First"
}), /*#__PURE__*/React.createElement(Column, {
field: "last_name",
title: "Last"
})), /*#__PURE__*/React.createElement(Column, {
field: "email",
title: "Email"
}), /*#__PURE__*/React.createElement(Column, {
field: "occupation",
title: "Occupation"
})));
var thWrapper = wrapper.find(ScrollTable).shallow().find(ScrollTable.Thead).shallow().find(ScrollTable.Tr).first().shallow().find(ScrollTable.Th).at(1).shallow();
assert(thWrapper.hasClass('lucid-Table-align-center'), 'must be true');
});
it('should respect align prop', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(DataTable, {
data: testData
}, /*#__PURE__*/React.createElement(Column, {
field: "id",
title: "ID"
}), /*#__PURE__*/React.createElement(ColumnGroup, {
title: "Name",
align: "right"
}, /*#__PURE__*/React.createElement(Column, {
field: "first_name",
title: "First"
}), /*#__PURE__*/React.createElement(Column, {
field: "last_name",
title: "Last"
})), /*#__PURE__*/React.createElement(Column, {
field: "email",
title: "Email"
}), /*#__PURE__*/React.createElement(Column, {
field: "occupation",
title: "Occupation"
})));
var thWrapper = wrapper.find(ScrollTable).shallow().find(ScrollTable.Thead).shallow().find(ScrollTable.Tr).first().shallow().find(ScrollTable.Th).at(1).shallow();
assert(thWrapper.hasClass('lucid-Table-align-right'), 'must be true');
});
});
describe('EmptyStateWrapper Title', function () {
it('should render the message title element', function () {
var titleText = 'Here is the Title Text';
var wrapper = shallow( /*#__PURE__*/React.createElement(DataTable, {
data: []
}, /*#__PURE__*/React.createElement(EmptyStateWrapper, null, /*#__PURE__*/React.createElement(Title, null, titleText))));
var messageTitleWrapper = wrapper.find(EmptyStateWrapper).shallow().find('.lucid-EmptyStateWrapper-message-title').shallow();
assert.equal(messageTitleWrapper.text(), titleText, 'must contain the title text');
});
});
describe('EmptyStateWrapper Body', function () {
it('should render the message body element', function () {
var bodyElement = /*#__PURE__*/React.createElement("div", {
className: "parent-div"
}, /*#__PURE__*/React.createElement("div", {
className: "nested-div"
}));
var wrapper = shallow( /*#__PURE__*/React.createElement(DataTable, {
data: []
}, /*#__PURE__*/React.createElement(EmptyStateWrapper, null, /*#__PURE__*/React.createElement(Body, null, bodyElement))));
var messageBodyWrapper = wrapper.find(EmptyStateWrapper).shallow();
assert(messageBodyWrapper.contains(bodyElement), 'must contain the body element');
});
});
});
});