@reltio/components 1.4.2044 → 1.4.2046

package/cjs/EditModeAttributesPager/EditModeAttributesPager.test.js

@@ -10,273 +10,737 @@ 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 };
+    }
+};
+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));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
+var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
-var enzyme_1 = require("enzyme");
+var jsdom_testing_mocks_1 = require("jsdom-testing-mocks");
+var react_2 = require("@testing-library/react");
+var user_event_1 = __importDefault(require("@testing-library/user-event"));
+var x_date_pickers_1 = require("@mui/x-date-pickers");
+var AdapterMoment_1 = require("@mui/x-date-pickers/AdapterMoment");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
-var EditModeAttributesPager_1 = __importDefault(require("./EditModeAttributesPager"));
-var BranchDecorator_1 = require("../BranchDecorator");
-var AttributeRenderer_1 = require("./components/AttributeRenderer");
-var SpecialRenderer_1 = require("./components/SpecialRenderer");
-var ImageLineRenderer_1 = require("./components/ImageLineRenderer");
-var AttributeTitle_1 = require("../AttributeTitle");
 var MdmModuleContext_1 = require("../contexts/MdmModuleContext");
+var FeaturesContext_1 = require("../contexts/FeaturesContext");
+var HiddenAttributesContext_1 = require("../contexts/HiddenAttributesContext");
+var HasDeletionsContext_1 = require("../contexts/HasDeletionsContext");
+var PinnedAttributesContext_1 = require("../contexts/PinnedAttributesContext");
+var EditModeAttributesPager_1 = __importDefault(require("./EditModeAttributesPager"));
 var ScrollToElementContext_1 = require("../contexts/ScrollToElementContext");
