lucid-ui
Version:
A UI component library from AppNexus.
267 lines • 12.4 kB
JavaScript
import React from 'react';
import { shallow } from 'enzyme';
import assert from 'assert';
import { common } from '../../util/generic-tests';
import Table from './Table';
import ArrowIcon from '../Icon/ArrowIcon/ArrowIcon';
import DragCaptureZone from '../DragCaptureZone/DragCaptureZone';
var Thead = Table.Thead,
Tbody = Table.Tbody,
Tr = Table.Tr,
Th = Table.Th,
Td = Table.Td;
describe('Table', function () {
common(Table);
describe('render', function () {
it('should render a table', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Table, null));
assert.equal(wrapper.find('table').length, 1);
});
});
describe('props', function () {
describe('density', function () {
describe('value `compressed`', function () {
it('should apply the `lucid-Table-density-compressed` class name to the rendered table', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Table, {
density: "compressed"
}));
assert.equal(wrapper.find('table.lucid-Table-density-compressed').length, 1);
});
});
describe('value `extended`', function () {
it('should apply the `lucid-Table-density-extended` class name to the rendered table', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Table, {
density: "extended"
}));
assert.equal(wrapper.find('table.lucid-Table-density-extended').length, 1);
});
});
});
describe('hasBorder', function () {
it('should apply the `lucid-Table-has-border` class name to the rendered table', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Table, {
hasBorder: true
}));
assert.equal(wrapper.find('table.lucid-Table-has-border').length, 1, 'the className lucid-Table-has-border must be included');
});
});
});
describe('Child Elements', function () {
describe('Thead', function () {
describe('render', function () {
it('should render a thead', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Thead, null));
assert.equal(wrapper.find('thead.lucid-Table-Thead').length, 1);
});
});
});
describe('Tbody', function () {
describe('render', function () {
it('should render a tbody', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Tbody, null));
assert.equal(wrapper.find('tbody.lucid-Table-Tbody').length, 1);
});
});
});
describe('Tr', function () {
describe('render', function () {
it('should render a tr', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Tr, null));
assert.equal(wrapper.find('tr.lucid-Table-Tr').length, 1);
});
});
describe('props', function () {
describe('isDisabled', function () {
it('should apply the class name `lucid-Table-is-disabled`', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Tr, {
isDisabled: true
}));
assert.equal(wrapper.find('tr.lucid-Table-is-disabled').length, 1);
});
});
describe('isSelected', function () {
it('should apply the class name `lucid-Table-is-selected`', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Tr, {
isSelected: true
}));
assert.equal(wrapper.find('tr.lucid-Table-is-selected').length, 1);
});
});
describe('isActive', function () {
it('should apply the class name `lucid-Table-is-active`', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Tr, {
isActive: true
}));
assert.equal(wrapper.find('tr.lucid-Table-is-active').length, 1);
});
});
});
});
describe('Th', function () {
describe('render', function () {
it('should render a th', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Th, null));
assert.equal(wrapper.find('th.lucid-Table-Th').length, 1);
});
});
describe('props', function () {
describe('align', function () {
it('should apply the class name `lucid-Table-align-left` when align=`left`', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Th, {
align: "left"
}));
assert.equal(wrapper.find('th.lucid-Table-align-left').length, 1);
});
it('should apply the class name `lucid-Table-align-center` when align=`center`', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Th, {
align: "center"
}));
assert.equal(wrapper.find('th.lucid-Table-align-center').length, 1);
});
it('should apply the class name `lucid-Table-align-right` when align=`right`', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Th, {
align: "right"
}));
assert.equal(wrapper.find('th.lucid-Table-align-right').length, 1);
});
});
describe('isSortable', function () {
it('should apply the class name `lucid-Table-is-sortable` when true', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Th, {
isSortable: true
}));
assert.equal(wrapper.find('th.lucid-Table-is-sortable').length, 1);
});
it('should not apply the class name `lucid-Table-is-sortable` when false', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Th, {
isSortable: false
}));
assert.equal(wrapper.find('th.lucid-Table-is-sortable').length, 0);
});
it('should apply the class name `lucid-Table-is-sortable` when not specified and `isSorted` is true', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Th, {
isSorted: true
}));
assert.equal(wrapper.find('th.lucid-Table-is-sortable').length, 1);
});
it('should not apply the class name `lucid-Table-is-sortable` when neither `isSortable` or `isSorted` are specified', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Th, null));
assert.equal(wrapper.find('th.lucid-Table-is-sortable').length, 0);
});
});
describe('isResizable', function () {
it('should apply the class name `lucid-Table-is-resizable`', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Th, {
isResizable: true,
minWidth: 50
}));
assert.equal(wrapper.find('th.lucid-Table-is-resizable').length, 1);
});
it('should render a DragCaptureZone for resizable header content', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Th, {
isResizable: true
}, "foo"));
assert.equal(wrapper.find(DragCaptureZone).length, 1, 'must render a DragCaptureZone component');
assert(wrapper.find(DragCaptureZone).hasClass('lucid-Table-Th-inner-resize'), 'must have className `lucid-Table-Th-inner-resize`');
});
});
describe('isResizable without minwidth setup', function () {
it('should apply the class name `lucid-Table-is-resizable`', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Th, {
isResizable: true
}));
assert.equal(wrapper.find('th.lucid-Table-is-resizable').length, 1);
});
it('should render a DragCaptureZone for resizable header content', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Th, {
isResizable: true
}, "foo"));
assert.equal(wrapper.find(DragCaptureZone).length, 1, 'must render a DragCaptureZone component');
assert(wrapper.find(DragCaptureZone).hasClass('lucid-Table-Th-inner-resize'), 'must have className `lucid-Table-Th-inner-resize`');
});
});
describe('isSorted', function () {
it('should apply the class name `lucid-Table-is-sorted`', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Th, {
isSorted: true
}));
assert.equal(wrapper.find('th.lucid-Table-is-sorted').length, 1);
});
it('should render a container for sorted header content', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Th, {
isSorted: true
}, "foo"));
var containerWrapper = wrapper.find('.lucid-Table-Th-inner-caret');
assert.equal(containerWrapper.length, 1, 'must have a container');
assert.equal(containerWrapper.find(ArrowIcon).length, 1, 'must render a ArrowIcon');
assert(containerWrapper.find(ArrowIcon).hasClass('lucid-Table-sort-icon'), 'must have className `lucid-Table-sort-icon`');
});
});
describe('sortDirection', function () {
it('should pass thru to the ArrowIcon when `isSorted` is also true', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Th, {
isSorted: true,
sortDirection: "down"
}));
var containerWrapper = wrapper.find('.lucid-Table-Th-inner-caret');
assert.equal(containerWrapper.find(ArrowIcon).prop('direction'), 'down', 'ArrowIcon direction must match prop value');
});
});
});
});
describe('Td', function () {
describe('render', function () {
it('should render a td', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Td, null));
assert.equal(wrapper.find('td.lucid-Table-Td').length, 1);
});
});
describe('props', function () {
describe('align', function () {
it('should apply the class name `lucid-Table-align-left` when align=`left`', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Td, {
align: "left"
}));
assert.equal(wrapper.find('td.lucid-Table-align-left').length, 1);
});
it('should apply the class name `lucid-Table-align-center` when align=`center`', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Td, {
align: "center"
}));
assert.equal(wrapper.find('td.lucid-Table-align-center').length, 1);
});
it('should apply the class name `lucid-Table-align-right` when align=`right`', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Td, {
align: "right"
}));
assert.equal(wrapper.find('td.lucid-Table-align-right').length, 1);
});
});
describe('hasBorderRight', function () {
it('should apply the class name `lucid-Table-has-border-right`', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Td, {
hasBorderRight: true
}));
assert.equal(wrapper.find('td.lucid-Table-has-border-right').length, 1);
});
});
describe('has-borderLeft', function () {
it('should apply the class name `lucid-Table-has-border-left`', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Td, {
hasBorderLeft: true
}));
assert.equal(wrapper.find('td.lucid-Table-has-border-left').length, 1);
});
});
describe('truncateContent', function () {
it('should apply the class name `lucid-Table-truncate-content`', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Td, {
truncateContent: true
}));
assert.equal(wrapper.find('td.lucid-Table-truncate-content').length, 1);
});
});
});
});
});
});