@wix/design-system
Version:
@wix/design-system
939 lines (938 loc) • 25.6 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 { DragHandle } from '../../DragHandle/DragHandle';
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: 52,
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: 58,
columnNumber: 20
}
}, row.SKU);
},
width: '20%'
}, {
title: 'Price',
render: function render(row) {
return /*#__PURE__*/React.createElement("span", {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 63,
columnNumber: 20
}
}, row.price);
},
width: '20%'
}, {
title: 'Inventory',
render: function render(row) {
return /*#__PURE__*/React.createElement("span", {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 68,
columnNumber: 20
}
}, row.inventory);
},
width: '20%'
}];
var dragAndDrop = {
DroppableTableContext: function DroppableTableContext(_ref) {
var children = _ref.children;
return children;
},
DraggableTableRow: function DraggableTableRow(_ref2) {
var children = _ref2.children;
return children;
},
createDragHandleColumn: function createDragHandleColumn() {
return {
key: 'drag-handle',
dataHook: 'drag-handle',
title: '',
width: '14px',
render: function render() {
return /*#__PURE__*/React.createElement(DragHandle, {
dragHandleSize: "small",
"aria-label": "Drag to reorder",
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 82,
columnNumber: 7
}
});
}
};
}
};
// Mirrors the Cairo handoff (RowLevelIndicator) — 8 data columns × 150px,
// rows 1 & 3 carry errors.
var handoffData = [{
name: 'Wireless Headphones',
price: 249.99,
category: 'Electronics',
sku: '',
stock: 0,
supplier: '',
location: '',
notes: ''
}, {
name: 'Cotton T-Shirt',
price: 29.99,
category: 'Clothing',
sku: '',
stock: 0,
supplier: '',
location: '',
notes: ''
}, {
name: 'Science Fiction Novel',
price: -5,
category: 'Books',
sku: '',
stock: 0,
supplier: '',
location: '',
notes: ''
}, {
name: 'Bluetooth Speaker',
price: 89.99,
category: 'Electronics',
sku: '',
stock: 0,
supplier: '',
location: '',
notes: ''
}];
var handoffColumns = [{
title: 'Product Name',
render: function render(row) {
return row.name;
},
width: 150
}, {
title: 'Price ($)',
render: function render(row) {
return row.price;
},
width: 150,
align: 'end'
}, {
title: 'Category',
render: function render(row) {
return row.category;
},
width: 150
}, {
title: 'SKU',
render: function render(row) {
return row.sku;
},
width: 150
}, {
title: 'Stock',
render: function render(row) {
return row.stock;
},
width: 150,
align: 'end'
}, {
title: 'Supplier',
render: function render(row) {
return row.supplier;
},
width: 150
}, {
title: 'Location',
render: function render(row) {
return row.location;
},
width: 150
}, {
title: 'Notes',
render: function render(row) {
return row.notes;
},
width: 150
}];
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: 209,
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: 298,
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: 304,
columnNumber: 17
}
}, /*#__PURE__*/React.createElement(ToggleSwitch, {
checked: row.visible,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 305,
columnNumber: 19
}
}), /*#__PURE__*/React.createElement("span", {
style: {
marginLeft: 12
},
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 306,
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: 316,
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: 325,
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: 390,
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: 398,
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: 416,
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: 443,
columnNumber: 13
}
}, function () {
return /*#__PURE__*/React.createElement(ToolbarExample, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 444,
columnNumber: 22
}
});
}), /*#__PURE__*/React.createElement(Table.Content, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 446,
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: 458,
columnNumber: 13
}
}, function () {
return /*#__PURE__*/React.createElement(ToolbarWithBulSelectionCheckboxExample, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 459,
columnNumber: 22
}
});
}), /*#__PURE__*/React.createElement(Table.Content, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 461,
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: 471,
columnNumber: 13
}
}), /*#__PURE__*/React.createElement(Table.Content, {
key: "content",
titleBarVisible: false,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 472,
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: 487,
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: 497,
columnNumber: 13
}
}), /*#__PURE__*/React.createElement(EmptyStateExample, {
key: "emptystate",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 498,
columnNumber: 13
}
})]
}
}]
}, {
describe: 'rowStatus',
its: [{
it: 'Should render the status indicator when rowStatus returns a value',
props: {
data: data,
columns: columns,
rowStatus: function rowStatus(_row, rowNum) {
return rowNum % 2 === 0 ? {
status: 'error',
messages: ["SKU: SKU is required (row ".concat(rowNum + 1, ")")]
} : null;
}
}
}, {
it: 'Should coexist with showSelection',
props: {
data: data,
columns: columns,
showSelection: true,
rowStatus: function rowStatus(_row, rowNum) {
return rowNum === 0 ? {
status: 'error',
messages: ['SKU: SKU is required']
} : null;
}
}
}, {
it: 'Should coexist with showSelection and showRowNumbers',
props: {
data: data,
columns: columns,
showSelection: true,
showRowNumbers: true,
rowStatus: function rowStatus(_row, rowNum) {
return rowNum === 0 ? {
status: 'error',
messages: ['SKU: SKU is required']
} : null;
}
}
}, {
it: 'Should coexist with drag handle',
props: {
data: data,
columns: columns,
dragAndDrop: dragAndDrop,
rowStatus: function rowStatus(_row, rowNum) {
return rowNum === 0 ? {
status: 'error',
messages: ['SKU: SKU is required']
} : null;
}
}
}, {
it: 'Should show two errors for two cells in the same row',
props: {
data: data,
columns: columns,
rowStatus: function rowStatus(_row, rowNum) {
return rowNum === 0 ? {
status: 'error',
messages: ['SKU: SKU is required', 'Price ($): Must be greater than 0']
} : null;
}
}
}, {
it: 'Should match the Cairo handoff layout',
props: {
data: handoffData,
columns: handoffColumns,
showSelection: true,
showRowNumbers: true,
horizontalScroll: true,
stickyColumns: 1,
rowStatus: function rowStatus(_row, rowNum) {
if (rowNum === 0) {
return {
status: 'error',
messages: ['SKU: SKU is required']
};
}
if (rowNum === 2) {
return {
status: 'error',
messages: ['SKU: SKU is required', 'Price ($): Price must be positive']
};
}
return null;
}
}
}, {
it: 'Should render both supported statuses (error + warning)',
props: {
data: data,
columns: columns,
rowStatus: function rowStatus(_row, rowNum) {
var _variants$rowNum;
var variants = [{
status: 'error',
messages: ['SKU: SKU is required']
}, {
status: 'warning',
messages: ['Inventory: Low stock']
}];
return (_variants$rowNum = variants[rowNum]) !== null && _variants$rowNum !== void 0 ? _variants$rowNum : null;
}
}
}, {
it: 'Should reserve space when rowStatus is provided but returns null for every row',
props: {
data: data,
columns: columns,
rowStatus: function rowStatus() {
return null;
}
}
}, {
it: 'Should NOT reserve space when rowStatus prop is omitted',
props: {
data: data,
columns: columns
}
}]
}, {
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: 699,
columnNumber: 13
}
}), /*#__PURE__*/React.createElement(Table.Content, {
key: "content",
titleBarVisible: false,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 700,
columnNumber: 13
}
})]
},
componentDidMount: function componentDidMount(done) {
createDriver().scrollHorizontallyTo(200);
done();
}
}]
}];
var TableWrapper = function TableWrapper(_ref3) {
var props = _ref3.props,
componentDidMount = _ref3.componentDidMount,
done = _ref3.done;
useEffect(function () {
componentDidMount && componentDidMount(done);
}, [componentDidMount, done]);
return /*#__PURE__*/React.createElement("div", {
style: {
backgroundColor: '#DFE5EB',
padding: '20px'
},
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 718,
columnNumber: 5
}
}, /*#__PURE__*/React.createElement(Card, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 719,
columnNumber: 7
}
}, /*#__PURE__*/React.createElement(Table, _extends({
dataHook: dataHook
}, props, {
componentDidMount: componentDidMount,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 720,
columnNumber: 9
}
}))));
};
tests.forEach(function (_ref4) {
var describe = _ref4.describe,
its = _ref4.its;
its.forEach(function (_ref5) {
var it = _ref5.it,
props = _ref5.props,
componentDidMount = _ref5.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: 734,
columnNumber: 9
}
});
});
});
});
});