@wix/design-system
Version:
@wix/design-system
693 lines • 19.8 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/esm/Table/test/Table.visual.jsx",
_this = this;
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, { useEffect } from 'react';
import { testkitFactoryCreator } from '@wix/wix-ui-test-utils/vanilla';
import Table from '..';
import { tablePrivateDriverFactory } from '../Table.private.driver';
import Card from '../../Card';
import Checkbox from '../../Checkbox';
import ToggleSwitch from '../../ToggleSwitch';
import range from '../../utils/operators/range';
import { storySettings } from '../docs/storySettings';
import { ToolbarExample, ToolbarWithBulSelectionCheckboxExample, EmptyStateExample } from './testExamples';
import { visualize, snap } from 'storybook-snapper';
var dataHook = 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.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.createElement("span", {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 57,
columnNumber: 20
}
}, row.SKU);
},
width: '20%'
}, {
title: 'Price',
render: function render(row) {
return /*#__PURE__*/React.createElement("span", {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 62,
columnNumber: 20
}
}, row.price);
},
width: '20%'
}, {
title: 'Inventory',
render: function render(row) {
return /*#__PURE__*/React.createElement("span", {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 67,
columnNumber: 20
}
}, row.inventory);
},
width: '20%'
}];
var tablePrivateTestkitFactory = testkitFactoryCreator(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;
export var horizontalScrollData = range(0, horizontalScrollRowCount).map(function (rowIndex) {
return range(0, horizontalScrollColumnCount).reduce(function (rows, columnIndex) {
return _objectSpread(_objectSpread({}, rows), {}, _defineProperty({}, "value".concat(columnIndex + 1), getHorizontalScrollColumnContent(columnIndex, rowIndex)));
}, {});
});
export var horizontalScrollColumns = range(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.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.createElement("span", {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 227,
columnNumber: 30
}
}, row.name);
},
width: '30%'
}, {
title: 'Visibility',
render: function render(row) {
return /*#__PURE__*/React.createElement("span", {
style: {
display: 'inline-flex',
alignItems: 'center'
},
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 233,
columnNumber: 17
}
}, /*#__PURE__*/React.createElement(ToggleSwitch, {
checked: row.visible,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 234,
columnNumber: 19
}
}), /*#__PURE__*/React.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.createElement(Checkbox, {
__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.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.createElement(Table.Content, {
titleBarVisible: false,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 319,
columnNumber: 21
}
})
}
}, {
it: 'Should display the table with hidden column titles',
props: {
data: data,
columns: columns,
children: /*#__PURE__*/React.createElement(Table.Content, {
titleBarDisplay: false,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 327,
columnNumber: 21
}
})
}
}, {
it: 'with active row',
props: {
data: data,
columns: columns,
isRowActive: function isRowActive(_, rowNum) {
return rowNum === 1;
}
}
}].concat(_toConsumableArray(rowVerticalPaddingTests), _toConsumableArray(rowVerticalPaddingTestsWithExpandableRow), [{
it: "Should display the table with expanded row details without padding",
props: {
rowDetails: function rowDetails(row) {
return /*#__PURE__*/React.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.createElement(Table.ToolbarContainer, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 372,
columnNumber: 13
}
}, function () {
return /*#__PURE__*/React.createElement(ToolbarExample, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 373,
columnNumber: 22
}
});
}), /*#__PURE__*/React.createElement(Table.Content, {
__self: this,
__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.createElement(Table.ToolbarContainer, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 387,
columnNumber: 13
}
}, function () {
return /*#__PURE__*/React.createElement(ToolbarWithBulSelectionCheckboxExample, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 388,
columnNumber: 22
}
});
}), /*#__PURE__*/React.createElement(Table.Content, {
__self: this,
__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.createElement(ToolbarExample, {
key: "toolbar",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 400,
columnNumber: 13
}
}), /*#__PURE__*/React.createElement(Table.Content, {
key: "content",
titleBarVisible: false,
__self: this,
__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.createElement(EmptyStateExample, {
__self: this,
__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.createElement(ToolbarExample, {
key: "toolbar",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 426,
columnNumber: 13
}
}), /*#__PURE__*/React.createElement(EmptyStateExample, {
key: "emptystate",
__self: this,
__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.createElement(Table.Titlebar, {
key: "titlebar",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 497,
columnNumber: 13
}
}), /*#__PURE__*/React.createElement(Table.Content, {
key: "content",
titleBarVisible: false,
__self: this,
__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;
useEffect(function () {
componentDidMount && componentDidMount(done);
}, [componentDidMount, done]);
return /*#__PURE__*/React.createElement("div", {
style: {
backgroundColor: '#DFE5EB',
padding: '20px'
},
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 516,
columnNumber: 5
}
}, /*#__PURE__*/React.createElement(Card, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 517,
columnNumber: 7
}
}, /*#__PURE__*/React.createElement(Table, _extends({
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;
visualize("Table/".concat(describe), function () {
snap(it, function (done) {
return /*#__PURE__*/React.createElement(TableWrapper, {
props: props,
componentDidMount: componentDidMount,
done: done,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 532,
columnNumber: 9
}
});
});
});
});
});