@reltio/components 1.4.1906 → 1.4.1908

package/cjs/ActionsPanel/ActionsPanel.test.js

@@ -10,76 +10,160 @@ 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 };
+    }
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
-var ramda_1 = require("ramda");
-var enzyme_1 = require("enzyme");
 var ActionsPanel_1 = require("./ActionsPanel");
-var DropDownMenuButton_1 = require("../DropDownMenuButton");
+var react_2 = require("@testing-library/react");
+var user_event_1 = __importDefault(require("@testing-library/user-event"));
 describe('ActionsPanel tests', function () {
-    var MergeButton = function () { return react_1.default.createElement("div", null); };
+    var MergeButton = function (_a) {
+        var mode = _a.mode, onMenuClose = _a.onMenuClose;
+        return (react_1.default.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 = user_event_1.default.setup();
+        return __assign({ user: user }, (0, react_2.render)(react_1.default.createElement(ActionsPanel_1.ActionsPanel, __assign({}, props))));
+    };
     it('should render main parts', function () {
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(ActionsPanel_1.ActionsPanel, { actions: actions }));
-        expect(component.find(MergeButton)).toHaveLength(2);
-        expect(component.find(DropDownMenuButton_1.DropDownMenuButton)).toHaveLength(1);
+        setUp();
+        expect(react_2.screen.getAllByTestId('testButton')).toHaveLength(2);
+        expect(react_2.screen.getByLabelText('More actions')).toBeInTheDocument();
     });
     it('should render empty panel if actions is empty array', function () {
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(ActionsPanel_1.ActionsPanel, { actions: [] }));
-        expect(component.find(MergeButton)).toHaveLength(0);
-        expect(component.find(DropDownMenuButton_1.DropDownMenuButton)).toHaveLength(0);
+        setUp({ actions: [] });
+        expect(react_2.screen.queryByTestId('testButton')).not.toBeInTheDocument();
+        expect(react_2.screen.queryByLabelText('More actions')).not.toBeInTheDocument();
     });
     it('should not render DropDownMenuButton if length of actions <= numberOfButtons', function () {
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(ActionsPanel_1.ActionsPanel, { actions: actions, numberOfButtons: actions.length }));
-        expect(component.find(MergeButton)).toHaveLength(3);
-        expect(component.find(DropDownMenuButton_1.DropDownMenuButton)).toHaveLength(0);
+        setUp({ actions: actions, numberOfButtons: actions.length });
+        expect(react_2.screen.getAllByTestId('testButton')).toHaveLength(3);
+        expect(react_2.screen.queryByLabelText('More actions')).not.toBeInTheDocument();
     });
     it('should render numberOfButtons action button from actions', function () {
-        var numberOfButtons = 1;
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(ActionsPanel_1.ActionsPanel, { actions: actions, numberOfButtons: numberOfButtons }));
-        expect(component.find(MergeButton)).toHaveLength(numberOfButtons);
-        expect(component.find(DropDownMenuButton_1.DropDownMenuButton)).toHaveLength(1);
+        setUp({ actions: actions, numberOfButtons: 1 });
+        expect(react_2.screen.queryByTestId('testButton')).toBeInTheDocument();
+        expect(react_2.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 = (0, enzyme_1.shallow)(react_1.default.createElement(ActionsPanel_1.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' }, (0, ramda_1.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(react_2.screen.getByLabelText('More actions'))];
+                case 1:
+                    _a.sent();
+                    expect(onActionsMenuOpenSpy).toHaveBeenCalled();
+                    return [4 /*yield*/, user.click(react_2.screen.getByLabelText('More actions'))];
+                case 2:
+                    _a.sent();
+                    expect(onActionsMenuCloseSpy).toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
         });
-        var dropDownMenuButton = component.find(DropDownMenuButton_1.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 = react_2.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 = (0, enzyme_1.shallow)(react_1.default.createElement(ActionsPanel_1.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 = react_2.screen.getAllByTestId('testButton');
         expect(buttons).toHaveLength(2);
-        buttons.map(function (button, index) {
-            expect(button.props()).toMatchObject(__assign({ mode: 'iconButton' }, (0, ramda_1.omit)(['ActionButton', 'show'], actions[index])));
-        });
-        var dropDownMenuButton = component.find(DropDownMenuButton_1.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(react_2.screen.getByLabelText('More actions'))];
+                    case 1:
+                        _a.sent();
+                        menu = react_2.screen.getByRole('menu');
+                        return [4 /*yield*/, user.click((0, react_2.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(react_2.screen.getByLabelText('More actions'))];
+                    case 1:
+                        _a.sent();
+                        menuButton = (0, react_2.within)(react_2.screen.getByRole('menu')).getByRole('button');
+                        expect(menuButton).toHaveAttribute('data-mode', 'menuItem');
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
 });

package/cjs/AttributeListItem/AttributeListItem.spec.js

@@ -10,28 +10,41 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
+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 };
     }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
 };
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
@@ -39,139 +52,155 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var react_2 = require("@testing-library/react");
-var enzyme_1 = require("enzyme");
-var MenuItem_1 = __importDefault(require("@mui/material/MenuItem"));
-var ListItemText_1 = __importDefault(require("@mui/material/ListItemText"));
-var AttributeListItem_1 = __importStar(require("./AttributeListItem"));
-var Checkbox_1 = __importDefault(require("@mui/material/Checkbox"));
-var SimpleAttribute_1 = __importDefault(require("../icons/SimpleAttribute"));
-var NestedAttribute_1 = __importDefault(require("../icons/NestedAttribute"));
-var ReferenceAttribute_1 = __importDefault(require("../icons//ReferenceAttribute"));
+var AttributeListItem_1 = __importDefault(require("./AttributeListItem"));
 var PlayArrow_1 = __importDefault(require("@mui/icons-material/PlayArrow"));
-var AttrTypeIcon_1 = require("./components/AttrTypeIcon");
+var test_utils_1 = require("../test-utils");
+var user_event_1 = __importDefault(require("@testing-library/user-event"));
 describe('AttributeListItem tests', function () {
     var defaultProps = {
         data: {},
         checked: false,
         label: 'Some Title'
     };
-    it('should render main components', function () {
-        var component = (0, enzyme_1.mount)(react_1.default.createElement(AttributeListItem_1.default, __assign({}, defaultProps)));
-        expect(component.find(Checkbox_1.default).length).toBe(1);
-        expect(component.find(Checkbox_1.default).prop('disabled')).toBe(false);
-        expect(component.text().includes('Some Title')).toBe(true);
+    var setUp = function (props) {
+        if (props === void 0) { props = defaultProps; }
+        var user = user_event_1.default.setup();
+        return __assign({ user: user }, (0, react_2.render)(react_1.default.createElement(AttributeListItem_1.default, __assign({}, props))));
+    };
+    it('should render default components', function () {
+        setUp();
+        expect(react_2.screen.getByText(defaultProps.label)).toBeInTheDocument();
+        expect(react_2.screen.getByRole('checkbox')).not.toBeDisabled();
+        expect(react_2.screen.getByTestId('SvgSimpleAttribute')).toBeInTheDocument();
     });
     it('should render main components with label as a node', function () {
-        var component = (0, enzyme_1.mount)(react_1.default.createElement(AttributeListItem_1.default, __assign({}, defaultProps, { label: react_1.default.createElement("span", null, "Some Title") })));
-        expect(component.find(ListItemText_1.default).length).toBe(1);
-        expect(component.find(ListItemText_1.default).text()).toBe('Some Title');
+        var label = react_1.default.createElement("span", null, "Some Title");
+        setUp(__assign(__assign({}, defaultProps), { label: label }));
+        expect(react_2.screen.getByText('Some Title')).toBeInTheDocument();
     });
     it('should render checked checkbox', function () {
-        var component = (0, enzyme_1.mount)(react_1.default.createElement(AttributeListItem_1.default, __assign({}, defaultProps, { checked: true })));
-        var checkbox = component.find(Checkbox_1.default);
-        expect(checkbox.prop('checked')).toBe(true);
-        expect(component.find(Checkbox_1.default).prop('disabled')).toBe(false);
-        expect(checkbox.prop('className').includes('checked')).toBe(true);
+        setUp(__assign(__assign({}, defaultProps), { checked: true }));
+        var chechbox = react_2.screen.getByRole('checkbox');
+        expect(chechbox).toBeChecked();
+        expect(chechbox).not.toBeDisabled();
+        expect(chechbox.parentNode).toHaveClass('checked');
     });
     it('should render unchecked checkbox', function () {
-        var component = (0, enzyme_1.mount)(react_1.default.createElement(AttributeListItem_1.default, __assign({}, defaultProps, { checked: false })));
-        var checkbox = component.find(Checkbox_1.default);
-        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 = (0, enzyme_1.mount)(react_1.default.createElement(AttributeListItem_1.default, __assign({}, defaultProps)));
-        expect(component.find(SimpleAttribute_1.default)).toHaveLength(1);
-        expect(component.find(NestedAttribute_1.default)).toHaveLength(0);
-        expect(component.find(ReferenceAttribute_1.default)).toHaveLength(0);
-        expect(component.find(AttributeListItem_1.RecommendedIconWithTooltip)).toHaveLength(0);
+        setUp(__assign(__assign({}, defaultProps), { checked: false }));
+        var chechbox = react_2.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 = (0, enzyme_1.mount)(react_1.default.createElement(AttributeListItem_1.default, __assign({}, defaultProps, { data: {
+        setUp(__assign(__assign({}, defaultProps), { data: {
                 attrType: {
                     type: 'Nested',
                     name: 'name',
                     uri: 'uri'
                 }
-            } })));
-        expect(component.find(SimpleAttribute_1.default)).toHaveLength(0);
-        expect(component.find(NestedAttribute_1.default)).toHaveLength(1);
-        expect(component.find(ReferenceAttribute_1.default)).toHaveLength(0);
-        expect(component.find(AttributeListItem_1.RecommendedIconWithTooltip)).toHaveLength(0);
+            } }));
+        expect(react_2.screen.getByTestId('SvgNestedAttribute')).toBeInTheDocument();
     });
     it('should render reference attribute icon', function () {
-        var component = (0, enzyme_1.mount)(react_1.default.createElement(AttributeListItem_1.default, __assign({}, defaultProps, { data: {
+        setUp(__assign(__assign({}, defaultProps), { data: {
                 attrType: {
                     type: 'Reference',
                     name: 'name',
                     uri: 'uri'
                 }
-            } })));
-        expect(component.find(SimpleAttribute_1.default)).toHaveLength(0);
-        expect(component.find(NestedAttribute_1.default)).toHaveLength(0);
-        expect(component.find(ReferenceAttribute_1.default)).toHaveLength(1);
-        expect(component.find(AttributeListItem_1.RecommendedIconWithTooltip)).toHaveLength(0);
+            } }));
+        expect(react_2.screen.getByTestId('SvgReferenceAttribute')).toBeInTheDocument();
     });
     it("should render recommended icon if groupId === 'recommended'", function () {
-        var component = (0, enzyme_1.mount)(react_1.default.createElement(AttributeListItem_1.default, __assign({}, defaultProps, { hideIcon: false, data: {}, groupId: 'recommended' })));
-        expect(component.find(SimpleAttribute_1.default)).toHaveLength(0);
-        expect(component.find(NestedAttribute_1.default)).toHaveLength(0);
-        expect(component.find(ReferenceAttribute_1.default)).toHaveLength(0);
-        expect(component.find(AttributeListItem_1.RecommendedIconWithTooltip)).toHaveLength(1);
+        setUp(__assign(__assign({}, defaultProps), { hideIcon: false, data: {}, groupId: 'recommended' }));
+        expect(react_2.screen.getByTestId('SvgRecommended')).toBeInTheDocument();
     });
     it('should not render icon if props.hideIcon === true', function () {
-        var component = (0, enzyme_1.mount)(react_1.default.createElement(AttributeListItem_1.default, __assign({}, defaultProps, { hideIcon: true, data: {} })));
-        expect(component.find(SimpleAttribute_1.default)).toHaveLength(0);
-        expect(component.find(NestedAttribute_1.default)).toHaveLength(0);
-        expect(component.find(ReferenceAttribute_1.default)).toHaveLength(0);
-        expect(component.find(AttributeListItem_1.RecommendedIconWithTooltip)).toHaveLength(0);
+        setUp(__assign(__assign({}, defaultProps), { hideIcon: true }));
+        expect(react_2.screen.queryByTestId('SvgSimpleAttribute')).not.toBeInTheDocument();
     });
     it('should render logo attribute icon', function () {
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(AttributeListItem_1.default, __assign({}, defaultProps, { LogoIcon: PlayArrow_1.default })));
-        expect(component.find(AttrTypeIcon_1.AttrTypeIcon).length).toBe(1);
-        expect(component.find('.logoIcon').length).toBe(1);
-        expect(component.find(ListItemText_1.default).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 = (0, enzyme_1.mount)(react_1.default.createElement(AttributeListItem_1.default, __assign({}, defaultProps, { data: data, onClick: onClick, groupId: groupId })));
-        component.find(MenuItem_1.default).find('li').simulate('click');
-        expect(onClick).toBeCalledWith(data, true, groupId);
-        component.setProps({ checked: true });
-        component.find(MenuItem_1.default).find('li').simulate('click');
-        expect(onClick).toBeCalledWith(data, false, groupId);
-    });
+        setUp(__assign(__assign({}, defaultProps), { LogoIcon: PlayArrow_1.default }));
+        expect((0, test_utils_1.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(react_2.screen.getByRole('menuitem'))];
+                case 1:
+                    _b.sent();
+                    expect(onClick).toBeCalledWith(data, true, groupId);
+                    rerender(react_1.default.createElement(AttributeListItem_1.default, __assign({}, defaultProps, { data: data, onClick: onClick, groupId: groupId, checked: true })));
+                    return [4 /*yield*/, user.click(react_2.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 = (0, enzyme_1.mount)(react_1.default.createElement(AttributeListItem_1.default, __assign({}, defaultProps, { data: {}, hideCheckBox: true })));
-        expect(component.find(Checkbox_1.default)).toHaveLength(0);
-    });
-    it('should unable click for nested attribute when hideCheckBox is set', function () {
-        var component = (0, enzyme_1.mount)(react_1.default.createElement(AttributeListItem_1.default, __assign({}, defaultProps, { data: {
-                attrType: {
-                    type: 'Nested',
-                    name: 'name',
-                    uri: 'uri'
-                }
-            }, hideCheckBox: true })));
-        var menuItem = component.find(MenuItem_1.default);
-        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 = (0, enzyme_1.mount)(react_1.default.createElement(AttributeListItem_1.default, __assign({}, defaultProps, { notSelectable: true })));
-        var menuItem = component.find(MenuItem_1.default);
-        expect(menuItem.prop('onClick')).toBeUndefined();
-        expect(menuItem.prop('className')).toContain('defaultCursor');
-        expect(component.find(Checkbox_1.default).prop('disabled')).toBe(true);
-    });
+        setUp(__assign(__assign({}, defaultProps), { hideCheckBox: true }));
+        expect(react_2.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(react_2.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 = react_2.screen.getByRole('menuitem');
+                    return [4 /*yield*/, user.click(menuItem)];
+                case 1:
+                    _a.sent();
+                    expect(menuItem).toHaveClass('defaultCursor');
+                    expect(onClick).not.toBeCalled();
+                    expect(react_2.screen.getByRole('checkbox')).toBeDisabled();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
     it('should render RequiredMark if isRequired=true', function () {
-        var component = (0, enzyme_1.mount)(react_1.default.createElement(AttributeListItem_1.default, __assign({}, defaultProps, { isRequired: true })));
-        expect(component.find('RequiredMark')).toHaveLength(1);
+        setUp(__assign(__assign({}, defaultProps), { isRequired: true }));
+        expect(react_2.screen.getByText('*')).toBeInTheDocument();
     });
     it('should disable notSelectable if disableNonSelectable=true', function () {
-        (0, react_2.render)(react_1.default.createElement(AttributeListItem_1.default, __assign({}, defaultProps, { isRequired: true, notSelectable: true, disableNonSelectable: true })));
-        expect(react_2.screen.getByRole('checkbox')).toHaveAttribute('disabled');
+        setUp(__assign(__assign({}, defaultProps), { isRequired: true, notSelectable: true, disableNonSelectable: true }));
+        expect(react_2.screen.getByRole('checkbox')).toBeDisabled();
     });
 });