@reltio/components 1.4.1905 → 1.4.1907

package/cjs/ReactSortableTree/ReactSortableTree.js

@@ -338,14 +338,12 @@ var ReactSortableTree = /** @class */ (function (_super) {
         // if onlyExpandSearchedNodes collapse the tree and search
         var _a = (0, tree_1.find)({
             getNodeKey: getNodeKey,
-            /* eslint-disable indent */
             treeData: onlyExpandSearchedNodes
                 ? (0, tree_1.toggleExpandedForAll)({
                     treeData: instanceProps.treeData,
                     expanded: false
                 })
                 : instanceProps.treeData,
-            /* eslint-enable indent */
             searchQuery: searchQuery,
             searchMethod: searchMethod || defaultHandlers_1.defaultSearchMethod,
             searchFocusOffset: searchFocusOffset,
@@ -524,9 +522,8 @@ var ReactSortableTree = /** @class */ (function (_super) {
                                     // Only replace the old node if it's the one we set off to find children
                                     //  for in the first place
                                     return oldNode === node
-                                        ? /* eslint-disable indent */ __assign(__assign({}, oldNode), { children: childrenArray }) : oldNode;
+                                        ? __assign(__assign({}, oldNode), { children: childrenArray }) : oldNode;
                                 },
-                                /* eslint-enable indent */
                                 getNodeKey: props.getNodeKey
                             }), true);
                         }
@@ -617,9 +614,7 @@ var ReactSortableTree = /** @class */ (function (_super) {
                 return (react_1.default.createElement(ScrollZoneVirtualList_1, __assign({}, scrollToInfo, { dragDropManager: dragDropManager, verticalStrength: _this.vStrength, horizontalStrength: _this.hStrength, speed: 30, scrollToAlignment: "start", className: _this.props.classes.rst__virtualScrollOverride, width: width, onScroll: function (_a) {
                         var scrollTop = _a.scrollTop;
                         _this.scrollTop = scrollTop;
-                    }, height: height, style: innerStyle, rowCount: rows.length, estimatedRowSize: typeof rowHeight !== 'function' ? rowHeight : undefined, rowHeight: 
-                    /* eslint-disable indent */
-                    typeof rowHeight !== 'function'
+                    }, height: height, style: innerStyle, rowCount: rows.length, estimatedRowSize: typeof rowHeight !== 'function' ? rowHeight : undefined, rowHeight: typeof rowHeight !== 'function'
                         ? rowHeight
                         : function (_a) {
                             var index = _a.index;

package/cjs/RelationTypeSelector/RelationTypeSelector.d.ts

@@ -1,6 +1,8 @@
+import { ComponentProps } from 'react';
 import { TextFieldProps } from '@mui/material/TextField';
+import { DropDownSelector } from '../DropDownSelector';
 import { RelationOption as RelationOptionType } from '../types';
-type Props = {
+type Props = Omit<ComponentProps<typeof DropDownSelector>, 'value' | 'options' | 'onChange' | 'TextFieldProps'> & {
     value?: RelationOptionType;
     options?: RelationOptionType[];
     onChange?: (value: RelationOptionType) => void;

package/cjs/types/index.d.ts

@@ -29,7 +29,7 @@ export type QueryBuilderAttribute = {
     values: Array<unknown>;
     data: QueryBuilderAttributeData;
     filter: string;
-    operator: string;
+    operator: SearchOperator;
 };
 export type FiltersRowData = {
     attribute: AttributeSelectorItem;

package/esm/ActionsPanel/ActionsPanel.test.js

@@ -9,72 +9,156 @@ 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;
+    return g = { next: verb(0), "throw": verb(1), "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 { omit } from 'ramda';
-import { shallow } from 'enzyme';
 import { ActionsPanel } from './ActionsPanel';
-import { DropDownMenuButton } from '../DropDownMenuButton';
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 describe('ActionsPanel tests', function () {
-    var MergeButton = function () { return React.createElement("div", null); };
+    var MergeButton = function (_a) {
+        var mode = _a.mode, onMenuClose = _a.onMenuClose;
+        return (React.createElement("button", { "data-reltio-id": "testButton", "data-mode": mode, onClick: onMenuClose }));
+    };
     var actions = [
-        { ActionButton: MergeButton, test: 'test', show: true },
-        { ActionButton: MergeButton, test: 'test 2' },
-        { ActionButton: MergeButton, test: 'test 3' },
-        { ActionButton: MergeButton, test: 'test 4', show: false }
+        { ActionButton: MergeButton, show: true },
+        { ActionButton: MergeButton },
+        { ActionButton: MergeButton },
+        { ActionButton: MergeButton, show: false }
     ];
+    var setUp = function (props) {
+        if (props === void 0) { props = { actions: actions }; }
+        var user = userEvent.setup();
+        return __assign({ user: user }, render(React.createElement(ActionsPanel, __assign({}, props))));
+    };
     it('should render main parts', function () {
-        var component = shallow(React.createElement(ActionsPanel, { actions: actions }));
-        expect(component.find(MergeButton)).toHaveLength(2);
-        expect(component.find(DropDownMenuButton)).toHaveLength(1);
+        setUp();
+        expect(screen.getAllByTestId('testButton')).toHaveLength(2);
+        expect(screen.getByLabelText('More actions')).toBeInTheDocument();
     });
     it('should render empty panel if actions is empty array', function () {
-        var component = shallow(React.createElement(ActionsPanel, { actions: [] }));
-        expect(component.find(MergeButton)).toHaveLength(0);
-        expect(component.find(DropDownMenuButton)).toHaveLength(0);
+        setUp({ actions: [] });
+        expect(screen.queryByTestId('testButton')).not.toBeInTheDocument();
+        expect(screen.queryByLabelText('More actions')).not.toBeInTheDocument();
     });
     it('should not render DropDownMenuButton if length of actions <= numberOfButtons', function () {
-        var component = shallow(React.createElement(ActionsPanel, { actions: actions, numberOfButtons: actions.length }));
-        expect(component.find(MergeButton)).toHaveLength(3);
-        expect(component.find(DropDownMenuButton)).toHaveLength(0);
+        setUp({ actions: actions, numberOfButtons: actions.length });
+        expect(screen.getAllByTestId('testButton')).toHaveLength(3);
+        expect(screen.queryByLabelText('More actions')).not.toBeInTheDocument();
     });
     it('should render numberOfButtons action button from actions', function () {
-        var numberOfButtons = 1;
-        var component = shallow(React.createElement(ActionsPanel, { actions: actions, numberOfButtons: numberOfButtons }));
-        expect(component.find(MergeButton)).toHaveLength(numberOfButtons);
-        expect(component.find(DropDownMenuButton)).toHaveLength(1);
+        setUp({ actions: actions, numberOfButtons: 1 });
+        expect(screen.queryByTestId('testButton')).toBeInTheDocument();
+        expect(screen.queryByLabelText('More actions')).toBeInTheDocument();
     });
-    it('should render ActionButton with correct props if mode is normal', function () {
-        var onActionsMenuOpen = jest.fn();
-        var onActionsMenuClose = jest.fn();
-        var component = shallow(React.createElement(ActionsPanel, { actions: actions, mode: "normal", onActionsMenuOpen: onActionsMenuOpen, onActionsMenuClose: onActionsMenuClose }));
-        var buttons = component.find(MergeButton);
-        expect(buttons).toHaveLength(2);
-        buttons.map(function (button, index) {
-            expect(button.props()).toMatchObject(__assign({ mode: 'button' }, omit(['ActionButton', 'show'], actions[index])));
+    it('should call onActionsMenuOpen, onActionsMenuClose ', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onActionsMenuOpenSpy, onActionsMenuCloseSpy, user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onActionsMenuOpenSpy = jest.fn();
+                    onActionsMenuCloseSpy = jest.fn();
+                    user = setUp({
+                        actions: actions,
+                        onActionsMenuClose: onActionsMenuCloseSpy,
+                        onActionsMenuOpen: onActionsMenuOpenSpy
+                    }).user;
+                    return [4 /*yield*/, user.click(screen.getByLabelText('More actions'))];
+                case 1:
+                    _a.sent();
+                    expect(onActionsMenuOpenSpy).toHaveBeenCalled();
+                    return [4 /*yield*/, user.click(screen.getByLabelText('More actions'))];
+                case 2:
+                    _a.sent();
+                    expect(onActionsMenuCloseSpy).toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
         });
-        var dropDownMenuButton = component.find(DropDownMenuButton);
-        expect(dropDownMenuButton).toHaveLength(1);
-        expect(dropDownMenuButton.props()).toMatchObject({
-            menuItems: [actions[2]],
-            onMenuOpen: onActionsMenuOpen,
-            onMenuClose: onActionsMenuClose
+    }); });
+    it('should render buttons for default mode', function () {
+        setUp();
+        var buttons = screen.getAllByTestId('testButton');
+        expect(buttons).toHaveLength(2);
+        buttons.forEach(function (button) {
+            expect(button).toHaveAttribute('data-mode', 'button');
         });
     });
-    it('should render ActionButton with correct props if mode is hover', function () {
-        var onActionsMenuOpen = jest.fn();
-        var onActionsMenuClose = jest.fn();
-        var component = shallow(React.createElement(ActionsPanel, { actions: actions, mode: "hover", onActionsMenuOpen: onActionsMenuOpen, onActionsMenuClose: onActionsMenuClose }));
-        var buttons = component.find(MergeButton);
+    it('should render buttons for hover mode', function () {
+        setUp({ actions: actions, mode: 'hover' });
+        var buttons = screen.getAllByTestId('testButton');
         expect(buttons).toHaveLength(2);
-        buttons.map(function (button, index) {
-            expect(button.props()).toMatchObject(__assign({ mode: 'iconButton' }, omit(['ActionButton', 'show'], actions[index])));
-        });
-        var dropDownMenuButton = component.find(DropDownMenuButton);
-        expect(dropDownMenuButton).toHaveLength(1);
-        expect(dropDownMenuButton.props()).toMatchObject({
-            menuItems: [actions[2]],
-            onMenuOpen: onActionsMenuOpen,
-            onMenuClose: onActionsMenuClose
+        buttons.forEach(function (button) {
+            expect(button).toHaveAttribute('data-mode', 'iconButton');
         });
     });
+    describe('menu item tests', function () {
+        it('should call onActionsMenuClose from menu item', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var onActionsMenuCloseSpy, user, menu;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        onActionsMenuCloseSpy = jest.fn();
+                        user = setUp({ actions: actions, onActionsMenuClose: onActionsMenuCloseSpy }).user;
+                        return [4 /*yield*/, user.click(screen.getByLabelText('More actions'))];
+                    case 1:
+                        _a.sent();
+                        menu = screen.getByRole('menu');
+                        return [4 /*yield*/, user.click(within(menu).getByRole('button'))];
+                    case 2:
+                        _a.sent();
+                        expect(onActionsMenuCloseSpy).toHaveBeenCalled();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should render menu button with correct mode', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var user, menuButton;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        user = setUp().user;
+                        return [4 /*yield*/, user.click(screen.getByLabelText('More actions'))];
+                    case 1:
+                        _a.sent();
+                        menuButton = within(screen.getByRole('menu')).getByRole('button');
+                        expect(menuButton).toHaveAttribute('data-mode', 'menuItem');
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
 });

package/esm/AttributeListItem/AttributeListItem.spec.js

@@ -9,141 +9,193 @@ 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;
+    return g = { next: verb(0), "throw": verb(1), "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 { render, screen } from '@testing-library/react';
-import { mount, shallow } from 'enzyme';
-import MenuItem from '@mui/material/MenuItem';
-import ListItemText from '@mui/material/ListItemText';
-import AttributeListItem, { RecommendedIconWithTooltip } from './AttributeListItem';
-import Checkbox from '@mui/material/Checkbox';
-import SimpleAttrIcon from '../icons/SimpleAttribute';
-import NestedAttrIcon from '../icons/NestedAttribute';
-import ReferenceAttrIcon from '../icons//ReferenceAttribute';
+import AttributeListItem from './AttributeListItem';
 import SomeLogoIcon from '@mui/icons-material/PlayArrow';
-import { AttrTypeIcon } from './components/AttrTypeIcon';
+import { getMuiIconByName } from '../test-utils';
+import userEvent from '@testing-library/user-event';
 describe('AttributeListItem tests', function () {
     var defaultProps = {
         data: {},
         checked: false,
         label: 'Some Title'
     };
-    it('should render main components', function () {
-        var component = mount(React.createElement(AttributeListItem, __assign({}, defaultProps)));
-        expect(component.find(Checkbox).length).toBe(1);
-        expect(component.find(Checkbox).prop('disabled')).toBe(false);
-        expect(component.text().includes('Some Title')).toBe(true);
+    var setUp = function (props) {
+        if (props === void 0) { props = defaultProps; }
+        var user = userEvent.setup();
+        return __assign({ user: user }, render(React.createElement(AttributeListItem, __assign({}, props))));
+    };
+    it('should render default components', function () {
+        setUp();
+        expect(screen.getByText(defaultProps.label)).toBeInTheDocument();
+        expect(screen.getByRole('checkbox')).not.toBeDisabled();
+        expect(screen.getByTestId('SvgSimpleAttribute')).toBeInTheDocument();
     });
     it('should render main components with label as a node', function () {
-        var component = mount(React.createElement(AttributeListItem, __assign({}, defaultProps, { label: React.createElement("span", null, "Some Title") })));
-        expect(component.find(ListItemText).length).toBe(1);
-        expect(component.find(ListItemText).text()).toBe('Some Title');
+        var label = React.createElement("span", null, "Some Title");
+        setUp(__assign(__assign({}, defaultProps), { label: label }));
+        expect(screen.getByText('Some Title')).toBeInTheDocument();
     });
     it('should render checked checkbox', function () {
-        var component = mount(React.createElement(AttributeListItem, __assign({}, defaultProps, { checked: true })));
-        var checkbox = component.find(Checkbox);
-        expect(checkbox.prop('checked')).toBe(true);
-        expect(component.find(Checkbox).prop('disabled')).toBe(false);
-        expect(checkbox.prop('className').includes('checked')).toBe(true);
+        setUp(__assign(__assign({}, defaultProps), { checked: true }));
+        var chechbox = screen.getByRole('checkbox');
+        expect(chechbox).toBeChecked();
+        expect(chechbox).not.toBeDisabled();
+        expect(chechbox.parentNode).toHaveClass('checked');
     });
     it('should render unchecked checkbox', function () {
-        var component = mount(React.createElement(AttributeListItem, __assign({}, defaultProps, { checked: false })));
-        var checkbox = component.find(Checkbox);
-        expect(checkbox.prop('checked')).toBe(false);
-        expect(checkbox.prop('className').includes('checked')).toBe(false);
-    });
-    it('should render simple attribute icon by default', function () {
-        var component = mount(React.createElement(AttributeListItem, __assign({}, defaultProps)));
-        expect(component.find(SimpleAttrIcon)).toHaveLength(1);
-        expect(component.find(NestedAttrIcon)).toHaveLength(0);
-        expect(component.find(ReferenceAttrIcon)).toHaveLength(0);
-        expect(component.find(RecommendedIconWithTooltip)).toHaveLength(0);
+        setUp(__assign(__assign({}, defaultProps), { checked: false }));
+        var chechbox = screen.getByRole('checkbox');
+        expect(chechbox).not.toBeChecked();
+        expect(chechbox).not.toBeDisabled();
+        expect(chechbox.parentNode).not.toHaveClass('checked');
     });
     it('should render nested attribute icon', function () {
-        var component = mount(React.createElement(AttributeListItem, __assign({}, defaultProps, { data: {
+        setUp(__assign(__assign({}, defaultProps), { data: {
                 attrType: {
                     type: 'Nested',
                     name: 'name',
                     uri: 'uri'
                 }
-            } })));
-        expect(component.find(SimpleAttrIcon)).toHaveLength(0);
-        expect(component.find(NestedAttrIcon)).toHaveLength(1);
-        expect(component.find(ReferenceAttrIcon)).toHaveLength(0);
-        expect(component.find(RecommendedIconWithTooltip)).toHaveLength(0);
+            } }));
+        expect(screen.getByTestId('SvgNestedAttribute')).toBeInTheDocument();
     });
     it('should render reference attribute icon', function () {
-        var component = mount(React.createElement(AttributeListItem, __assign({}, defaultProps, { data: {
+        setUp(__assign(__assign({}, defaultProps), { data: {
                 attrType: {
                     type: 'Reference',
                     name: 'name',
                     uri: 'uri'
                 }
-            } })));
-        expect(component.find(SimpleAttrIcon)).toHaveLength(0);
-        expect(component.find(NestedAttrIcon)).toHaveLength(0);
-        expect(component.find(ReferenceAttrIcon)).toHaveLength(1);
-        expect(component.find(RecommendedIconWithTooltip)).toHaveLength(0);
+            } }));
+        expect(screen.getByTestId('SvgReferenceAttribute')).toBeInTheDocument();
     });
     it("should render recommended icon if groupId === 'recommended'", function () {
-        var component = mount(React.createElement(AttributeListItem, __assign({}, defaultProps, { hideIcon: false, data: {}, groupId: 'recommended' })));
-        expect(component.find(SimpleAttrIcon)).toHaveLength(0);
-        expect(component.find(NestedAttrIcon)).toHaveLength(0);
-        expect(component.find(ReferenceAttrIcon)).toHaveLength(0);
-        expect(component.find(RecommendedIconWithTooltip)).toHaveLength(1);
+        setUp(__assign(__assign({}, defaultProps), { hideIcon: false, data: {}, groupId: 'recommended' }));
+        expect(screen.getByTestId('SvgRecommended')).toBeInTheDocument();
     });
     it('should not render icon if props.hideIcon === true', function () {
-        var component = mount(React.createElement(AttributeListItem, __assign({}, defaultProps, { hideIcon: true, data: {} })));
-        expect(component.find(SimpleAttrIcon)).toHaveLength(0);
-        expect(component.find(NestedAttrIcon)).toHaveLength(0);
-        expect(component.find(ReferenceAttrIcon)).toHaveLength(0);
-        expect(component.find(RecommendedIconWithTooltip)).toHaveLength(0);
+        setUp(__assign(__assign({}, defaultProps), { hideIcon: true }));
+        expect(screen.queryByTestId('SvgSimpleAttribute')).not.toBeInTheDocument();
     });
     it('should render logo attribute icon', function () {
-        var component = shallow(React.createElement(AttributeListItem, __assign({}, defaultProps, { LogoIcon: SomeLogoIcon })));
-        expect(component.find(AttrTypeIcon).length).toBe(1);
-        expect(component.find('.logoIcon').length).toBe(1);
-        expect(component.find(ListItemText).length).toBe(1);
-    });
-    it('should call onClick props with checked state and attributeTypes', function () {
-        var onClick = jest.fn();
-        var data = {};
-        var groupId = 'tesGroupId';
-        var component = mount(React.createElement(AttributeListItem, __assign({}, defaultProps, { data: data, onClick: onClick, groupId: groupId })));
-        component.find(MenuItem).find('li').simulate('click');
-        expect(onClick).toBeCalledWith(data, true, groupId);
-        component.setProps({ checked: true });
-        component.find(MenuItem).find('li').simulate('click');
-        expect(onClick).toBeCalledWith(data, false, groupId);
-    });
+        setUp(__assign(__assign({}, defaultProps), { LogoIcon: SomeLogoIcon }));
+        expect(getMuiIconByName('PlayArrow')).toBeInTheDocument();
+    });
+    it('should call onClick props with checked state and attributeTypes', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onClick, data, groupId, _a, user, rerender;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    onClick = jest.fn();
+                    data = {};
+                    groupId = 'tesGroupId';
+                    _a = setUp(__assign(__assign({}, defaultProps), { data: data, onClick: onClick, groupId: groupId })), user = _a.user, rerender = _a.rerender;
+                    return [4 /*yield*/, user.click(screen.getByRole('menuitem'))];
+                case 1:
+                    _b.sent();
+                    expect(onClick).toBeCalledWith(data, true, groupId);
+                    rerender(React.createElement(AttributeListItem, __assign({}, defaultProps, { data: data, onClick: onClick, groupId: groupId, checked: true })));
+                    return [4 /*yield*/, user.click(screen.getByRole('menuitem'))];
+                case 2:
+                    _b.sent();
+                    expect(onClick).toBeCalledWith(data, false, groupId);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
     it('should hide checkbox when hideCheckBox is set', function () {
-        var component = mount(React.createElement(AttributeListItem, __assign({}, defaultProps, { data: {}, hideCheckBox: true })));
-        expect(component.find(Checkbox)).toHaveLength(0);
-    });
-    it('should unable click for nested attribute when hideCheckBox is set', function () {
-        var component = mount(React.createElement(AttributeListItem, __assign({}, defaultProps, { data: {
-                attrType: {
-                    type: 'Nested',
-                    name: 'name',
-                    uri: 'uri'
-                }
-            }, hideCheckBox: true })));
-        var menuItem = component.find(MenuItem);
-        expect(menuItem.prop('onClick')).toBeUndefined();
-        expect(menuItem.prop('className')).toContain('defaultCursor');
-    });
-    it('should do not allow to click on attribute when notSelectable is true', function () {
-        var component = mount(React.createElement(AttributeListItem, __assign({}, defaultProps, { notSelectable: true })));
-        var menuItem = component.find(MenuItem);
-        expect(menuItem.prop('onClick')).toBeUndefined();
-        expect(menuItem.prop('className')).toContain('defaultCursor');
-        expect(component.find(Checkbox).prop('disabled')).toBe(true);
-    });
+        setUp(__assign(__assign({}, defaultProps), { hideCheckBox: true }));
+        expect(screen.queryByRole('checkbox')).not.toBeInTheDocument();
+    });
+    it('should unable click for nested attribute when hideCheckBox is set', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onClick, user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onClick = jest.fn();
+                    user = setUp(__assign(__assign({}, defaultProps), { onClick: onClick, data: {
+                            attrType: {
+                                type: 'Nested',
+                                name: 'name',
+                                uri: 'uri'
+                            }
+                        }, hideCheckBox: true })).user;
+                    return [4 /*yield*/, user.click(screen.getByRole('menuitem'))];
+                case 1:
+                    _a.sent();
+                    expect(onClick).not.toBeCalled();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should do not allow to click on attribute when notSelectable is true', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onClick, user, menuItem;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onClick = jest.fn();
+                    user = setUp(__assign(__assign({}, defaultProps), { onClick: onClick, data: {
+                            attrType: {
+                                type: 'Nested',
+                                name: 'name',
+                                uri: 'uri'
+                            }
+                        }, notSelectable: true })).user;
+                    menuItem = screen.getByRole('menuitem');
+                    return [4 /*yield*/, user.click(menuItem)];
+                case 1:
+                    _a.sent();
+                    expect(menuItem).toHaveClass('defaultCursor');
+                    expect(onClick).not.toBeCalled();
+                    expect(screen.getByRole('checkbox')).toBeDisabled();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
     it('should render RequiredMark if isRequired=true', function () {
-        var component = mount(React.createElement(AttributeListItem, __assign({}, defaultProps, { isRequired: true })));
-        expect(component.find('RequiredMark')).toHaveLength(1);
+        setUp(__assign(__assign({}, defaultProps), { isRequired: true }));
+        expect(screen.getByText('*')).toBeInTheDocument();
     });
     it('should disable notSelectable if disableNonSelectable=true', function () {
-        render(React.createElement(AttributeListItem, __assign({}, defaultProps, { isRequired: true, notSelectable: true, disableNonSelectable: true })));
-        expect(screen.getByRole('checkbox')).toHaveAttribute('disabled');
+        setUp(__assign(__assign({}, defaultProps), { isRequired: true, notSelectable: true, disableNonSelectable: true }));
+        expect(screen.getByRole('checkbox')).toBeDisabled();
     });
 });