@wix/design-system
Version:
@wix/design-system
700 lines (699 loc) • 21.8 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
exports.__esModule = true;
exports.horizontalScrollData = exports.horizontalScrollColumns = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _vanilla = require("@wix/wix-ui-test-utils/vanilla");
var _2 = _interopRequireDefault(require(".."));
var _TablePrivate = require("../Table.private.driver");
var _Card = _interopRequireDefault(require("../../Card"));
var _Checkbox = _interopRequireDefault(require("../../Checkbox"));
var _ToggleSwitch = _interopRequireDefault(require("../../ToggleSwitch"));
var _range = _interopRequireDefault(require("../../utils/operators/range"));
var _storySettings = require("../docs/storySettings");
var _testExamples = require("./testExamples");
var _storybookSnapper = require("storybook-snapper");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Table/test/Table.visual.jsx",
_this = void 0;
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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) { (0, _defineProperty2["default"])(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; }
var dataHook = _storySettings.storySettings.dataHook;
var clickFirstRow = function clickFirstRow() {
var node = document.body;
var selector = '[data-table-row="dataTableRow"]';
var elements = node.querySelectorAll(selector);
elements[0].click();
};
var data = [{
name: 'Apple Towels',
SKU: '111222',
price: '$2.00',
inventory: 'In stock'
}, {
name: 'Cyan Towels',
SKU: '222333',
price: '$2.00',
inventory: 'In stock'
}, {
name: 'Marble Slippers',
SKU: '333444',
price: '$14.00',
inventory: 'In stock'
}, {
name: 'Red Slippers',
SKU: '444555',
price: '$14.00',
inventory: 'Out of stock'
}];
var columns = [{
title: 'Name',
render: function render(row) {
return /*#__PURE__*/_react["default"].createElement("span", {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 51,
columnNumber: 20
}
}, row.name);
},
width: '30%',
infoTooltipProps: {
content: 'This is the name column'
}
}, {
title: 'SKU',
render: function render(row) {
return /*#__PURE__*/_react["default"].createElement("span", {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 57,
columnNumber: 20
}
}, row.SKU);
},
width: '20%'
}, {
title: 'Price',
render: function render(row) {
return /*#__PURE__*/_react["default"].createElement("span", {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 62,
columnNumber: 20
}
}, row.price);
},
width: '20%'
}, {
title: 'Inventory',
render: function render(row) {
return /*#__PURE__*/_react["default"].createElement("span", {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 67,
columnNumber: 20
}
}, row.inventory);
},
width: '20%'
}];
var tablePrivateTestkitFactory = (0, _vanilla.testkitFactoryCreator)(_TablePrivate.tablePrivateDriverFactory);
var createDriver = function createDriver() {
return tablePrivateTestkitFactory({
wrapper: document.body,
dataHook: dataHook
});
};
var getHorizontalScrollColumnContent = function getHorizontalScrollColumnContent(columnIndex, rowIndex) {
return columnIndex === 1 && rowIndex === 2 ? 'A very long column text that should span multiple lines and grow the row height.' : "Value ".concat(columnIndex + 1, "-").concat(rowIndex + 1);
};
var horizontalScrollColumnCount = 20;
var horizontalScrollRowCount = 4;
var horizontalScrollData = exports.horizontalScrollData = (0, _range["default"])(0, horizontalScrollRowCount).map(function (rowIndex) {
return (0, _range["default"])(0, horizontalScrollColumnCount).reduce(function (rows, columnIndex) {
return _objectSpread(_objectSpread({}, rows), {}, (0, _defineProperty2["default"])({}, "value".concat(columnIndex + 1), getHorizontalScrollColumnContent(columnIndex, rowIndex)));
}, {});
});
var horizontalScrollColumns = exports.horizontalScrollColumns = (0, _range["default"])(0, horizontalScrollColumnCount).map(function (columnIndex) {
return {
title: "Column ".concat(columnIndex + 1),
render: function render(row) {
return row["value".concat(columnIndex + 1)];
},
width: 150,
infoTooltipProps: {
content: 'Tooltip!'
}
};
});
var rowVerticalPaddingValues = ['large', 'medium', 'small', 'tiny', 'xTiny', 'xxTiny'];
var rowVerticalPaddingTests = rowVerticalPaddingValues.map(function (rowVerticalPadding) {
return {
it: "Should display the table row with \"".concat(rowVerticalPadding, "\" rowVerticalPadding"),
props: {
data: data,
columns: columns,
rowVerticalPadding: rowVerticalPadding
}
};
});
var rowVerticalPaddingTestsWithExpandableRow = rowVerticalPaddingValues.map(function (rowVerticalPadding) {
return {
it: "Should display the table expanded row with \"".concat(rowVerticalPadding, "\" rowVerticalPadding"),
props: {
rowDetails: function rowDetails(row) {
return /*#__PURE__*/_react["default"].createElement("span", {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 138,
columnNumber: 11
}
}, "This is an expandable space where you see the row details.");
},
data: data,
columns: columns,
rowVerticalPadding: rowVerticalPadding
},
componentDidMount: function componentDidMount(done) {
clickFirstRow();
done();
}
};
});
var stickyFirstTwoColumns = {
it: 'Should show table with two sticky columns',
props: {
horizontalScroll: true,
showSelection: true,
stickyColumns: 2,
data: horizontalScrollData,
columns: horizontalScrollColumns
},
componentDidMount: function componentDidMount(done) {
createDriver().scrollHorizontallyTo(200);
done();
}
};
var tests = [{
describe: 'Basic',
its: [{
it: 'Should display the table with data',
props: {
data: data,
columns: columns
}
}, {
it: 'Should display the table with "standard" skin',
props: {
data: data,
columns: columns
}
}, {
it: 'Should display the table with "neutral" skin',
props: {
data: data,
columns: columns,
skin: 'neutral'
}
}, {
it: 'Should display the table with aligned columns',
props: {
data: [{
name: 'Apple Towels',
visible: true,
onSale: false,
price: '$22.99'
}, {
name: 'Cyan Towls',
visible: false,
onSale: false,
price: '$145.99'
}, {
name: 'Marble Slippers',
visible: false,
onSale: false,
price: '$125,265.00'
}, {
name: 'Red Slippers',
visible: false,
onSale: false,
price: '$1,265.69'
}],
columns: [{
title: 'Name',
render: function render(row) {
return /*#__PURE__*/_react["default"].createElement("span", {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 227,
columnNumber: 30
}
}, row.name);
},
width: '30%'
}, {
title: 'Visibility',
render: function render(row) {
return /*#__PURE__*/_react["default"].createElement("span", {
style: {
display: 'inline-flex',
alignItems: 'center'
},
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 233,
columnNumber: 17
}
}, /*#__PURE__*/_react["default"].createElement(_ToggleSwitch["default"], {
checked: row.visible,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 234,
columnNumber: 19
}
}), /*#__PURE__*/_react["default"].createElement("span", {
style: {
marginLeft: 12
},
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 235,
columnNumber: 19
}
}, row.visible ? 'Visible' : 'Hidden'));
},
width: '20%',
align: 'start'
}, {
title: 'On Sale',
render: function render() {
return /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 245,
columnNumber: 29
}
});
},
width: '20%',
align: 'center',
infoTooltipProps: {
content: 'I am a Tooltip!'
}
}, {
title: 'Price',
render: function render(row) {
return /*#__PURE__*/_react["default"].createElement("span", {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 254,
columnNumber: 30
}
}, row.price);
},
width: '20%',
align: 'end'
}]
}
}, {
it: 'Should display the table with selection',
props: {
data: data,
columns: columns,
showSelection: true
}
}, {
it: 'Should display the table with selection with unselectable row',
props: {
data: [].concat(data, [{
name: 'Unselectable Product',
SKU: '123123',
price: '$6.00',
inventory: 'In stock',
unselectable: true
}]),
columns: columns,
showSelection: true
}
}, {
it: 'Should display the table with selection but without Select All column title',
props: {
data: data,
columns: columns,
showSelection: true,
hideBulkSelectionCheckbox: true
}
}, {
it: 'Should display the table with disabled selection',
props: {
data: data,
columns: columns,
showSelection: true,
selectionDisabled: true
}
}, {
it: 'Should display the table with disabled selection but without Select All column title',
props: {
data: data,
columns: columns,
showSelection: true,
hideBulkSelectionCheckbox: true,
selectionDisabled: true
}
}, {
it: 'Should display the table without column titles',
props: {
data: data,
columns: columns,
children: /*#__PURE__*/_react["default"].createElement(_2["default"].Content, {
titleBarVisible: false,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 319,
columnNumber: 21
}
})
}
}, {
it: 'Should display the table with hidden column titles',
props: {
data: data,
columns: columns,
children: /*#__PURE__*/_react["default"].createElement(_2["default"].Content, {
titleBarDisplay: false,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 327,
columnNumber: 21
}
})
}
}, {
it: 'with active row',
props: {
data: data,
columns: columns,
isRowActive: function isRowActive(_, rowNum) {
return rowNum === 1;
}
}
}].concat((0, _toConsumableArray2["default"])(rowVerticalPaddingTests), (0, _toConsumableArray2["default"])(rowVerticalPaddingTestsWithExpandableRow), [{
it: "Should display the table with expanded row details without padding",
props: {
rowDetails: function rowDetails(row) {
return /*#__PURE__*/_react["default"].createElement("span", {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 345,
columnNumber: 15
}
}, "This is an expandable space where you see the row details.");
},
data: data,
columns: columns,
removeRowDetailsPadding: true,
rowVerticalPadding: 'large'
},
componentDidMount: function componentDidMount(done) {
clickFirstRow();
done();
}
}])
}, {
describe: 'Toolbar',
its: [{
it: 'Should display the table with toolbar',
props: {
data: data,
columns: columns,
showSelection: true,
children: [/*#__PURE__*/_react["default"].createElement(_2["default"].ToolbarContainer, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 372,
columnNumber: 13
}
}, function () {
return /*#__PURE__*/_react["default"].createElement(_testExamples.ToolbarExample, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 373,
columnNumber: 22
}
});
}), /*#__PURE__*/_react["default"].createElement(_2["default"].Content, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 375,
columnNumber: 13
}
})]
}
}, {
it: 'Should display the table with toolbar with bulk selection checkbox',
props: {
data: data,
columns: columns,
showSelection: true,
hideBulkSelectionCheckbox: true,
children: [/*#__PURE__*/_react["default"].createElement(_2["default"].ToolbarContainer, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 387,
columnNumber: 13
}
}, function () {
return /*#__PURE__*/_react["default"].createElement(_testExamples.ToolbarWithBulSelectionCheckboxExample, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 388,
columnNumber: 22
}
});
}), /*#__PURE__*/_react["default"].createElement(_2["default"].Content, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 390,
columnNumber: 13
}
})]
}
}, {
it: 'Should display the table with toolbar and without column titles',
props: {
data: data,
columns: columns,
children: [/*#__PURE__*/_react["default"].createElement(_testExamples.ToolbarExample, {
key: "toolbar",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 400,
columnNumber: 13
}
}), /*#__PURE__*/_react["default"].createElement(_2["default"].Content, {
key: "content",
titleBarVisible: false,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 401,
columnNumber: 13
}
})]
}
}]
}, {
describe: 'EmptyState',
its: [{
it: 'Should display the table with EmptyState',
props: {
data: data,
columns: columns,
showSelection: true,
children: /*#__PURE__*/_react["default"].createElement(_testExamples.EmptyStateExample, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 416,
columnNumber: 21
}
})
}
}, {
it: 'Should display the table with toolbar and EmptyState',
props: {
data: data,
columns: columns,
showSelection: true,
children: [/*#__PURE__*/_react["default"].createElement(_testExamples.ToolbarExample, {
key: "toolbar",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 426,
columnNumber: 13
}
}), /*#__PURE__*/_react["default"].createElement(_testExamples.EmptyStateExample, {
key: "emptystate",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 427,
columnNumber: 13
}
})]
}
}]
}, {
describe: 'Sticky and Horizontal Scroll',
its: [{
it: 'Should display the table with horizontal scroll',
props: {
horizontalScroll: true,
data: horizontalScrollData,
columns: horizontalScrollColumns
}
}, {
it: 'Should show left shadow on scroll',
props: {
horizontalScroll: true,
data: horizontalScrollData,
columns: horizontalScrollColumns
},
componentDidMount: function componentDidMount(done) {
createDriver().scrollHorizontallyTo(250);
done();
}
}, {
it: 'Should sticky first bulk selection column',
props: {
horizontalScroll: true,
showSelection: true,
stickyColumns: 1,
data: horizontalScrollData,
columns: horizontalScrollColumns
},
componentDidMount: function componentDidMount(done) {
createDriver().scrollHorizontallyTo(200);
done();
}
}, stickyFirstTwoColumns, {
it: 'Should support selection, highlight and active with sticky columns',
props: {
horizontalScroll: true,
showSelection: true,
stickyColumns: 2,
data: horizontalScrollData,
columns: horizontalScrollColumns,
isRowHighlight: function isRowHighlight(_, rowNum) {
return rowNum % 2 === 0;
},
isRowActive: function isRowActive(_, rowNum) {
return rowNum === 3;
}
},
componentDidMount: function componentDidMount(done) {
var driver = createDriver();
driver.scrollHorizontallyTo(200);
driver.clickRowCheckbox(1);
done();
}
}, {
it: 'Should sticky columns when table content and titlebar are rendered separately',
props: {
horizontalScroll: true,
stickyColumns: 2,
data: horizontalScrollData,
columns: horizontalScrollColumns,
children: [/*#__PURE__*/_react["default"].createElement(_2["default"].Titlebar, {
key: "titlebar",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 497,
columnNumber: 13
}
}), /*#__PURE__*/_react["default"].createElement(_2["default"].Content, {
key: "content",
titleBarVisible: false,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 498,
columnNumber: 13
}
})]
},
componentDidMount: function componentDidMount(done) {
createDriver().scrollHorizontallyTo(200);
done();
}
}]
}];
var TableWrapper = function TableWrapper(_ref) {
var props = _ref.props,
componentDidMount = _ref.componentDidMount,
done = _ref.done;
(0, _react.useEffect)(function () {
componentDidMount && componentDidMount(done);
}, [componentDidMount, done]);
return /*#__PURE__*/_react["default"].createElement("div", {
style: {
backgroundColor: '#DFE5EB',
padding: '20px'
},
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 516,
columnNumber: 5
}
}, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 517,
columnNumber: 7
}
}, /*#__PURE__*/_react["default"].createElement(_2["default"], (0, _extends2["default"])({
dataHook: dataHook
}, props, {
componentDidMount: componentDidMount,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 518,
columnNumber: 9
}
}))));
};
tests.forEach(function (_ref2) {
var describe = _ref2.describe,
its = _ref2.its;
its.forEach(function (_ref3) {
var it = _ref3.it,
props = _ref3.props,
componentDidMount = _ref3.componentDidMount;
(0, _storybookSnapper.visualize)("Table/".concat(describe), function () {
(0, _storybookSnapper.snap)(it, function (done) {
return /*#__PURE__*/_react["default"].createElement(TableWrapper, {
props: props,
componentDidMount: componentDidMount,
done: done,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 532,
columnNumber: 9
}
});
});
});
});
});