@reltio/components 1.4.2044 → 1.4.2046

package/EditModeComplexAttribute/EditModeComplexAttribute.test.js

@@ -9,361 +9,376 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 import React from 'react';
-import { mount } from 'enzyme';
-import { act } from 'react-dom/test-utils';
-import Button from '@mui/material/Button';
-import { Mode, MetadataPermissions } from '@reltio/mdm-sdk';
-import EditModeComplexAttribute from './EditModeComplexAttribute';
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ErrorType, MetadataPermissions, Mode } from '@reltio/mdm-sdk';
+import { MdmModuleProvider } from '../contexts/MdmModuleContext';
+import { ScrollToElementContext, ScrollType } from '../contexts/ScrollToElementContext';
 import { nestedAttributeType } from './nestedAttrType.test-data';
 import { nestedAttributeValue } from './nestedAttrValue.test-data';
-import { EditModeAttributesList } from '../EditModeAttributesList';
-import { SmallIconButton } from '../SmallIconButton';
-import { ErrorWrapper } from '../ErrorWrapper';
-import { ArrowExpandButton } from '../ArrowExpandButton';
-import { useScrollToAttributeError } from '../hooks/useScrollToAttributeError';
-import { MdmModuleProvider } from '../contexts/MdmModuleContext';
-import { ScrollType, ScrollToElementContext } from '../contexts/ScrollToElementContext';
-jest.mock('../hooks/useScrollToAttributeError', function () { return (__assign(__assign({}, jest.requireActual('../hooks/useScrollToAttributeError')), { useScrollToAttributeError: jest.fn() })); });
-describe('EditModeComplexAttribute', function () {
-    var findExpandButton = function (component) { return component.find(ArrowExpandButton); };
-    var findDeleteButton = function (component) { return component.find('.actions').find(SmallIconButton); };
-    var findCreateAttributeButton = function (component) {
-        return component.find(Button).filterWhere(function (button) { return button.text() === 'Create attribute'; });
-    };
-    var findLabel = function (component) { return component.find('.label'); };
-    var isComplexAttributeExpanded = function (component) { return component.find(EditModeAttributesList).length === 1; };
-    var defaultProps = {
-        label: 'Label!!!',
-        attributeType: nestedAttributeType,
-        attributeValue: nestedAttributeValue,
-        attributeTypesList: nestedAttributeType.attributes
-    };
-    var mdmValues = { dependentLookups: { editors: {} } };
-    var scrollToAttributeError = {
-        ref: React.createRef(),
-        errorClassName: 'errorClassName',
-        path: []
+import EditModeComplexAttribute from './EditModeComplexAttribute';
+var defaultMdmValues = { dependentLookups: { editors: {}, structure: {}, initedTypeUris: [] } };
+var defaultProps = {
+    metadata: {
+        entityTypes: [],
+        relationTypes: [
+            {
+                uri: 'configuration/relationTypes/InternalHCPtoHCP',
+                label: 'HCP to HCP',
+                attributes: [nestedAttributeType]
+            }
+        ]
+    },
+    label: 'Label!!!',
+    attributeType: nestedAttributeType,
+    attributeValue: nestedAttributeValue,
+    attributeTypesList: nestedAttributeType.attributes,
+    mode: Mode.Editing,
+    onAddAttributes: jest.fn(),
+    onDeleteAttribute: jest.fn(),
+    onChangeAttribute: jest.fn(),
+    additionalControlsRenderer: jest.fn(function (_a) {
+        var attributeType = _a.attributeType;
+        return React.createElement("div", null,
+            "Additional Controls ",
+            attributeType.label);
+    })
+};
+var defaultScrollToElementContextValue = {
+    element: null,
+    highlightError: jest.fn(),
+    type: ScrollType.Error,
+    scrollIntoRef: jest.fn()
+};
+var setUp = function (_a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.props, props = _c === void 0 ? defaultProps : _c, _d = _b.mdmValues, mdmValues = _d === void 0 ? defaultMdmValues : _d, _e = _b.scrollToElementContextValue, scrollToElementContextValue = _e === void 0 ? defaultScrollToElementContextValue : _e;
+    var user = userEvent.setup();
+    var Providers = function (_a) {
+        var children = _a.children;
+        return (React.createElement(MdmModuleProvider, { values: mdmValues }, children));
     };
-    var highlightErrorSpy = jest.fn();
-    var scrollIntoRefSpy = jest.fn();
-    var setUp = function (props, children, error) {
-        if (children === void 0) { children = null; }
-        if (error === void 0) { error = null; }
-        return mount(React.createElement(MdmModuleProvider, { values: mdmValues },
-            React.createElement(ScrollToElementContext.Provider, { value: {
-                    element: error,
-                    highlightError: highlightErrorSpy,
-                    type: ScrollType.Error,
-                    scrollIntoRef: scrollIntoRefSpy
-                } },
-                React.createElement(EditModeComplexAttribute, __assign({}, props), children))));
+    var result = render(React.createElement(ScrollToElementContext.Provider, { value: scrollToElementContextValue },
+        React.createElement(EditModeComplexAttribute, __assign({}, props))), { wrapper: Providers });
+    var rerender = function (_a) {
+        var newProps = _a.props, newScrollToElementContextValue = _a.scrollToElementContextValue;
+        return result.rerender(React.createElement(ScrollToElementContext.Provider, { value: __assign(__assign({}, scrollToElementContextValue), newScrollToElementContextValue) },
+            React.createElement(EditModeComplexAttribute, __assign({}, props, newProps))));
     };
-    beforeAll(function () {
-        useScrollToAttributeError.mockReturnValue(scrollToAttributeError);
-    });
-    beforeEach(function () {
+    return __assign(__assign({}, result), { rerender: rerender, user: user });
+};
+describe('Edit mode complex attribute tests', function () {
+    afterEach(function () {
         jest.clearAllMocks();
     });
     it('should render expand button and label', function () {
-        var props = __assign({}, defaultProps);
-        var component = setUp(props);
-        expect(findExpandButton(component).length).toBe(1);
-        var label = findLabel(component);
-        expect(label.length).toBe(1);
-        expect(label.text()).toBe(props.label);
-        expect(findDeleteButton(component).length).toBe(0);
-        expect(component.find(EditModeAttributesList).length).toBe(0);
-        expect(findCreateAttributeButton(component).length).toBe(0);
-        var complexWrapper = component.find('.complexWrapper');
-        expect(complexWrapper.hasClass(scrollToAttributeError.errorClassName)).toBeTruthy();
-        expect(complexWrapper.getElement().ref).toBe(scrollToAttributeError.ref);
+        var props = __assign(__assign({}, defaultProps), { onDeleteAttribute: undefined });
+        setUp({ props: props });
+        screen.getByTestId('arrow-expand-button');
+        screen.getByText('Label!!!');
+        expect(screen.getAllByTestId('reltio-edit-mode-complex-attribute')).toHaveLength(1);
+        expect(screen.queryByTestId('reltio-delete-complex-attribute-button')).not.toBeInTheDocument();
+        expect(screen.queryByText('Create attribute')).not.toBeInTheDocument();
     });
     it('should render lazy variant of control if lazy prop is true', function () {
-        var props = __assign({ lazy: true }, defaultProps);
-        var component = setUp(props);
-        expect(findExpandButton(component).length).toBe(0);
-        expect(findLabel(component).length).toBe(0);
-        expect(findDeleteButton(component).length).toBe(0);
-        expect(component.find(EditModeAttributesList).length).toBe(0);
-        expect(findCreateAttributeButton(component).length).toBe(1);
+        var props = __assign(__assign({}, defaultProps), { lazy: true });
+        setUp({ props: props });
+        expect(screen.queryByTestId('reltio-edit-mode-complex-attribute')).not.toBeInTheDocument();
+        screen.getByText('Create attribute');
     });
     it('should render delete button if onDeleteAttribute prop is specified', function () {
-        var props = __assign(__assign({}, defaultProps), { onDeleteAttribute: jest.fn() });
-        var component = setUp(props);
-        expect(findDeleteButton(component).length).toBe(1);
+        setUp();
+        screen.getByTestId('reltio-delete-complex-attribute-button');
     });
     it('should not render delete button if hideDeleteButton prop is true', function () {
-        var props = __assign(__assign({}, defaultProps), { onDeleteAttribute: jest.fn(), hideDeleteButton: true });
-        var component = setUp(props);
-        expect(findDeleteButton(component).length).toBe(0);
+        var props = __assign(__assign({}, defaultProps), { hideDeleteButton: true });
+        setUp({ props: props });
+        expect(screen.queryByTestId('reltio-delete-complex-attribute-button')).not.toBeInTheDocument();
     });
     it('should not render delete button if there are no DELETE permissions', function () {
-        var props = __assign(__assign({}, defaultProps), { mode: Mode.Editing, attributeType: __assign(__assign({}, nestedAttributeType), { access: [MetadataPermissions.READ, MetadataPermissions.UPDATE] }), onDeleteAttribute: jest.fn() });
-        var component = setUp(props);
-        expect(findDeleteButton(component).length).toBe(0);
+        var attributeType = __assign(__assign({}, nestedAttributeType), { access: [MetadataPermissions.READ, MetadataPermissions.UPDATE] });
+        var props = __assign(__assign({}, defaultProps), { attributeType: attributeType });
+        setUp({ props: props });
+        expect(screen.queryByTestId('reltio-delete-complex-attribute-button')).not.toBeInTheDocument();
     });
-    it('should call onDeleteAttribute prop with attributeType and value uri after click on delete button', function () {
-        var props = __assign(__assign({}, defaultProps), { onDeleteAttribute: jest.fn() });
-        var component = setUp(props);
-        findDeleteButton(component).prop('onClick')();
-        expect(props.onDeleteAttribute).toHaveBeenCalledWith({
-            uri: props.attributeValue.uri,
-            attributeType: props.attributeType,
-            attributeValue: props.attributeValue
+    it('should call onDeleteAttribute prop with attributeType and value uri after click on delete button', 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.getByTestId('reltio-delete-complex-attribute-button'))];
+                case 1:
+                    _a.sent();
+                    expect(defaultProps.onDeleteAttribute).toHaveBeenCalledWith({
+                        uri: defaultProps.attributeValue.uri,
+                        attributeType: defaultProps.attributeType,
+                        attributeValue: defaultProps.attributeValue
+                    });
+                    return [2 /*return*/];
+            }
         });
-    });
+    }); });
     it('should render additional controls if additionalControlsRenderer prop is specified', function () {
-        var AdditionalControls = function () { return React.createElement("div", null); };
-        var props = __assign(__assign({}, defaultProps), { additionalControlsRenderer: function (_a) {
-                var attributeValue = _a.attributeValue, attributeType = _a.attributeType;
-                return (React.createElement(AdditionalControls, { attributeValue: attributeValue, attributeType: attributeType }));
-            } });
-        var component = setUp(props);
-        var additionalControls = component.find(AdditionalControls);
-        expect(additionalControls.length).toBe(1);
-        expect(additionalControls.prop('attributeValue')).toBe(props.attributeValue);
-        expect(additionalControls.prop('attributeType')).toBe(props.attributeType);
-    });
-    it('should render EditModeAttributesList after click on expand button', function () {
-        var props = __assign(__assign({}, defaultProps), { onDeleteAttribute: jest.fn() });
-        var children = React.createElement("span", null, "children");
-        var component = setUp(props, children);
-        expect(component.find(EditModeAttributesList).length).toBe(0);
-        act(function () {
-            findExpandButton(component).prop('onClick')();
+        setUp();
+        screen.getByText('Additional Controls Additional Attributes');
+        expect(defaultProps.additionalControlsRenderer).toHaveBeenCalledWith({
+            attributeType: defaultProps.attributeType,
+            attributeValue: defaultProps.attributeValue
         });
-        component.update();
-        var attributesList = component.find(EditModeAttributesList);
-        expect(attributesList.length).toBe(1);
-        expect(attributesList.prop('children')).toBe(children);
     });
-    it('should render EditModeAttributesList with parentAttributeType after click on expand button', function () {
-        var props = __assign(__assign({}, defaultProps), { onDeleteAttribute: jest.fn() });
-        var children = React.createElement("span", null, "children");
-        var component = setUp(props, children);
-        expect(component.find(EditModeAttributesList).length).toBe(0);
-        act(function () {
-            findExpandButton(component).prop('onClick')();
+    it('should render EditModeAttributesList after click on expand button', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var props, user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    props = __assign(__assign({}, defaultProps), { children: React.createElement("div", null, "Children") });
+                    user = setUp({ props: props }).user;
+                    expect(screen.queryByText('More attributes')).not.toBeInTheDocument();
+                    expect(screen.getAllByTestId('reltio-edit-mode-complex-attribute')).toHaveLength(1);
+                    return [4 /*yield*/, user.click(screen.getByTestId('arrow-expand-button'))];
+                case 1:
+                    _a.sent();
+                    expect(screen.getAllByTestId('reltio-edit-mode-complex-attribute')).toHaveLength(2);
+                    screen.getByText('More attributes');
+                    screen.getByText('Children');
+                    return [2 /*return*/];
+            }
         });
-        component.update();
-        var attributesList = component.find(EditModeAttributesList);
-        expect(attributesList.length).toBe(1);
-        expect(attributesList.prop('children')).toBe(children);
-        expect(attributesList.prop('parentAttributeType')).toEqual(props.attributeType);
-    });
+    }); });
     it('should render EditModeAttributesList if expand prop was passed', function () {
-        var props = __assign(__assign({}, defaultProps), { expanded: true, onDeleteAttribute: jest.fn() });
-        var children = React.createElement("span", null, "children");
-        var component = setUp(props, children);
-        var attributesList = component.find(EditModeAttributesList);
-        expect(attributesList.length).toBe(1);
-        expect(attributesList.prop('children')).toBe(children);
-    });
-    it('should be expanded by default for new attributes', function () {
-        var props = __assign(__assign({}, defaultProps), { attributeValue: __assign(__assign({}, nestedAttributeValue), { uri: 'relations/sIeHttl/attributes/AdditionalAttributes/uri$$123' }), onDeleteAttribute: jest.fn() });
-        var children = React.createElement("span", null, "children");
-        var component = setUp(props, children);
-        var attributesList = component.find(EditModeAttributesList);
-        expect(attributesList.length).toBe(1);
-        expect(attributesList.prop('children')).toBe(children);
-        act(function () {
-            findExpandButton(component).at(0).prop('onClick')();
-        });
-        component.update();
-        expect(component.find(EditModeAttributesList).length).toBe(0);
+        var props = __assign(__assign({}, defaultProps), { expanded: true, children: React.createElement("div", null, "Children") });
+        setUp({ props: props });
+        expect(screen.getAllByTestId('reltio-edit-mode-complex-attribute')).toHaveLength(2);
+        screen.getByText('More attributes');
+        screen.getByText('Children');
     });
