wix-style-react
Version:
wix-style-react
444 lines (387 loc) • 19.1 kB
JavaScript
;
var _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; };
var _Table = require('./Table.driver');
var _Table2 = _interopRequireDefault(_Table);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _Table3 = require('./Table');
var _testkit = require('../../testkit');
var _react3 = require('../../test/utils/react');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }
describe('Table', function () {
var render = (0, _react3.createRendererWithDriver)(_Table2.default);
var createDriver = function createDriver(jsx) {
var rendered = render(jsx);
return rendered.driver;
};
var ID_1 = 'aaa',
ID_2 = 'bbb';
var defaultProps = {
id: 'id',
data: [{ id: ID_1, a: 'value 1', b: 'value 2' }, { id: ID_2, a: 'value 3', b: 'value 4' }],
columns: [{ title: 'Row Num', render: function render(row, rowNum) {
return rowNum;
} }, { title: 'A', render: function render(row) {
return row.a;
} }, { title: 'B', render: function render(row) {
return row.b;
} }],
rowClass: 'class-name',
showSelection: true,
children: _react2.default.createElement(_Table3.Table.Content, null)
};
var noneSelected = function noneSelected() {
return [];
};
var firstSelected = function firstSelected() {
return [ID_1];
};
var secondSelected = function secondSelected() {
return [ID_2];
};
var allSelected = function allSelected() {
return [ID_1, ID_2];
};
it('should pass id prop to child', function () {
var driver = createDriver(_react2.default.createElement(_Table3.Table, defaultProps));
expect(driver.hasChildWithId(defaultProps.id)).toBeTruthy();
});
describe('showSelection prop', function () {
it('should display selection column', function () {
var driver = createDriver(_react2.default.createElement(_Table3.Table, _extends({}, defaultProps, { selectedIds: firstSelected() })));
expect(driver.getRowCheckboxDriver(1).exists()).toBeTruthy();
expect(driver.getBulkSelectionCheckboxDriver().exists()).toBeTruthy();
});
it('should not display selection column', function () {
var driver = createDriver(_react2.default.createElement(_Table3.Table, _extends({}, defaultProps, { showSelection: false })));
expect(driver.getRowCheckboxDriver(1).exists()).toBeFalsy();
expect(driver.getBulkSelectionCheckboxDriver().exists()).toBeFalsy();
});
});
describe('selectedIds prop', function () {
it('should select rows according to selectedIds prop given string ids', function () {
var driver = createDriver(_react2.default.createElement(_Table3.Table, _extends({}, defaultProps, { selectedIds: firstSelected() })));
expect(driver.isRowSelected(0)).toBeTruthy();
expect(driver.isRowSelected(1)).toBeFalsy();
});
it('should select rows according to selectedIds prop given numeric ids', function () {
var driver = createDriver(_react2.default.createElement(_Table3.Table, _extends({}, defaultProps, {
data: [{ id: 1111, a: 'value 1', b: 'value 2' }, { id: 2222, a: 'value 3', b: 'value 4' }],
selectedIds: [1111]
})));
expect(driver.isRowSelected(0)).toBeTruthy();
expect(driver.isRowSelected(1)).toBeFalsy();
});
it('should select rows according to selectedIds prop given row index as ids', function () {
var driver = createDriver(_react2.default.createElement(_Table3.Table, _extends({}, defaultProps, {
data: [{ a: 'value 1', b: 'value 2' }, { a: 'value 3', b: 'value 4' }],
selectedIds: [0]
})));
expect(driver.isRowSelected(0)).toBeTruthy();
expect(driver.isRowSelected(1)).toBeFalsy();
});
it('should update selection if selection prop has change', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
var selectedIds, _render, driver, rerender;
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
selectedIds = [];
_render = render(_react2.default.createElement(_Table3.Table, _extends({}, defaultProps, { selectedIds: selectedIds }))), driver = _render.driver, rerender = _render.rerender;
expect(driver.isRowSelected(0)).toBeFalsy();
rerender(_react2.default.createElement(_Table3.Table, _extends({}, defaultProps, { selectedIds: firstSelected() })));
expect(driver.isRowSelected(0)).toBeTruthy();
case 5:
case 'end':
return _context.stop();
}
}
}, _callee, undefined);
})));
});
describe('setSelectedIds', function () {
it('should select rows when setSelectedIds is called', function () {
var tableInst = void 0;
var _render2 = render(_react2.default.createElement(_Table3.Table, _extends({}, defaultProps, {
selectedIds: noneSelected(),
ref: function ref(c) {
return tableInst = c;
}
}))),
driver = _render2.driver;
expect(driver.isRowSelected(0)).toBeFalsy();
expect(driver.isRowSelected(1)).toBeFalsy();
tableInst.setSelectedIds(allSelected());
expect(driver.isRowSelected(0)).toBeTruthy();
expect(driver.isRowSelected(1)).toBeTruthy();
});
});
describe('row selection', function () {
it('should select row when checkbox clicked given row not selected', function () {
var driver = createDriver(_react2.default.createElement(_Table3.Table, _extends({}, defaultProps, { selectedIds: firstSelected() })));
driver.clickRowChecbox(1);
expect(driver.isRowSelected(1)).toBeTruthy();
});
it('should unselect row when checkbox clicked given row selected', function () {
var driver = createDriver(_react2.default.createElement(_Table3.Table, _extends({}, defaultProps, { selectedIds: allSelected() })));
driver.clickRowChecbox(1);
expect(driver.isRowSelected(1)).toBeFalsy();
});
});
describe('re-render', function () {
it('should re-render on data update', function () {
var props = {
id: 'id',
columns: [{ title: 'Row Num', render: function render(row, rowNum) {
return rowNum;
} }, { title: 'A', render: function render(row) {
return row.a;
} }, { title: 'B', render: function render(row) {
return row.b;
} }],
rowClass: 'class-name'
};
var data = [{ a: 'value 1', b: 'value 2' }, { a: 'value 3', b: 'value 4' }];
var _render3 = render(_react2.default.createElement(_Table3.Table, _extends({}, props, { data: data }))),
driver = _render3.driver,
rerender = _render3.rerender;
var newValue = 'value 1 changed';
var COLUMN_A_INDEX = 1;
var ROW_INDEX = 0;
data[ROW_INDEX].a = newValue;
rerender(_react2.default.createElement(_Table3.Table, _extends({}, props, { data: data })));
expect(driver.getCell(ROW_INDEX, COLUMN_A_INDEX).textContent).toBe(newValue);
});
it('should keep selection when re-rendered given selectedIds not provided (Uncontrolled)', function () {
var _render4 = render(_react2.default.createElement(_Table3.Table, defaultProps)),
driver = _render4.driver,
rerender = _render4.rerender;
expect(driver.isRowSelected(1)).toBeFalsy();
driver.clickRowChecbox(1);
expect(driver.isRowSelected(1)).toBeTruthy();
rerender(_react2.default.createElement(_Table3.Table, defaultProps));
expect(driver.isRowSelected(1)).toBeTruthy();
});
});
describe('BulkSelection', function () {
describe('initial render', function () {
it('should display bulk-selection as checked when all rows are selected', function () {
var selectedIds = allSelected();
var driver = createDriver(_react2.default.createElement(_Table3.Table, _extends({}, defaultProps, { selectedIds: selectedIds })));
expect(driver.getBulkSelectionState() === 'ALL').toBeTruthy();
expect(driver.getBulkSelectionState() === 'NONE').toBeFalsy();
expect(driver.getBulkSelectionState() === 'SOME').toBeFalsy();
});
it('should display bulk-selection as unchecked when no rows are selected', function () {
var selectedIds = noneSelected();
var driver = createDriver(_react2.default.createElement(_Table3.Table, _extends({}, defaultProps, { selectedIds: selectedIds })));
expect(driver.getBulkSelectionState() === 'NONE').toBeTruthy();
expect(driver.getBulkSelectionState() === 'ALL').toBeFalsy();
});
it('should display bulk-selection as partial when some rows are selected', function () {
var selectedIds = secondSelected();
var driver = createDriver(_react2.default.createElement(_Table3.Table, _extends({}, defaultProps, { selectedIds: selectedIds })));
expect(driver.getBulkSelectionState() === 'SOME').toBeTruthy();
});
it('should display bulk-selection as checked when data and selectedIds change', function () {
var _render5 = render(_react2.default.createElement(_Table3.Table, _extends({}, defaultProps, {
data: [{ id: ID_1, a: 'value 1', b: 'value 2' }],
selectedIds: [ID_1]
}))),
driver = _render5.driver,
rerender = _render5.rerender;
expect(driver.getBulkSelectionState() === 'ALL').toBeTruthy();
rerender(_react2.default.createElement(_Table3.Table, _extends({}, defaultProps, {
data: [{ id: ID_1, a: 'value 1', b: 'value 2' }, { id: ID_2, a: 'value 3', b: 'value 4' }],
selectedIds: [ID_1, ID_2]
})));
expect(driver.getBulkSelectionState() === 'ALL').toBeTruthy();
});
});
describe('Update row selection', function () {
it('should select all rows when bulk-selection checkbox clicked given no checkboxes are checked', function () {
var selectedIds = noneSelected();
var driver = createDriver(_react2.default.createElement(_Table3.Table, _extends({}, defaultProps, { selectedIds: selectedIds })));
driver.clickBulkSelectionCheckbox();
expect(driver.isRowSelected(0)).toBeTruthy();
expect(driver.isRowSelected(1)).toBeTruthy();
});
it('should select all rows when bulk-selection checkbox clicked given some checkboxes are checked', function () {
var selectedIds = secondSelected();
var driver = createDriver(_react2.default.createElement(_Table3.Table, _extends({}, defaultProps, { selectedIds: selectedIds })));
driver.clickBulkSelectionCheckbox();
expect(driver.isRowSelected(0)).toBeTruthy();
expect(driver.isRowSelected(1)).toBeTruthy();
});
it('should unselect all rows when bulk-selection checkbox clicked given all checkboxes are checked', function () {
var selectedIds = allSelected();
var driver = createDriver(_react2.default.createElement(_Table3.Table, _extends({}, defaultProps, { selectedIds: selectedIds })));
driver.clickBulkSelectionCheckbox();
expect(driver.isRowSelected(0)).toBeFalsy();
expect(driver.isRowSelected(1)).toBeFalsy();
});
});
describe('onSelectionChanged', function () {
it('should call onSelectionChanged when bulk-selection checkbox clicked given non selected', function () {
var onSelectionChanged = jest.fn();
var selectedIds = noneSelected();
var driver = createDriver(_react2.default.createElement(_Table3.Table, _extends({}, defaultProps, {
selectedIds: selectedIds,
onSelectionChanged: onSelectionChanged
})));
driver.clickBulkSelectionCheckbox();
expect(onSelectionChanged).toHaveBeenCalledWith(allSelected(), {
type: 'ALL'
});
});
it('should call onSelectionChanged when bulk-selection checkbox clicked given all selected', function () {
var onSelectionChanged = jest.fn();
var selectedIds = allSelected();
var driver = createDriver(_react2.default.createElement(_Table3.Table, _extends({}, defaultProps, {
selectedIds: selectedIds,
onSelectionChanged: onSelectionChanged
})));
driver.clickBulkSelectionCheckbox();
expect(onSelectionChanged).toHaveBeenCalledWith(noneSelected(), {
type: 'NONE'
});
});
it('should call onSelectionChanged when row selected given no checkboxes are checked', function () {
var onSelectionChanged = jest.fn();
var selectedIds = firstSelected();
var driver = createDriver(_react2.default.createElement(_Table3.Table, _extends({}, defaultProps, {
selectedIds: selectedIds,
onSelectionChanged: onSelectionChanged
})));
driver.clickRowChecbox(1);
expect(onSelectionChanged.mock.calls).toHaveLength(1);
expect(onSelectionChanged).toHaveBeenCalledWith(allSelected(), {
type: 'SINGLE_TOGGLE',
id: ID_2,
value: true
});
});
});
describe('Update BulkSelection', function () {
it('should check bulk-selection checkbox when all rows change to check', function () {
var selectedIds = secondSelected();
var driver = createDriver(_react2.default.createElement(_Table3.Table, _extends({}, defaultProps, { selectedIds: selectedIds })));
driver.clickRowChecbox(0);
expect(driver.getBulkSelectionState() === 'ALL').toBeTruthy();
});
it('should uncheck bulk-selection checkbox when all rows change to not-selected', function () {
var selectedIds = secondSelected();
var driver = createDriver(_react2.default.createElement(_Table3.Table, _extends({}, defaultProps, { selectedIds: selectedIds })));
driver.clickRowChecbox(1);
expect(driver.getBulkSelectionState() === 'NONE').toBeTruthy();
});
it('should show partial in bulk-selection checkbox when row unselected given all rows selected', function () {
var selectedIds = allSelected();
var driver = createDriver(_react2.default.createElement(_Table3.Table, _extends({}, defaultProps, { selectedIds: selectedIds })));
driver.clickRowChecbox(1);
expect(driver.getBulkSelectionState() === 'SOME').toBeTruthy();
});
it('should show partial in bulk-selection checkbox when row selected given all rows not selected', function () {
var selectedIds = noneSelected();
var driver = createDriver(_react2.default.createElement(_Table3.Table, _extends({}, defaultProps, { selectedIds: selectedIds })));
driver.clickRowChecbox(1);
expect(driver.getBulkSelectionState() === 'SOME').toBeTruthy();
});
});
});
describe('Compound components', function () {
it('should NOT have any compound components', function () {
var driver = createDriver(_react2.default.createElement(_Table3.Table, _extends({}, defaultProps, { showSelection: true, selectedIds: noneSelected() })));
expect(!!driver.getTitlebar()).toBeFalsy();
});
it('should have Table.ToolbarContainer with SelectionContext', function () {
var toggle = void 0;
var driver = createDriver(_react2.default.createElement(
_Table3.Table,
_extends({}, defaultProps, { showSelection: true, selectedIds: allSelected() }),
_react2.default.createElement(
_Table3.Table.ToolbarContainer,
null,
function (_ref2) {
var selectedCount = _ref2.selectedCount,
toggleSelectionById = _ref2.toggleSelectionById;
toggle = toggleSelectionById;
return _react2.default.createElement(
'div',
null,
selectedCount + ' Selected'
);
}
),
_react2.default.createElement(_Table3.Table.Content, null)
));
expect(driver.element.innerHTML).toMatch('2 Selected');
toggle(ID_1);
expect(driver.element.innerHTML).toMatch('1 Selected');
});
it('should have Table.Titlebar', function () {
var driver = createDriver(_react2.default.createElement(
_Table3.Table,
_extends({}, defaultProps, { showSelection: true, selectedIds: allSelected() }),
_react2.default.createElement(
'div',
null,
_react2.default.createElement(_Table3.Table.Titlebar, null)
),
_react2.default.createElement(
'div',
null,
_react2.default.createElement(_Table3.Table.Content, { titleBarVisible: false })
)
));
expect(!!driver.getTitlebar()).toBeTruthy();
});
});
describe('withWrapper', function () {
afterEach(function () {
return (0, _react3.cleanup)();
});
it('should have working test drivers when without wrapper', function () {
var _render6 = render(_react2.default.createElement(
_Table3.Table,
_extends({}, defaultProps, {
showSelection: true,
selectedIds: allSelected(),
withWrapper: false
}),
_react2.default.createElement(
'div',
null,
_react2.default.createElement(
'div',
null,
_react2.default.createElement(_Table3.Table.Titlebar, { dataHook: 'test-table-titlebar' })
),
_react2.default.createElement(
'div',
null,
_react2.default.createElement(_Table3.Table.Content, {
titleBarVisible: false,
dataHook: 'test-table-content'
})
)
)
)),
container = _render6.container;
var titlebarDriver = (0, _testkit.tableTestkitFactory)({
wrapper: container,
dataHook: 'test-table-titlebar'
});
var bulkSelectionCheckboxDriver = titlebarDriver.getBulkSelectionCheckboxDriver();
expect(bulkSelectionCheckboxDriver.isChecked()).toBeTruthy();
var contentDriver = (0, _testkit.tableTestkitFactory)({
wrapper: container,
dataHook: 'test-table-content'
});
expect(!!contentDriver.element).toBe(true);
expect(contentDriver.getRowsCount()).toBe(defaultProps.data.length);
expect(contentDriver.isRowSelected(0)).toBeTruthy();
});
});
});