@reltio/components 1.4.2018 → 1.4.2019

package/UploadImageDialog/components/TargetBox/TargetBox.specs.js

@@ -1,22 +1,63 @@
 import React from 'react';
-import { mount } from 'enzyme';
-import { DndProvider } from 'react-dnd';
-import TestBackend from 'react-dnd-test-backend';
-import { SelectImageButton } from '../SelectImageButton';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { TargetBox } from './TargetBox';
-describe('TargetBox tests', function () {
-    var onAppendFile;
-    beforeEach(function () {
-        onAppendFile = jest.fn();
+var mockOnAppendFile = jest.fn();
+var setUp = function () {
+    return render(React.createElement(TargetBox, { onAppendFile: mockOnAppendFile }));
+};
+describe('TargetBox', function () {
+    afterEach(function () {
+        jest.clearAllMocks();
     });
-    it('should not pass .isActive className to root element if dnd zone is not active', function () {
-        var component = mount(React.createElement(DndProvider, { backend: TestBackend },
-            React.createElement(TargetBox, { onAppendFile: onAppendFile })));
-        expect(component.find('.root').prop('className')).toBe('root');
+    it('should renders well', function () {
+        var getByText = setUp().getByText;
+        expect(getByText('Drag an image here')).toBeInTheDocument();
     });
-    it('should onAppendFile prop correctly to SelectImageButton', function () {
-        var component = mount(React.createElement(DndProvider, { backend: TestBackend },
-            React.createElement(TargetBox, { onAppendFile: onAppendFile })));
-        expect(component.find(SelectImageButton).prop('onAppendFile')).toEqual(onAppendFile);
+    it('should activates drag state on drag over with acceptable file type', function () {
+        var container = setUp().container;
+        var dropZone = container.firstChild;
+        fireEvent.dragOver(dropZone, {
+            dataTransfer: { types: ['Files'], dropEffect: 'copy' }
+        });
+        expect(dropZone).toHaveClass('isActive');
+    });
+    it('should does not activate drag state with unacceptable file type', function () {
+        var container = setUp().container;
+        var dropZone = container.firstChild;
+        fireEvent.dragOver(dropZone, {
+            dataTransfer: { types: ['Text'], dropEffect: 'none' }
+        });
+        expect(dropZone).not.toHaveClass('isActive');
+    });
+    it('should deactivates drag state on drag leave', function () {
+        var container = setUp().container;
+        var dropZone = container.firstChild;
+        fireEvent.dragOver(dropZone, { dataTransfer: { types: ['Files'] } });
+        expect(dropZone).toHaveClass('isActive');
+        fireEvent.dragLeave(dropZone);
+        expect(dropZone).not.toHaveClass('isActive');
+    });
+    it('should calls onAppendFile with the dropped file', function () {
+        var file = new File(['test content'], 'test.png', { type: 'image/png' });
+        var container = setUp().container;
+        var dropZone = container.firstChild;
+        fireEvent.drop(dropZone, {
+            dataTransfer: {
+                files: [file],
+                types: ['Files']
+            }
+        });
+        expect(mockOnAppendFile).toHaveBeenCalledWith(file);
+    });
+    it('should does not call onAppendFile if dropped item is not of file type', function () {
+        var container = setUp().container;
+        var dropZone = container.firstChild;
+        fireEvent.drop(dropZone, {
+            dataTransfer: {
+                types: ['Text']
+            }
+        });
+        expect(mockOnAppendFile).not.toHaveBeenCalled();
     });
 });

package/UploadImageDialog/components/TargetBox/styles.js

@@ -9,7 +9,8 @@ export var useStyles = makeStyles(function (theme) { return ({
     icon: {
         width: '190px',
         height: '190px',
-        marginBottom: '24px'
+        marginBottom: '24px',
+        pointerEvents: 'none'
     },
     title: {
         marginBottom: '8px',

package/VerticalHeadingsTable/DndVerticalHeadingsTable.test.js

@@ -0,0 +1,114 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { mockDndKit } from '../test-utils/dndKit';
+jest.mock('@dnd-kit/core', function () { return mockDndKit; });
+import VerticalHeadingsTable from './VerticalHeadingsTable';
+var setUp = function (props) {
+    var containerRef = {
+        current: {
+            clientHeight: 500,
+            clientWidth: 500,
+            getBoundingClientRect: function () {
+                return {
+                    top: 0,
+                    left: 0
+                };
+            }
+        }
+    };
+    return render(React.createElement(VerticalHeadingsTable, __assign({ containerRef: containerRef }, props)));
+};
+describe('VerticalHeadingsTable drag and drop tests', function () {
+    var rowsData = [
+        { id: 'entityCard', label: '' },
+        { id: 'matchMethod', label: 'Match Method' },
+        { id: 'workflowCard', label: '' },
+        { id: 'attributes.FirstName', label: 'First Name' },
+        { id: 'attributes.LastName', label: 'Last Name' },
+        { id: 'attributes.Int', label: 'Int' }
+    ];
+    var columnsData = __spreadArray([], new Array(3), true).map(function (_, index) { return ({
+        entityCard: "entityCard-".concat(index),
+        matchMethod: "matchMethod-".concat(index),
+        workflowCard: "workflowCard-".concat(index),
+        'attributes.FirstName': "attributes.FirstName-".concat(index),
+        'attributes.LastName': "attributes.LastName-".concat(index),
+        'attributes.Int': "attributes.Int-".concat(index),
+        id: "entities/".concat(index),
+        isDraggable: index !== 0
+    }); });
+    var defaultProps = {
+        theadRowsNumber: 2,
+        rowsData: rowsData,
+        columnsData: columnsData,
+        onMoveColumn: jest.fn(),
+        onDropColumn: jest.fn(),
+        onMoveRow: jest.fn(),
+        onDropRow: jest.fn()
+    };
+    it('should reorder draggable columns correctly', function () {
+        setUp(defaultProps);
+        var from = screen.getByText(columnsData[1].entityCard);
+        var to = screen.getByText(columnsData[2].entityCard);
+        fireEvent.mouseDown(from.firstChild);
+        fireEvent.mouseOver(to.parentNode);
+        fireEvent.mouseUp(from.firstChild);
+        expect(defaultProps.onMoveColumn).toHaveBeenCalledWith(columnsData[1].id, columnsData[2].id);
+        expect(defaultProps.onDropColumn).toHaveBeenCalled();
+    });
+    it('should reorder draggable rows correctly', function () {
+        setUp(defaultProps);
+        var from = screen.getByText(rowsData[3].label);
+        var to = screen.getByText(rowsData[5].label);
+        fireEvent.mouseDown(from.firstChild);
+        fireEvent.mouseOver(to.parentNode);
+        fireEvent.mouseUp(from.firstChild);
+        expect(defaultProps.onMoveRow).toHaveBeenCalledWith(rowsData[3].id, rowsData[5].id);
+        expect(defaultProps.onDropRow).toHaveBeenCalled();
+    });
+    it('should render backdrop during drag', function () {
+        setUp(defaultProps);
+        var draggingRow = screen.getByText(rowsData[3].label);
+        fireEvent.mouseDown(draggingRow.firstChild);
+        expect(document.getElementsByClassName('backDrop')).toHaveLength(1);
+        fireEvent.mouseUp(draggingRow.firstChild);
+        expect(document.getElementsByClassName('backDrop')).toHaveLength(0);
+        var draggingColumn = screen.getByText(columnsData[1].entityCard);
+        fireEvent.mouseDown(draggingColumn.firstChild);
+        expect(document.getElementsByClassName('backDrop')).toHaveLength(1);
+        fireEvent.mouseUp(draggingColumn.firstChild);
+        expect(document.getElementsByClassName('backDrop')).toHaveLength(0);
+    });
+    it('should render column overlay', function () {
+        setUp(defaultProps);
+        var draggingColumn = screen.getByText(columnsData[1].entityCard);
+        fireEvent.mouseDown(draggingColumn.firstChild);
+        expect(screen.getAllByText(columnsData[1].entityCard)).toHaveLength(2);
+    });
+    it('should render row overlay', function () {
+        setUp(defaultProps);
+        var draggingRow = screen.getByText(rowsData[3].label);
+        fireEvent.mouseDown(draggingRow.firstChild);
+        expect(screen.getAllByText(rowsData[3].label)).toHaveLength(2);
+    });
+});

package/VerticalHeadingsTable/VerticalHeadingsTable.d.ts

@@ -4,6 +4,7 @@ type Props = {
     className?: string;
     rowsData: RowData[];
     columnsData: ColumnData[];
+    containerRef: React.MutableRefObject<HTMLDivElement>;
     theadRowsNumber?: number;
     onMoveRow?: (dragId: string, hoverId: string) => void;
     onDropRow?: () => void;
@@ -12,5 +13,5 @@ type Props = {
     setHoveredColumn?: (columnValue: ColumnData) => void;
     resetHoveredColumn?: () => void;
 };
-declare const _default: React.MemoExoticComponent<({ className, rowsData, columnsData, theadRowsNumber, onMoveRow, onDropRow, onMoveColumn, onDropColumn, setHoveredColumn, resetHoveredColumn }: Props) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ className, rowsData, columnsData, containerRef, theadRowsNumber, onMoveRow, onDropRow, onMoveColumn, onDropColumn, setHoveredColumn, resetHoveredColumn }: Props) => React.JSX.Element>;
 export default _default;

package/VerticalHeadingsTable/VerticalHeadingsTable.js

@@ -1,20 +1,17 @@
-import React, { memo, useRef, useState } from 'react';
+import React, { memo, useMemo } from 'react';
 import { TableRow } from './components/TableRow';
 import { TableRowWithDnd } from './components/TableRowWithDnd';
-import { TableColumnDragLayer } from './components/TableColumnDragLayer';
+import { DndComponent } from './components/DndComponent';
 var VerticalHeadingsTable = function (_a) {
-    var _b;
-    var className = _a.className, rowsData = _a.rowsData, columnsData = _a.columnsData, _c = _a.theadRowsNumber, theadRowsNumber = _c === void 0 ? 0 : _c, onMoveRow = _a.onMoveRow, onDropRow = _a.onDropRow, onMoveColumn = _a.onMoveColumn, onDropColumn = _a.onDropColumn, setHoveredColumn = _a.setHoveredColumn, resetHoveredColumn = _a.resetHoveredColumn;
-    var _d = useState(false), someRowIsDragging = _d[0], setSomeRowIsDragging = _d[1];
-    var tableRef = useRef(null);
-    var tableHeight = (_b = tableRef === null || tableRef === void 0 ? void 0 : tableRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight;
-    var isDNDActive = !!onMoveRow || !!onMoveColumn;
-    return (React.createElement(React.Fragment, null,
-        isDNDActive && React.createElement(TableColumnDragLayer, { columnHeight: tableHeight }),
-        React.createElement("table", { ref: tableRef, className: className },
-            theadRowsNumber > 0 && (React.createElement("thead", null, rowsData.slice(0, theadRowsNumber).map(function (rowData, index) { return (React.createElement(TableRow, { key: rowData.id || index, rowData: rowData, columnsData: columnsData, index: index, onMoveColumn: onMoveColumn, onDropColumn: onDropColumn, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn })); }))),
+    var className = _a.className, rowsData = _a.rowsData, columnsData = _a.columnsData, containerRef = _a.containerRef, _b = _a.theadRowsNumber, theadRowsNumber = _b === void 0 ? 0 : _b, onMoveRow = _a.onMoveRow, onDropRow = _a.onDropRow, onMoveColumn = _a.onMoveColumn, onDropColumn = _a.onDropColumn, setHoveredColumn = _a.setHoveredColumn, resetHoveredColumn = _a.resetHoveredColumn;
+    var columnsId = useMemo(function () { return columnsData.map(function (columnData) { return columnData.id; }); }, [columnsData]);
+    var rowsId = useMemo(function () { return rowsData.map(function (rowData) { return rowData.id; }); }, [rowsData]);
+    var isMoveColumnEnabled = !!onMoveColumn;
+    return (React.createElement(DndComponent, { containerRef: containerRef, onMoveColumn: onMoveColumn, onDropColumn: onDropColumn, onMoveRow: onMoveRow, onDropRow: onDropRow, columnsId: columnsId, rowsId: rowsId, tableClassName: className },
+        React.createElement("table", { className: className },
+            theadRowsNumber > 0 && (React.createElement("thead", null, rowsData.slice(0, theadRowsNumber).map(function (rowData, index) { return (React.createElement(TableRow, { key: rowData.id || index, rowData: rowData, columnsData: columnsData, index: index, isMoveColumnEnabled: isMoveColumnEnabled, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn })); }))),
             React.createElement("tbody", null, rowsData.slice(theadRowsNumber).map(function (rowData, index) {
-                return onMoveRow ? (React.createElement(TableRowWithDnd, { key: rowData.id || index, index: index + theadRowsNumber, rowData: rowData, columnsData: columnsData, onMoveRow: onMoveRow, onDropRow: onDropRow, onMoveColumn: onMoveColumn, onDropColumn: onDropColumn, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn, someRowIsDragging: someRowIsDragging, setSomeRowIsDragging: setSomeRowIsDragging })) : (React.createElement(TableRow, { key: rowData.id || index, index: index + theadRowsNumber, rowData: rowData, columnsData: columnsData, onMoveColumn: onMoveColumn, onDropColumn: onDropColumn, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn }));
+                return onMoveRow ? (React.createElement(TableRowWithDnd, { key: rowData.id || index, rowData: rowData, columnsData: columnsData, isMoveColumnEnabled: isMoveColumnEnabled, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn })) : (React.createElement(TableRow, { key: rowData.id || index, index: index + theadRowsNumber, rowData: rowData, columnsData: columnsData, isMoveColumnEnabled: isMoveColumnEnabled, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn }));
             })))));
 };
 export default memo(VerticalHeadingsTable);

package/VerticalHeadingsTable/VerticalHeadingsTable.test.js

@@ -1,277 +1,82 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import React from 'react';
-import { mount, shallow } from 'enzyme';
-import { act } from 'react-dom/test-utils';
-import TestBackend from 'react-dnd-test-backend';
-import { DndContext, DndProvider } from 'react-dnd';
-import { TableRow } from './components/TableRow';
-import { TableCellWithDnd } from './components/TableCellWithDnd';
-import { TableRowWithDnd } from './components/TableRowWithDnd';
-import { TableColumnDragPreview } from './components/TableColumnDragPreview';
-import { TableColumnDragLayer } from './components/TableColumnDragLayer';
+import { render, screen, within } from '@testing-library/react';
 import VerticalHeadingsTable from './VerticalHeadingsTable';
-var setUpWithDnd = function (_a) {
-    var rowsData = _a.rowsData, columnsData = _a.columnsData, theadRowsNumber = _a.theadRowsNumber, onMoveColumn = _a.onMoveColumn, onDropColumn = _a.onDropColumn, onMoveRow = _a.onMoveRow, onDropRow = _a.onDropRow;
-    var manager;
-    var component = mount(React.createElement(DndProvider, { backend: TestBackend },
-        React.createElement(DndContext.Consumer, null, function (_a) {
-            var dragDropManager = _a.dragDropManager;
-            manager = dragDropManager;
-            return (React.createElement(VerticalHeadingsTable, { rowsData: rowsData, columnsData: columnsData, theadRowsNumber: theadRowsNumber, onMoveColumn: onMoveColumn, onDropColumn: onDropColumn, onMoveRow: onMoveRow, onDropRow: onDropRow }));
-        })));
-    return [component, manager];
+var setUp = function (props) {
+    var containerRef = {
+        current: {
+            clientHeight: 500,
+            clientWidth: 500,
+            getBoundingClientRect: function () {
+                return {
+                    top: 0,
+                    left: 0
+                };
+            }
+        }
+    };
+    return render(React.createElement(VerticalHeadingsTable, __assign({ containerRef: containerRef }, props)));
 };
-var rowsData = [
-    {
-        id: 'entityCard'
-    },
-    {
-        id: 'entityId'
-    },
-    {
-        id: 'attributes.FirstName'
-    },
-    {
-        id: 'attributes.LastName'
-    }
-];
-var columnsData = [
-    { 'attributes.FirstName': {}, entityCard: {}, entityId: '1234', 'attributes.LastName': {}, id: 'entities/1234' }
-];
 describe('VerticalHeadingsTable tests', function () {
-    describe('basic behavior', function () {
-        it('should render rows correctly if theadRowsNumber === 0', function () {
-            var onMoveColumn = jest.fn();
-            var component = shallow(React.createElement(VerticalHeadingsTable, { rowsData: rowsData, columnsData: columnsData, theadRowsNumber: 0, onMoveColumn: onMoveColumn }));
-            expect(component.find('thead')).toHaveLength(0);
-            expect(component.find('tbody').find(TableRow)).toHaveLength(4);
-            component
-                .find('tbody')
-                .find(TableRow)
-                .forEach(function (node, index) {
-                expect(node.props()).toEqual({
-                    rowData: rowsData[index],
-                    columnsData: columnsData,
-                    index: index,
-                    onMoveColumn: onMoveColumn
-                });
-            });
-        });
-        it('should render rows correctly if theadRowsNumber > 0', function () {
-            var onMoveColumn = jest.fn();
-            var theadRowsNumber = 2;
-            var component = shallow(React.createElement(VerticalHeadingsTable, { rowsData: rowsData, columnsData: columnsData, theadRowsNumber: theadRowsNumber, onMoveColumn: onMoveColumn }));
-            var theadTableRow = component.find('thead').find(TableRow);
-            expect(theadTableRow).toHaveLength(2);
-            theadTableRow.forEach(function (node, index) {
-                expect(node.props()).toEqual({
-                    rowData: rowsData[index],
-                    columnsData: columnsData,
-                    index: index,
-                    onMoveColumn: onMoveColumn
-                });
-            });
-            expect(component.find('tbody').find(TableRow)).toHaveLength(2);
-            component
-                .find('tbody')
-                .find(TableRow)
-                .forEach(function (node, index) {
-                expect(node.props()).toEqual({
-                    rowData: rowsData[index + theadRowsNumber],
-                    columnsData: columnsData,
-                    index: index + theadRowsNumber,
-                    onMoveColumn: onMoveColumn
-                });
-            });
-        });
-        it('should render TableRowWithDnd in table body if component has onMoveColumn prop', function () {
-            var onMoveColumn = jest.fn();
-            var onMoveRow = jest.fn();
-            var component = shallow(React.createElement(VerticalHeadingsTable, { rowsData: rowsData, columnsData: columnsData, onMoveColumn: onMoveColumn, onMoveRow: onMoveRow }));
-            expect(component.find('tbody').find(TableRowWithDnd)).toHaveLength(4);
-            component
-                .find('tbody')
-                .find(TableRow)
-                .forEach(function (node, index) {
-                expect(node.props()).toEqual({
-                    rowData: rowsData[index],
-                    columnsData: columnsData,
-                    index: index,
-                    onMoveColumn: onMoveColumn,
-                    onMoveRow: onMoveRow
-                });
-            });
-        });
-        it('should render ColumnDragLayer', function () {
-            var component = shallow(React.createElement(VerticalHeadingsTable, { rowsData: rowsData, columnsData: columnsData, onMoveColumn: jest.fn(), theadRowsNumber: 0 }));
-            expect(component.find(TableColumnDragLayer)).toHaveLength(1);
+    var rowsData = [
+        {
+            id: 'entityCard'
+        },
+        {
+            id: 'entityId'
+        },
+        {
+            id: 'attributes.FirstName'
+        },
+        {
+            id: 'attributes.LastName'
+        }
+    ];
+    var columnsData = [
+        {
+            'attributes.FirstName': 'attributes.FirstName-value',
+            entityCard: 'entityCard-value',
+            entityId: '1234',
+            'attributes.LastName': 'attributes.LastName-value',
+            id: 'entities/1234'
+        }
+    ];
+    var defaultProps = {
+        theadRowsNumber: 2,
+        rowsData: rowsData,
+        columnsData: columnsData,
+        onMoveColumn: jest.fn(),
+        onDropColumn: jest.fn(),
+        onMoveRow: jest.fn(),
+        onDropRow: jest.fn()
+    };
+    it('should render rows correctly if theadRowsNumber === 0', function () {
+        var props = __assign(__assign({}, defaultProps), { theadRowsNumber: 0 });
+        setUp(props);
+        expect(rowsData.length).toBeGreaterThan(1);
+        expect(screen.getByRole('rowgroup').tagName.toLowerCase()).toBe('tbody');
+        rowsData.forEach(function (rowData) {
+            expect(screen.getByText(columnsData[0][rowData.id])).toBeInTheDocument();
         });
     });
-    describe('drag and drop behavior', function () {
-        var cellRenderer = function () { return React.createElement("div", null, "Cell"); };
-        var headCellRenderer = function () { return React.createElement("div", null, "Head cell"); };
-        var rowsData = [
-            { id: 'entityCard', label: '', cellRenderer: cellRenderer, headCellRenderer: headCellRenderer },
-            { id: 'matchMethod', label: 'Match Method', cellRenderer: cellRenderer, headCellRenderer: headCellRenderer },
-            { id: 'workflowCard', label: '', cellRenderer: cellRenderer, headCellRenderer: headCellRenderer },
-            { id: 'attributes.FirstName', label: 'First Name', cellRenderer: cellRenderer, headCellRenderer: headCellRenderer },
-            { id: 'attributes.LastName', label: 'Last Name', cellRenderer: cellRenderer, headCellRenderer: headCellRenderer },
-            { id: 'attributes.Int', label: 'Int', cellRenderer: cellRenderer, headCellRenderer: headCellRenderer }
-        ];
-        var columnsData = [
-            {
-                entityCard: {},
-                matchMethod: {},
-                workflowCard: {},
-                'attributes.FirstName': {},
-                'attributes.LastName': {},
-                'attributes.Int': {},
-                id: 'entities/1',
-                isDraggable: false
-            },
-            {
-                entityCard: {},
-                matchMethod: {},
-                workflowCard: {},
-                'attributes.FirstName': {},
-                'attributes.LastName': {},
-                'attributes.Int': {},
-                id: 'entities/2',
-                isDraggable: true
-            },
-            {
-                entityCard: {},
-                matchMethod: {},
-                workflowCard: {},
-                'attributes.FirstName': {},
-                'attributes.LastName': {},
-                'attributes.Int': {},
-                id: 'entities/3',
-                isDraggable: true
-            }
-        ];
-        var onMoveColumn = jest.fn();
-        var onMoveRow = jest.fn();
-        var onDropRow = jest.fn();
-        var onDropColumn = jest.fn();
-        it('should reorder columns correctly', function () {
-            var _a = setUpWithDnd({
-                rowsData: rowsData,
-                columnsData: columnsData,
-                theadRowsNumber: 3,
-                onMoveColumn: onMoveColumn,
-                onMoveRow: onMoveRow,
-                onDropRow: onDropRow,
-                onDropColumn: onDropColumn
-            }), component = _a[0], manager = _a[1];
-            var backend = manager.getBackend();
-            var DRAGGED_CELL_INDEX = 2;
-            var HOVER_CELL_INDEX = 1;
-            var checkOpacityForCell = function (row, cellIndex, expectedOpacity) {
-                component.find(row).forEach(function (node) {
-                    var _a;
-                    var cells = node.find(TableCellWithDnd);
-                    var draggedCell = cells.findWhere(function (node) { return node.prop('index') === cellIndex; });
-                    var opacity = (_a = draggedCell.find('td').prop('style')) === null || _a === void 0 ? void 0 : _a.opacity;
-                    expect(opacity).toBe(expectedOpacity);
-                });
-            };
-            expect(component.find(TableRow)).toHaveLength(3);
-            checkOpacityForCell(TableRow, DRAGGED_CELL_INDEX, 1);
-            expect(component.find(TableRowWithDnd)).toHaveLength(3);
-            checkOpacityForCell(TableRowWithDnd, DRAGGED_CELL_INDEX, 1);
-            expect(component.find(TableColumnDragPreview)).toHaveLength(0);
-            var sourceId = component
-                .find(TableRow)
-                .at(0)
-                .find(TableCellWithDnd)
-                .at(DRAGGED_CELL_INDEX)
-                .find('td')
-                .prop('data-source-id');
-            act(function () {
-                backend.simulateBeginDrag([sourceId], {
-                    clientOffset: { x: 0, y: 0 },
-                    getSourceClientOffset: function () { return ({ x: 0, y: 0 }); }
-                });
-            });
-            component.update();
-            expect(component.find(TableRow)).toHaveLength(3);
-            checkOpacityForCell(TableRow, DRAGGED_CELL_INDEX, 0);
-            expect(component.find(TableRowWithDnd)).toHaveLength(3);
-            checkOpacityForCell(TableRowWithDnd, DRAGGED_CELL_INDEX, 0);
-            expect(component.find(TableColumnDragPreview)).toHaveLength(1);
-            expect(component.find(TableColumnDragPreview).props()).toEqual({
-                columnHeight: undefined,
-                columnWidth: 0,
-                item: {
-                    rowData: rowsData[0],
-                    columnValue: columnsData[DRAGGED_CELL_INDEX],
-                    index: DRAGGED_CELL_INDEX,
-                    type: 'Column',
-                    getColumnWidth: expect.anything()
-                }
-            });
-            var targetId = component
-                .find(TableRow)
-                .at(0)
-                .find(TableCellWithDnd)
-                .at(HOVER_CELL_INDEX)
-                .find('td')
-                .prop('data-target-id');
-            act(function () {
-                backend.simulateHover([targetId]);
-            });
-            expect(onMoveColumn).toHaveBeenCalledWith('entities/3', 'entities/2');
-            act(function () {
-                backend.simulateDrop();
-                backend.simulateEndDrag();
-            });
-            expect(onDropColumn).toHaveBeenCalled();
-            component.update();
-            expect(component.find(TableRow)).toHaveLength(3);
-            checkOpacityForCell(TableRow, DRAGGED_CELL_INDEX, 1);
-            expect(component.find(TableRowWithDnd)).toHaveLength(3);
-            checkOpacityForCell(TableRowWithDnd, DRAGGED_CELL_INDEX, 1);
-            expect(component.find(TableColumnDragPreview)).toHaveLength(0);
-        });
-        it('should reorder rows correctly', function () {
-            var _a, _b, _c;
-            var _d = setUpWithDnd({
-                rowsData: rowsData,
-                columnsData: columnsData,
-                theadRowsNumber: 3,
-                onMoveColumn: onMoveColumn,
-                onMoveRow: onMoveRow,
-                onDropRow: onDropRow,
-                onDropColumn: onDropColumn
-            }), component = _d[0], manager = _d[1];
-            var backend = manager.getBackend();
-            var DRAGGED_ROW_INDEX = 3;
-            var HOVER_ROW_INDEX = 5;
-            var findRowByIndex = function (index) {
-                return component.find(TableRowWithDnd).findWhere(function (node) { return node.prop('index') === index; });
-            };
-            expect((_a = findRowByIndex(DRAGGED_ROW_INDEX).find('tr').prop('style')) === null || _a === void 0 ? void 0 : _a.opacity).toBe(1);
-            var sourceId = findRowByIndex(DRAGGED_ROW_INDEX).find('tr').prop('data-source-id');
-            act(function () {
-                backend.simulateBeginDrag([sourceId], {
-                    clientOffset: { x: 0, y: 0 },
-                    getSourceClientOffset: function () { return ({ x: 0, y: 0 }); }
-                });
-            });
-            component.update();
-            expect((_b = findRowByIndex(DRAGGED_ROW_INDEX).find('tr').prop('style')) === null || _b === void 0 ? void 0 : _b.opacity).toBe(0);
-            var targetId = findRowByIndex(HOVER_ROW_INDEX).find('tr').prop('data-target-id');
-            act(function () {
-                backend.simulateHover([targetId]);
-            });
-            expect(onMoveRow).toHaveBeenCalledWith('attributes.FirstName', 'attributes.Int');
-            act(function () {
-                backend.simulateDrop();
-                backend.simulateEndDrag();
-            });
-            expect(onDropRow).toHaveBeenCalled();
-            component.update();
-            expect((_c = findRowByIndex(DRAGGED_ROW_INDEX).find('tr').prop('style')) === null || _c === void 0 ? void 0 : _c.opacity).toBe(1);
-        });
+    it('should render rows correctly if theadRowsNumber is greater than 0', function () {
+        setUp(defaultProps);
+        var _a = screen.getAllByRole('rowgroup'), thead = _a[0], tbody = _a[1];
+        expect(thead.tagName.toLowerCase()).toBe('thead');
+        expect(within(thead).getByText(columnsData[0].entityCard)).toBeInTheDocument();
+        expect(within(thead).getByText(columnsData[0].entityId)).toBeInTheDocument();
+        expect(tbody.tagName.toLowerCase()).toBe('tbody');
+        expect(within(tbody).getByText(columnsData[0]['attributes.FirstName'])).toBeInTheDocument();
+        expect(within(tbody).getByText(columnsData[0]['attributes.LastName'])).toBeInTheDocument();
     });
 });

package/VerticalHeadingsTable/components/DndComponent/DndComponent.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+type Props = {
+    children: React.ReactNode;
+    containerRef: React.MutableRefObject<HTMLDivElement>;
+    onMoveColumn: (dragId: string, hoverId: string) => void;
+    onDropColumn: () => void;
+    onMoveRow: (dragId: string, hoverId: string) => void;
+    onDropRow: () => void;
+    columnsId: string[];
+    rowsId: string[];
+    tableClassName: string;
+};
+export declare const DndComponent: ({ children, containerRef, onMoveColumn, onDropColumn, onMoveRow, onDropRow, columnsId, rowsId, tableClassName }: Props) => React.JSX.Element;
+export {};