-    it('should set correct props for EditModeAttributesList', function () {
-        var props = __assign(__assign({}, defaultProps), { onAddAttributes: jest.fn(), onDeleteAttribute: jest.fn(), onChangeAttribute: jest.fn(), additionalControlsRenderer: jest.fn(), crosswalks: [], mode: Mode.Editing, showEmptyEditors: true });
-        var component = setUp(props);
-        act(function () {
-            findExpandButton(component).prop('onClick')();
+    it('should be expanded by default for new attributes', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var props, user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    props = __assign(__assign({}, defaultProps), { attributeValue: __assign(__assign({}, nestedAttributeValue), { uri: 'relations/sIeHttl/attributes/AdditionalAttributes/uri$$123' }), children: React.createElement("div", null, "Children") });
+                    user = setUp({ props: props }).user;
+                    expect(screen.getAllByTestId('reltio-edit-mode-complex-attribute')).toHaveLength(2);
+                    screen.getByText('More attributes');
+                    screen.getByText('Children');
+                    return [4 /*yield*/, user.click(screen.getAllByTestId('arrow-expand-button')[0])];
+                case 1:
+                    _a.sent();
+                    expect(screen.queryByText('More attributes')).not.toBeInTheDocument();
+                    expect(screen.getAllByTestId('reltio-edit-mode-complex-attribute')).toHaveLength(1);
+                    return [2 /*return*/];
+            }
         });
-        component.update();
-        var attributesList = component.find(EditModeAttributesList);
-        expect(attributesList.length).toBe(1);
-        expect(attributesList.props()).toMatchObject({
-            onAddAttributes: props.onAddAttributes,
-            onDeleteAttribute: props.onDeleteAttribute,
-            onChangeAttribute: props.onChangeAttribute,
-            additionalControlsRenderer: props.additionalControlsRenderer,
-            crosswalks: props.crosswalks,
-            mode: props.mode,
-            showEmptyEditors: props.showEmptyEditors,
-            parentUri: props.attributeValue.uri,
-            drawLines: true,
-            attrTypes: props.attributeType.attributes,
-            entity: { attributes: props.attributeValue.value }
+    }); });
+    it('should render attributes correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, complexAttributeActions, attributeActions, complexAttributeLabels, attributeTitles, attributeValues;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    return [4 /*yield*/, user.click(screen.getAllByTestId('arrow-expand-button')[0])];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(screen.getAllByTestId('arrow-expand-button')[1])];
+                case 2:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(screen.getAllByTestId('arrow-expand-button')[2])];
+                case 3:
+                    _a.sent();
+                    complexAttributeActions = screen.getAllByTestId('reltio-complex-attribute-actions');
+                    expect(complexAttributeActions).toHaveLength(3);
+                    expect(complexAttributeActions[0]).toHaveTextContent('Additional Controls Additional Attributes');
+                    expect(complexAttributeActions[1]).toHaveTextContent('Additional Controls Sub Nested');
+                    expect(complexAttributeActions[2]).toHaveTextContent('Additional Controls Sub Sub Nested');
+                    attributeActions = screen.getAllByTestId('reltio-attribute-actions');
+                    expect(attributeActions).toHaveLength(1);
+                    expect(attributeActions[0]).toHaveTextContent('Additional Controls Attribute Value');
+                    complexAttributeLabels = screen.getAllByTestId('reltio-attribute-complex-label');
+                    expect(complexAttributeLabels).toHaveLength(3);
+                    expect(complexAttributeLabels[0]).toHaveTextContent('Label!!!');
+                    expect(complexAttributeLabels[1]).toHaveTextContent('<No label>');
+                    expect(complexAttributeLabels[2]).toHaveTextContent('<No label>');
+                    attributeTitles = screen.getAllByTestId('reltio-attribute-label');
+                    expect(attributeTitles).toHaveLength(3);
+                    expect(attributeTitles[0]).toHaveTextContent('Sub Nested');
+                    expect(attributeTitles[1]).toHaveTextContent('Sub Sub Nested');
+                    expect(attributeTitles[2]).toHaveTextContent('Attribute Value');
+                    attributeValues = screen.getAllByTestId('reltio-attribute-value');
+                    expect(attributeValues).toHaveLength(1);
+                    expect(within(attributeValues[0]).getByRole('textbox')).toHaveValue('12321');
+                    return [2 /*return*/];
+            }
         });
