@reltio/components 1.4.2045 → 1.4.2046

package/BasicTable/BasicTable.test.js

@@ -9,290 +9,244 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 import React from 'react';
-import { shallow } from 'enzyme';
-import Table from 'react-components/dist/Table/Table';
-import * as dataHelpers from './helpers';
+import { screen, render, within, fireEvent, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { CollapseRowButton } from '../CollapseRowButton';
+import { mockBasicTableSizing } from '../test-utils';
 import { BasicTable } from './BasicTable';
-import { defaultRenderRowCell, defaultGetRowCellHeight } from '../helpers/basicTable';
-import { BasicTableContext } from '../contexts/BasicTableContext';
-import { useCollapsibleTableRows } from '../hooks/useCollapsibleTableRows';
-import { RowCollapseContext } from '../contexts/RowCollapseContext';
-jest.mock('../hooks/useCollapsibleTableRows', function () { return ({
-    useCollapsibleTableRows: jest.fn()
-}); });
-describe('BasicTable', function () {
-    var headData = [
-        {
-            id: 'id1',
-            label: 'label1',
-            sortable: true,
-            resizable: true
-        },
-        {
-            id: 'id2',
-            label: 'label2',
-            sortable: false,
-            resizable: true
-        },
-        {
-            id: 'id3',
-            label: 'label3',
-            sortable: true,
-            resizable: false
-        },
-        {
-            id: 'id4',
-            label: 'label4',
-            sortable: false,
-            resizable: false,
-            className: 'className3'
-        },
-        {
-            id: 'id5',
-            label: 'label5',
-            sortable: false,
-            resizable: false
-        },
-        {
-            id: 'id6',
-            label: 'label6',
-            sortable: false,
-            resizable: false
-        }
-    ];
-    var rowsData = [
-        {
-            data: {
-                id1: [{ values: 'test0', rowSpan: 4 }],
-                id2: [
-                    { values: 'test1-1', rowSpan: 2 },
-                    { values: 'test1-2', rowSpan: 2 }
-                ],
-                id3: [
-                    { values: null, rowSpan: 1 },
-                    { values: ['test0-1-0'], rowSpan: 1 },
-                    { values: ['test0-2-0'], rowSpan: 1 },
-                    { values: null, rowSpan: 1 }
-                ],
-                id4: [
-                    { values: null, rowSpan: 2 },
-                    { values: ['test1-1-0', 'test1-1-1'], rowSpan: 1 },
-                    { values: ['test1-2-0', 'test1-2-1'], rowSpan: 1 }
-                ],
-                id5: [
-                    { values: ['test2-0-0', 'test2-0-1'], rowSpan: 1 },
-                    { values: ['test2-1-0', 'test2-1-1', 'test2-1-2'], rowSpan: 1 },
-                    { values: ['test2-2-0', 'test2-2-1', 'test2-2-2', 'test2-2-3'], rowSpan: 2 }
-                ],
-                id6: [
-                    { values: ['test3-0-0', 'test3-0-1'], rowSpan: 1 },
-                    { values: ['test3-1-0', 'test3-1-1', 'test3-1-2'], rowSpan: 2 },
-                    {
-                        values: [
-                            React.createElement("div", { key: "test3-2-0" }, "test3-2-0"),
-                            React.createElement("div", { key: "test3-2-1" }, "test3-2-1"),
-                            React.createElement("div", { key: "test3-2-2" }, "test3-2-2"),
-                            React.createElement("div", { key: "test3-2-3" }, "test3-2-3"),
-                            React.createElement("div", { key: "test3-2-4" }, "test3-2-4")
-                        ],
-                        rowSpan: 1
-                    }
-                ]
-            },
-            rowHeight: 48
-        },
-        {
-            data: {
-                id1: [{ values: 'test1', rowSpan: 1 }],
-                id2: [{ values: 'test1-1', rowSpan: 1 }],
-                id3: [{ values: null, rowSpan: 1 }],
-                id4: [{ values: null, rowSpan: 1 }],
-                id5: [{ values: ['test2-0-0', 'test2-0-1'], rowSpan: 1 }],
-                id6: [{ values: ['test3-0-0', 'test3-0-1'], rowSpan: 1 }]
-            },
-            rowHeight: 48
-        },
-        {
-            data: {
-                id1: [{ values: 'test2', rowSpan: 1 }],
-                id2: [{ values: 'test1-1', rowSpan: 1 }],
-                id3: [{ values: null, rowSpan: 1 }],
-                id4: [{ values: null, rowSpan: 1 }],
-                id5: [{ values: ['test2-0-0', React.createElement("div", { key: "test2-0-1" }, "test2-0-1")], rowSpan: 1 }],
-                id6: [{ values: ['test3-0-0', React.createElement("div", { key: "test3-0-1" }, "test3-0-1")], rowSpan: 1 }]
-            },
-            rowHeight: 48
-        }
-    ];
-    var collapseContextValue = {};
-    beforeAll(function () {
-        useCollapsibleTableRows.mockReturnValue({
-            tableRowsData: rowsData,
-            collapseContextValue: collapseContextValue
-        });
-    });
-    beforeEach(function () {
-        jest.spyOn(dataHelpers, 'getTableHeadData').mockReturnValue(headData);
+var getRowByIndex = function (index) {
+    var fixHeadAndFirstColumnContainer = screen.queryByTestId('fix-head-and-fix-column-container');
+    return within(fixHeadAndFirstColumnContainer).queryAllByTestId("base-cell-".concat(index));
+};
+var getCellByIndexes = function (rowIndex, columnIndex) {
+    var row = getRowByIndex(rowIndex);
+    return row[columnIndex];
+};
+var FirstColumnRenderer = function (_a) {
+    var value = _a.value, rowValue = _a.rowValue, rowIndex = _a.rowIndex, draggableProps = _a.draggableProps;
+    return (React.createElement("div", null,
+        React.createElement(CollapseRowButton, { rowIndex: rowIndex, rowValue: rowValue }),
+        React.createElement("div", __assign({}, draggableProps), "drag el"),
+        React.createElement("div", null, value.name)));
+};
+var SecondColumnRenderer = function (_a) {
+    var value = _a.value;
+    return React.createElement("div", null, value.value);
+};
+var getRowCellRenderer = function (id) {
+    switch (id) {
+        case 'id1':
+            return FirstColumnRenderer;
+        case 'id2':
+            return SecondColumnRenderer;
+        default:
+            return function () { return null; };
+    }
+};
+var onHeadClickFn = jest.fn();
+var HeadCellRenderer = function (_a) {
+    var headCellData = _a.headCellData;
+    return (React.createElement("div", null,
+        React.createElement("button", { onClick: onHeadClickFn }, headCellData.label)));
+};
+var columnsData = [
+    {
+        autoResize: false,
+        headCellRenderer: HeadCellRenderer,
+        id: 'id1',
+        initialWidth: 300,
+        label: 'column 1',
+        minWidth: 250,
+        resizable: true,
+        draggable: true,
+        rowCellValueRenderer: getRowCellRenderer('id1'),
+        sortable: false
+    },
+    {
+        autoResize: false,
+        headCellRenderer: function () { return 'second column'; },
+        id: 'id2',
+        initialWidth: 300,
+        label: 'column 2',
+        minWidth: 250,
+        resizable: true,
+        rowCellValueRenderer: getRowCellRenderer('id2'),
+        sortable: false
+    }
+];
+var rowsData = [
+    { id1: { name: 'row 1' }, id2: [{ value: 'row 1 value 1' }, { value: 'row 1 value 2' }, { value: 'row 1 value 3' }] },
+    { id1: { name: 'row 2' }, id2: [{ value: 'row 2 value 1' }, { value: 'row 2 value 2' }] }
+];
+var defaultProps = {
+    fixFirstColumn: true,
+    columnsData: columnsData,
+    rowsData: rowsData,
+    headRowHeight: 48,
+    defaultColumnWidth: 250,
+    defaultColumnMinWidth: 200,
+    dndColumnReorderingEnabled: true,
+    dndColumnReorderingHandler: function () { },
+    dndRowReorderingEnabled: true,
+    dndRowReorderingHandler: function () { },
+    getIdFromRowValue: function (rowValue) { return rowValue.id1.name; },
+    getRowCellHeight: function () { return 48; },
+    maxRowValuesCount: 1,
+    context: {}
+};
+var setUp = function (props) {
+    if (props === void 0) { props = defaultProps; }
+    var user = userEvent.setup();
+    return __assign(__assign({}, render(React.createElement(BasicTable, __assign({}, props)))), { user: user });
+};
+describe('basic table tests', function () {
+    afterEach(function () {
         jest.clearAllMocks();
     });
-    it('should render Table with correct props', function () {
-        var props = {
-            defaultColumnWidth: 100,
-            defaultColumnMinWidth: 100,
-            headRowHeight: 48,
-            columnsData: [],
-            filters: null,
-            onFilter: jest.fn(),
-            rowsData: [],
-            sorting: { field: 'column', order: 'asc' },
-            onSort: jest.fn(),
-            renderRowCell: jest.fn(),
-            getRowCellHeight: jest.fn(),
-            maxRowValuesCount: 3
-        };
-        var wrapper = shallow(React.createElement(BasicTable, __assign({}, props)));
-        expect(wrapper.find(Table).props()).toMatchObject({
-            fixHead: true,
-            headData: headData,
-            rowsData: rowsData,
-            sortField: props.sorting.field,
-            sortOrder: props.sorting.order,
-            onSort: props.onSort
-        });
-        expect(dataHelpers.getTableHeadData).toHaveBeenCalledWith(props.columnsData, props.filters, props.onFilter);
-        expect(useCollapsibleTableRows).toHaveBeenCalledWith({
-            rowsData: props.rowsData,
-            columnsData: props.columnsData,
-            renderRowCell: props.renderRowCell,
-            getRowCellHeight: props.getRowCellHeight,
-            maxRowValuesCount: props.maxRowValuesCount
-        });
-        var collapseContextProvider = wrapper.find(RowCollapseContext.Provider);
-        expect(collapseContextProvider.prop('value')).toBe(collapseContextValue);
-        expect(collapseContextProvider.childAt(0).find(Table).exists()).toBe(true);
-    });
-    it('should provide Table with context', function () {
-        var props = {
-            defaultColumnWidth: 100,
-            defaultColumnMinWidth: 100,
-            headRowHeight: 48,
-            columnsData: [],
-            filters: null,
-            onFilter: jest.fn(),
-            rowsData: [],
-            sorting: { field: 'column', order: 'asc' },
-            onSort: jest.fn(),
-            renderRowCell: jest.fn(),
-            getRowCellHeight: jest.fn(),
-            context: { someKey: 'someValue' }
-        };
-        var wrapper = shallow(React.createElement(BasicTable, __assign({}, props)));
-        var contextProvider = wrapper.find(BasicTableContext.Provider);
-        expect(contextProvider.prop('value')).toBe(props.context);
-        expect(contextProvider.childAt(0)).toEqual(wrapper.find(Table));
-    });
-    it('should render Table without fixed head if row data is empty', function () {
-        var props = {
-            defaultColumnWidth: 100,
-            defaultColumnMinWidth: 100,
-            headRowHeight: 48,
-            columnsData: [],
-            filters: null,
-            onFilter: jest.fn(),
-            rowsData: [],
-            sorting: { field: 'column', order: 'asc' },
-            onSort: jest.fn(),
-            renderRowCell: jest.fn(),
-            getRowCellHeight: jest.fn()
-        };
-        useCollapsibleTableRows.mockReturnValueOnce({
-            tableRowsData: [],
-            collapseContextValue: collapseContextValue
-        });
-        var wrapper = shallow(React.createElement(BasicTable, __assign({}, props)));
-        expect(wrapper.find(Table).prop('fixHead')).toBe(false);
+    it('should not render Table when columnsData is empty array', function () {
+        var props = __assign(__assign({}, defaultProps), { columnsData: [] });
+        var container = setUp(props).container;
+        expect(container).toBeEmptyDOMElement();
     });
-    it('should use default row cell renderer if it is not provided in props', function () {
-        var props = {
-            defaultColumnWidth: 100,
-            defaultColumnMinWidth: 100,
-            headRowHeight: 48,
-            columnsData: [],
-            rowsData: [],
-            sorting: { field: 'column', order: 'asc' },
-            onSort: jest.fn(),
-            getRowCellHeight: jest.fn(),
-            maxRowValuesCount: 3
-        };
-        shallow(React.createElement(BasicTable, __assign({}, props)));
-        expect(useCollapsibleTableRows).toHaveBeenCalledWith({
-            rowsData: props.rowsData,
-            columnsData: props.columnsData,
-            renderRowCell: defaultRenderRowCell,
-            getRowCellHeight: props.getRowCellHeight,
-            maxRowValuesCount: props.maxRowValuesCount
+    it('should render correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var unmockTableSizing, user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    unmockTableSizing = mockBasicTableSizing();
+                    user = setUp().user;
+                    screen.getByText('column 1');
+                    screen.getByText('second column');
+                    screen.getByText('row 1');
+                    screen.getByText('row 1 value 1');
+                    expect(screen.queryByText('row 1 value 2')).not.toBeInTheDocument();
+                    expect(screen.queryByText('row 1 value 3')).not.toBeInTheDocument();
+                    screen.getByText('row 2');
+                    screen.getByText('row 2 value 1');
+                    expect(screen.queryByText('row 2 value 2')).not.toBeInTheDocument();
+                    return [4 /*yield*/, user.click(within(getCellByIndexes(0, 0)).queryByTestId('collapse-button'))];
+                case 1:
+                    _a.sent();
+                    screen.getByText('row 1 value 2');
+                    screen.getByText('row 1 value 3');
+                    return [4 /*yield*/, user.click(within(getCellByIndexes(1, 0)).queryByTestId('collapse-button'))];
+                case 2:
+                    _a.sent();
+                    screen.getByText('row 2 value 2');
+                    return [4 /*yield*/, user.click(within(getCellByIndexes(0, 0)).queryByTestId('collapse-button'))];
+                case 3:
+                    _a.sent();
+                    expect(screen.queryByText('row 1 value 2')).not.toBeInTheDocument();
+                    expect(screen.queryByText('row 1 value 3')).not.toBeInTheDocument();
+                    return [4 /*yield*/, user.click(within(getCellByIndexes(1, 0)).queryByTestId('collapse-button'))];
+                case 4:
+                    _a.sent();
+                    expect(screen.queryByText('row 2 value 2')).not.toBeInTheDocument();
+                    unmockTableSizing();
+                    return [2 /*return*/];
+            }
         });
-    });
-    it('should use default getRowCellHeight if it is not provided in props', function () {
-        var props = {
-            defaultColumnWidth: 100,
-            defaultColumnMinWidth: 100,
-            headRowHeight: 48,
-            columnsData: [],
-            rowsData: [],
-            sorting: { field: 'column', order: 'asc' },
-            onSort: jest.fn(),
-            renderRowCell: jest.fn(),
-            maxRowValuesCount: 3
-        };
-        shallow(React.createElement(BasicTable, __assign({}, props)));
-        expect(useCollapsibleTableRows).toHaveBeenCalledWith({
-            rowsData: props.rowsData,
-            columnsData: props.columnsData,
-            renderRowCell: props.renderRowCell,
-            getRowCellHeight: defaultGetRowCellHeight,
-            maxRowValuesCount: props.maxRowValuesCount
+    }); });
+    it('should collapse all rows after start dragging', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var unmockTableSizing, mouse, user, dragIndicator;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    unmockTableSizing = mockBasicTableSizing();
+                    mouse = [
+                        { clientX: 0, clientY: 0 },
+                        { clientX: 20, clientY: 20 }
+                    ];
+                    user = setUp().user;
+                    return [4 /*yield*/, user.click(within(getCellByIndexes(0, 0)).queryByTestId('collapse-button'))];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(within(getCellByIndexes(1, 0)).queryByTestId('collapse-button'))];
+                case 2:
+                    _a.sent();
+                    expect(within(getCellByIndexes(0, 1)).queryByText('row 1 value 1')).toBeInTheDocument();
+                    expect(within(getCellByIndexes(0, 1)).queryByText('row 1 value 2')).toBeInTheDocument();
+                    expect(within(getCellByIndexes(0, 1)).queryByText('row 1 value 3')).toBeInTheDocument();
+                    expect(within(getCellByIndexes(1, 1)).queryByText('row 2 value 1')).toBeInTheDocument();
+                    expect(within(getCellByIndexes(1, 1)).queryByText('row 2 value 2')).toBeInTheDocument();
+                    dragIndicator = within(getCellByIndexes(1, 0)).getByRole('button', { name: 'drag el' });
+                    return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
+                            return __generator(this, function (_a) {
+                                fireEvent.mouseDown(dragIndicator, mouse[0]);
+                                fireEvent.mouseMove(dragIndicator, mouse[1]);
+                                return [2 /*return*/];
+                            });
+                        }); })];
+                case 3:
+                    _a.sent();
+                    expect(within(getCellByIndexes(0, 1)).queryByText('row 1 value 1')).toBeInTheDocument();
+                    expect(within(getCellByIndexes(0, 1)).queryByText('row 1 value 2')).not.toBeInTheDocument();
+                    expect(within(getCellByIndexes(0, 1)).queryByText('row 1 value 3')).not.toBeInTheDocument();
+                    expect(within(getCellByIndexes(1, 1)).queryByText('row 2 value 1')).toBeInTheDocument();
+                    expect(within(getCellByIndexes(1, 1)).queryByText('row 2 value 2')).not.toBeInTheDocument();
+                    return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
+                            return __generator(this, function (_a) {
+                                fireEvent.mouseUp(dragIndicator);
+                                return [2 /*return*/];
+                            });
+                        }); })];
+                case 4:
+                    _a.sent();
+                    unmockTableSizing();
+                    return [2 /*return*/];
+            }
         });
