@reltio/components 1.4.2071 → 1.4.2073

package/SimpleAttributeEditor/SimpleAttributeEditor.test.js

@@ -45,133 +45,102 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 import React from 'react';
-import { mount } from 'enzyme';
-import { act, screen, render } from '@testing-library/react';
+import { act, screen, render, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { Mode, getDependentLookups } from '@reltio/mdm-sdk';
-import { DataTypeValueEditor } from '../DataTypeValueEditor';
-import * as useAutopopulationContextValueExport from './useAutopopulationContextValue';
-import { ErrorWrapper } from '../ErrorWrapper';
 import SimpleAttributeEditor from './SimpleAttributeEditor';
-import { useScrollToAttributeError } from '../hooks/useScrollToAttributeError';
 import { ProfilePerspectiveViewContext } from '../contexts/ProfilePerspectiveViewContext';
 import { ScrollType, ScrollToElementContext } from '../contexts/ScrollToElementContext';
 import { MdmModuleProvider, useMdmDependentLookupEditorContext } from '../contexts/MdmModuleContext';
+import { AlwaysVisibleAttributesContext } from '../contexts/AlwaysVisibleAttributesContext';
+import { useAutopopulationContextValue } from './useAutopopulationContextValue';
+import { useScrollToAttributeError } from '../hooks/useScrollToAttributeError';
+import { useAsyncMount } from '../hooks/useAsyncMount';
 jest.mock('@reltio/mdm-sdk', function () { return (__assign(__assign({}, jest.requireActual('@reltio/mdm-sdk')), { getDependentLookups: jest.fn(function () { return Promise.resolve(); }), getLookups: jest.fn(function () { return Promise.resolve(); }) })); });
 jest.mock('../contexts/MdmModuleContext', function () { return (__assign(__assign({}, jest.requireActual('../contexts/MdmModuleContext')), { useMdmDependentLookupEditorContext: jest.fn() })); });
+jest.mock('./useAutopopulationContextValue', function () { return (__assign(__assign({}, jest.requireActual('./useAutopopulationContextValue')), { useAutopopulationContextValue: jest.fn() })); });
 jest.mock('../hooks/useScrollToAttributeError', function () { return (__assign(__assign({}, jest.requireActual('../hooks/useScrollToAttributeError')), { useScrollToAttributeError: jest.fn() })); });
+jest.mock('../hooks/useAsyncMount', function () { return (__assign(__assign({}, jest.requireActual('../hooks/useAsyncMount')), { useAsyncMount: jest.fn() })); });
 describe('SimpleAttributeEditor', function () {
-    var onAddFn = jest.fn();
-    var onDeleteFn = jest.fn();
-    var onChangeFn = jest.fn();
-    var onDeactivateErrorFn = jest.fn();
-    var scrollToAttributeError = {
-        ref: React.createRef(),
-        errorClassName: 'errorClassName',
-        path: []
+    var getScrollToElementContextValue = function (error) {
+        if (error === void 0) { error = null; }
+        return ({
+            element: error,
+            highlightError: jest.fn(),
+            scrollIntoRef: jest.fn(),
+            type: ScrollType.Error
+        });
+    };
+    var mdmValues = {
+        dependentLookups: {
+            editors: {},
+            structure: {},
+            initedTypeUris: []
+        }
     };
-    var highlightErrorSpy = jest.fn();
-    var scrollIntoRefSpy = jest.fn();
     beforeAll(function () {
-        useScrollToAttributeError.mockReturnValue(scrollToAttributeError);
+        useScrollToAttributeError.mockImplementation(jest.requireActual('../hooks/useScrollToAttributeError').useScrollToAttributeError);
+        useAsyncMount.mockImplementation(jest.requireActual('../hooks/useAsyncMount').useAsyncMount);
+        useAutopopulationContextValue.mockImplementation(jest.requireActual('./useAutopopulationContextValue').useAutopopulationContextValue);
     });
     beforeEach(function () {
-        onAddFn = jest.fn();
-        onDeleteFn = jest.fn();
-        onChangeFn = jest.fn();
-        onDeactivateErrorFn = jest.fn();
-    });
-    afterEach(function () {
         jest.clearAllMocks();
     });
-    describe('String attribute', function () {
-        var mountComponent = function (_a) {
-            var _b = _a === void 0 ? {} : _a, access = _b.access, ownError = _b.ownError, additionalControlsRenderer = _b.additionalControlsRenderer, state = _b.state;
-            var mdmValues = {
-                dependentLookups: {
-                    editors: {},
-                    structure: {},
-                    initedTypeUris: []
-                }
-            };
-            var data = {
-                attributeValue: {
-                    value: 'some string',
-                    uri: 'entities/eNt1/attributes/InternalCustomer/gd42423'
-                },
-                attributeType: {
-                    access: access || ['UPDATE', 'DELETE', 'CREATE', 'READ'],
-                    type: 'String',
-                    uri: 'configuration/entityTypes/HCA/attributes/InternalCustomer'
-                },
-                ownError: ownError,
-                isReltioCrosswalk: true,
-                mode: Mode.Editing,
-                onAddOneMore: onAddFn,
-                onDeleteAttribute: onDeleteFn,
-                onChangeAttribute: onChangeFn,
-                onDeactivateError: onDeactivateErrorFn,
-                additionalControlsRenderer: additionalControlsRenderer,
-                state: state
-            };
-            return mount(React.createElement(MdmModuleProvider, { values: mdmValues },
-                React.createElement(ScrollToElementContext.Provider, { value: {
-                        element: null,
-                        highlightError: highlightErrorSpy,
-                        scrollIntoRef: scrollIntoRefSpy,
-                        type: ScrollType.Error
-                    } },
-                    React.createElement(SimpleAttributeEditor, __assign({}, data)))));
-        };
-        var findActionButtons = function (component) {
-            return component
-                .findWhere(function (n) { return n.prop('className') && n.prop('className').includes('editor-actions'); })
-                .children();
+    var defaultProps = {
+        attributeValue: {
+            value: 'some string',
+            uri: 'entities/eNt1/attributes/InternalCustomer/gd42423'
+        },
+        attributeType: {
+            access: ['UPDATE', 'DELETE', 'CREATE', 'READ'],
+            type: 'String',
+            uri: 'configuration/entityTypes/HCA/attributes/InternalCustomer'
+        },
+        isReltioCrosswalk: true,
+        mode: Mode.Editing,
+        onAddOneMore: jest.fn(),
+        onDeleteAttribute: jest.fn(),
+        onChangeAttribute: jest.fn(),
+        onDeactivateError: jest.fn()
+    };
+    var setUp = function (_a) {
+        var _b = _a === void 0 ? {} : _a, _c = _b.props, props = _c === void 0 ? {} : _c, _d = _b.error, error = _d === void 0 ? null : _d, _e = _b.isProfilePerspective, isProfilePerspective = _e === void 0 ? false : _e, _f = _b.alwaysVisibleAttributes, alwaysVisibleAttributes = _f === void 0 ? [] : _f;
+        var user = userEvent.setup();
+        var scrollToElementContextValue = getScrollToElementContextValue(error);
+        var Providers = function (_a) {
+            var children = _a.children;
+            return (React.createElement(MdmModuleProvider, { values: mdmValues },
+                React.createElement(AlwaysVisibleAttributesContext.Provider, { value: alwaysVisibleAttributes },
+                    React.createElement(ProfilePerspectiveViewContext.Provider, { value: isProfilePerspective },
+                        React.createElement(ScrollToElementContext.Provider, { value: scrollToElementContextValue }, children)))));
         };
+        return __assign({ user: user, scrollToElementContextValue: scrollToElementContextValue }, render(React.createElement(SimpleAttributeEditor, __assign({}, defaultProps, props)), { wrapper: Providers }));
+    };
+    describe('String attribute', function () {
         it('should render the simple attribute to edit with action buttons', function () {
-            var component = mountComponent();
-            var errorWrapper = component.find(ErrorWrapper);
-            expect(errorWrapper.find(DataTypeValueEditor).props()).toMatchObject({
-                fieldName: 'attributes.InternalCustomer',
-                value: 'some string',
-                dataTypeDefinition: {
-                    type: 'String',
-                    uri: 'configuration/entityTypes/HCA/attributes/InternalCustomer'
-                }
-            });
-            expect(errorWrapper.prop('errorMessage')).toBeFalsy();
-            var editor = component.find('.editor');
-            expect(editor.hasClass(scrollToAttributeError.errorClassName)).toBeTruthy();
-            expect(editor.getElement().ref).toBe(scrollToAttributeError.ref);
-            var actionButtons = findActionButtons(component);
-            expect(actionButtons.length).toBe(2);
-            actionButtons.at(0).find('button').simulate('click');
-            expect(onAddFn).toHaveBeenCalled();
-            actionButtons.at(1).find('button').simulate('click');
-            expect(onDeleteFn).toHaveBeenCalled();
+            setUp();
+            expect(screen.getByRole('textbox')).toHaveValue('some string');
+            expect(screen.queryByTestId('error-message')).not.toBeInTheDocument();
+            var actions = screen.getByTestId('reltio-attribute-actions');
+            expect(within(actions).getAllByRole('button')).toHaveLength(2);
+            expect(screen.getByTestId('reltio-add-one-more-simple-attribute-button')).toBeInTheDocument();
+            expect(screen.getByTestId('reltio-delete-simple-attribute-button')).toBeInTheDocument();
         });
         it('should render additional control between plus and delete buttons if additionalControlsRenderer prop is specified', function () {
-            var AdditionalControls = function () { return React.createElement("div", null); };
-            var component = mountComponent({
-                additionalControlsRenderer: function (_a) {
-                    var attributeValue = _a.attributeValue, attributeType = _a.attributeType;
-                    return (React.createElement(AdditionalControls, { attributeValue: attributeValue, attributeType: attributeType }));
+            setUp({
+                props: {
+                    additionalControlsRenderer: function (_a) {
+                        var attributeValue = _a.attributeValue, attributeType = _a.attributeType;
+                        return (React.createElement("div", { "data-reltio-id": "additional-controls" },
+                            React.createElement("div", { "data-reltio-id": "attribute-value" }, attributeValue.uri),
+                            React.createElement("div", { "data-reltio-id": "attribute-type" }, attributeType.uri)));
+                    }
                 }
             });
-            var actionButtons = findActionButtons(component);
-            expect(actionButtons.length).toBe(3);
-            expect(actionButtons.at(1).prop('attributeValue').uri).toBe('entities/eNt1/attributes/InternalCustomer/gd42423');
-            expect(actionButtons.at(1).prop('attributeType').uri).toBe('configuration/entityTypes/HCA/attributes/InternalCustomer');
+            expect(screen.getByTestId('additional-controls')).toBeInTheDocument();
+            expect(screen.getByTestId('attribute-value')).toHaveTextContent('entities/eNt1/attributes/InternalCustomer/gd42423');
+            expect(screen.getByTestId('attribute-type')).toHaveTextContent('configuration/entityTypes/HCA/attributes/InternalCustomer');
         });
         it('should render error message if ownError prop is specified', function () {
             var ownError = {
@@ -181,209 +150,216 @@ describe('SimpleAttributeEditor', function () {
                 message: 'Error!!!',
                 type: 'invalid'
             };
-            var component = mountComponent({ ownError: ownError });
-            var errorWrapper = component.find(ErrorWrapper);
-            expect(errorWrapper.find(DataTypeValueEditor).prop('value')).toEqual('some string');
-            expect(errorWrapper.prop('errorMessage')).toBe(ownError.message);
+            setUp({ props: { ownError: ownError } });
+            expect(screen.getByRole('textbox')).toHaveValue('some string');
+            expect(screen.getByTestId('error-message')).toHaveTextContent('Error!!!');
         });
         it('should not render delete button in case of missed DELETE permission', function () {
-            var component = mountComponent({ access: ['UPDATE', 'CREATE', 'READ'] });
-            expect(component.find(DataTypeValueEditor).prop('value')).toEqual('some string');
-            var actionButtons = findActionButtons(component);
-            expect(actionButtons.length).toBe(1);
-            actionButtons.at(0).find('button').simulate('click');
-            expect(onAddFn).toHaveBeenCalled();
+            var attributeType = __assign(__assign({}, defaultProps.attributeType), { access: ['UPDATE', 'CREATE', 'READ'] });
+            setUp({ props: { attributeType: attributeType } });
+            expect(screen.getByRole('textbox')).toHaveValue('some string');
+            expect(screen.getByTestId('reltio-add-one-more-simple-attribute-button')).toBeInTheDocument();
+            expect(screen.queryByTestId('reltio-delete-simple-attribute-button')).not.toBeInTheDocument();
         });
         it('should not render plus button in case of missed CREATE permission', function () {
-            var component = mountComponent({ access: ['UPDATE', 'DELETE', 'READ'] });
-            expect(component.find(DataTypeValueEditor).prop('value')).toEqual('some string');
-            var actionButtons = findActionButtons(component);
-            expect(actionButtons.length).toBe(1);
-            actionButtons.at(0).find('button').simulate('click');
-            expect(onDeleteFn).toHaveBeenCalledWith({
-                attributeType: {
-                    access: ['UPDATE', 'DELETE', 'READ'],
-                    type: 'String',
-                    uri: 'configuration/entityTypes/HCA/attributes/InternalCustomer'
-                },
-                uri: 'entities/eNt1/attributes/InternalCustomer/gd42423'
-            });
+            var attributeType = __assign(__assign({}, defaultProps.attributeType), { access: ['UPDATE', 'DELETE', 'READ'] });
+            setUp({ props: { attributeType: attributeType } });
+            expect(screen.getByRole('textbox')).toHaveValue('some string');
+            expect(screen.getByTestId('reltio-delete-simple-attribute-button')).toBeInTheDocument();
+            expect(screen.queryByTestId('reltio-add-one-more-simple-attribute-button')).not.toBeInTheDocument();
         });
-        it('should call onChangeAttribute prop when input value changes', function () {
-            var component = mountComponent();
-            var editor = component.find(DataTypeValueEditor);
-            editor.prop('onChange')('new string');
-            expect(onChangeFn).toHaveBeenCalledWith({
-                attributeType: {
-                    access: ['UPDATE', 'DELETE', 'CREATE', 'READ'],
-                    type: 'String',
-                    uri: 'configuration/entityTypes/HCA/attributes/InternalCustomer'
-                },
-                uri: 'entities/eNt1/attributes/InternalCustomer/gd42423',
-                value: 'new string'
+        it('should call onChangeAttribute prop when input value changes', 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.type(screen.getByRole('textbox'), ' new{enter}')];
+                    case 1:
+                        _a.sent();
+                        expect(defaultProps.onChangeAttribute).toHaveBeenCalledWith({
+                            attributeType: {
+                                access: ['UPDATE', 'DELETE', 'CREATE', 'READ'],
+                                type: 'String',
+                                uri: 'configuration/entityTypes/HCA/attributes/InternalCustomer'
+                            },
+                            uri: 'entities/eNt1/attributes/InternalCustomer/gd42423',
+                            value: 'some string new'
+                        });
+                        expect(defaultProps.onDeactivateError).not.toHaveBeenCalled();
+                        return [2 /*return*/];
+                }
             });
-            expect(onDeactivateErrorFn).not.toHaveBeenCalled();
-        });
-        it('should deactivate error when input value changes', function () {
-            var ownError = {
-                uri: 'entities/eNt1/attributes/InternalCustomer/gd42423',
-                parentUri: 'entities/eNt1',
-                attributeTypeUri: 'configuration/entityTypes/HCA/attributes/InternalCustomer',
-                message: 'Error!!!',
-                type: 'invalid'
-            };
-            var component = mountComponent({ ownError: ownError });
-            var editor = component.find(DataTypeValueEditor);
-            editor.prop('onChange')('new string');
-            expect(onChangeFn).toHaveBeenCalledWith({
-                attributeType: {
-                    access: ['UPDATE', 'DELETE', 'CREATE', 'READ'],
-                    type: 'String',
-                    uri: 'configuration/entityTypes/HCA/attributes/InternalCustomer'
-                },
-                uri: 'entities/eNt1/attributes/InternalCustomer/gd42423',
-                value: 'new string'
+        }); });
+        it('should deactivate error when input value changes', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var ownError, user;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        ownError = {
+                            uri: 'entities/eNt1/attributes/InternalCustomer/gd42423',
+                            parentUri: 'entities/eNt1',
+                            attributeTypeUri: 'configuration/entityTypes/HCA/attributes/InternalCustomer',
+                            message: 'Error!!!',
+                            type: 'invalid'
+                        };
+                        user = setUp({ props: { ownError: ownError } }).user;
+                        return [4 /*yield*/, user.type(screen.getByRole('textbox'), ' new{enter}')];
+                    case 1:
+                        _a.sent();
+                        expect(defaultProps.onChangeAttribute).toHaveBeenCalledWith({
+                            attributeType: {
+                                access: ['UPDATE', 'DELETE', 'CREATE', 'READ'],
+                                type: 'String',
+                                uri: 'configuration/entityTypes/HCA/attributes/InternalCustomer'
+                            },
+                            uri: 'entities/eNt1/attributes/InternalCustomer/gd42423',
+                            value: 'some string new'
+                        });
+                        expect(defaultProps.onDeactivateError).toHaveBeenCalledWith('configuration/entityTypes/HCA/attributes/InternalCustomer-entities/eNt1/attributes/InternalCustomer/gd42423-entities/eNt1');
+                        return [2 /*return*/];
+                }
             });
-            expect(onDeactivateErrorFn).toHaveBeenCalledWith('configuration/entityTypes/HCA/attributes/InternalCustomer-entities/eNt1/attributes/InternalCustomer/gd42423-entities/eNt1');
-        });
-        it('should call onDeleteAttribute after click on delete button', function () {
-            var component = mountComponent();
-            var actionButtons = findActionButtons(component);
-            expect(actionButtons.length).toBe(2);
-            actionButtons.at(1).find('button').simulate('click');
-            expect(onDeleteFn).toHaveBeenCalledWith({
-                attributeType: {
-                    access: ['UPDATE', 'DELETE', 'CREATE', 'READ'],
-                    type: 'String',
-                    uri: 'configuration/entityTypes/HCA/attributes/InternalCustomer'
-                },
-                uri: 'entities/eNt1/attributes/InternalCustomer/gd42423'
+        }); });
+        it('should call onDeleteAttribute 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-simple-attribute-button'))];
+                    case 1:
+                        _a.sent();
+                        expect(defaultProps.onDeleteAttribute).toHaveBeenCalledWith({
+                            attributeType: {
+                                access: ['UPDATE', 'DELETE', 'CREATE', 'READ'],
+                                type: 'String',
+                                uri: 'configuration/entityTypes/HCA/attributes/InternalCustomer'
+                            },
+                            uri: 'entities/eNt1/attributes/InternalCustomer/gd42423'
+                        });
+                        expect(defaultProps.onDeactivateError).not.toHaveBeenCalled();
+                        return [2 /*return*/];
+                }
             });
-            expect(onDeactivateErrorFn).not.toHaveBeenCalled();
-        });
-        it('should deactivate "invalid" error after click on delete button', function () {
-            var ownError = {
-                uri: 'entities/eNt1/attributes/InternalCustomer/gd42423',
-                parentUri: 'entities/eNt1',
-                attributeTypeUri: 'configuration/entityTypes/HCA/attributes/InternalCustomer',
-                message: 'Error!!!',
-                type: 'invalid'
-            };
-            var component = mountComponent({ ownError: ownError });
-            var actionButtons = findActionButtons(component);
-            expect(actionButtons.length).toBe(2);
-            actionButtons.at(1).find('button').simulate('click');
-            expect(onDeleteFn).toHaveBeenCalledWith({
-                attributeType: {
-                    access: ['UPDATE', 'DELETE', 'CREATE', 'READ'],
-                    type: 'String',
-                    uri: 'configuration/entityTypes/HCA/attributes/InternalCustomer'
-                },
-                uri: 'entities/eNt1/attributes/InternalCustomer/gd42423'
+        }); });
+        it('should call onAddOneMore on click on add more 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-add-one-more-simple-attribute-button'))];
+                    case 1:
+                        _a.sent();
+                        expect(defaultProps.onAddOneMore).toHaveBeenCalledTimes(1);
+                        return [2 /*return*/];
+                }
             });
