@reltio/components 1.4.2069 → 1.4.2071

package/QueryBuilderRow/QueryBuilderRow.spec.js

@@ -1,96 +1,89 @@
+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 { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import QueryBuilderRow from './QueryBuilderRow';
-import { ReadOnlyLogicOperator } from './components/ReadOnlyLogicOperator';
-import { ReadOnlyFilter } from './components/ReadOnlyFilter';
-describe('QueryBuilderRow tests', function () {
-    var LogicOperatorComponent = function () { return React.createElement("div", null, "Logic Operator Component"); };
-    var AttributeSelectorComponent = function () { return React.createElement("div", null, "Attribute Selector Component"); };
-    var FilterSelectorComponent = function () { return React.createElement("div", null, "Filter Selector Component"); };
-    var ValuesEditorComponent = function () { return React.createElement("div", null, "Values Editor Component"); };
-    var ActionsComponent = function () { return React.createElement("div", null, "Actions Component"); };
-    it('should render provided row components', function () {
-        var rowData = {
-            data: {},
-            operator: 'and',
-            filter: 'not equals',
-            id: 'nanoid1'
-        };
-        var prevRowData = {
-            data: { a: 2 },
-            operator: 'or',
-            filter: 'equals',
-            id: 'nanoid0'
-        };
-        var classes = {
-            root: 'rootClass',
-            logicOperatorContainer: 'logicOperatorContainerClass',
-            attributeSelectorContainer: 'attributeSelectorContainerClass',
-            filterSelectorContainer: 'filterSelectorContainerClass',
-            valuesEditorContainer: 'valuesEditorContainerClass',
-            actionsContainer: 'actionsContainerClass'
-        };
-        var someRowContextProp = '123';
-        var component = shallow(React.createElement(QueryBuilderRow, { classes: classes, rowData: rowData, previousRowData: prevRowData, LogicOperatorComponent: LogicOperatorComponent, AttributeSelectorComponent: AttributeSelectorComponent, FilterSelectorComponent: FilterSelectorComponent, ValuesEditorComponent: ValuesEditorComponent, ActionsComponent: ActionsComponent, someRowContextProp: someRowContextProp }));
-        var container = component.find('.row');
-        expect(container.prop('className')).toContain(classes.root);
-        var logicOperator = component.find(LogicOperatorComponent);
-        expect(logicOperator.length).toBe(1);
-        expect(logicOperator.prop('className')).toBe(classes.logicOperatorContainer);
-        expect(logicOperator.prop('rowData')).toBe(prevRowData);
-        expect(logicOperator.prop('rowContext')).toEqual({ someRowContextProp: someRowContextProp });
-        var attributeSelector = component.find(AttributeSelectorComponent);
-        expect(attributeSelector.length).toBe(1);
-        expect(attributeSelector.prop('rowData')).toBe(rowData);
-        expect(attributeSelector.prop('rowContext')).toEqual({ someRowContextProp: someRowContextProp });
-        var filterSelector = component.find(FilterSelectorComponent);
-        expect(filterSelector.length).toBe(1);
-        expect(filterSelector.prop('rowData')).toBe(rowData);
-        expect(filterSelector.prop('rowContext')).toEqual({ someRowContextProp: someRowContextProp });
-        var valuesEditor = component.find(ValuesEditorComponent);
-        expect(valuesEditor.length).toBe(1);
-        expect(valuesEditor.prop('rowData')).toBe(rowData);
-        expect(valuesEditor.prop('rowContext')).toEqual({ someRowContextProp: someRowContextProp });
-        var actions = component.find(ActionsComponent);
-        expect(actions.length).toBe(1);
-        expect(actions.prop('rowData')).toBe(rowData);
-        expect(actions.prop('rowContext')).toEqual({ someRowContextProp: someRowContextProp });
-        expect(component.find('.hidden').find(ActionsComponent).length).toBe(0);
-        var rowItems = component.find('.rowItem');
-        expect(rowItems.length).toBe(4);
-        expect(rowItems.at(0).prop('className')).toContain(classes.attributeSelectorContainer);
-        expect(rowItems.at(1).prop('className')).toContain(classes.filterSelectorContainer);
-        expect(rowItems.at(2).prop('className')).toContain(classes.valuesEditorContainer);
-        expect(rowItems.at(3).prop('className')).toContain(classes.actionsContainer);
+var LogicOperatorComponent = function () { return React.createElement("div", null, "Logic Operator Component"); };
+var AttributeSelectorComponent = function () { return React.createElement("div", null, "Attribute Selector Component"); };
+var FilterSelectorComponent = function () { return React.createElement("div", null, "Filter Selector Component"); };
+var ValuesEditorComponent = function () { return React.createElement("div", null, "Values Editor Component"); };
+var ActionsComponent = function () { return React.createElement("div", null, "Actions Component"); };
+var rowData = { data: {}, operator: 'and', filter: 'not equals', id: 'nanoid1' };
+var previousRowData = { data: { a: 2 }, operator: 'or', filter: 'equals', id: 'nanoid0' };
+var classes = {
+    root: 'root',
+    logicOperatorContainer: 'logicOperatorContainer',
+    attributeSelectorContainer: 'attributeSelectorContainer',
+    filterSelectorContainer: 'filterSelectorContainer',
+    valuesEditorContainer: 'valuesEditorContainer',
+    actionsContainer: 'actionsContainer'
+};
+var defaultProps = {
+    rowData: rowData,
+    previousRowData: previousRowData,
+    filterSelectorRef: React.createRef(),
+    classes: classes,
+    LogicOperatorComponent: LogicOperatorComponent,
+    AttributeSelectorComponent: AttributeSelectorComponent,
+    FilterSelectorComponent: FilterSelectorComponent,
+    ValuesEditorComponent: ValuesEditorComponent,
+    ActionsComponent: ActionsComponent
+};
+var setUp = function (props) {
+    if (props === void 0) { props = defaultProps; }
+    return render(React.createElement(QueryBuilderRow, __assign({}, props)));
+};
+describe('Query builder row tests', function () {
+    it('should render provided row components correctly', function () {
+        setUp();
+        var row = screen.getByTestId('query-builder-row');
+        expect(row).toHaveClass('root');
+        expect(row).toHaveTextContent('Logic Operator Component');
+        var attributeSelector = screen.getByTestId('query-builder-row-attribute-selector');
+        expect(attributeSelector).toHaveClass('attributeSelectorContainer');
+        expect(attributeSelector).toHaveTextContent('Attribute Selector Component');
+        var filterSelector = screen.getByTestId('query-builder-row-filter-selector');
+        expect(filterSelector).toHaveClass('filterSelectorContainer');
+        expect(filterSelector).toHaveTextContent('Filter Selector Component');
+        var valuesEditor = screen.getByTestId('query-builder-row-values-editor');
+        expect(valuesEditor).toHaveClass('valuesEditorContainer');
+        expect(valuesEditor).toHaveTextContent('Values Editor Component');
+        var actions = screen.getByTestId('query-builder-row-actions');
+        expect(actions).toHaveClass('actionsContainer');
+        expect(actions).toHaveTextContent('Actions Component');
     });
-    it('should render ReadOnlyFilter and ReadOnlyFilter by default if LogicOperatorComponent and FilterSelectorComponent are not provided', function () {
-        var rowData = {
-            data: {},
-            operator: 'and',
-            filter: 'not equals',
-            id: 'nanoid1'
-        };
-        var prevRowData = {
-            data: { a: 2 },
-            operator: 'or',
-            filter: 'equals',
-            id: 'nanoid0'
-        };
-        var someRowContextProp = '123';
-        var component = shallow(React.createElement(QueryBuilderRow, { rowData: rowData, previousRowData: prevRowData, AttributeSelectorComponent: AttributeSelectorComponent, ValuesEditorComponent: ValuesEditorComponent, ActionsComponent: ActionsComponent, someRowContextProp: someRowContextProp }));
-        expect(component.find(ReadOnlyLogicOperator).length).toBe(1);
-        expect(component.find(AttributeSelectorComponent).length).toBe(1);
-        expect(component.find(ReadOnlyFilter).length).toBe(1);
-        expect(component.find(ValuesEditorComponent).length).toBe(1);
-        expect(component.find(ActionsComponent).length).toBe(1);
+    it('should render actions as hidden if rowData is not provided', function () {
+        var props = __assign(__assign({}, defaultProps), { rowData: undefined });
+        setUp(props);
+        expect(screen.getByTestId('query-builder-row-actions')).toHaveClass('hidden');
     });
-    it('should render ActionsComponent as hidden if rowData is not provided', function () {
-        var someRowContextProp = '123';
-        var component = shallow(React.createElement(QueryBuilderRow, { LogicOperatorComponent: LogicOperatorComponent, AttributeSelectorComponent: AttributeSelectorComponent, FilterSelectorComponent: FilterSelectorComponent, ValuesEditorComponent: ValuesEditorComponent, ActionsComponent: ActionsComponent, someRowContextProp: someRowContextProp }));
-        expect(component.find(LogicOperatorComponent).length).toBe(1);
-        expect(component.find(AttributeSelectorComponent).length).toBe(1);
-        expect(component.find(FilterSelectorComponent).length).toBe(1);
-        expect(component.find(ValuesEditorComponent).length).toBe(1);
-        expect(component.find('.hidden').find(ActionsComponent).length).toBe(1);
+    it('should render read only filter correctly if FilterSelectorComponent are not provided', function () {
+        var props = __assign(__assign({}, defaultProps), { FilterSelectorComponent: undefined });
+        setUp(props);
+        expect(screen.getByTestId('query-builder-row-filter-selector')).toHaveTextContent('not');
+    });
+    it('should render read only filter correctly if FilterSelectorComponent and rowData are not provided', function () {
+        var props = __assign(__assign({}, defaultProps), { FilterSelectorComponent: undefined, rowData: undefined });
+        setUp(props);
+        expect(screen.getByTestId('query-builder-row-filter-selector')).toHaveTextContent('equals');
+    });
+    it('should render read only logic operator correctly if LogicOperatorComponent are not provided', function () {
+        var props = __assign(__assign({}, defaultProps), { LogicOperatorComponent: undefined });
+        setUp(props);
+        expect(screen.getByTestId('query-builder-row')).toHaveTextContent('Or');
+    });
+    it('should render read only logic operator correctly if LogicOperatorComponent and previousRowData are not provided', function () {
+        var props = __assign(__assign({}, defaultProps), { LogicOperatorComponent: undefined, previousRowData: undefined });
+        setUp(props);
+        expect(screen.getByTestId('query-builder-row')).toHaveTextContent('Where');
     });
 });

package/QueryBuilderRowsGroup/QueryBuilderRowsGroup.spec.js

@@ -1,99 +1,208 @@
+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 __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 { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { SearchOperator } from '@reltio/mdm-sdk';
 import QueryBuilderRowsGroup from './QueryBuilderRowsGroup';
-import { QueryBuilderRow } from '../QueryBuilderRow';
-describe('QueryBuilderRowsGroup tests', function () {
+var defaultProps = {
+    rowsData: [],
+    AttributeSelectorComponent: function (_a) {
+        var attributeSelectorProps = _a.attributeSelectorProps;
+        return (React.createElement("div", { onClick: attributeSelectorProps.onOpen }, "Attribute selector"));
+    },
+    FilterSelectorComponent: function (_a) {
+        var textFieldInputRef = _a.textFieldInputRef;
+        return (React.createElement("div", { ref: textFieldInputRef }, "Filter selector"));
+    },
+    ActionsComponent: function () { return React.createElement("div", null, "Actions"); },
+    ValuesEditorComponent: function () { return React.createElement("div", null, "Values editor"); }
+};
+var setUp = function (props) {
+    if (props === void 0) { props = defaultProps; }
+    var user = userEvent.setup();
+    return __assign(__assign({}, render(React.createElement(QueryBuilderRowsGroup, __assign({}, props)))), { user: user });
+};
+describe('Query builder rows group tests', function () {
     it('should render empty row by default', function () {
-        var rowsData = [];
-        var someRowContextProp = '123';
-        var component = shallow(React.createElement(QueryBuilderRowsGroup, { rowsData: rowsData, someRowContextProp: someRowContextProp }));
-        var queryBuilderRow = component.find(QueryBuilderRow);
-        expect(queryBuilderRow.length).toBe(1);
-        expect(queryBuilderRow.prop('rowData')).toBe(null);
-        expect(queryBuilderRow.prop('previousRowData')).toBe(null);
-        expect(queryBuilderRow.prop('someRowContextProp')).toBe(someRowContextProp);
+        setUp();
+        var rows = screen.getAllByTestId('query-builder-row');
+        expect(rows).toHaveLength(1);
+        within(rows[0]).getByText('Where');
+        within(rows[0]).getByText('Attribute selector');
+        within(rows[0]).getByText('Filter selector');
+        within(rows[0]).getByText('Values editor');
+        within(rows[0]).getByText('Actions');
     });
-    it('should render QueryBuilderRows with last empty row', function () {
-        var rowsData = [
-            {
-                data: {},
-                operator: 'and',
-                filter: 'not equals',
-                id: 'nanoid1'
-            },
-            {
-                data: { a: 1 },
-                operator: 'or',
-                filter: 'not equals',
-                id: 'nanoid2'
+    it('should render rows correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var rowsData, props, user, rows;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    rowsData = [
+                        {
+                            data: {
+                                title: 'Int',
+                                pathToTitle: ['HCP', 'Int'],
+                                fieldName: 'attributes.Int',
+                                entityTypeUri: 'configuration/entityTypes/HCP',
+                                attrType: {
+                                    label: 'Int',
+                                    name: 'Int',
+                                    type: 'Int',
+                                    uri: 'configuration/entityTypes/HCP/attributes/Int'
+                                },
+                                uri: 'configuration/entityTypes/HCP/attributes/Int',
+                                groupName: 'HCP',
+                                filterOptions: []
+                            },
+                            operator: SearchOperator.and,
+                            filter: 'equals',
+                            id: 'iARTfv_ha1wUvzVFBDIPn',
+                            values: [['300']]
+                        },
+                        {
+                            data: {
+                                title: 'First Name',
+                                pathToTitle: ['HCP', 'First Name'],
+                                fieldName: 'attributes.FirstName',
+                                entityTypeUri: 'configuration/entityTypes/HCP',
+                                attrType: {
+                                    label: 'First Name',
+                                    name: 'FirstName',
+                                    type: 'String',
+                                    uri: 'configuration/entityTypes/HCP/attributes/FirstName'
+                                },
+                                uri: 'configuration/entityTypes/HCP/attributes/FirstName',
+                                groupName: 'HCP',
+                                filterOptions: []
+                            },
+                            operator: SearchOperator.or,
+                            filter: 'exists',
+                            id: 'FY1Giy6DsSu1flgQ3cqSK',
+                            values: []
+                        }
+                    ];
+                    props = __assign(__assign({}, defaultProps), { rowsData: rowsData, filterSelectorRef: React.createRef(), filterSelectorRefIndex: 1, lastRowAttributeSelectorProps: { onOpen: jest.fn() } });
+                    user = setUp(props).user;
+                    rows = screen.getAllByTestId('query-builder-row');
+                    expect(rows).toHaveLength(3);
+                    within(rows[0]).getByText('Where');
+                    within(rows[0]).getByText('Attribute selector');
+                    within(rows[0]).getByText('Values editor');
+                    within(rows[0]).getByText('Actions');
+                    expect(within(rows[0]).getByText('Filter selector')).not.toBe(props.filterSelectorRef.current);
+                    return [4 /*yield*/, user.click(within(rows[0]).getByText('Attribute selector'))];
+                case 1:
+                    _a.sent();
+                    expect(props.lastRowAttributeSelectorProps.onOpen).not.toHaveBeenCalled();
+                    within(rows[1]).getByText('And');
+                    within(rows[1]).getByText('Attribute selector');
+                    within(rows[1]).getByText('Values editor');
+                    within(rows[1]).getByText('Actions');
+                    expect(within(rows[1]).getByText('Filter selector')).toBe(props.filterSelectorRef.current);
+                    return [4 /*yield*/, user.click(within(rows[1]).getByText('Attribute selector'))];
+                case 2:
+                    _a.sent();
+                    expect(props.lastRowAttributeSelectorProps.onOpen).not.toHaveBeenCalled();
+                    within(rows[2]).getByText('Or');
+                    within(rows[2]).getByText('Attribute selector');
+                    within(rows[2]).getByText('Values editor');
+                    within(rows[2]).getByText('Actions');
+                    expect(within(rows[2]).getByText('Filter selector')).not.toBe(props.filterSelectorRef.current);
+                    return [4 /*yield*/, user.click(within(rows[2]).getByText('Attribute selector'))];
+                case 3:
+                    _a.sent();
+                    expect(props.lastRowAttributeSelectorProps.onOpen).toHaveBeenCalled();
+                    return [2 /*return*/];
             }
-        ];
-        var someRowContextProp = '123';
-        var component = shallow(React.createElement(QueryBuilderRowsGroup, { rowsData: rowsData, someRowContextProp: someRowContextProp }));
-        var queryBuilderRow = component.find(QueryBuilderRow);
-        expect(queryBuilderRow.length).toBe(3);
-        expect(queryBuilderRow.at(0).prop('rowData')).toBe(rowsData[0]);
-        expect(queryBuilderRow.at(0).prop('previousRowData')).toBe(null);
-        expect(queryBuilderRow.at(0).prop('someRowContextProp')).toBe(someRowContextProp);
-        expect(queryBuilderRow.at(1).prop('rowData')).toBe(rowsData[1]);
-        expect(queryBuilderRow.at(1).prop('previousRowData')).toBe(rowsData[0]);
-        expect(queryBuilderRow.at(1).prop('someRowContextProp')).toBe(someRowContextProp);
-        expect(queryBuilderRow.at(2).prop('rowData')).toBe(null);
-        expect(queryBuilderRow.at(2).prop('previousRowData')).toBe(rowsData[1]);
-        expect(queryBuilderRow.at(2).prop('someRowContextProp')).toBe(someRowContextProp);
-    });
-    it('should take into account lastRowAttributeSelectorProps, filterSelectorRef and filterSelectorRefIndex props', function () {
-        var rowsData = [
-            {
-                data: {},
-                operator: 'and',
-                filter: 'not equals',
-                id: 'nanoid1'
-            }
-        ];
-        var lastRowAttributeSelectorProps = {
-            onFocus: jest.fn()
-        };
-        var filterSelectorRef = { b: 42 };
-        var filterSelectorRefIndex = 1;
-        var someRowContextProp = '123';
-        var component = shallow(React.createElement(QueryBuilderRowsGroup, { rowsData: rowsData, someRowContextProp: someRowContextProp, lastRowAttributeSelectorProps: lastRowAttributeSelectorProps, filterSelectorRef: filterSelectorRef, filterSelectorRefIndex: filterSelectorRefIndex }));
-        var queryBuilderRow = component.find(QueryBuilderRow);
-        expect(queryBuilderRow.length).toBe(2);
-        expect(queryBuilderRow.at(0).prop('rowData')).toBe(rowsData[0]);
-        expect(queryBuilderRow.at(0).prop('previousRowData')).toBe(null);
-        expect(queryBuilderRow.at(0).prop('someRowContextProp')).toBe(someRowContextProp);
-        expect(queryBuilderRow.at(0).prop('attributeSelectorProps')).toBe(undefined);
-        expect(queryBuilderRow.at(0).prop('filterSelectorRef')).toBe(undefined);
-        expect(queryBuilderRow.at(1).prop('rowData')).toBe(null);
-        expect(queryBuilderRow.at(1).prop('previousRowData')).toBe(rowsData[0]);
-        expect(queryBuilderRow.at(1).prop('someRowContextProp')).toBe(someRowContextProp);
-        expect(queryBuilderRow.at(1).prop('attributeSelectorProps')).toBe(lastRowAttributeSelectorProps);
-        expect(queryBuilderRow.at(1).prop('filterSelectorRef')).toBe(filterSelectorRef);
-    });
-    it('should provide rowClasses to QueryBuilderRows', function () {
+        });
+    }); });
+    it('should provide rowClasses to query builder rows', function () {
         var rowsData = [
             {
-                data: {},
-                operator: 'and',
-                filter: 'not equals',
-                id: 'nanoid1'
+                data: {
+                    title: 'Int',
+                    pathToTitle: ['HCP', 'Int'],
+                    fieldName: 'attributes.Int',
+                    entityTypeUri: 'configuration/entityTypes/HCP',
+                    attrType: {
+                        label: 'Int',
+                        name: 'Int',
+                        type: 'Int',
+                        uri: 'configuration/entityTypes/HCP/attributes/Int'
+                    },
+                    uri: 'configuration/entityTypes/HCP/attributes/Int',
+                    groupName: 'HCP',
+                    filterOptions: []
+                },
+                operator: SearchOperator.and,
+                filter: 'equals',
+                id: 'iARTfv_ha1wUvzVFBDIPn',
+                values: [['300']]
             }
         ];
         var rowClasses = {
-            root: 'rootClass',
-            logicOperatorContainer: 'logicOperatorContainerClass',
-            attributeSelectorContainer: 'attributeSelectorContainerClass',
-            filterSelectorContainer: 'filterSelectorContainerClass',
-            valuesEditorContainer: 'valuesEditorContainerClass',
-            actionsContainer: 'actionsContainerClass'
+            root: 'root',
+            logicOperatorContainer: 'logicOperatorContainer',
+            attributeSelectorContainer: 'attributeSelectorContainer',
+            filterSelectorContainer: 'filterSelectorContainer',
+            valuesEditorContainer: 'valuesEditorContainer',
+            actionsContainer: 'actionsContainer'
         };
-        var component = shallow(React.createElement(QueryBuilderRowsGroup, { rowsData: rowsData, rowClasses: rowClasses }));
-        var queryBuilderRow = component.find(QueryBuilderRow);
-        expect(queryBuilderRow.length).toBe(2);
-        expect(queryBuilderRow.at(0).prop('rowData')).toBe(rowsData[0]);
-        expect(queryBuilderRow.at(0).prop('classes')).toBe(rowClasses);
-        expect(queryBuilderRow.at(1).prop('rowData')).toBe(null);
-        expect(queryBuilderRow.at(1).prop('classes')).toBe(rowClasses);
+        var props = __assign(__assign({}, defaultProps), { rowsData: rowsData, rowClasses: rowClasses });
+        setUp(props);
+        var row = screen.getAllByTestId('query-builder-row')[0];
+        expect(row).toHaveClass('root');
+        expect(within(row).getByText('Where')).toHaveClass('logicOperatorContainer');
+        expect(within(row).getByTestId('query-builder-row-attribute-selector')).toHaveClass('attributeSelectorContainer');
+        expect(within(row).getByTestId('query-builder-row-filter-selector')).toHaveClass('filterSelectorContainer');
+        expect(within(row).getByTestId('query-builder-row-values-editor')).toHaveClass('valuesEditorContainer');
+        expect(within(row).getByTestId('query-builder-row-actions')).toHaveClass('actionsContainer');
     });
 });

package/ReactSelectLoadMoreButton/ReactSelectLoadMoreButton.test.js

@@ -1,20 +1,78 @@
+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 __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 Button from '@mui/material/Button';
-import CircularProgress from '@mui/material/CircularProgress';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { ReactSelectLoadMoreButton } from './ReactSelectLoadMoreButton';
-describe('ReactSelectLoadMoreButton tests', function () {
-    var onClick = jest.fn();
-    it('should render default as well', function () {
-        var component = shallow(React.createElement(ReactSelectLoadMoreButton, { loading: false, onClick: onClick }));
-        expect(component.find(Button).prop('color')).toEqual('primary');
-        expect(component.find(Button).text()).toEqual('Load more');
-        var event = {};
-        component.find(Button).prop('onClick')(event);
-        expect(onClick).toHaveBeenCalled();
-    });
+var defaultProps = { loading: false, onClick: jest.fn(), onMouseDown: jest.fn() };
+var setUp = function (props) {
+    if (props === void 0) { props = defaultProps; }
+    var user = userEvent.setup();
+    return __assign(__assign({}, render(React.createElement(ReactSelectLoadMoreButton, __assign({}, props)))), { user: user });
+};
+describe('React select load more button tests', function () {
+    it('should render default as well', 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;
+                    return [4 /*yield*/, user.click(screen.getByText('Load more'))];
+                case 1:
+                    _a.sent();
+                    expect(defaultProps.onMouseDown).toHaveBeenCalled();
+                    expect(defaultProps.onClick).toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
     it('should render loading state', function () {
-        var component = shallow(React.createElement(ReactSelectLoadMoreButton, { loading: true, onClick: onClick }));
-        expect(component.find(CircularProgress).exists()).toBeTruthy();
+        setUp(__assign(__assign({}, defaultProps), { loading: true }));
+        screen.getByRole('progressbar');
     });
 });