-    });
-    var expandSubNesteds = function (component) {
-        act(function () {
-            findExpandButton(component).prop('onClick')();
-        });
-        component.update();
-        var complexes = component.find(EditModeComplexAttribute);
-        expect(complexes.length).toBe(2);
-        var subComplex = complexes.at(1);
-        act(function () {
-            findExpandButton(subComplex).prop('onClick')();
+    }); });
+    it('should call onDeleteAttribute prop with deep nested attributeType and value uri after click on delete button in deep nested', 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.getAllByTestId('arrow-expand-button')[0])];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(screen.getAllByTestId('arrow-expand-button')[1])];
+                case 2:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(screen.getAllByTestId('arrow-expand-button')[2])];
+                case 3:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(screen.getAllByTestId('reltio-delete-complex-attribute-button')[2])];
+                case 4:
+                    _a.sent();
+                    expect(defaultProps.onDeleteAttribute).toHaveBeenCalledWith({
+                        uri: defaultProps.attributeValue.value.SubNested[0].value.SubSubNested[0].uri,
+                        attributeType: defaultProps.attributeType.attributes[0].attributes[0],
+                        attributeValue: defaultProps.attributeValue.value.SubNested[0].value.SubSubNested[0]
+                    });
+                    return [2 /*return*/];
+            }
         });