-jest.mock('./components/AttributeRenderer', function () { return ({
-    AttributeRenderer: function () { return null; }
-}); });
-jest.mock('./components/SpecialRenderer', function () { return ({
-    SpecialRenderer: function () { return null; }
-}); });
-jest.mock('./components/ImageLineRenderer', function () { return ({
-    ImageLineRenderer: function (_a) {
+var defaultAttributeType = {
+    uri: 'configuration/entityTypes/HCP/attributes/Fruit',
+    type: 'String',
+    name: 'Fruit',
+    label: 'Fruit',
+    defaultValue: 'pineapple'
+};
+var defaultValues = [
+    { type: defaultAttributeType.uri, uri: 'entities/sIeHttl/attributes/Fruit/apple', value: 'apple', ov: true },
+    { type: defaultAttributeType.uri, uri: 'entities/sIeHttl/attributes/Fruit/kiwi', value: 'kiwi', ov: true },
+    { type: defaultAttributeType.uri, uri: 'entities/sIeHttl/attributes/Fruit/orange', value: 'orange', ov: false },
+    { type: defaultAttributeType.uri, uri: 'entities/sIeHttl/attributes/Fruit/banana', value: 'banana', ov: true },
+    { type: defaultAttributeType.uri, uri: 'entities/sIeHttl/attributes/Fruit/mango', value: 'mango', ov: true },
+    { type: defaultAttributeType.uri, uri: 'entities/sIeHttl/attributes/Fruit/avocado', value: 'avocado', ov: false }
+];
+var entity = { uri: 'entities/sIeHttl', type: 'configuration/entityTypes/HCP' };
+var modifiedEntities = (_a = {}, _a[entity.uri] = entity, _a);
+var dependentLookups = { editors: {}, structure: {}, initedTypeUris: [] };
+var metadata = {
+    roles: [{ uri: 'configuration/roles/OfficeStaff', description: '', label: 'Office Staff' }],
+    entityTypes: [{ uri: 'configuration/entityTypes/HCP', entityTypeRoleURIs: ['configuration/roles/OfficeStaff'] }]
+};
+var defaultMdmValues = { metadata: metadata, dependentLookups: dependentLookups, entity: entity, modifiedEntities: modifiedEntities };
+var defaultMdmActions = { errorDeactivated: jest.fn(), requestNextPageOfAttributeValues: jest.fn() };
+var defaultProps = {
+    attributeType: defaultAttributeType,
+    values: defaultValues,
+    mode: mdm_sdk_1.Mode.Editing,
+    parentUri: 'entities/sIeHttl',
+    showEmptyEditors: false,
+    onDeleteAttribute: jest.fn(),
+    onChangeAttribute: jest.fn(),
+    onAddAttributes: 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.mdmActions, mdmActions = _e === void 0 ? defaultMdmActions : _e, _f = _b.hiddenAttributesContextValue, hiddenAttributesContextValue = _f === void 0 ? {} : _f, _g = _b.pinnedAttributesContextValue, pinnedAttributesContextValue = _g === void 0 ? [] : _g, _h = _b.CustomProviders, CustomProviders = _h === void 0 ? react_1.default.Fragment : _h;
+    var user = user_event_1.default.setup();
+    var Providers = function (_a) {
         var children = _a.children;
-        return react_1.default.createElement("div", null, children);
-    } //eslint-disable-line
-}); });
-describe('AttributesPager', function () {
-    var attributeType = {
-        uri: 'configuration/entityTypes/HCP/attributes/Simple',
-        type: 'String',
-        name: 'Simple',
-        label: 'Simple label'
+        return (react_1.default.createElement(CustomProviders, null,
+            react_1.default.createElement(x_date_pickers_1.LocalizationProvider, { dateAdapter: AdapterMoment_1.AdapterMoment },
+                react_1.default.createElement(MdmModuleContext_1.MdmModuleProvider, { values: mdmValues, actions: mdmActions },
+                    react_1.default.createElement(HiddenAttributesContext_1.HiddenAttributesContext.Provider, { value: hiddenAttributesContextValue },
+                        react_1.default.createElement(PinnedAttributesContext_1.PinnedAttributesContext.Provider, { value: pinnedAttributesContextValue },
+                            react_1.default.createElement(FeaturesContext_1.FeaturesContext.Provider, { value: { showDescription: true } }, children)))))));
     };
-    var values = [
-        {
-            type: attributeType.uri,
-            uri: 'entities/sIeHttl/attributes/Simple/u123',
-            value: '123',
-            ov: true
-        },
-        {
-            type: attributeType.uri,
-            uri: 'entities/sIeHttl/attributes/Simple/u456',
-            value: '456',
-            ov: true
-        },
-        {
-            type: attributeType.uri,
-            uri: 'entities/sIeHttl/attributes/Simple/u789',
-            value: '789',
-            ov: false
-        }
-    ];
-    var defaultMdmValues = {};
-    var mdmActions = {
-        errorDeactivated: jest.fn(),
-        requestNextPageOfAttributeValues: jest.fn()
-    };
-    var defaultProps = {
-        attributeType: attributeType,
-        values: values,
-        mode: mdm_sdk_1.Mode.Editing,
-        parentUri: 'entities/sIeHttl',
-        onDeleteAttribute: jest.fn(),
-        onChangeAttribute: 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.CustomProviders, CustomProviders = _e === void 0 ? react_1.default.Fragment : _e;
-        return (0, enzyme_1.mount)(react_1.default.createElement(CustomProviders, null,
-            react_1.default.createElement(MdmModuleContext_1.MdmModuleProvider, { values: mdmValues, actions: mdmActions },
-                react_1.default.createElement(EditModeAttributesPager_1.default, __assign({}, props)))));
-    };
-    it('should use defaultMaxValues as "max" if "max" prop is not provided', function () {
-        var mdmValues = { maxValuesInResponse: 56 };
-        var component = setUp({ mdmValues: mdmValues });
-        var attribute = component.find(AttributeRenderer_1.AttributeRenderer);
-        expect(attribute.prop('max')).toBe(56);
-    });
-    it('should use "max" prop if it is provided', function () {
-        var props = __assign(__assign({}, defaultProps), { max: 7 });
-        var mdmValues = { maxValuesInResponse: 56 };
-        var component = setUp({ mdmValues: mdmValues, props: props });
-        var attribute = component.find(AttributeRenderer_1.AttributeRenderer);
-        expect(attribute.prop('max')).toBe(7);
-    });
-    describe('AttributeRenderer behavior', function () {
-        it('should render main parts', function () {
-            var component = setUp();
-            expect(component.find(BranchDecorator_1.BranchDecorator)).toHaveLength(0);
-            var attribute = component.find(AttributeRenderer_1.AttributeRenderer);
-            expect(attribute).toHaveLength(1);
-            expect(attribute.props()).toMatchObject(__assign(__assign({}, defaultProps), { values: values.filter(function (_a) {
-                    var ov = _a.ov;
-                    return ov === true;
-                }) }));
+    return __assign(__assign({}, (0, react_2.render)(react_1.default.createElement(EditModeAttributesPager_1.default, __assign({}, props)), { wrapper: Providers })), { user: user });
+};
+describe('Edit mode attributes pager tests', function () {
+    var resizeObserver = (0, jsdom_testing_mocks_1.mockResizeObserver)();
+    describe('attribute renderer', function () {
+        it('should render title correctly', function () {
+            setUp();
+            var title = react_2.screen.getByTestId('reltio-attribute-label');
+            expect(title).toHaveTextContent('Fruit');
+            expect(title).not.toHaveTextContent('*');
+        });
+        it('should render title correctly if attribute type is required', function () {
+            var attributeType = __assign(__assign({}, defaultAttributeType), { required: true });
+            var props = __assign(__assign({}, defaultProps), { attributeType: attributeType });
+            setUp({ props: props });
+            var title = react_2.screen.getByTestId('reltio-attribute-label');
+            expect(title).toHaveTextContent('Fruit');
+            expect(title).toHaveTextContent('*');
+        });
+        it('should render description correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var attributeType, props, user;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        attributeType = __assign(__assign({}, defaultAttributeType), { description: 'The soft, pulpy part of a flowering plant that contains seeds' });
+                        props = __assign(__assign({}, defaultProps), { attributeType: attributeType });
+                        user = setUp({ props: props }).user;
+                        expect(react_2.screen.queryByRole('tooltip')).not.toBeInTheDocument();
+                        return [4 /*yield*/, user.hover(react_2.screen.getByTestId('reltio-description-icon'))];
+                    case 1:
+                        _a.sent();
+                        react_2.screen.getByText('The soft, pulpy part of a flowering plant that contains seeds');
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should not render description if attribute does not have it', function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                setUp();
+                expect(react_2.screen.queryByTestId('reltio-description-icon')).not.toBeInTheDocument();
+                return [2 /*return*/];
+            });
+        }); });
+        it('should render control attribute icon if controlAttributes has attribute type uri', function () {
+            var mdmValues = __assign(__assign({}, defaultMdmValues), { controlAttributes: [
+                    'configuration/entityTypes/HCP/attributes/Vegatable',
+                    'configuration/entityTypes/HCP/attributes/Fruit'
+                ] });
+            setUp({ mdmValues: mdmValues });
+            react_2.screen.getByTestId('reltio-control-attribute-icon');
+        });
+        it('should not render control attribute icon if controlAttributes does not have attribute type uri', function () {
+            setUp();
+            expect(react_2.screen.queryByTestId('reltio-control-attribute-icon')).not.toBeInTheDocument();
         });
-        it('should set correct props for Attribute component', function () {
-            var props = __assign(__assign({}, defaultProps), { drawLines: true, showEmptyEditors: true, onAddAttributes: jest.fn(), onChangeAttribute: jest.fn(), onDeleteAttribute: jest.fn(), additionalControlsRenderer: jest.fn() });
-            var component = setUp({ props: props });
-            var attribute = component.find(AttributeRenderer_1.AttributeRenderer);
-            expect(attribute).toHaveLength(1);
-            expect(attribute.props()).toMatchObject(__assign(__assign({}, props), { values: values.filter(function (_a) {
-                    var ov = _a.ov;
-                    return ov === true;
-                }), nonVisibleValues: [values[2]] }));
-            expect(component.find(AttributeTitle_1.AttributeTitle)).toHaveLength(0);
+        it('should render ov icon and non ov values correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var user, nonOvValues;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        user = setUp().user;
+                        expect(react_2.screen.queryByRole('tooltip')).not.toBeInTheDocument();
+                        return [4 /*yield*/, user.hover(react_2.screen.getByText('+ 2'))];
+                    case 1:
+                        _a.sent();
+                        nonOvValues = react_2.screen.getAllByTestId('non-ov-value');
+                        expect(nonOvValues).toHaveLength(2);
+                        expect(nonOvValues[0]).toHaveTextContent('orange');
+                        expect(nonOvValues[1]).toHaveTextContent('avocado');
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should not render ov icon if showNonOv is true', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var props;
+            return __generator(this, function (_a) {
+                props = __assign(__assign({}, defaultProps), { showNonOv: true });
+                setUp({ props: props });
+                expect(react_2.screen.queryByTestId('ov-icon')).not.toBeInTheDocument();
+                return [2 /*return*/];
+            });
+        }); });
+        it('should render cardinality message correctly', function () {
+            var attributeType = {
+                uri: 'configuration/entityTypes/HCP/attributes/Int',
+                type: 'Int',
+                name: 'Int',
+                label: 'Int',
+                cardinality: { minValue: 10 }
+            };
+            var values = [{ type: attributeType.uri, uri: 'entities/sIeHttl/attributes/Int/1', value: 5, ov: true }];
+            var props = __assign(__assign({}, defaultProps), { attributeType: attributeType, values: values });
+            setUp({ props: props });
+            react_2.screen.getByText('This attribute can have minimum 10 values');
+        });
+        it('should render, expand and collapse attribute values correctly when max is less than values count', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var props, user, attributes;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        props = __assign(__assign({}, defaultProps), { max: 3 });
+                        user = setUp({ props: props }).user;
+                        attributes = react_2.screen.getAllByTestId('reltio-edit-attribute');
+                        expect(attributes).toHaveLength(3);
+                        expect((0, react_2.within)(attributes[0]).getByRole('textbox')).toHaveValue('apple');
+                        expect((0, react_2.within)(attributes[1]).getByRole('textbox')).toHaveValue('kiwi');
+                        expect((0, react_2.within)(attributes[2]).getByRole('textbox')).toHaveValue('banana');
+                        expect(react_2.screen.queryByText('Show less')).not.toBeInTheDocument();
+                        return [4 /*yield*/, user.click(react_2.screen.getByText('Show 1 more of remaining 1 value'))];
+                    case 1:
+                        _a.sent();
+                        attributes = react_2.screen.getAllByTestId('reltio-edit-attribute');
+                        expect(attributes).toHaveLength(4);
+                        expect((0, react_2.within)(attributes[3]).getByRole('textbox')).toHaveValue('mango');
+                        expect(react_2.screen.queryByTestId('show-more')).not.toBeInTheDocument();
+                        return [4 /*yield*/, user.click(react_2.screen.getByText('Show less'))];
+                    case 2:
+                        _a.sent();
+                        attributes = react_2.screen.getAllByTestId('reltio-edit-attribute');
+                        expect(attributes).toHaveLength(3);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should render, expand and collapse attribute values correctly when showNonOv is true and max is less than values count', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var mdmValues, props, user, attributes;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        mdmValues = __assign(__assign({}, defaultMdmValues), { maxValuesInResponse: 2 });
+                        props = __assign(__assign({}, defaultProps), { showNonOv: true });
+                        user = setUp({ props: props, mdmValues: mdmValues }).user;
+                        attributes = react_2.screen.getAllByTestId('reltio-edit-attribute');
+                        expect(attributes).toHaveLength(2);
+                        expect((0, react_2.within)(attributes[0]).getByRole('textbox')).toHaveValue('apple');
+                        expect((0, react_2.within)(attributes[1]).getByRole('textbox')).toHaveValue('kiwi');
+                        return [4 /*yield*/, user.click(react_2.screen.getByText('Show 2 more of remaining 4 value'))];
+                    case 1:
+                        _a.sent();
+                        attributes = react_2.screen.getAllByTestId('reltio-edit-attribute');
+                        expect(attributes).toHaveLength(4);
+                        expect((0, react_2.within)(attributes[2]).getByRole('textbox')).toHaveValue('orange');
+                        expect((0, react_2.within)(attributes[3]).getByRole('textbox')).toHaveValue('banana');
+                        return [4 /*yield*/, user.click(react_2.screen.getByText('Show 2 more of remaining 2 value'))];
+                    case 2:
+                        _a.sent();
+                        attributes = react_2.screen.getAllByTestId('reltio-edit-attribute');
+                        expect(attributes).toHaveLength(6);
+                        expect((0, react_2.within)(attributes[4]).getByRole('textbox')).toHaveValue('mango');
+                        expect((0, react_2.within)(attributes[5]).getByRole('textbox')).toHaveValue('avocado');
+                        expect(react_2.screen.queryByTestId('show-more')).not.toBeInTheDocument();
+                        return [4 /*yield*/, user.click(react_2.screen.getByText('Show less'))];
+                    case 3:
+                        _a.sent();
+                        attributes = react_2.screen.getAllByTestId('reltio-edit-attribute');
+                        expect(attributes).toHaveLength(2);
+                        react_2.screen.getByText('Show 2 more of remaining 4 value');
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should render attribute values correctly if max is not passed', function () {
+            setUp();
+            var attributes = react_2.screen.getAllByTestId('reltio-edit-attribute');
+            expect(attributes).toHaveLength(4);
+            expect((0, react_2.within)(attributes[0]).getByRole('textbox')).toHaveValue('apple');
+            expect((0, react_2.within)(attributes[1]).getByRole('textbox')).toHaveValue('kiwi');
+            expect((0, react_2.within)(attributes[2]).getByRole('textbox')).toHaveValue('banana');
+            expect((0, react_2.within)(attributes[3]).getByRole('textbox')).toHaveValue('mango');
+            expect(react_2.screen.queryByTestId('show-more')).not.toBeInTheDocument();
+            expect(react_2.screen.queryByTestId('show-less')).not.toBeInTheDocument();
         });
-        it('should set values prop with ov:false for Attribute component if showNonOv is true', function () {
+        it('should render attribute values correctly if showNonOv prop is true and max is not passed', function () {
             var props = __assign(__assign({}, defaultProps), { showNonOv: true });
-            var component = setUp({ props: props });
-            var attribute = component.find(AttributeRenderer_1.AttributeRenderer);
-            expect(attribute.props()).toMatchObject(__assign(__assign({}, props), { nonVisibleValues: [] }));
+            setUp({ props: props });
+            var attributes = react_2.screen.getAllByTestId('reltio-edit-attribute');
+            expect(attributes).toHaveLength(6);
+            expect((0, react_2.within)(attributes[0]).getByRole('textbox')).toHaveValue('apple');
+            expect((0, react_2.within)(attributes[1]).getByRole('textbox')).toHaveValue('kiwi');
+            expect((0, react_2.within)(attributes[2]).getByRole('textbox')).toHaveValue('orange');
+            expect((0, react_2.within)(attributes[3]).getByRole('textbox')).toHaveValue('banana');
+            expect((0, react_2.within)(attributes[4]).getByRole('textbox')).toHaveValue('mango');
+            expect((0, react_2.within)(attributes[5]).getByRole('textbox')).toHaveValue('avocado');
+            expect(react_2.screen.queryByTestId('show-more')).not.toBeInTheDocument();
+            expect(react_2.screen.queryByTestId('show-less')).not.toBeInTheDocument();
         });
-        it('should not send highlightedError to AttributeRenderer if error has uri', function () {
+        it('should return null if there are no values and showEmptyEditors is falsy', function () {
+            var props = __assign(__assign({}, defaultProps), { values: [], showEmptyEditors: false });
+            var container = setUp({ props: props }).container;
+            expect(container).toBeEmptyDOMElement();
+        });
+        it('should render special "empty" attribute if there are no values and showEmptyEditors is true', function () {
+            var props = __assign(__assign({}, defaultProps), { values: [], showEmptyEditors: true });
+            setUp({ props: props });
+            expect((0, react_2.within)(react_2.screen.getByTestId('reltio-edit-attribute')).getByRole('textbox')).toHaveValue('');
+        });
+        it('should render special "empty" attribute if there are no values and attribute are required', function () {
+            var attributeType = __assign(__assign({}, defaultAttributeType), { required: true });
+            var props = __assign(__assign({}, defaultProps), { attributeType: attributeType, values: [], showEmptyEditors: true });
+            setUp({ props: props });
+            expect((0, react_2.within)(react_2.screen.getByTestId('reltio-edit-attribute')).getByRole('textbox')).toHaveValue('');
+        });
+        it('should add 2 attributes on add one more button click for simple "empty" attribute', 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), { values: [], showEmptyEditors: true });
+                        user = setUp({ props: props }).user;
+                        return [4 /*yield*/, user.click(react_2.screen.getByTestId('reltio-add-one-more-simple-attribute-button'))];
+                    case 1:
+                        _a.sent();
+                        expect(props.onAddAttributes).toHaveBeenCalledWith([
+                            {
+                                attributeType: {
+                                    uri: 'configuration/entityTypes/HCP/attributes/Fruit',
+                                    type: 'String',
+                                    name: 'Fruit',
+                                    label: 'Fruit'
+                                },
+                                index: Infinity,
+                                parentUri: props.parentUri
+                            },
+                            {
+                                attributeType: props.attributeType,
+                                index: Infinity,
+                                parentUri: props.parentUri
+                            }
+                        ]);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should add 1 attribute on on add one more button click for Nested "empty" attribute', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var attributeType, props, user;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        attributeType = __assign(__assign({}, defaultAttributeType), { type: 'Nested' });
+                        props = __assign(__assign({}, defaultProps), { attributeType: attributeType, values: [], showEmptyEditors: true });
+                        user = setUp({ props: props }).user;
+                        return [4 /*yield*/, user.click(react_2.screen.getByText('Create attribute'))];
+                    case 1:
+                        _a.sent();
+                        expect(props.onAddAttributes).toHaveBeenCalledWith([
+                            {
+                                parentUri: props.parentUri,
+                                index: Infinity,
+                                attributeType: props.attributeType
+                            }
+                        ]);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should return null if there are no values, showEmptyEditors is true but delete operation was performed', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var props, _a, user, container;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        props = __assign(__assign({}, defaultProps), { values: [], showEmptyEditors: true });
+                        _a = setUp({ props: props }), user = _a.user, container = _a.container;
+                        return [4 /*yield*/, user.click(react_2.screen.getByTestId('reltio-delete-simple-attribute-button'))];
+                    case 1:
+                        _b.sent();
+                        expect(container).toBeEmptyDOMElement();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should render special "empty" attribute if there are no values and attribute is pinned', function () {
+            var props = __assign(__assign({}, defaultProps), { values: [] });
+            var pinnedAttributesContextValue = [defaultAttributeType.uri];
+            setUp({ props: props, pinnedAttributesContextValue: pinnedAttributesContextValue });
+            expect((0, react_2.within)(react_2.screen.getByTestId('reltio-edit-attribute')).getByRole('textbox')).toHaveValue('');
+        });
+        it('should call onAddAttributes with correct params in case when values is not empty', 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(react_2.screen.getByTestId('reltio-add-one-more-simple-attribute-button'))];
+                    case 1:
+                        _a.sent();
+                        expect(defaultProps.onAddAttributes).toHaveBeenCalledWith([
+                            {
+                                attributeType: defaultProps.attributeType,
+                                index: Infinity,
+                                parentUri: defaultProps.parentUri
+                            }
+                        ]);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should render correct if one of the values is masked', function () {
+            var values = __spreadArray(__spreadArray([], defaultValues, true), [
+                {
+                    type: defaultAttributeType.uri,
+                    uri: 'entities/sIeHttl/attributes/Fruit/strawberry',
+                    value: 'strawberry',
+                    ov: true,
+                    masked: true
+                }
+            ], false);
+            var props = __assign(__assign({}, defaultProps), { values: values });
+            setUp({ props: props });
+            var attributes = react_2.screen.getAllByTestId('reltio-edit-attribute');
+            expect((0, react_2.within)(attributes[4]).queryByRole('textbox')).not.toBeInTheDocument();
+            (0, react_2.within)(attributes[4]).getByText('strawberry');
+        });
+        it('should not allow to add more values in edit mode if cardinality max value is one', function () {
+            var props = __assign(__assign({}, defaultProps), { values: [], showEmptyEditors: true, attributeType: __assign(__assign({}, defaultAttributeType), { cardinality: { maxValue: 1, minValue: 0 } }) });
+            setUp({ props: props });
+            expect(react_2.screen.queryByTestId('reltio-add-one-more-simple-attribute-button')).not.toBeInTheDocument();
+        });
+        it('should allow to add more values in edit mode if cardinality max value is more than one', function () {
+            var props = __assign(__assign({}, defaultProps), { values: [], showEmptyEditors: true, attributeType: __assign(__assign({}, defaultAttributeType), { cardinality: { maxValue: 2, minValue: 1 } }) });
+            setUp({ props: props });
+            react_2.screen.getByTestId('reltio-add-one-more-simple-attribute-button');
+        });
+        it('should highlight error if it have same parent uri, empty uri, and attribute type uri', function () {
             var fullError = {
                 type: 'invalid',
-                attributeTypeUri: attributeType.uri,
+                name: '',
+                attributeTypeUri: defaultAttributeType.uri,
                 parentUri: defaultProps.parentUri,
-                uri: 'entities/sIeHttl/attributes/Address/edEosww/AddressType/uri$$1627902448724',
+                uri: undefined,
                 source: 'validationService',
                 severity: 'ERROR'
             };
+            var highlightError = jest.fn();
+            var scrollIntoRef = jest.fn();
             var Providers = function (_a) {
                 var children = _a.children;
-                return (react_1.default.createElement(ScrollToElementContext_1.ScrollToElementContext.Provider, { value: {
-                        element: fullError,
-                        highlightError: jest.fn(),
-                        scrollIntoRef: jest.fn(),
-                        type: ScrollToElementContext_1.ScrollType.Error
-                    } }, children));
+                return (react_1.default.createElement(ScrollToElementContext_1.ScrollToElementContext.Provider, { value: { element: fullError, highlightError: highlightError, scrollIntoRef: scrollIntoRef, type: ScrollToElementContext_1.ScrollType.Error } }, children));
             };
-            var component = setUp({ CustomProviders: Providers });
-            expect(component.find(AttributeRenderer_1.AttributeRenderer).prop('highlightedError')).toBe(null);
+            setUp({ CustomProviders: Providers });
+            expect(scrollIntoRef).toHaveBeenCalled();
         });
-    });
-    describe('SpecialRenderer behavior', function () {
-        var attributeType = {
-            type: mdm_sdk_1.DataTypes.TYPE_ACTIVENESS_DATE,
-            label: 'Start date',
-            uri: 'startDate',
-            name: 'activeness.startDate',
-            defaultValue: null,
-            singleValue: true,
-            faceted: true
-        };
-        it('should render SpecialRenderer for special attributes', function () {
-            var values = [1];
-            var props = __assign(__assign({}, defaultProps), { attributeType: attributeType, values: values, showEmptyEditors: true });
-            var component = setUp({ props: props });
-            var decorator = component.find(BranchDecorator_1.BranchDecorator);
-            expect(decorator).toHaveLength(1);
-            expect(decorator.prop('enabled')).toBeFalsy();
-            var attribute = decorator.find(SpecialRenderer_1.SpecialRenderer);
-            expect(attribute).toHaveLength(1);
-            expect(attribute.props()).toMatchObject(props);
-            expect(decorator.find(AttributeTitle_1.AttributeTitle)).toHaveLength(0);
-        });
-        it('should set enabled BranchDecorator prop as true when drawLines is true', function () {
-            var props = __assign(__assign({}, defaultProps), { attributeType: attributeType, drawLines: true });
-            var component = setUp({ props: props });
-            var decorator = component.find(BranchDecorator_1.BranchDecorator);
-            expect(decorator).toHaveLength(1);
-            expect(decorator.prop('enabled')).toBe(true);
-            expect(decorator.find(SpecialRenderer_1.SpecialRenderer)).toHaveLength(1);
+        it('should not highlight error if it have uri', function () {
+            var fullError = {
+                type: 'invalid',
+                name: '',
+                attributeTypeUri: defaultAttributeType.uri,
+                parentUri: defaultProps.parentUri,
+                uri: 'entities/sIeHttl/attributes/Address/edEosww/AddressType/uri$$1627902448724',
+                source: 'validationService',
+                severity: 'ERROR'
+            };
+            var highlightError = jest.fn();
+            var scrollIntoRef = jest.fn();
+            var Providers = function (_a) {
+                var children = _a.children;
+                return (react_1.default.createElement(ScrollToElementContext_1.ScrollToElementContext.Provider, { value: { element: fullError, highlightError: highlightError, scrollIntoRef: scrollIntoRef, type: ScrollToElementContext_1.ScrollType.Error } }, children));
+            };
+            setUp({ CustomProviders: Providers });
+            expect(scrollIntoRef).not.toHaveBeenCalled();
         });
     });
-    describe('ImageLineRenderer behavior', function () {
-        var attributeType = {
+    describe('image line attribute renderer', function () {
+        var defaultAttributeType = {
             type: mdm_sdk_1.DataTypes.TYPE_IMAGE,
             label: 'Image',
+            name: 'ImageGallery',
             uri: 'configuration/entityTypes/HCP/attributes/ImageGallery'
         };
-        it('should render ImageLineRenderer for image attributes', function () {
-            var values = [1];
-            var props = __assign(__assign({}, defaultProps), { attributeType: attributeType, values: values, showNonOv: false, paging: {}, requestNextPageOfAttributeValues: jest.fn() });
-            var component = setUp({ props: props });
-            var decorator = component.find(BranchDecorator_1.BranchDecorator);
-            expect(decorator).toHaveLength(1);
-            expect(decorator.prop('enabled')).toBeFalsy();
-            var attribute = decorator.find(ImageLineRenderer_1.ImageLineRenderer);
-            expect(attribute).toHaveLength(1);
-            expect(attribute.props()).toMatchObject({
-                attributeType: attributeType,
-                attributeValues: values,
-                parentUri: defaultProps.parentUri,
-                onChangeAttribute: defaultProps.onChangeAttribute,
-                showNonOv: false,
-                paging: {},
-                requestNextPageOfAttributeValues: expect.any(Function)
+        var defaultValues = [
+            {
+                label: '',
+                value: {
+                    Width: [
+                        {
+                            type: 'configuration/entityTypes/HCP/attributes/ImageGallery/attributes/Width',
+                            value: '200',
+                            uri: 'entities/sIeHttl/attributes/ImageGallery/1IozCV9I/Width/1IozCuiq'
+                        }
+                    ],
+                    Height: [
+                        {
+                            type: 'configuration/entityTypes/HCP/attributes/ImageGallery/attributes/Height',
+                            value: '300',
+                            uri: 'entities/sIeHttl/attributes/ImageGallery/1IozCV9I/Height/1IozCyz6'
+                        }
+                    ],
+                    CdnUrlThumbnail: [
+                        {
+                            type: 'configuration/entityTypes/HCP/attributes/ImageGallery/attributes/CdnUrlThumbnail',
+                            value: 'https://reltio.com/image.png',
+                            uri: 'entities/sIeHttl/attributes/ImageGallery/1IozCV9I/CdnUrlThumbnail/1IozCqSa'
+                        }
+                    ]
+                },
+                uri: 'entities/sIeHttl/attributes/ImageGallery/1IozCV9I'
+            }
+        ];
+        var defaultImageLineAttributeProps = __assign(__assign({}, defaultProps), { attributeType: defaultAttributeType, values: defaultValues });
+        it('should render title correctly', function () {
+            setUp({ props: defaultImageLineAttributeProps });
+            var title = react_2.screen.getByTestId('reltio-attribute-label');
+            expect(title).toHaveTextContent('Image');
+            expect(title).not.toHaveTextContent('*');
+        });
+        it('should render title correctly if attribute type is required', function () {
+            var attributeType = __assign(__assign({}, defaultAttributeType), { required: true });
+            var props = __assign(__assign({}, defaultImageLineAttributeProps), { attributeType: attributeType });
+            setUp({ props: props });
+            var title = react_2.screen.getByTestId('reltio-attribute-label');
+            expect(title).toHaveTextContent('Image');
+            expect(title).toHaveTextContent('*');
+        });
+        it('should render description correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var attributeType, props, user;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        attributeType = __assign(__assign({}, defaultAttributeType), { description: 'Image description' });
+                        props = __assign(__assign({}, defaultImageLineAttributeProps), { attributeType: attributeType });
+                        user = setUp({ props: props }).user;
+                        expect(react_2.screen.queryByRole('tooltip')).not.toBeInTheDocument();
+                        return [4 /*yield*/, user.hover(react_2.screen.getByTestId('reltio-description-icon'))];
+                    case 1:
+                        _a.sent();
+                        react_2.screen.getByText('Image description');
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should not render description if attribute does not have it', function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                setUp({ props: defaultImageLineAttributeProps });
+                expect(react_2.screen.queryByTestId('reltio-description-icon')).not.toBeInTheDocument();
+                return [2 /*return*/];
             });
+        }); });
+        it('should render attribute values correctly', function () {
+            setUp({ props: defaultImageLineAttributeProps });
+            var imageLine = react_2.screen.getByTestId('image-line-edit-mode');
+            resizeObserver.mockElementSize(imageLine, { contentBoxSize: { inlineSize: 1000 } });
+            (0, react_2.act)(function () {
+                resizeObserver.resize();
+            });
+            react_2.screen.getByTestId('reltio-upload-image-button');
+            var attributeValues = react_2.screen.getAllByTestId('reltio-attribute-value');
+            expect(attributeValues).toHaveLength(2);
+            expect(attributeValues[0]).toHaveAttribute('src', 'https://reltio.com/image.png');
+            (0, react_2.within)(attributeValues[1]).getByTestId('SvgDefaultImage');
+        });
+    });
+    describe('special attribute renderer', function () {
+        it('should render Roles component for roles', function () {
+            var attributeType = mdm_sdk_1.EntityAttrTypes.roles;
+            var props = __assign(__assign({}, defaultProps), { attributeType: attributeType, values: ['configuration/roles/OfficeStaff'] });
+            setUp({ props: props });
+            expect(react_2.screen.getByTestId('reltio-attribute-label')).toHaveTextContent(attributeType.label);
+            expect(react_2.screen.getAllByTestId('reltio-attribute-value')).toHaveLength(1);
+            expect(react_2.screen.getByRole('combobox')).toBeInTheDocument();
+            expect(react_2.screen.getByText('Office Staff')).toBeInTheDocument();
         });
-        it('should set enabled BranchDecorator prop as true when drawLines is true', function () {
-            var props = __assign(__assign({}, defaultProps), { attributeType: attributeType, drawLines: true });
-            var component = setUp({ props: props });
-            var decorator = component.find(BranchDecorator_1.BranchDecorator);
-            expect(decorator).toHaveLength(1);
-            expect(decorator.prop('enabled')).toBe(true);
-            expect(decorator.find(ImageLineRenderer_1.ImageLineRenderer)).toHaveLength(1);
+        it('should render Tags component for tags and special icon before title', function () {
+            var attributeType = mdm_sdk_1.EntityAttrTypes.tags;
+            var props = __assign(__assign({}, defaultProps), { attributeType: attributeType, values: ['tag1'] });
+            setUp({ props: props });
+            expect(react_2.screen.getByTestId('reltio-attribute-label')).toHaveTextContent(attributeType.label);
+            expect(react_2.screen.getAllByTestId('reltio-attribute-value')).toHaveLength(1);
+            expect(react_2.screen.getByRole('textbox')).toBeInTheDocument();
+            expect(react_2.screen.getByText('tag1')).toBeInTheDocument();
+        });
+        it('should render empty Tags', function () {
+            var attributeType = mdm_sdk_1.EntityAttrTypes.tags;
+            var props = __assign(__assign({}, defaultProps), { attributeType: attributeType, values: [] });
+            setUp({ props: props });
+            expect(react_2.screen.getByTestId('reltio-attribute-label')).toHaveTextContent(attributeType.label);
+            expect(react_2.screen.getAllByTestId('reltio-attribute-value')).toHaveLength(1);
+            expect(react_2.screen.getByRole('textbox')).toBeInTheDocument();
+        });
+        it('should render Attribute component for activeness attributes', function () {
+            var attributeType = mdm_sdk_1.EntityAttrTypes.endDate;
+            var props = __assign(__assign({}, defaultProps), { attributeType: attributeType, values: [1690891216477] });
+            setUp({ props: props });
+            expect(react_2.screen.getByTestId('reltio-attribute-label')).toHaveTextContent(attributeType.label);
+            expect(react_2.screen.getAllByTestId('reltio-attribute-value')).toHaveLength(1);
+            expect(react_2.screen.getByRole('textbox')).toHaveValue('08/01/2023');
+        });
+        it('should return null if there are no activeness values and showEmptyEditors is falsy', function () {
+            var props = __assign(__assign({}, defaultProps), { attributeType: mdm_sdk_1.EntityAttrTypes.endDate, values: [] });
+            var container = setUp({ props: props }).container;
+            expect(container).toBeEmptyDOMElement();
+        });
+        it('should render special "empty" activeness attribute if values empty and showEmptyEditors is true', function () {
+            var attributeType = mdm_sdk_1.EntityAttrTypes.endDate;
+            var props = __assign(__assign({}, defaultProps), { attributeType: attributeType, values: [], showEmptyEditors: true });
+            setUp({ props: props });
+            expect(react_2.screen.getByTestId('reltio-attribute-label')).toHaveTextContent(attributeType.label);
+            expect(react_2.screen.getAllByTestId('reltio-attribute-value')).toHaveLength(1);
+            expect(react_2.screen.getByRole('textbox')).toHaveValue('');
+        });
+        it('should render null if values empty, showEmptyEditors is true but delete operation was performed', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var props, _a, user, container;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        props = __assign(__assign({}, defaultProps), { attributeType: mdm_sdk_1.EntityAttrTypes.endDate, values: [], showEmptyEditors: true });
+                        _a = setUp({ props: props }), user = _a.user, container = _a.container;
+                        expect(container).not.toBeEmptyDOMElement();
+                        return [4 /*yield*/, user.click(react_2.screen.getByTestId('reltio-delete-simple-attribute-button'))];
+                    case 1:
+                        _b.sent();
+                        expect(container).toBeEmptyDOMElement();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should call HasDeletionsContext.Provider.value.setHasDeletions on delete operation if context is defined', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var props, contextValue, CustomProviders, _a, container, user;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        props = __assign(__assign({}, defaultProps), { attributeType: mdm_sdk_1.EntityAttrTypes.endDate, values: [], showEmptyEditors: true });
+                        contextValue = { setHasDeletions: jest.fn(), hasDeletionsMap: {} };
+                        CustomProviders = function (_a) {
+                            var children = _a.children;
+                            return (react_1.default.createElement(HasDeletionsContext_1.HasDeletionsContext.Provider, { value: contextValue }, children));
+                        };
+                        _a = setUp({ props: props, CustomProviders: CustomProviders }), container = _a.container, user = _a.user;
+                        return [4 /*yield*/, user.click(react_2.screen.getByTestId('reltio-delete-simple-attribute-button'))];
+                    case 1:
+                        _b.sent();
+                        expect(react_2.screen.getAllByTestId('reltio-attribute-value')).toHaveLength(1);
+                        expect(contextValue.setHasDeletions).toHaveBeenCalledWith(props.attributeType.uri, true);
+                        expect(container).not.toBeEmptyDOMElement();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should not crash without context provider and use internal state for hasDeletions', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var attributeType, props, _a, user, container;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        attributeType = mdm_sdk_1.EntityAttrTypes.endDate;
+                        props = __assign(__assign({}, defaultProps), { attributeType: attributeType, values: [], showEmptyEditors: true });
+                        _a = setUp({ props: props }), user = _a.user, container = _a.container;
+                        expect(container).not.toBeEmptyDOMElement();
+                        return [4 /*yield*/, user.click(react_2.screen.getByTestId('reltio-delete-simple-attribute-button'))];
+                    case 1:
+                        _b.sent();
+                        expect(react_2.screen.queryAllByTestId('reltio-attribute-value')).toHaveLength(0);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should pass additional params to attribute component', function () {
+            var attributeType = mdm_sdk_1.EntityAttrTypes.endDate;
+            var additionalControlsRenderer = function () { return react_1.default.createElement("div", { "data-reltio-id": "additional-controls" }); };
+            var props = __assign(__assign({}, defaultProps), { attributeType: attributeType, values: [1690891216477], additionalControlsRenderer: additionalControlsRenderer });
+            setUp({ props: props });
+            expect(react_2.screen.getByTestId('reltio-attribute-label')).toHaveTextContent(attributeType.label);
+            expect(react_2.screen.getAllByTestId('reltio-attribute-value')).toHaveLength(1);
+            expect(react_2.screen.getByTestId('additional-controls')).toBeInTheDocument();
         });
     });
-    describe('Errors behaviour', function () {
-        var errors = [
-            {
-                parentUri: defaultProps.parentUri,
-                uri: values[0].uri,
-                attributeTypeUri: attributeType.uri,
-                message: 'Attribute is invalid',
-                type: 'invalid'
-            },
-            {
-                parentUri: defaultProps.parentUri,
-                uri: values[1].uri,
-                attributeTypeUri: attributeType.uri,
-                message: 'Attribute is invalid',
-                type: 'invalid',
-                deactivated: true
-            },
-            {
-                parentUri: 'entities/sIeHttl_another',
-                uri: 'entities/sIeHttl_another/attributes/Simple/u123',
-                attributeTypeUri: attributeType.uri,
-                message: 'Attribute is invalid',
-                type: 'invalid'
-            },
-            {
-                parentUri: defaultProps.parentUri,
-                uri: values[0].uri,
-                attributeTypeUri: 'configuration/entityTypes/HCP/attributes/Simple2',
-                message: 'Attribute is invalid',
-                type: 'invalid'
-            },
-            {
-                parentUri: defaultProps.parentUri,
-                uri: '',
-                attributeTypeUri: attributeType.uri,
-                message: 'Attribute is required',
-                type: 'missed'
-            },
-            {
-                parentUri: defaultProps.parentUri,
-                uri: '',
-                attributeTypeUri: attributeType.uri,
-                message: 'Cardinality error',
-                type: 'invalid',
-                severity: mdm_sdk_1.ErrorSeverity.ERROR
-            },
-            {
-                parentUri: defaultProps.parentUri,
-                uri: values[0].uri,
-                attributeTypeUri: attributeType.uri,
-                message: 'Attribute is invalid',
-                type: 'invalid',
-                severity: mdm_sdk_1.ErrorSeverity.WARNING
-            }
-        ];
-        it('should filter active errors correctly', function () {
-            var mdmValues = __assign(__assign({}, defaultMdmValues), { profileErrors: errors });
-            var component = setUp({ mdmValues: mdmValues });
-            var attribute = component.find(AttributeRenderer_1.AttributeRenderer);
-            expect(attribute.prop('errors')).toEqual([errors[0], errors[4], errors[5]]);
+    describe('errors', function () {
+        it('should render error message correctly', function () {
+            var profileErrors = [
+                {
+                    type: mdm_sdk_1.ErrorType.invalid,
+                    uri: '',
+                    attributeTypeUri: 'configuration/entityTypes/HCP/attributes/Fruit',
+                    parentUri: 'entities/sIeHttl',
+                    message: 'Attribute is invalid',
+                    source: mdm_sdk_1.ErrorSource.local,
+                    path: []
+                }
+            ];
+            var mdmValues = __assign(__assign({}, defaultMdmValues), { profileErrors: profileErrors });
+            var props = __assign(__assign({}, defaultProps), { values: [defaultValues[0]] });
+            setUp({ props: props, mdmValues: mdmValues });
+            var attribute = react_2.screen.getByTestId('reltio-edit-attribute');
+            expect((0, react_2.within)(attribute).queryByText('Attribute is invalid')).not.toBeInTheDocument();
+            react_2.screen.getByText('Attribute is invalid');
+        });
+        it('should render active error correctly', function () {
+            var profileErrors = [
+                {
+                    type: mdm_sdk_1.ErrorType.missed,
+                    uri: '',
+                    attributeTypeUri: 'configuration/entityTypes/HCP/attributes/Fruit',
+                    parentUri: 'entities/sIeHttl',
+                    message: 'Attribute is required',
+                    source: mdm_sdk_1.ErrorSource.local,
+                    path: []
+                }
+            ];
+            var attributeType = __assign(__assign({}, defaultAttributeType), { required: true });
+            var mdmValues = __assign(__assign({}, defaultMdmValues), { profileErrors: profileErrors });
+            var props = __assign(__assign({}, defaultProps), { attributeType: attributeType, values: [] });
+            setUp({ props: props, mdmValues: mdmValues });
+            var attribute = react_2.screen.getByTestId('reltio-edit-attribute');
+            (0, react_2.within)(attribute).getByText('Attribute is required');
         });
-        it('should get message of corresponding (to current type) active not "missed" error without uri correctly', function () {
-            var mdmValues = __assign(__assign({}, defaultMdmValues), { profileErrors: errors });
-            var component = setUp({ mdmValues: mdmValues });
-            var attribute = component.find(AttributeRenderer_1.AttributeRenderer);
-            expect(attribute.prop('errorMessage')).toBe('Cardinality error');
+        it('should not render active error if attribute is hidden', function () {
+            var _a;
+            var profileErrors = [
+                {
+                    type: mdm_sdk_1.ErrorType.missed,
+                    uri: '',
+                    attributeTypeUri: 'configuration/entityTypes/HCP/attributes/Fruit',
+                    parentUri: 'entities/sIeHttl',
+                    message: 'Attribute is required',
+                    source: mdm_sdk_1.ErrorSource.local,
+                    path: []
+                }
+            ];
+            var mdmValues = __assign(__assign({}, defaultMdmValues), { profileErrors: profileErrors });
+            var hiddenAttributesContextValue = (_a = {},
+                _a[defaultProps.parentUri] = ['configuration/entityTypes/HCP/attributes/Fruit'],
+                _a);
+            setUp({ mdmValues: mdmValues, hiddenAttributesContextValue: hiddenAttributesContextValue });
+            expect(react_2.screen.queryByText('Attribute is required')).not.toBeInTheDocument();
         });
     });
 });