-            expect(onDeactivateErrorFn).toHaveBeenCalledWith('configuration/entityTypes/HCA/attributes/InternalCustomer-entities/eNt1/attributes/InternalCustomer/gd42423-entities/eNt1');
-        });
-        it('should not deactivate "missed" error after click on delete button', function () {
-            var ownError = {
-                uri: '',
-                parentUri: 'entities/eNt1',
-                attributeTypeUri: 'configuration/entityTypes/HCA/attributes/InternalCustomer',
-                message: 'Error!!!',
-                type: 'missed'
-            };
-            var component = mountComponent({ ownError: ownError });
-            var actionButtons = findActionButtons(component);
-            expect(actionButtons.length).toBe(2);
-            actionButtons.at(1).find('button').simulate('click');
-            expect(onDeleteFn).toHaveBeenCalledWith({
-                attributeType: {
-                    access: ['UPDATE', 'DELETE', 'CREATE', 'READ'],
-                    type: 'String',
-                    uri: 'configuration/entityTypes/HCA/attributes/InternalCustomer'
-                },
-                uri: 'entities/eNt1/attributes/InternalCustomer/gd42423'
+        }); });
+        it('should deactivate "invalid" error after click on delete button', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var ownError, user;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        ownError = {
+                            uri: 'entities/eNt1/attributes/InternalCustomer/gd42423',
+                            parentUri: 'entities/eNt1',
+                            attributeTypeUri: 'configuration/entityTypes/HCA/attributes/InternalCustomer',
+                            message: 'Error!!!',
+                            type: 'invalid'
+                        };
+                        user = setUp({ props: { ownError: ownError } }).user;
+                        return [4 /*yield*/, user.click(screen.getByTestId('reltio-delete-simple-attribute-button'))];
+                    case 1:
+                        _a.sent();
+                        expect(defaultProps.onDeleteAttribute).toHaveBeenCalledWith({
+                            attributeType: {
+                                access: ['UPDATE', 'DELETE', 'CREATE', 'READ'],
+                                type: 'String',
+                                uri: 'configuration/entityTypes/HCA/attributes/InternalCustomer'
+                            },
+                            uri: 'entities/eNt1/attributes/InternalCustomer/gd42423'
+                        });
+                        expect(defaultProps.onDeactivateError).toHaveBeenCalledWith('configuration/entityTypes/HCA/attributes/InternalCustomer-entities/eNt1/attributes/InternalCustomer/gd42423-entities/eNt1');
+                        return [2 /*return*/];
+                }
             });