-    });
-    it('should use Infinity as maxRowValuesCount if it is not provided in props', function () {
-        var props = {
-            defaultColumnWidth: 100,
-            defaultColumnMinWidth: 100,
-            headRowHeight: 48,
-            columnsData: [],
-            rowsData: [],
-            sorting: { field: 'column', order: 'asc' },
-            onSort: jest.fn(),
-            renderRowCell: jest.fn(),
-            getRowCellHeight: jest.fn()
-        };
-        shallow(React.createElement(BasicTable, __assign({}, props)));
-        expect(useCollapsibleTableRows).toHaveBeenCalledWith({
-            rowsData: props.rowsData,
-            columnsData: props.columnsData,
-            renderRowCell: props.renderRowCell,
-            getRowCellHeight: props.getRowCellHeight,
-            maxRowValuesCount: Infinity
+    }); });
+    it('should able to click on buttons in table head', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    expect(onHeadClickFn).not.toHaveBeenCalled();
+                    return [4 /*yield*/, user.click(screen.getAllByRole('button', { name: columnsData[0].label })[1])];
+                case 1:
+                    _a.sent();
+                    expect(onHeadClickFn).toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
         });
-    });
-    it('should not render Table when columnsData is empty array', function () {
-        jest.spyOn(dataHelpers, 'getTableHeadData').mockReturnValue([]);
-        var props = {
-            defaultColumnWidth: 100,
-            defaultColumnMinWidth: 100,
-            headRowHeight: 48,
-            columnsData: [],
-            filters: null,
-            onFilter: jest.fn(),
-            rowsData: [],
-            sorting: { field: 'column', order: 'asc' },
-            onSort: jest.fn(),
-            renderRowCell: jest.fn(),
-            getRowCellHeight: jest.fn(),
-            context: { someKey: 'someValue' }
-        };
-        var wrapper = shallow(React.createElement(BasicTable, __assign({}, props)));
-        expect(wrapper.isEmptyRender()).toBe(true);
-    });
+    }); });
 });

package/BlobRenderer/BlobRenderer.js

@@ -3,5 +3,5 @@ import { useStyles } from './styles';
 export var BlobRenderer = function (_a) {
     var value = _a.value;
     var styles = useStyles();
-    return (React.createElement("div", { className: styles.blobWrapper, onScroll: function (e) { return e.stopPropagation(); } }, value));
+    return (React.createElement("div", { "data-reltio-id": "blob-renderer", className: styles.blobWrapper, onScroll: function (e) { return e.stopPropagation(); } }, value));
 };