-        component.update();
-        complexes = component.find(EditModeComplexAttribute);
-        expect(complexes.length).toBe(3);
-        var subSubComplex = complexes.at(2);
-        act(function () {
-            findExpandButton(subSubComplex).prop('onClick')();
-        });
-        component.update();
-    };
-    it('should render deep nested attributes', function () {
-        var AdditionalControls = function () { return React.createElement("div", null); };
-        var props = __assign(__assign({}, defaultProps), { onAddAttributes: jest.fn(), onDeleteAttribute: jest.fn(), onChangeAttribute: jest.fn(), additionalControlsRenderer: function (_a) {
-                var attributeValue = _a.attributeValue, attributeType = _a.attributeType;
-                return (React.createElement(AdditionalControls, { attributeValue: attributeValue, attributeType: attributeType }));
-            }, crosswalks: [], mode: Mode.Editing, showEmptyEditors: true });
-        var component = setUp(props);
-        expect(component.find(EditModeComplexAttribute).length).toBe(1);
-        expandSubNesteds(component);
-        expect(component.find(EditModeComplexAttribute).length).toBe(3);
-        var deepComplex = component.find(EditModeComplexAttribute).at(2);
-        var deepComplexValue = props.attributeValue.value.SubNested[0].value.SubSubNested[0];
-        var deepComplexAttrType = props.attributeType.attributes[0].attributes[0];
-        expect(deepComplex.prop('attributeValue')).toBe(deepComplexValue);
-        expect(deepComplex.prop('attributeType')).toBe(deepComplexAttrType);
-        var deepAdditionalControlInsideComplex = deepComplex.find(AdditionalControls);
-        expect(deepAdditionalControlInsideComplex.length).toBe(2); // for complex and simple inside
-        expect(deepAdditionalControlInsideComplex.at(0).prop('attributeValue')).toBe(deepComplexValue);
-        expect(deepAdditionalControlInsideComplex.at(0).prop('attributeType')).toBe(deepComplexAttrType);
-        var deepSimple = component.find('SimpleAttributeEditor');
-        expect(deepSimple.length).toBe(1);
-        var deepSimpleValue = props.attributeValue.value.SubNested[0].value.SubSubNested[0].value.AttributeValue[0];
-        var deepSimpleAttrType = props.attributeType.attributes[0].attributes[0].attributes[0];
-        expect(deepSimple.prop('attributeValue')).toBe(deepSimpleValue);
-        expect(deepSimple.prop('attributeType')).toBe(deepSimpleAttrType);
-        var deepAdditionalControlInsideSimple = deepSimple.find(AdditionalControls);
-        expect(deepAdditionalControlInsideSimple.length).toBe(1);
-        expect(deepAdditionalControlInsideSimple.prop('attributeValue')).toBe(deepSimpleValue);
-        expect(deepAdditionalControlInsideSimple.prop('attributeType')).toBe(deepSimpleAttrType);
-    });
-    it('should call onDeleteAttribute prop with deep nested attributeType and value uri after click on delete button in deep nested', function () {
-        var props = __assign(__assign({}, defaultProps), { onAddAttributes: jest.fn(), onDeleteAttribute: jest.fn(), onChangeAttribute: jest.fn(), crosswalks: [], mode: Mode.Editing, showEmptyEditors: true });
-        var component = mount(React.createElement(MdmModuleProvider, { values: mdmValues },
-            React.createElement(EditModeComplexAttribute, __assign({}, props))));
-        expect(component.find(EditModeComplexAttribute).length).toBe(1);
-        expandSubNesteds(component);
-        expect(component.find(EditModeComplexAttribute).length).toBe(3);
-        var deepComplex = component.find(EditModeComplexAttribute).at(2);
-        act(function () {
-            findDeleteButton(deepComplex).prop('onClick')();
-        });
-        expect(props.onDeleteAttribute).toHaveBeenCalledWith({
-            uri: props.attributeValue.value.SubNested[0].value.SubSubNested[0].uri,
-            attributeType: props.attributeType.attributes[0].attributes[0],
-            attributeValue: props.attributeValue.value.SubNested[0].value.SubSubNested[0]
-        });
-    });
+    }); });
     it('should not show error message if error prop is not specified', function () {
-        var component = setUp(defaultProps);
-        expect(component.find(ErrorWrapper).prop('errorMessage')).toBe('');
+        setUp();
+        expect(screen.queryByTestId('error-message')).not.toBeInTheDocument();
     });
     it('should show error message if ownError prop is specified', function () {
         var props = __assign(__assign({}, defaultProps), { ownError: {
-                type: 'invalid',
-                message: 'error desc',
+                type: ErrorType.invalid,
+                message: 'error description',
                 attributeTypeUri: 'any1',
                 parentUri: 'any2',
                 uri: 'any3'
             } });
-        var component = setUp(props);
-        expect(isComplexAttributeExpanded(component)).toBe(false);
-        expect(component.find(ErrorWrapper).prop('errorMessage')).toBe(props.ownError.message);
+        setUp({ props: props });
+        expect(screen.getAllByTestId('reltio-edit-mode-complex-attribute')).toHaveLength(1);
+        expect(screen.getByTestId('error-message')).toHaveTextContent(props.ownError.message);
     });
     it('should become expanded and show special error message if errors props contains descendants errors', function () {
-        var props = __assign(__assign({}, defaultProps), { onAddAttributes: jest.fn(), onDeleteAttribute: jest.fn(), onChangeAttribute: jest.fn(), errors: [] });
-        var component = mount(React.createElement(EditModeComplexAttribute, __assign({}, props)));
-        expect(isComplexAttributeExpanded(component)).toBe(false);
-        expect(component.find(ErrorWrapper).prop('errorMessage')).toBe('');
-        component.setProps({
-            errors: [
-                {
-                    parentUri: 'relations/sIeHttl/attributes/AdditionalAttributes/2zoXFFwDl/SubNested/gdggfgfgdf/SubSubNested/1',
-                    uri: '',
-                    attributeTypeUri: 'configuration/relationTypes/InternalHCPtoHCP/attributes/AdditionalAttributes/attributes/SubNested/attributes/SubSubNested/attributes/AttributeValue',
-                    message: 'Attribute is required',
-                    type: 'missed'
-                }
-            ]
+        var props = __assign(__assign({}, defaultProps), { errors: [] });
+        var rerender = setUp({ props: props }).rerender;
+        expect(screen.getAllByTestId('reltio-edit-mode-complex-attribute')).toHaveLength(1);
+        expect(screen.queryByTestId('error-message')).not.toBeInTheDocument();
+        rerender({
+            props: {
+                errors: [
+                    {
+                        parentUri: 'relations/sIeHttl/attributes/AdditionalAttributes/2zoXFFwDl/SubNested/gdggfgfgdf/SubSubNested/1',
+                        uri: '',
+                        attributeTypeUri: 'configuration/relationTypes/InternalHCPtoHCP/attributes/AdditionalAttributes/attributes/SubNested/attributes/SubSubNested/attributes/AttributeValue',
+                        message: 'Attribute is required',
+                        type: ErrorType.missed
+                    }
+                ]
+            }
         });
-        component.update();
-        expect(isComplexAttributeExpanded(component)).toBe(true);
-        expect(component.find(ErrorWrapper).at(0).prop('errorMessage')).toBe('Has an incorrect value');
+        expect(screen.getAllByTestId('reltio-edit-mode-complex-attribute')).toHaveLength(2);
+        expect(screen.getByTestId('error-message')).toHaveTextContent('Has an incorrect value');
     });
-    it('should become collapsed after setting "state" prop to "deleted"', function () {
-        var props = __assign(__assign({}, defaultProps), { onAddAttributes: jest.fn(), onDeleteAttribute: jest.fn(), onChangeAttribute: jest.fn() });
-        var component = mount(React.createElement(EditModeComplexAttribute, __assign({}, props)));
-        expect(isComplexAttributeExpanded(component)).toBe(false);
-        expect(findDeleteButton(component).length).toBe(1);
-        expect(findLabel(component).hasClass('deleted')).toBe(false);
-        expect(findExpandButton(component).prop('disabled')).toBeFalsy();
-        act(function () {
-            findExpandButton(component).prop('onClick')();
+    it('should become collapsed after setting "state" prop to "deleted"', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, user, rerender;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _a = setUp(), user = _a.user, rerender = _a.rerender;
+                    expect(screen.getAllByTestId('reltio-edit-mode-complex-attribute')).toHaveLength(1);
+                    expect(screen.getByTestId('reltio-attribute-complex-label')).not.toHaveClass('deleted');
+                    expect(screen.getByTestId('arrow-expand-button')).not.toBeDisabled();
+                    screen.getByTestId('reltio-delete-complex-attribute-button');
+                    return [4 /*yield*/, user.click(screen.getByTestId('arrow-expand-button'))];
+                case 1:
+                    _b.sent();
+                    expect(screen.getAllByTestId('reltio-edit-mode-complex-attribute')).toHaveLength(2);
+                    rerender({ props: { state: 'deleted' } });
+                    expect(screen.getAllByTestId('reltio-edit-mode-complex-attribute')).toHaveLength(1);
+                    expect(screen.getByTestId('reltio-attribute-complex-label')).toHaveClass('deleted');
+                    expect(screen.getByTestId('arrow-expand-button')).toBeDisabled();
+                    expect(screen.queryByTestId('reltio-delete-complex-attribute-button')).not.toBeInTheDocument();
+                    return [2 /*return*/];
+            }
         });
-        component.update();
-        expect(isComplexAttributeExpanded(component)).toBe(true);
-        component.setProps({
-            state: 'deleted'
-        });
-        component.update();
-        expect(isComplexAttributeExpanded(component)).toBe(false);
-        expect(findDeleteButton(component).length).toBe(0);
-        expect(findLabel(component).hasClass('deleted')).toBe(true);
-        expect(findExpandButton(component).prop('disabled')).toBe(true);
-    });
+    }); });
     it('should render "edited" badge after setting "state" prop to "edited"', function () {
-        var props = __assign(__assign({}, defaultProps), { onAddAttributes: jest.fn(), onDeleteAttribute: jest.fn(), onChangeAttribute: jest.fn() });
-        var component = mount(React.createElement(EditModeComplexAttribute, __assign({}, props)));
-        expect(component.find('.actions').text()).toBe('');
-        component.setProps({
-            state: 'edited'
-        });
-        component.update();
-        expect(component.find('.actions').text()).toBe('(edited)');
+        var rerender = setUp().rerender;
+        expect(screen.queryByText('(edited)')).not.toBeInTheDocument();
+        rerender({ props: { state: 'edited' } });
+        screen.getByText('(edited)');
     });
     describe('useScrollToAttributeError tests', function () {
         var fullError = {
             type: 'invalid',
             attributeTypeUri: defaultProps.attributeType.uri,
-            parentUri: defaultProps.parentUri,
+            parentUri: null,
+            name: '',
             uri: defaultProps.attributeValue.uri,
             source: 'validationService',
             severity: 'ERROR'
         };
         it('should not highlight error if it have wrong uri', function () {
-            var component = setUp(defaultProps, null, __assign(__assign({}, fullError), { uri: 'different' }));
-            expect(component.find('EditModeComplexAttribute').prop('highlightedError')).toBe(null);
-            expect(useScrollToAttributeError.mock.calls[0][0]).toMatchObject({
-                highlightedError: null
-            });
+            var error = __assign(__assign({}, fullError), { uri: 'different' });
+            var scrollToElementContextValue = __assign(__assign({}, defaultScrollToElementContextValue), { element: error });
+            setUp({ scrollToElementContextValue: scrollToElementContextValue });
+            expect(screen.getByTestId('reltio-edit-mode-complex-attribute')).not.toHaveClass('highlightError');
+            expect(scrollToElementContextValue.scrollIntoRef).not.toHaveBeenCalled();
         });
         it('should highlight error if it have same parent uri, uri, and attribute type uri', function () {
-            var component = setUp(defaultProps, [], fullError);
-            var highlightedError = {
-                element: fullError,
-                highlightError: highlightErrorSpy,
-                scrollIntoRef: scrollIntoRefSpy,
-                type: ScrollType.Error
-            };
-            expect(component.find('EditModeComplexAttribute').prop('highlightedError')).toMatchObject(highlightedError);
-            expect(useScrollToAttributeError.mock.calls[0][0]).toMatchObject({ highlightedError: highlightedError });
+            var scrollToElementContextValue = __assign(__assign({}, defaultScrollToElementContextValue), { element: fullError });
+            setUp({ scrollToElementContextValue: scrollToElementContextValue });
+            expect(screen.getByTestId('reltio-edit-mode-complex-attribute')).toHaveClass('highlightError');
+            expect(scrollToElementContextValue.scrollIntoRef).toHaveBeenCalled();
         });
         it('should pass isHighlightedPath=false prop if path is not contains uri', function () {
-            var component = setUp(defaultProps, [], __assign(__assign({}, fullError), { path: [] }));
-            expect(component.find('EditModeComplexAttribute').prop('isHighlightedPath')).toBe(false);
+            var rerender = setUp().rerender;
+            expect(screen.getAllByTestId('reltio-edit-mode-complex-attribute')).toHaveLength(1);
+            var error = __assign(__assign({}, fullError), { path: [] });
+            var scrollToElementContextValue = __assign(__assign({}, defaultScrollToElementContextValue), { element: error });
+            rerender({ scrollToElementContextValue: scrollToElementContextValue });
+            expect(screen.getAllByTestId('reltio-edit-mode-complex-attribute')).toHaveLength(1);
         });
         it('should pass isHighlightedPath=true prop if path is contains uri', function () {
-            var component = setUp(defaultProps, [], __assign(__assign({}, fullError), { path: [{ value: defaultProps.attributeValue }] }));
-            expect(component.find('EditModeComplexAttribute').prop('isHighlightedPath')).toBe(true);
+            var rerender = setUp().rerender;
+            expect(screen.getAllByTestId('reltio-edit-mode-complex-attribute')).toHaveLength(1);
+            var error = __assign(__assign({}, fullError), { path: [{ value: defaultProps.attributeValue }] });
+            var scrollToElementContextValue = __assign(__assign({}, defaultScrollToElementContextValue), { element: error });
+            rerender({ scrollToElementContextValue: scrollToElementContextValue });
+            expect(screen.getAllByTestId('reltio-edit-mode-complex-attribute')).toHaveLength(2);
         });
     });
 });