@reltio/components 1.4.2070 → 1.4.2071

package/cjs/ReactSelectMenuWithPopper/ReactSelectMenuWithPopper.test.js

@@ -1,128 +1,82 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
-var enzyme_1 = require("enzyme");
-var Popper_1 = __importDefault(require("@mui/material/Popper"));
-var Paper_1 = __importDefault(require("@mui/material/Paper"));
+var react_2 = require("@testing-library/react");
 var PopupBoundariesContext_1 = require("../contexts/PopupBoundariesContext");
 var ReactSelectMenuWithPopper_1 = require("./ReactSelectMenuWithPopper");
-describe('ReactSelectMenuWithPopper tests', function () {
-    var getPopper = function (component) { return component.find(Popper_1.default); };
-    it('should provide preventOverflow modifier for Popper only when PopupBoundariesContext is defined', function () {
-        var testInputRef = { current: {} };
-        var testInnerRef = { current: {} };
-        var component = (0, enzyme_1.mount)(react_1.default.createElement(ReactSelectMenuWithPopper_1.ReactSelectMenuWithPopper, { selectProps: {
-                inputRef: testInputRef,
-                inputValue: '',
-                menuIsOpen: true
-            }, innerRef: testInnerRef, innerProps: {} },
-            react_1.default.createElement("div", null)));
-        expect(getPopper(component).prop('modifiers')).toEqual([
-            {
-                enabled: true,
-                name: 'preventOverflow',
-                options: {
-                    altAxis: true,
-                    altBoundary: true,
-                    tether: false,
-                    boundary: document.body,
-                    padding: 5
-                }
-            }
-        ]);
-        var textContext = { element: react_1.default.createElement("div", null), priority: ['top'] };
-        var componentWithContext = (0, enzyme_1.mount)(react_1.default.createElement(PopupBoundariesContext_1.PopupBoundariesContext.Provider, { value: textContext },
-            react_1.default.createElement(ReactSelectMenuWithPopper_1.ReactSelectMenuWithPopper, { selectProps: {
-                    inputRef: testInputRef,
-                    inputValue: '',
-                    menuIsOpen: true
-                }, innerRef: testInnerRef, innerProps: {} },
-                react_1.default.createElement("div", null))));
-        expect(getPopper(componentWithContext).prop('modifiers')).toEqual([
-            {
-                enabled: true,
-                name: 'preventOverflow',
-                options: {
-                    altAxis: true,
-                    altBoundary: true,
-                    tether: false,
-                    boundary: textContext.element,
-                    padding: 5
-                }
-            }
-        ]);
+var setUp = function (_a) {
+    var props = _a.props, _b = _a.popupBoundariesContextValue, popupBoundariesContextValue = _b === void 0 ? null : _b;
+    var Providers = function (_a) {
+        var children = _a.children;
+        return (react_1.default.createElement(PopupBoundariesContext_1.PopupBoundariesContext.Provider, { value: popupBoundariesContextValue }, children));
+    };
+    return (0, react_2.render)(react_1.default.createElement(ReactSelectMenuWithPopper_1.ReactSelectMenuWithPopper, __assign({}, props)), { wrapper: Providers });
+};
+describe('React select menu with popper tests', function () {
+    var originalWindowInnerWidth;
+    beforeAll(function () {
+        originalWindowInnerWidth = window.innerWidth;
+    });
+    afterEach(function () {
+        window.innerWidth = originalWindowInnerWidth;
+    });
+    it('should set paper minWidth as input width and maxWidth as boundaries element width', function () {
+        var inputEl = document.createElement('input');
+        var boundariesEl = document.createElement('div');
+        Object.defineProperty(inputEl, 'clientWidth', { value: 200 });
+        Object.defineProperty(boundariesEl, 'clientWidth', { value: 400 });
+        Object.defineProperty(window, 'innerWidth', { value: 500 });
+        var props = {
+            innerRef: react_1.default.createRef(),
+            selectProps: { inputRef: { current: inputEl }, inputValue: '', menuIsOpen: true },
+            innerProps: {},
+            children: ['Children']
+        };
+        var popupBoundariesContextValue = { element: boundariesEl };
+        setUp({ props: props, popupBoundariesContextValue: popupBoundariesContextValue });
+        expect(react_2.screen.getByText('Children')).toHaveStyle({ minWidth: '200px', maxWidth: '400px' });
+    });
+    it('should set paper minWidth as window.innerWidth if there is no boundaries element', function () {
+        var inputEl = document.createElement('input');
+        Object.defineProperty(inputEl, 'clientWidth', { value: 200 });
+        Object.defineProperty(window, 'innerWidth', { value: 500 });
+        var props = {
+            innerRef: react_1.default.createRef(),
+            selectProps: { inputRef: { current: inputEl }, inputValue: '', menuIsOpen: true },
+            innerProps: {},
+            children: ['Children']
+        };
+        setUp({ props: props });
+        expect(react_2.screen.getByText('Children')).toHaveStyle({ minWidth: '200px', maxWidth: '500px' });
     });
-    describe('minWidth/maxWidth behavior', function () {
-        var originalWindowInnerWidth;
-        beforeAll(function () {
-            originalWindowInnerWidth = window.innerWidth;
-        });
-        afterEach(function () {
-            window.innerWidth = originalWindowInnerWidth;
-        });
-        it('should set Paper props style.minWidth as input width and style.maxWidth as boundaries element width', function () {
-            var inputWidth = 200;
-            var boundariesElementWidth = 400;
-            var windowInnerWidth = 500;
-            window.innerWidth = windowInnerWidth;
-            var testInputRef = { current: { clientWidth: inputWidth } };
-            var boundariesElement = {
-                clientWidth: boundariesElementWidth
-            };
-            var component = (0, enzyme_1.mount)(react_1.default.createElement(PopupBoundariesContext_1.PopupBoundariesContext.Provider, { value: { element: boundariesElement } },
-                react_1.default.createElement(ReactSelectMenuWithPopper_1.ReactSelectMenuWithPopper, { selectProps: {
-                        inputRef: testInputRef,
-                        inputValue: '',
-                        menuIsOpen: true
-                    }, innerRef: { current: {} }, innerProps: {} },
-                    react_1.default.createElement("div", null))));
-            var paper = getPopper(component).find(Paper_1.default);
-            expect(paper.prop('style')).toEqual({
-                minWidth: inputWidth,
-                maxWidth: boundariesElementWidth
-            });
-        });
-        it('should set Paper props style.maxWidth as window.innerWidth if there is no boundaries element', function () {
-            var inputWidth = 200;
-            var windowInnerWidth = 500;
-            window.innerWidth = windowInnerWidth;
-            var testInputRef = { current: { clientWidth: inputWidth } };
-            var component = (0, enzyme_1.mount)(react_1.default.createElement(ReactSelectMenuWithPopper_1.ReactSelectMenuWithPopper, { selectProps: {
-                    inputRef: testInputRef,
-                    inputValue: '',
-                    menuIsOpen: true
-                }, innerRef: { current: {} }, innerProps: {} },
-                react_1.default.createElement("div", null)));
-            var paper = getPopper(component).find(Paper_1.default);
-            expect(paper.prop('style')).toEqual({
-                minWidth: inputWidth,
-                maxWidth: windowInnerWidth
-            });
-        });
-        it('should set Paper props style.minWidth as boundaries element width if it is smaller than input width', function () {
-            var inputWidth = 450;
-            var boundariesElementWidth = 400;
-            var windowInnerWidth = 500;
-            window.innerWidth = windowInnerWidth;
-            var testInputRef = { current: { clientWidth: inputWidth } };
-            var boundariesElement = {
-                clientWidth: boundariesElementWidth
-            };
-            var component = (0, enzyme_1.mount)(react_1.default.createElement(PopupBoundariesContext_1.PopupBoundariesContext.Provider, { value: { element: boundariesElement } },
-                react_1.default.createElement(ReactSelectMenuWithPopper_1.ReactSelectMenuWithPopper, { selectProps: {
-                        inputRef: testInputRef,
-                        inputValue: '',
-                        menuIsOpen: true
-                    }, innerRef: { current: {} }, innerProps: {} },
-                    react_1.default.createElement("div", null))));
-            var paper = getPopper(component).find(Paper_1.default);
-            expect(paper.prop('style')).toEqual({
-                minWidth: boundariesElementWidth,
-                maxWidth: boundariesElementWidth
-            });
-        });
+    it('should set paper minWidth as boundaries element width if it is smaller than input width', function () {
+        var inputEl = document.createElement('input');
+        var boundariesEl = document.createElement('div');
+        Object.defineProperty(inputEl, 'clientWidth', { value: 450 });
+        Object.defineProperty(boundariesEl, 'clientWidth', { value: 400 });
+        Object.defineProperty(window, 'innerWidth', { value: 500 });
+        var props = {
+            innerRef: react_1.default.createRef(),
+            selectProps: { inputRef: { current: inputEl }, inputValue: '', menuIsOpen: true },
+            innerProps: {},
+            children: ['Children']
+        };
+        var popupBoundariesContextValue = { element: boundariesEl };
+        setUp({ props: props, popupBoundariesContextValue: popupBoundariesContextValue });
+        expect(react_2.screen.getByText('Children')).toHaveStyle({ minWidth: '400px', maxWidth: '400px' });
     });
 });

package/cjs/ReadOnlyAttributeValuesBlock/ReadOnlyAttributeValuesBlock.test.js

@@ -1,76 +1,143 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
-var enzyme_1 = require("enzyme");
-var ReadOnlyAttributesFactory_1 = require("../ReadOnlyAttributesFactory");
-var ReadOnlyImageAttributesLine_1 = require("../ReadOnlyImageAttributesLine");
+var jsdom_testing_mocks_1 = require("jsdom-testing-mocks");
+var react_2 = require("@testing-library/react");
 var ReadOnlyAttributeValuesBlock_1 = __importDefault(require("./ReadOnlyAttributeValuesBlock"));
-describe('ReadOnlyAttributeValuesBlock test', function () {
-    var values = [
-        {
-            uri: 'entities/1/attributes/CountryCode/1',
-            type: 'configuration/entityTypes/HCP/attributes/CountryCode',
-            value: 'Italy',
-            lookupCode: 'IT',
-            ov: true
-        }
-    ];
-    var attributeType = {
-        uri: 'configuration/entityTypes/HCP',
-        label: 'HCP',
-        name: 'HCP',
-        type: 'String',
-        attributes: [
+describe('Read only attribute values block tests', function () {
+    var resizeObserver = (0, jsdom_testing_mocks_1.mockResizeObserver)();
+    it('should render read only attribute correctly', function () {
+        var values = [
             {
-                label: 'Country Code',
-                name: 'CountryCode',
-                type: 'String',
-                uri: 'configuration/entityTypes/HCP/attributes/CountryCode'
+                uri: 'entities/1/attributes/CountryCode/1',
+                type: 'configuration/entityTypes/HCP/attributes/CountryCode',
+                value: 'Italy',
+                lookupCode: 'IT',
+                ov: true
             }
-        ]
-    };
-    it('should render ReadOnlyAttribute', function () {
-        var props = { attributeType: attributeType, values: values };
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(ReadOnlyAttributeValuesBlock_1.default, __assign({}, props)));
-        var attributes = component.find(ReadOnlyAttributesFactory_1.ReadOnlyAttribute);
-        expect(attributes).toHaveLength(1);
+        ];
+        var attributeType = {
+            uri: 'configuration/entityTypes/HCP',
+            label: 'HCP',
+            name: 'HCP',
+            type: 'String',
+            attributes: [
+                {
+                    label: 'Country Code',
+                    name: 'CountryCode',
+                    type: 'String',
+                    uri: 'configuration/entityTypes/HCP/attributes/CountryCode'
+                }
+            ]
+        };
+        (0, react_2.render)(react_1.default.createElement(ReadOnlyAttributeValuesBlock_1.default, { attributeType: attributeType, values: values }));
+        react_2.screen.getByText('Italy (IT)');
     });
-    it('should render ReadOnlyImageAttributesLine', function () {
-        var props = {
-            attributeType: __assign(__assign({}, attributeType), { type: 'Image' }),
-            values: values
+    it('should render read only image attributes line', function () {
+        var attributeType = {
+            name: 'ImageGallery',
+            type: 'Image',
+            uri: 'configuration/entityTypes/Series/attributes/ImageGallery',
+            attributes: [
+                {
+                    name: 'Url',
+                    type: 'String',
+                    uri: 'configuration/entityTypes/Series/attributes/ImageGallery/attributes/Url'
+                },
+                {
+                    name: 'UrlThumbnail',
+                    type: 'String',
+                    uri: 'configuration/entityTypes/Series/attributes/ImageGallery/attributes/UrlThumbnail'
+                }
+            ]
         };
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(ReadOnlyAttributeValuesBlock_1.default, __assign({}, props)));
-        var attributes = component.find(ReadOnlyImageAttributesLine_1.ReadOnlyImageAttributesLine);
-        expect(attributes).toHaveLength(1);
+        var values = [
+            {
+                value: {
+                    Url: [
+                        {
+                            type: 'configuration/entityTypes/Series/attributes/ImageGallery/attributes/Url',
+                            ov: true,
+                            value: '/test.jpg',
+                            uri: 'entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZv/Url/39V5GWWMh'
+                        }
+                    ],
+                    UrlThumbnail: [
+                        {
+                            type: 'configuration/entityTypes/Series/attributes/ImageGallery/attributes/UrlThumbnail',
+                            ov: true,
+                            value: '/test.jpg',
+                            uri: 'entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZv/UrlThumbnail/39V5GWWMh'
+                        }
+                    ]
+                },
+                ov: true,
+                uri: 'entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZv'
+            }
+        ];
+        var container = (0, react_2.render)(react_1.default.createElement(ReadOnlyAttributeValuesBlock_1.default, { attributeType: attributeType, values: values })).container;
+        resizeObserver.mockElementSize(container.children[0], { contentBoxSize: { inlineSize: 600 } });
+        (0, react_2.act)(function () {
+            resizeObserver.resize();
+        });
+        expect(react_2.screen.getByRole('img')).toHaveAttribute('src', '/test.jpg');
     });
-    it('should forward "expanded", "LabelRenderer" and "RightContent" props to ReadOnlyAttribute', function () {
-        var props = {
-            attributeType: __assign(__assign({}, attributeType), { type: 'Nested' }),
-            values: values,
-            expanded: true,
-            LabelRenderer: function () { return react_1.default.createElement("span", null); },
-            RightContent: function () { return react_1.default.createElement("div", null); }
+    it('should render nested read only attribute correctly', function () {
+        var attributeType = {
+            type: 'Nested',
+            uri: 'configuration/entityTypes/HCP/attributes/NestedTest',
+            name: 'NestedTest',
+            label: 'Nested Test',
+            attributes: [
+                {
+                    uri: 'configuration/entityTypes/HCP/attributes/NestedTest/attributes/FirstName',
+                    name: 'FirstName',
+                    label: 'First Name',
+                    type: 'String'
+                },
+                {
+                    uri: 'configuration/entityTypes/HCP/attributes/NestedTest/attributes/LastName',
+                    name: 'LastName',
+                    label: 'Last Name',
+                    type: 'String'
+                }
+            ]
         };
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(ReadOnlyAttributeValuesBlock_1.default, __assign({}, props)));
-        var attributes = component.find(ReadOnlyAttributesFactory_1.ReadOnlyAttribute);
-        expect(attributes).toHaveLength(1);
-        expect(attributes.prop('expanded')).toBe(true);
-        expect(attributes.prop('LabelRenderer')).toBe(props.LabelRenderer);
-        expect(attributes.prop('RightContent')).toBe(props.RightContent);
+        var values = [
+            {
+                label: 'Nested test label 1',
+                value: {
+                    FirstName: [
+                        {
+                            value: 'Viktor',
+                            uri: 'entities/eNt1/attributes/NestedTest/gd42423/FirstName/8fBsP38A'
+                        }
+                    ]
+                },
+                uri: 'entities/eNt1/attributes/NestedTest/gd42423'
+            },
+            {
+                label: 'Nested test label 2',
+                value: {
+                    LastName: [
+                        {
+                            value: 'Ivanov',
+                            uri: 'entities/eNt1/attributes/NestedTest/ksApL29/LastName/o7BnD6mJ'
+                        }
+                    ]
+                },
+                uri: 'entities/eNt1/attributes/NestedTest/ksApL29'
+            }
+        ];
+        (0, react_2.render)(react_1.default.createElement(ReadOnlyAttributeValuesBlock_1.default, { expanded: true, attributeType: attributeType, values: values }));
+        react_2.screen.getByText('Nested test label 1');
+        react_2.screen.getByText('First Name');
+        react_2.screen.getByText('Viktor');
+        react_2.screen.getByText('Nested test label 2');
+        react_2.screen.getByText('Last Name');
+        react_2.screen.getByText('Ivanov');
     });
 });

package/cjs/ReadOnlyAttributesFactory/components/ReadOnlyAttribute/ReadOnlyAttribute.test.js

@@ -10,60 +10,195 @@ 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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
-var enzyme_1 = require("enzyme");
-var SimpleAttribute_1 = require("../../../SimpleAttribute");
-var NestedAttribute_1 = require("../../../NestedAttribute");
-var ReferenceAttribute_1 = require("../../../ReferenceAttribute");
+var react_2 = require("@testing-library/react");
+var MdmModuleContext_1 = require("../../../contexts/MdmModuleContext");
 var ReadOnlyAttribute_1 = require("./ReadOnlyAttribute");
-describe('ReadOnlyAttribute', function () {
-    it('should render Simple attribute', function () {
-        var props = {
-            attributeType: {
-                type: 'String'
-            },
-            attributeValue: {
-                uri: '123'
-            }
+var setUp = function (_a) {
+    var props = _a.props, _b = _a.mdmValues, mdmValues = _b === void 0 ? {} : _b;
+    var Providers = function (_a) {
+        var children = _a.children;
+        return react_1.default.createElement(MdmModuleContext_1.MdmModuleProvider, { values: mdmValues }, children);
+    };
+    return (0, react_2.render)(react_1.default.createElement(ReadOnlyAttribute_1.ReadOnlyAttribute, __assign({}, props)), { wrapper: Providers });
+};
+describe('Read only attribute tests', function () {
+    it('should render simple attribute correctly', function () {
+        var attributeType = {
+            type: 'String',
+            uri: 'configuration/entityTypes/HCP/attributes/FirstName',
+            name: 'FirstName',
+            label: 'First Name'
         };
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(ReadOnlyAttribute_1.ReadOnlyAttribute, __assign({}, props)));
-        expect(component.find(SimpleAttribute_1.SimpleAttribute).length).toBe(1);
-        expect(component.find(SimpleAttribute_1.SimpleAttribute).props()).toEqual(props);
-        expect(component.find(NestedAttribute_1.NestedAttribute).length).toBe(0);
-        expect(component.find(ReferenceAttribute_1.ReferenceAttribute).length).toBe(0);
-    });
-    it('should render Nested attribute', function () {
-        var props = {
-            attributeType: {
-                type: 'Nested'
-            },
-            attributeValue: {
-                uri: '123'
-            }
+        var attributeValue = {
+            value: 'some string',
+            uri: 'entities/eNt1/attributes/FirstName/gd42423'
         };
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(ReadOnlyAttribute_1.ReadOnlyAttribute, __assign({}, props)));
-        expect(component.find(SimpleAttribute_1.SimpleAttribute).length).toBe(0);
-        expect(component.find(ReferenceAttribute_1.ReferenceAttribute).length).toBe(0);
-        expect(component.find(NestedAttribute_1.NestedAttribute).length).toBe(1);
-        expect(component.find(NestedAttribute_1.NestedAttribute).props()).toEqual(props);
+        var props = { attributeValue: attributeValue, attributeType: attributeType };
+        setUp({ props: props });
+        react_2.screen.getByText('some string');
     });
-    it('should render Reference attribute', function () {
-        var props = {
-            attributeType: {
-                type: 'Reference'
+    it('should render nested attribute correctly', function () {
+        var attributeType = {
+            type: 'Nested',
+            uri: 'configuration/entityTypes/HCP/attributes/NestedTest',
+            name: 'NestedTest',
+            label: 'Nested Test',
+            attributes: [
+                {
+                    uri: 'configuration/entityTypes/HCP/attributes/NestedTest/attributes/FirstName',
+                    name: 'FirstName',
+                    label: 'First Name',
+                    type: 'String'
+                }
+            ]
+        };
+        var attributeValue = {
+            label: 'Nested test label',
+            value: {
+                FirstName: [
+                    {
+                        value: 'some string',
+                        uri: 'entities/eNt1/attributes/NestedTest/gd42423/FirstName/8fBsP38A'
+                    }
+                ]
             },
-            attributeValue: {
-                uri: '123'
-            }
+            uri: 'entities/eNt1/attributes/NestedTest/gd42423'
         };
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(ReadOnlyAttribute_1.ReadOnlyAttribute, __assign({}, props)));
-        expect(component.find(SimpleAttribute_1.SimpleAttribute).length).toBe(0);
-        expect(component.find(NestedAttribute_1.NestedAttribute).length).toBe(0);
-        expect(component.find(ReferenceAttribute_1.ReferenceAttribute).length).toBe(1);
-        expect(component.find(ReferenceAttribute_1.ReferenceAttribute).props()).toEqual(props);
+        var props = { attributeValue: attributeValue, attributeType: attributeType, expanded: true };
+        setUp({ props: props });
+        react_2.screen.getByText('Nested test label');
+        react_2.screen.getByText('First Name');
+        react_2.screen.getByText('some string');
     });
+    it('should render reference attribute correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var attributeType, attributeValue, metadata, props, mdmValues;
+        return __generator(this, function (_a) {
+            attributeType = {
+                label: 'Address',
+                name: 'Address',
+                type: 'Reference',
+                referencedAttributeURIs: [
+                    'configuration/relationTypes/HasAddress/attributes/AddressType',
+                    'configuration/entityTypes/Location/attributes/AddressLine1'
+                ],
+                uri: 'configuration/entityTypes/HCO/attributes/Address'
+            };
+            attributeValue = {
+                label: 'Reference Address',
+                relationshipLabel: 'Relationship label',
+                refEntity: {
+                    objectURI: 'entities/2EpaVt0k',
+                    type: 'configuration/entityTypes/Location',
+                    crosswalks: []
+                },
+                refRelation: {
+                    objectURI: 'relations/1GrMXM4O',
+                    type: 'configuration/relationTypes/HasAddress',
+                    crosswalks: []
+                },
+                uri: 'entities/2Vek4DnE/attributes/Address/1GrMXM4O',
+                value: {
+                    AddressLine1: [
+                        {
+                            ov: true,
+                            type: 'configuration/entityTypes/Location/attributes/AddressLine1',
+                            uri: 'entities/2Vek4DnE/attributes/Address/1GrMXM4O/AddressLine1/2GcBL4K00',
+                            value: 'Lenina street'
+                        }
+                    ],
+                    AddressType: [
+                        {
+                            type: 'configuration/relationTypes/HasAddress/attributes/AddressType',
+                            uri: 'entities/2Vek4DnE/attributes/Address/1GrMXM4O/AddressType/15sHPBU8',
+                            value: 'Office',
+                            ov: 'true'
+                        }
+                    ]
+                }
+            };
+            metadata = {
+                entityTypes: [
+                    {
+                        uri: 'configuration/entityTypes/HCO',
+                        attributes: [attributeType]
+                    },
+                    {
+                        uri: 'configuration/entityTypes/Location',
+                        attributes: [
+                            {
+                                label: 'Address Line 1',
+                                name: 'AddressLine1',
+                                type: 'String',
+                                uri: 'configuration/entityTypes/Location/attributes/AddressLine1'
+                            }
+                        ]
+                    }
+                ],
+                relationTypes: [
+                    {
+                        uri: 'configuration/relationTypes/HasAddress',
+                        attributes: [
+                            {
+                                label: 'Address Type',
+                                name: 'AddressType',
+                                type: 'String',
+                                uri: 'configuration/relationTypes/HasAddress/attributes/AddressType'
+                            }
+                        ]
+                    }
+                ]
+            };
+            props = { attributeValue: attributeValue, attributeType: attributeType, expanded: true };
+            mdmValues = { metadata: metadata };
+            setUp({ props: props, mdmValues: mdmValues });
+            react_2.screen.getByText('Reference Address');
+            react_2.screen.getByText('Relationship label');
+            react_2.screen.getByText('Address Type');
+            react_2.screen.getByText('Office');
+            react_2.screen.getByText('Address Line 1');
+            react_2.screen.getByText('Lenina street');
+            return [2 /*return*/];
+        });
+    }); });
 });