@wix/design-system
Version:
@wix/design-system
626 lines • 24.2 kB
JavaScript
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/esm/TimeTable/test/TimeTable.spec.jsx",
_this = this;
import _regeneratorRuntime from "@babel/runtime/regenerator";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React from 'react';
import { createRendererWithUniDriver, cleanup } from '../../utils/test-utils/unit';
import TimeTable from '../TimeTable';
import { timeTablePrivateDriverFactory } from './TimeTable.private.uni.driver';
describe('TimeTable', function () {
var render = createRendererWithUniDriver(timeTablePrivateDriverFactory);
var renderTimeTable = function renderTimeTable() {
var overrideProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var props = _objectSpread({
columns: [{
title: 'title 1',
subtitle: 'subtitle 1',
items: [{
content: 'item 1'
}],
droppable: true,
disabled: true
}, {
title: 'title 2',
subtitle: 'subtitle 2',
items: [{
content: 'item 2',
disabled: false,
draggable: true
}],
disabled: true
}, {
title: 'title 3',
subtitle: 'subtitle 3',
items: [{
content: 'item 3'
}],
active: true
}, {
title: 'title 4',
subtitle: 'subtitle 4',
items: [{
content: 'item 4'
}, {
content: 'item 5',
draggable: false,
disabled: true
}]
}]
}, overrideProps);
return render(/*#__PURE__*/React.createElement(TimeTable, _extends({}, props, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 59,
columnNumber: 19
}
})));
};
afterEach(function () {
cleanup();
});
it('should render', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
var _renderTimeTable, driver;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
_renderTimeTable = renderTimeTable(), driver = _renderTimeTable.driver;
_context.t0 = expect;
_context.next = 4;
return driver.exists();
case 4:
_context.t1 = _context.sent;
(0, _context.t0)(_context.t1).toBe(true);
case 6:
case "end":
return _context.stop();
}
}, _callee);
})));
it('should render with correct columns count', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
var _renderTimeTable2, driverOneColumn, _renderTimeTable3, driverTwoColumns;
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) switch (_context2.prev = _context2.next) {
case 0:
_renderTimeTable2 = renderTimeTable({
columns: [{
title: 'column 1',
subtitle: 'subtitle',
items: []
}]
}), driverOneColumn = _renderTimeTable2.driver;
_renderTimeTable3 = renderTimeTable({
columns: [{
title: 'column 1',
subtitle: 'subtitle',
items: []
}, {
title: 'column 2',
subtitle: 'subtitle',
items: []
}]
}), driverTwoColumns = _renderTimeTable3.driver;
_context2.t0 = expect;
_context2.next = 5;
return driverOneColumn.getColumnCount();
case 5:
_context2.t1 = _context2.sent;
(0, _context2.t0)(_context2.t1).toBe(1);
_context2.t2 = expect;
_context2.next = 10;
return driverTwoColumns.getColumnCount();
case 10:
_context2.t3 = _context2.sent;
(0, _context2.t2)(_context2.t3).toBe(2);
case 12:
case "end":
return _context2.stop();
}
}, _callee2);
})));
it('should render with correct column titles', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
var _renderTimeTable4, driver;
return _regeneratorRuntime.wrap(function _callee3$(_context3) {
while (1) switch (_context3.prev = _context3.next) {
case 0:
_renderTimeTable4 = renderTimeTable(), driver = _renderTimeTable4.driver;
_context3.t0 = expect;
_context3.next = 4;
return driver.getTitleAt(0);
case 4:
_context3.t1 = _context3.sent;
(0, _context3.t0)(_context3.t1).toBe('title 1');
_context3.t2 = expect;
_context3.next = 9;
return driver.getTitleAt(1);
case 9:
_context3.t3 = _context3.sent;
(0, _context3.t2)(_context3.t3).toBe('title 2');
_context3.t4 = expect;
_context3.next = 14;
return driver.getTitleAt(2);
case 14:
_context3.t5 = _context3.sent;
(0, _context3.t4)(_context3.t5).toBe('title 3');
_context3.t6 = expect;
_context3.next = 19;
return driver.getTitleAt(3);
case 19:
_context3.t7 = _context3.sent;
(0, _context3.t6)(_context3.t7).toBe('title 4');
case 21:
case "end":
return _context3.stop();
}
}, _callee3);
})));
it('should render with correct column subtitles', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
var _renderTimeTable5, driver;
return _regeneratorRuntime.wrap(function _callee4$(_context4) {
while (1) switch (_context4.prev = _context4.next) {
case 0:
_renderTimeTable5 = renderTimeTable(), driver = _renderTimeTable5.driver;
_context4.t0 = expect;
_context4.next = 4;
return driver.getSubtitleAt(0);
case 4:
_context4.t1 = _context4.sent;
(0, _context4.t0)(_context4.t1).toBe('subtitle 1');
_context4.t2 = expect;
_context4.next = 9;
return driver.getSubtitleAt(1);
case 9:
_context4.t3 = _context4.sent;
(0, _context4.t2)(_context4.t3).toBe('subtitle 2');
_context4.t4 = expect;
_context4.next = 14;
return driver.getSubtitleAt(2);
case 14:
_context4.t5 = _context4.sent;
(0, _context4.t4)(_context4.t5).toBe('subtitle 3');
_context4.t6 = expect;
_context4.next = 19;
return driver.getSubtitleAt(3);
case 19:
_context4.t7 = _context4.sent;
(0, _context4.t6)(_context4.t7).toBe('subtitle 4');
case 21:
case "end":
return _context4.stop();
}
}, _callee4);
})));
it('should render with correct column active state', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
var _renderTimeTable6, driver;
return _regeneratorRuntime.wrap(function _callee5$(_context5) {
while (1) switch (_context5.prev = _context5.next) {
case 0:
_renderTimeTable6 = renderTimeTable(), driver = _renderTimeTable6.driver;
_context5.t0 = expect;
_context5.next = 4;
return driver.isColumnActiveAt(0);
case 4:
_context5.t1 = _context5.sent;
(0, _context5.t0)(_context5.t1).toBe(false);
_context5.t2 = expect;
_context5.next = 9;
return driver.isColumnActiveAt(1);
case 9:
_context5.t3 = _context5.sent;
(0, _context5.t2)(_context5.t3).toBe(false);
_context5.t4 = expect;
_context5.next = 14;
return driver.isColumnActiveAt(2);
case 14:
_context5.t5 = _context5.sent;
(0, _context5.t4)(_context5.t5).toBe(true);
_context5.t6 = expect;
_context5.next = 19;
return driver.isColumnActiveAt(3);
case 19:
_context5.t7 = _context5.sent;
(0, _context5.t6)(_context5.t7).toBe(false);
case 21:
case "end":
return _context5.stop();
}
}, _callee5);
})));
it('should render with correct column disabled state', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
var _renderTimeTable7, driver;
return _regeneratorRuntime.wrap(function _callee6$(_context6) {
while (1) switch (_context6.prev = _context6.next) {
case 0:
_renderTimeTable7 = renderTimeTable(), driver = _renderTimeTable7.driver;
_context6.t0 = expect;
_context6.next = 4;
return driver.isColumnDisabledAt(0);
case 4:
_context6.t1 = _context6.sent;
(0, _context6.t0)(_context6.t1).toBe(true);
_context6.t2 = expect;
_context6.next = 9;
return driver.isColumnDisabledAt(1);
case 9:
_context6.t3 = _context6.sent;
(0, _context6.t2)(_context6.t3).toBe(true);
_context6.t4 = expect;
_context6.next = 14;
return driver.isColumnDisabledAt(2);
case 14:
_context6.t5 = _context6.sent;
(0, _context6.t4)(_context6.t5).toBe(false);
_context6.t6 = expect;
_context6.next = 19;
return driver.isColumnDisabledAt(3);
case 19:
_context6.t7 = _context6.sent;
(0, _context6.t6)(_context6.t7).toBe(false);
case 21:
case "end":
return _context6.stop();
}
}, _callee6);
})));
it('should render with correct column droppable state', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
var _renderTimeTable8, driver;
return _regeneratorRuntime.wrap(function _callee7$(_context7) {
while (1) switch (_context7.prev = _context7.next) {
case 0:
_renderTimeTable8 = renderTimeTable(), driver = _renderTimeTable8.driver;
_context7.t0 = expect;
_context7.next = 4;
return driver.isColumnDroppableAt(0);
case 4:
_context7.t1 = _context7.sent;
(0, _context7.t0)(_context7.t1).toBe(true);
_context7.t2 = expect;
_context7.next = 9;
return driver.isColumnDroppableAt(1);
case 9:
_context7.t3 = _context7.sent;
(0, _context7.t2)(_context7.t3).toBe(false);
_context7.t4 = expect;
_context7.next = 14;
return driver.isColumnDroppableAt(2);
case 14:
_context7.t5 = _context7.sent;
(0, _context7.t4)(_context7.t5).toBe(true);
_context7.t6 = expect;
_context7.next = 19;
return driver.isColumnDroppableAt(3);
case 19:
_context7.t7 = _context7.sent;
(0, _context7.t6)(_context7.t7).toBe(true);
case 21:
case "end":
return _context7.stop();
}
}, _callee7);
})));
it('should render with correct column items count', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
var _renderTimeTable9, driver;
return _regeneratorRuntime.wrap(function _callee8$(_context8) {
while (1) switch (_context8.prev = _context8.next) {
case 0:
_renderTimeTable9 = renderTimeTable(), driver = _renderTimeTable9.driver;
_context8.t0 = expect;
_context8.next = 4;
return driver.getItemCountAt(0);
case 4:
_context8.t1 = _context8.sent;
(0, _context8.t0)(_context8.t1).toBe(1);
_context8.t2 = expect;
_context8.next = 9;
return driver.getItemCountAt(1);
case 9:
_context8.t3 = _context8.sent;
(0, _context8.t2)(_context8.t3).toBe(1);
_context8.t4 = expect;
_context8.next = 14;
return driver.getItemCountAt(2);
case 14:
_context8.t5 = _context8.sent;
(0, _context8.t4)(_context8.t5).toBe(1);
_context8.t6 = expect;
_context8.next = 19;
return driver.getItemCountAt(3);
case 19:
_context8.t7 = _context8.sent;
(0, _context8.t6)(_context8.t7).toBe(2);
case 21:
case "end":
return _context8.stop();
}
}, _callee8);
})));
it('should render with correct item disabled state', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
var _renderTimeTable0, driver;
return _regeneratorRuntime.wrap(function _callee9$(_context9) {
while (1) switch (_context9.prev = _context9.next) {
case 0:
_renderTimeTable0 = renderTimeTable(), driver = _renderTimeTable0.driver;
_context9.t0 = expect;
_context9.next = 4;
return driver.isItemDisabledAt(0, 0);
case 4:
_context9.t1 = _context9.sent;
(0, _context9.t0)(_context9.t1).toBe(true);
_context9.t2 = expect;
_context9.next = 9;
return driver.isItemDisabledAt(1, 0);
case 9:
_context9.t3 = _context9.sent;
(0, _context9.t2)(_context9.t3).toBe(false);
_context9.t4 = expect;
_context9.next = 14;
return driver.isItemDisabledAt(2, 0);
case 14:
_context9.t5 = _context9.sent;
(0, _context9.t4)(_context9.t5).toBe(false);
_context9.t6 = expect;
_context9.next = 19;
return driver.isItemDisabledAt(3, 0);
case 19:
_context9.t7 = _context9.sent;
(0, _context9.t6)(_context9.t7).toBe(false);
_context9.t8 = expect;
_context9.next = 24;
return driver.isItemDisabledAt(3, 1);
case 24:
_context9.t9 = _context9.sent;
(0, _context9.t8)(_context9.t9).toBe(true);
case 26:
case "end":
return _context9.stop();
}
}, _callee9);
})));
it('should render with correct item draggable state', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee0() {
var _renderTimeTable1, driver;
return _regeneratorRuntime.wrap(function _callee0$(_context0) {
while (1) switch (_context0.prev = _context0.next) {
case 0:
_renderTimeTable1 = renderTimeTable(), driver = _renderTimeTable1.driver;
_context0.t0 = expect;
_context0.next = 4;
return driver.isItemDraggableAt(0, 0);
case 4:
_context0.t1 = _context0.sent;
(0, _context0.t0)(_context0.t1).toBe(false);
_context0.t2 = expect;
_context0.next = 9;
return driver.isItemDraggableAt(1, 0);
case 9:
_context0.t3 = _context0.sent;
(0, _context0.t2)(_context0.t3).toBe(true);
_context0.t4 = expect;
_context0.next = 14;
return driver.isItemDraggableAt(2, 0);
case 14:
_context0.t5 = _context0.sent;
(0, _context0.t4)(_context0.t5).toBe(true);
_context0.t6 = expect;
_context0.next = 19;
return driver.isItemDraggableAt(3, 0);
case 19:
_context0.t7 = _context0.sent;
(0, _context0.t6)(_context0.t7).toBe(true);
_context0.t8 = expect;
_context0.next = 24;
return driver.isItemDraggableAt(3, 1);
case 24:
_context0.t9 = _context0.sent;
(0, _context0.t8)(_context0.t9).toBe(false);
case 26:
case "end":
return _context0.stop();
}
}, _callee0);
})));
it('should add new item when add item button is clicked', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee1() {
var onAdd, columnIndex, _renderTimeTable10, driver;
return _regeneratorRuntime.wrap(function _callee1$(_context1) {
while (1) switch (_context1.prev = _context1.next) {
case 0:
onAdd = vi.fn();
columnIndex = 0;
_renderTimeTable10 = renderTimeTable({
addItemButtonLabel: 'Add',
onAdd: onAdd,
columns: [{
title: 'title 1',
subtitle: 'subtitle 1',
items: [{
content: 'item 1'
}]
}]
}), driver = _renderTimeTable10.driver;
_context1.next = 5;
return driver.clickOnAddItemButtonAt(columnIndex);
case 5:
expect(onAdd).toHaveBeenCalledTimes(1);
expect(onAdd).toHaveBeenCalledWith(columnIndex);
case 7:
case "end":
return _context1.stop();
}
}, _callee1);
})));
it('should show add item button when "onAdd" prop is provided', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
var _renderTimeTable11, driverWithoutAdd, _renderTimeTable12, driverWithAdd;
return _regeneratorRuntime.wrap(function _callee10$(_context10) {
while (1) switch (_context10.prev = _context10.next) {
case 0:
_renderTimeTable11 = renderTimeTable({
onAdd: undefined
}), driverWithoutAdd = _renderTimeTable11.driver;
_renderTimeTable12 = renderTimeTable({
onAdd: vi.fn()
}), driverWithAdd = _renderTimeTable12.driver;
_context10.t0 = expect;
_context10.next = 5;
return driverWithAdd.addItemButtonExistsAt(0);
case 5:
_context10.t1 = _context10.sent;
(0, _context10.t0)(_context10.t1).toBe(false);
_context10.t2 = expect;
_context10.next = 10;
return driverWithAdd.addItemButtonExistsAt(3);
case 10:
_context10.t3 = _context10.sent;
(0, _context10.t2)(_context10.t3).toBe(true);
_context10.t4 = expect;
_context10.next = 15;
return driverWithoutAdd.addItemButtonExistsAt(3);
case 15:
_context10.t5 = _context10.sent;
(0, _context10.t4)(_context10.t5).toBe(false);
case 17:
case "end":
return _context10.stop();
}
}, _callee10);
})));
it('should render actions in time table columns', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee11() {
var actionOneHandler, actionTwoHandler, _renderTimeTable13, driver;
return _regeneratorRuntime.wrap(function _callee11$(_context11) {
while (1) switch (_context11.prev = _context11.next) {
case 0:
actionOneHandler = vi.fn();
actionTwoHandler = vi.fn();
_renderTimeTable13 = renderTimeTable({
columns: [{
title: 'title 1',
subtitle: 'subtitle 1',
items: [],
actions: [{
label: 'Action 1',
onClick: actionOneHandler
}, {
label: 'Action 2',
onClick: actionTwoHandler
}]
}, {
title: 'title 2',
subtitle: 'subtitle 2',
items: []
}]
}), driver = _renderTimeTable13.driver;
_context11.t0 = expect;
_context11.next = 6;
return driver.getActionsCount(0);
case 6:
_context11.t1 = _context11.sent;
(0, _context11.t0)(_context11.t1).toBe(2);
_context11.t2 = expect;
_context11.next = 11;
return driver.getActionsCount(1);
case 11:
_context11.t3 = _context11.sent;
(0, _context11.t2)(_context11.t3).toBe(0);
case 13:
case "end":
return _context11.stop();
}
}, _callee11);
})));
it('should action onClick be fired with correct data', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee12() {
var actionOneHandler, actionTwoHandler, _renderTimeTable14, driver;
return _regeneratorRuntime.wrap(function _callee12$(_context12) {
while (1) switch (_context12.prev = _context12.next) {
case 0:
actionOneHandler = vi.fn(function (e) {
return e.persist();
});
actionTwoHandler = vi.fn(function (e) {
return e.persist();
});
_renderTimeTable14 = renderTimeTable({
columns: [{
title: 'title 1',
subtitle: 'subtitle 1',
items: [],
actions: [{
label: 'Action 1',
onClick: actionOneHandler
}]
}, {
title: 'title 2',
subtitle: 'subtitle 2',
actions: [{
label: 'Action 2',
onClick: actionTwoHandler
}],
items: []
}]
}), driver = _renderTimeTable14.driver;
_context12.next = 5;
return driver.clickActionAt(0, 0);
case 5:
expect(actionOneHandler).toHaveBeenCalled();
expect(actionOneHandler.mock.calls[0][0].type).toBe('click');
expect(actionOneHandler.mock.calls[0][1].title).toBe('title 1');
expect(actionOneHandler.mock.calls[0][2]).toBe(0);
_context12.next = 11;
return driver.clickActionAt(1, 0);
case 11:
expect(actionTwoHandler).toHaveBeenCalled();
expect(actionTwoHandler.mock.calls[0][0].type).toBe('click');
expect(actionTwoHandler.mock.calls[0][1].title).toBe('title 2');
expect(actionTwoHandler.mock.calls[0][2]).toBe(1);
case 15:
case "end":
return _context12.stop();
}
}, _callee12);
})));
it('should render correct actions labels', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee13() {
var actionOneHandler, actionTwoHandler, _renderTimeTable15, driver;
return _regeneratorRuntime.wrap(function _callee13$(_context13) {
while (1) switch (_context13.prev = _context13.next) {
case 0:
actionOneHandler = vi.fn();
actionTwoHandler = vi.fn();
_renderTimeTable15 = renderTimeTable({
columns: [{
title: 'title 1',
subtitle: 'subtitle 1',
items: [],
actions: [{
label: 'Action 1',
onClick: actionOneHandler
}]
}, {
title: 'title 2',
subtitle: 'subtitle 2',
actions: [{
label: 'Action 2',
onClick: actionTwoHandler
}],
items: []
}]
}), driver = _renderTimeTable15.driver;
_context13.t0 = expect;
_context13.next = 6;
return driver.getActionLabelAt(0, 0);
case 6:
_context13.t1 = _context13.sent;
(0, _context13.t0)(_context13.t1).toBe('Action 1');
_context13.t2 = expect;
_context13.next = 11;
return driver.getActionLabelAt(1, 0);
case 11:
_context13.t3 = _context13.sent;
(0, _context13.t2)(_context13.t3).toBe('Action 2');
case 13:
case "end":
return _context13.stop();
}
}, _callee13);
})));
});