-            expect(onDeactivateErrorFn).not.toHaveBeenCalled();
-        });
+        }); });
+        it('should not deactivate "missed" error after click on delete button', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var ownError, user;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        ownError = {
+                            uri: '',
+                            parentUri: 'entities/eNt1',
+                            attributeTypeUri: 'configuration/entityTypes/HCA/attributes/InternalCustomer',
+                            message: 'Error!!!',
+                            type: 'missed'
+                        };
+                        user = setUp({ props: { ownError: ownError } }).user;
+                        return [4 /*yield*/, user.click(screen.getByTestId('reltio-delete-simple-attribute-button'))];
+                    case 1:
+                        _a.sent();
+                        expect(defaultProps.onDeleteAttribute).toHaveBeenCalledWith({
+                            attributeType: {
+                                access: ['UPDATE', 'DELETE', 'CREATE', 'READ'],
+                                type: 'String',
+                                uri: 'configuration/entityTypes/HCA/attributes/InternalCustomer'
+                            },
+                            uri: 'entities/eNt1/attributes/InternalCustomer/gd42423'
+                        });
+                        expect(defaultProps.onDeactivateError).not.toHaveBeenCalled();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
         it('should be wrapped in withAsyncMount HOC', function () {
-            var component = mountComponent();
-            expect(component.find('WithAsyncMount').exists()).toBe(true);
-            expect(component.find('WithAsyncMount').find('SimpleAttributeEditor').exists()).toBe(true);
+            setUp();
+            expect(useAsyncMount).toHaveBeenCalled();
         });
         it('should render component in "deleted" state', function () {
-            var component = mountComponent({ state: 'deleted' });
-            expect(component.find(DataTypeValueEditor).prop('disabled')).toBe(true);
-            expect(component.find('.editor-value').hasClass('deleted')).toBe(true);
-            expect(findActionButtons(component).length).toBe(1);
-            expect(component.find('.editor-actions').text()).toBe('');
+            setUp({ props: { state: 'deleted' } });
+            expect(screen.getByRole('textbox')).toBeDisabled();
+            expect(screen.getByTestId('reltio-attribute-value')).toHaveClass('deleted');
+            expect(screen.getAllByRole('button')).toHaveLength(1);
+            expect(screen.getByTestId('reltio-add-one-more-simple-attribute-button')).toBeInTheDocument();
+            expect(screen.queryByTestId('reltio-delete-simple-attribute-button')).not.toBeInTheDocument();
+            expect(screen.getByTestId('reltio-attribute-actions')).toHaveTextContent('');
         });
         it('should render component in "edited" state', function () {
-            var component = mountComponent({ state: 'edited' });
-            expect(component.find(DataTypeValueEditor).prop('disabled')).toBeFalsy();
-            expect(component.find('.editor-value').hasClass('deleted')).toBeFalsy();
-            expect(findActionButtons(component).length).toBe(3);
-            expect(component.find('.editor-actions').text()).toBe('(edited)');
+            setUp({ props: { state: 'edited' } });
+            expect(screen.getByRole('textbox')).not.toBeDisabled();
+            expect(screen.getByTestId('reltio-attribute-value')).not.toHaveClass('deleted');
+            expect(screen.getAllByRole('button')).toHaveLength(2);
+            expect(screen.getByTestId('reltio-add-one-more-simple-attribute-button')).toBeInTheDocument();
+            expect(screen.getByTestId('reltio-delete-simple-attribute-button')).toBeInTheDocument();
+            expect(screen.getByTestId('reltio-attribute-actions')).toHaveTextContent('(edited)');
         });
     });
     describe('Dependent Lookup attribute', function () {
         beforeEach(function () {
             useMdmDependentLookupEditorContext.mockReturnValue({});
-            jest.spyOn(useAutopopulationContextValueExport, 'useAutopopulationContextValue').mockReturnValue({
-                autopopulationContextValue: null
-            });
+            useAutopopulationContextValue.mockReturnValue({ autopopulationContextValue: null });
         });
-        var defaultProps = {
-            attributeValue: {
-                value: 'some string',
-                uri: 'entities/eNt1/attributes/InternalCustomer/gd42423'
-            },
-            attributeType: {
-                type: 'String',
-                uri: 'configuration/entityTypes/HCA/attributes/InternalCustomer',
-                dependentLookupCode: 'Code'
-            },
-            mode: Mode.Editing,
-            onChangeAttribute: jest.fn()
-        };
-        var setUp = function () {
-            var args_1 = [];
-            for (var _i = 0; _i < arguments.length; _i++) {
-                args_1[_i] = arguments[_i];
-            }
-            return __awaiter(void 0, __spreadArray([], args_1, true), void 0, function (props, _a) {
-                var user, renderResult;
-                if (props === void 0) { props = {}; }
-                var _b = _a === void 0 ? {} : _a, _c = _b.isProfilePerspective, isProfilePerspective = _c === void 0 ? true : _c;
-                return __generator(this, function (_d) {
-                    switch (_d.label) {
-                        case 0:
-                            user = userEvent.setup();
-                            renderResult = render(React.createElement(ProfilePerspectiveViewContext.Provider, { value: isProfilePerspective },
-                                React.createElement(ScrollToElementContext.Provider, { value: {
-                                        element: null,
-                                        highlightError: highlightErrorSpy,
-                                        scrollIntoRef: scrollIntoRefSpy,
-                                        type: ScrollType.Error
-                                    } },
-                                    React.createElement(SimpleAttributeEditor, __assign({}, defaultProps, props)))));
-                            return [4 /*yield*/, act(function () { return Promise.resolve(); })];
-                        case 1:
-                            _d.sent();
-                            return [2 /*return*/, __assign({ user: user }, renderResult)];
-                    }
-                });
-            });
+        var attributeType = {
+            type: 'String',
+            uri: 'configuration/entityTypes/HCA/attributes/InternalCustomer',
+            dependentLookupCode: 'Code'
         };
         it('should call getDependentLookupEditorContext selector with correct arguments', function () { return __awaiter(void 0, void 0, void 0, function () {
             return __generator(this, function (_a) {
                 switch (_a.label) {
-                    case 0: return [4 /*yield*/, setUp()];
+                    case 0:
+                        setUp({ props: { attributeType: attributeType }, isProfilePerspective: true });
+                        return [4 /*yield*/, act(function () { return Promise.resolve(); })];
                     case 1:
                         _a.sent();
-                        expect(useMdmDependentLookupEditorContext).toHaveBeenCalledWith(defaultProps.attributeValue, defaultProps.attributeType);
-                        expect(useAutopopulationContextValueExport.useAutopopulationContextValue).toHaveBeenCalledWith({
+                        expect(useMdmDependentLookupEditorContext).toHaveBeenCalledWith(defaultProps.attributeValue, attributeType);
+                        expect(useAutopopulationContextValue).toHaveBeenCalledWith({
                             enabled: true,
-                            attributeTypeUri: defaultProps.attributeType.uri,
+                            attributeTypeUri: attributeType.uri,
                             valueUri: defaultProps.attributeValue.uri
                         });
                         return [2 /*return*/];
@@ -393,12 +369,14 @@ describe('SimpleAttributeEditor', function () {
         it('should call useAutopopulationContextValue with enabled: false if component is outside of Profile perspective', function () { return __awaiter(void 0, void 0, void 0, function () {
             return __generator(this, function (_a) {
                 switch (_a.label) {
-                    case 0: return [4 /*yield*/, setUp({}, { isProfilePerspective: false })];
+                    case 0:
+                        setUp({ props: { attributeType: attributeType }, isProfilePerspective: false });
+                        return [4 /*yield*/, act(function () { return Promise.resolve(); })];
                     case 1:
                         _a.sent();
-                        expect(useAutopopulationContextValueExport.useAutopopulationContextValue).toHaveBeenCalledWith({
+                        expect(useAutopopulationContextValue).toHaveBeenCalledWith({
                             enabled: false,
-                            attributeTypeUri: defaultProps.attributeType.uri,
+                            attributeTypeUri: attributeType.uri,
                             valueUri: defaultProps.attributeValue.uri
                         });
                         return [2 /*return*/];
@@ -422,7 +400,8 @@ describe('SimpleAttributeEditor', function () {
                             value: null
                         };
                         useMdmDependentLookupEditorContext.mockReturnValue(dlEditorContext);
-                        return [4 /*yield*/, setUp()];
+                        setUp({ props: { attributeType: attributeType }, isProfilePerspective: true });
+                        return [4 /*yield*/, act(function () { return Promise.resolve(); })];
                     case 1:
                         _a.sent();
                         expect(screen.getByText('Some placeholder')).toBeDefined();
@@ -435,7 +414,7 @@ describe('SimpleAttributeEditor', function () {
                             max: 51,
                             offset: 0,
                             parents: dlEditorContext.parents,
-                            type: defaultProps.attributeType.dependentLookupCode
+                            type: attributeType.dependentLookupCode
                         });
                         return [2 /*return*/];
                 }
@@ -451,12 +430,11 @@ describe('SimpleAttributeEditor', function () {
                             isTouched: true,
                             onTouch: jest.fn()
                         };
-                        jest.spyOn(useAutopopulationContextValueExport, 'useAutopopulationContextValue').mockReturnValue({
-                            autopopulationContextValue: autopopulationContextValue
-                        });
-                        return [4 /*yield*/, setUp()];
+                        useAutopopulationContextValue.mockReturnValue({ autopopulationContextValue: autopopulationContextValue });
+                        user = setUp({ props: { attributeType: attributeType }, isProfilePerspective: true }).user;
+                        return [4 /*yield*/, act(function () { return Promise.resolve(); })];
                     case 1:
-                        user = (_a.sent()).user;
+                        _a.sent();
                         input = screen.getByRole('combobox');
                         expect(input).toBeDefined();
                         return [4 /*yield*/, user.clear(input)];
@@ -469,33 +447,6 @@ describe('SimpleAttributeEditor', function () {
         }); });
     });
     describe('useScrollToAttributeError tests', function () {
-        var mdmValues = {
-            dependentLookups: {
-                editors: {}
-            }
-        };
-        var defaultProps = {
-            attributeValue: {
-                value: 'some string',
-                uri: 'entities/eNt1/attributes/InternalCustomer/gd42423'
-            },
-            attributeType: {
-                type: 'String',
-                uri: 'configuration/entityTypes/HCA/attributes/InternalCustomer'
-            },
-            mode: Mode.Editing
-        };
-        var setUp = function (error) {
-            if (error === void 0) { error = null; }
-            return mount(React.createElement(MdmModuleProvider, { values: mdmValues },
-                React.createElement(ScrollToElementContext.Provider, { value: {
-                        element: error,
-                        highlightError: highlightErrorSpy,
-                        scrollIntoRef: scrollIntoRefSpy,
-                        type: ScrollType.Error
-                    } },
-                    React.createElement(SimpleAttributeEditor, __assign({}, defaultProps)))));
-        };
         var fullError = {
             type: 'invalid',
             attributeTypeUri: defaultProps.attributeType.uri,
@@ -505,24 +456,82 @@ describe('SimpleAttributeEditor', function () {
             severity: 'ERROR'
         };
         it('should not highlight error if it have wrong uri', function () {
-            var component = setUp(fullError);
-            expect(component.find('SimpleAttributeEditor').prop('highlightedError')).toBe(null);
-            expect(useScrollToAttributeError.mock.calls[0][0]).toMatchObject({
-                highlightedError: null,
-                isSimple: true
-            });
+            setUp({ error: fullError });
+            expect(screen.getByTestId('simple-attribute-editor')).not.toHaveClass('highlightError simpleAttribute');
+            expect(useScrollToAttributeError).toHaveBeenCalledWith({ highlightedError: null, isSimple: true });
         });
         it('should highlight error if it have right uri', function () {
             var error = __assign(__assign({}, fullError), { uri: defaultProps.attributeValue.uri });
-            var component = setUp(error);
-            var highlightedError = {
-                element: error,
-                highlightError: highlightErrorSpy,
-                scrollIntoRef: scrollIntoRefSpy,
-                type: ScrollType.Error
+            var scrollToElementContextValue = setUp({ error: error }).scrollToElementContextValue;
+            expect(screen.getByTestId('simple-attribute-editor')).toHaveClass('highlightError simpleAttribute');
+            expect(useScrollToAttributeError).toHaveBeenCalledWith({
+                highlightedError: scrollToElementContextValue,
+                isSimple: true
+            });
+        });
+    });
+    describe('without permissions', function () {
+        it('should render just text, if there is only READ permission', function () {
+            var props = {
+                attributeValue: {
+                    value: 'some string',
+                    uri: '1'
+                },
+                attributeType: {
+                    access: ['READ'],
+                    type: 'String',
+                    uri: 'configuration/entityTypes/HCA/attributes/InternalCustomer'
+                }
+            };
+            setUp({ props: props });
+            expect(screen.getByText('some string')).toBeInTheDocument();
+            expect(screen.queryByTestId('reltio-delete-simple-attribute-button')).not.toBeInTheDocument();
+        });
+        it('should render text and DELETE button, if there are only READ and DELETE permission', function () {
+            var props = {
+                attributeValue: {
+                    value: 'some string',
+                    uri: '1'
+                },
+                attributeType: {
+                    access: ['READ', 'DELETE'],
+                    type: 'String',
+                    uri: 'configuration/entityTypes/HCA/attributes/InternalCustomer'
+                }
+            };
+            setUp({ props: props });
+            expect(screen.getByText('some string')).toBeInTheDocument();
+            expect(screen.getByTestId('reltio-delete-simple-attribute-button')).toBeInTheDocument();
+        });
+        it('should render always visible attribute  without value correct, if there are only READ permission', function () {
+            var props = {
+                attributeValue: {
+                    uri: 'uri$$'
+                },
+                attributeType: {
+                    access: ['READ'],
+                    type: 'String',
+                    uri: 'configuration/entityTypes/HCA/attributes/InternalCustomer'
+                }
+            };
+            setUp({ props: props, alwaysVisibleAttributes: ['configuration/entityTypes/HCA/attributes/InternalCustomer'] });
+            expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
+            expect(screen.queryByTestId('reltio-delete-simple-attribute-button')).not.toBeInTheDocument();
+        });
+        it('should render always visible attribute  without value correct, if there are only READ and DELETE permission', function () {
+            var props = {
+                attributeValue: {
+                    uri: 'uri$$'
+                },
+                attributeType: {
+                    access: ['READ', 'DELETE'],
+                    type: 'String',
+                    uri: 'configuration/entityTypes/HCA/attributes/InternalCustomer'
+                }
             };
-            expect(component.find('SimpleAttributeEditor').prop('highlightedError')).toMatchObject(highlightedError);
-            expect(useScrollToAttributeError.mock.calls[0][0]).toMatchObject({ highlightedError: highlightedError, isSimple: true });
+            setUp({ props: props, alwaysVisibleAttributes: ['configuration/entityTypes/HCA/attributes/InternalCustomer'] });
+            expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
+            expect(screen.getByTestId('reltio-delete-simple-attribute-button')).toBeInTheDocument();
         });
     });
 });