@reltio/components 1.4.2070 → 1.4.2072

package/ReadOnlyComplexAttribute/ReadOnlyComplexAttribute.test.js

@@ -9,256 +9,247 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 import React from 'react';
-import { shallow, mount } from 'enzyme';
-import { act } from 'react-dom/test-utils';
-import { CollaborationObjectTypes, CrosswalksAttrTypes } from '@reltio/mdm-sdk';
-import Typography from '@mui/material/Typography';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { CrosswalksAttrTypes } from '@reltio/mdm-sdk';
 import { ReadOnlyComplexAttribute } from './ReadOnlyComplexAttribute';
-import { ReadOnlyAttributesList } from '../ReadOnlyAttributesList';
-import { ArrowExpandButton } from '../ArrowExpandButton';
 import { nestedAttributeType } from './nestedAttrType.test-data';
 import { nestedAttributeValue } from './nestedAttrValue.test-data';
-import { COMMENTS_CONTAINER_VISIBILITY_AREA } from '../constants/classnames';
-import { CommentsContainer } from '../CommentsContainer';
 import { HighlightedValuesContext } from '../contexts/HighlightedValuesContext';
-describe('ReadOnlyComplexAttribute', function () {
-    var findExpandButton = function (component) { return component.find(ArrowExpandButton); };
-    var findLabel = function (component) { return component.find(Typography); };
-    var defaultProps = {
-        label: 'ComplexAttribute Label',
-        attributeType: nestedAttributeType,
-        attributeValue: nestedAttributeValue,
-        attributeTypesList: nestedAttributeType.attributes
+import { CollaborationContext } from '../contexts/CollaborationContext';
+var collaboration = { commentsMap: {} };
+var defaultHighlightedValues = {
+    highlightedValuesUris: [],
+    highlightedClassName: ''
+};
+var defaultProps = {
+    label: 'Complex attribute label',
+    attributeType: nestedAttributeType,
+    attributeValue: nestedAttributeValue,
+    attributeTypesList: nestedAttributeType.attributes
+};
+var setUp = function (_a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.props, props = _c === void 0 ? defaultProps : _c, _d = _b.highlightedValues, highlightedValues = _d === void 0 ? defaultHighlightedValues : _d;
+    var user = userEvent.setup();
+    var Providers = function (_a) {
+        var children = _a.children;
+        return (React.createElement(HighlightedValuesContext.Provider, { value: highlightedValues },
+            React.createElement(CollaborationContext.Provider, { value: collaboration }, children)));
     };
+    return __assign(__assign({}, render(React.createElement(ReadOnlyComplexAttribute, __assign({}, props)), { wrapper: Providers })), { user: user });
+};
+describe('read only complex attribute tests', function () {
     afterEach(function () {
         jest.clearAllMocks();
     });
     it('should render expand button and label', function () {
-        var component = shallow(React.createElement(ReadOnlyComplexAttribute, __assign({}, defaultProps)));
-        expect(findExpandButton(component).length).toBe(1);
-        var label = findLabel(component);
-        expect(label.length).toBe(1);
-        expect(label.text()).toBe(defaultProps.label);
-        expect(component.find(ReadOnlyAttributesList).length).toBe(0);
+        setUp();
+        screen.getByText('Complex attribute label');
+        screen.getByTestId('arrow-expand-button');
     });
     it('should render highlighted label', function () {
-        var highlightedValuesContextValues = {
+        var highlightedValues = {
             highlightedValuesUris: ['relations/sIeHttl/attributes/AdditionalAttributes/2zoXFFwDl'],
-            highlightedClassName: 'hlClassName'
+            highlightedClassName: 'highlightedClassName'
         };
-        var component = mount(React.createElement(HighlightedValuesContext.Provider, { value: highlightedValuesContextValues },
-            React.createElement(ReadOnlyComplexAttribute, __assign({}, defaultProps))));
-        var label = findLabel(component);
-        expect(label.hasClass('hlClassName')).toBeTruthy();
+        setUp({ highlightedValues: highlightedValues });
+        expect(screen.getByText('Complex attribute label')).toHaveClass('highlightedClassName');
     });
-    it('should render label without highlights if HighlightedValuesContext.Provider.highlightedValuesContextValues contains subattributes', function () {
-        var highlightedValuesContextValues = {
+    it('should render label without highlights if highlighted values contains subattributes', function () {
+        var highlightedValues = {
             highlightedValuesUris: [
                 'relations/sIeHttl/attributes/AdditionalAttributes/2zoXFFwDl/SubNested/gdggfgfgdf/SubSubNested/1'
             ],
-            highlightedClassName: 'hlClassName'
+            highlightedClassName: 'highlightedClassName'
         };
-        var component = mount(React.createElement(HighlightedValuesContext.Provider, { value: highlightedValuesContextValues },
-            React.createElement(ReadOnlyComplexAttribute, __assign({}, defaultProps))));
-        var label = findLabel(component);
-        expect(label.hasClass('hlClassName')).toBeFalsy();
+        setUp({ highlightedValues: highlightedValues });
+        expect(screen.getByText('Complex attribute label')).not.toHaveClass('highlightedClassName');
     });
     it('should render label without highlights', function () {
-        var highlightedValuesContextValues = {
+        var highlightedValues = {
             highlightedValuesUris: ['relations/sIeHttl/attributes/AdditionalAttributes/2zoXFFwD'],
-            highlightedClassName: 'hlClassName'
+            highlightedClassName: 'highlightedClassName'
         };
-        var component = mount(React.createElement(HighlightedValuesContext.Provider, { value: highlightedValuesContextValues },
-            React.createElement(ReadOnlyComplexAttribute, __assign({}, defaultProps))));
-        var label = findLabel(component);
-        expect(label.hasClass('hlClassName')).toBeFalsy();
+        setUp({ highlightedValues: highlightedValues });
+        expect(screen.getByText('Complex attribute label')).not.toHaveClass('highlightedClassName');
     });
-    it('should render ReadOnlyAttributesList after click on expand button', function () {
-        var props = __assign({}, defaultProps);
-        var children = React.createElement("span", null, "children");
-        var component = shallow(React.createElement(ReadOnlyComplexAttribute, __assign({}, props), children));
-        expect(component.find(ReadOnlyAttributesList).length).toBe(0);
-        findExpandButton(component).prop('onClick')();
-        var attributesList = component.find(ReadOnlyAttributesList);
-        expect(attributesList.length).toBe(1);
-        expect(attributesList.prop('children')).toBe(children);
-    });
-    it('should set correct props for ReadOnlyAttributesList', function () {
-        var component = shallow(React.createElement(ReadOnlyComplexAttribute, __assign({}, defaultProps)));
-        findExpandButton(component).prop('onClick')();
-        var attributesList = component.find(ReadOnlyAttributesList);
-        expect(attributesList.length).toBe(1);
-        expect(attributesList.props()).toMatchObject({
-            parentUri: defaultProps.attributeValue.uri,
-            drawLines: true,
-            attrTypes: defaultProps.attributeType.attributes,
-            entity: {
-                attributes: defaultProps.attributeValue.value
+    it('should render read only attributes list after click on expand button', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, getLastExpandButton;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    getLastExpandButton = function () {
+                        var buttons = screen.getAllByTestId('arrow-expand-button');
+                        return buttons[buttons.length - 1];
+                    };
+                    screen.getByText('Complex attribute label');
+                    return [4 /*yield*/, user.click(getLastExpandButton())];
+                case 1:
+                    _a.sent();
+                    screen.getByText('Sub Nested');
+                    screen.getByText('SubNested 1 Label');
+                    return [4 /*yield*/, user.click(getLastExpandButton())];
+                case 2:
+                    _a.sent();
+                    screen.getByText('Sub Sub Nested');
+                    screen.getByText('SubSubNested 1 Label');
+                    return [4 /*yield*/, user.click(getLastExpandButton())];
+                case 3:
+                    _a.sent();
+                    screen.getByText('Attribute Value');
+                    screen.getByText('12321');
+                    return [2 /*return*/];
             }
         });
-    });
-    it('should set "entity" prop of ReadOnlyAttributesList correctly for special attributes', function () {
-        var props = {
-            label: 'Crosswalks',
-            attributeType: {
-                uri: 'crosswalks',
-                type: 'Nested',
-                attributes: Object.values(CrosswalksAttrTypes)
-            },
-            attributeValue: {
-                uri: '1',
-                value: {
-                    value: 'value',
-                    count: 5,
-                    reltioLoadDate: 123456775
-                }
-            },
-            attributeTypesList: Object.values(CrosswalksAttrTypes)
-        };
-        var component = shallow(React.createElement(ReadOnlyComplexAttribute, __assign({}, props)));
-        findExpandButton(component).prop('onClick')();
-        var attributesList = component.find(ReadOnlyAttributesList);
-        expect(attributesList.length).toBe(1);
-        expect(attributesList.props()).toMatchObject({
-            parentUri: props.attributeValue.uri,
-            drawLines: true,
-            attrTypes: props.attributeType.attributes,
-            entity: __assign({ attributes: props.attributeValue.value }, props.attributeValue.value)
-        });
-    });
-    var expandSubNesteds = function (component) {
-        act(function () {
-            findExpandButton(component).prop('onClick')();
-        });
-        component.update();
-        var complexes = component.find(ReadOnlyComplexAttribute);
-        expect(complexes.length).toBe(2);
-        var subComplex = complexes.at(1);
-        act(function () {
-            findExpandButton(subComplex).prop('onClick')();
-        });
-        component.update();
-        complexes = component.find(ReadOnlyComplexAttribute);
-        expect(complexes.length).toBe(3);
-        var subSubComplex = complexes.at(2);
-        act(function () {
-            findExpandButton(subSubComplex).prop('onClick')();
+    }); });
+    it('should render special attributes correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var props, user, specialRenderers;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    props = {
+                        label: 'Crosswalks',
+                        attributeType: {
+                            uri: 'crosswalks',
+                            type: 'Nested',
+                            name: 'crosswalks',
+                            attributes: Object.values(CrosswalksAttrTypes)
+                        },
+                        attributeValue: {
+                            uri: '1',
+                            value: {
+                                value: 'value',
+                                count: 5,
+                                reltioLoadDate: 123456775
+                            }
+                        },
+                        attributeTypesList: Object.values(CrosswalksAttrTypes)
+                    };
+                    user = setUp({ props: props }).user;
+                    return [4 /*yield*/, user.click(screen.getByTestId('arrow-expand-button'))];
+                case 1:
+                    _a.sent();
+                    specialRenderers = screen.getAllByTestId('special-renderer');
+                    expect(specialRenderers).toHaveLength(3);
+                    expect(specialRenderers[0]).toHaveTextContent('ID Value');
+                    expect(specialRenderers[0]).toHaveTextContent('value');
+                    expect(specialRenderers[1]).toHaveTextContent('Crosswalk Count');
+                    expect(specialRenderers[1]).toHaveTextContent('5');
+                    expect(specialRenderers[2]).toHaveTextContent('Reltio Load Date');
+                    expect(specialRenderers[2]).toHaveTextContent('01/02/1970 10:17:36 AM');
+                    return [2 /*return*/];
+            }
         });
-        component.update();
-    };
-    it('should render deep nested attributes', function () {
-        var component = mount(React.createElement(ReadOnlyComplexAttribute, __assign({}, defaultProps)));
-        expect(component.find(ReadOnlyComplexAttribute).length).toBe(1);
-        expandSubNesteds(component);
-        expect(component.find(ReadOnlyComplexAttribute).length).toBe(3);
-        var deepComplex = component.find(ReadOnlyComplexAttribute).at(2);
-        expect(deepComplex.prop('attributeValue')).toBe(defaultProps.attributeValue.value.SubNested[0].value.SubSubNested[0]);
-        expect(deepComplex.prop('attributeTypesList')).toBe(defaultProps.attributeType.attributes[0].attributes[0].attributes);
-    });
-    it('should render analytics attributes correctly', function () {
-        var nestedAnalyticsAttributeType = {
-            label: 'Nested',
-            name: 'Nested',
-            type: 'Nested',
-            uri: 'configuration/entityTypes/Type/analyticsAttributes/Nested',
-            analyticsAttributes: [
-                {
-                    label: 'String',
-                    name: 'String',
-                    type: 'String',
-                    uri: 'configuration/entityTypes/Type/analyticsAttributes/Nested/analyticsAttributes/String'
-                }
-            ]
-        };
-        var nestedAttributeValue = {
-            label: 'Nested Label',
-            value: {
-                String: [
-                    {
-                        type: 'configuration/entityTypes/Type/analyticsAttributes/Nested/analyticsAttributes/String',
+    }); });
+    it('should render analytics attributes correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var attributeType, attributeValue, props, user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    attributeType = {
+                        label: 'Nested',
+                        name: 'Nested',
+                        type: 'Nested',
+                        uri: 'configuration/entityTypes/Type/analyticsAttributes/Nested',
+                        analyticsAttributes: [
+                            {
+                                label: 'String',
+                                name: 'String',
+                                type: 'String',
+                                uri: 'configuration/entityTypes/Type/analyticsAttributes/Nested/analyticsAttributes/String'
+                            }
+                        ]
+                    };
+                    attributeValue = {
+                        label: 'Nested Label',
+                        value: {
+                            String: [
+                                {
+                                    type: 'configuration/entityTypes/Type/analyticsAttributes/Nested/analyticsAttributes/String',
+                                    ov: true,
+                                    value: '12321',
+                                    uri: 'entities/sIeHttl/attributes/Nested/2zoXFFwDl/String/gdggfgfgdf'
+                                }
+                            ]
+                        },
                         ov: true,
-                        value: '12321',
-                        uri: 'entities/sIeHttl/attributes/Nested/2zoXFFwDl/String/gdggfgfgdf'
-                    }
-                ]
-            },
-            ov: true,
-            uri: 'entities/sIeHttl/attributes/Nested/2zoXFFwDl'
-        };
-        var component = mount(React.createElement(ReadOnlyComplexAttribute, { label: "test", attributeType: nestedAnalyticsAttributeType, attributeValue: nestedAttributeValue, attributeTypesList: nestedAnalyticsAttributeType.analyticsAttributes }));
-        expect(component.find(ReadOnlyComplexAttribute).length).toBe(1);
-        act(function () {
-            findExpandButton(component).prop('onClick')();
-        });
-        component.update();
-        var complex = component.find(ReadOnlyComplexAttribute);
-        var attributesList = complex.find(ReadOnlyAttributesList);
-        expect(attributesList.prop('entity')).toEqual({
-            analyticsAttributes: nestedAttributeValue.value,
-            attributes: null
-        });
-        expect(attributesList.prop('attrTypes')).toBe(nestedAnalyticsAttributeType.analyticsAttributes);
-    });
-    it('should render CommentsContainer inside COMMENTS_CONTAINER_VISIBILITY_AREA with correct uri', function () {
-        var component = shallow(React.createElement(ReadOnlyComplexAttribute, __assign({}, defaultProps)));
-        var commentsContainer = component
-            .find(".labelContainer.".concat(COMMENTS_CONTAINER_VISIBILITY_AREA))
-            .find(CommentsContainer);
-        expect(commentsContainer.length).toBe(1);
-        expect(commentsContainer.prop('uri')).toBe(nestedAttributeValue.uri);
-        expect(commentsContainer.prop('relatedObjectUris')).toEqual(['relations/sIeHttl']);
-        expect(commentsContainer.prop('objectType')).toBe(CollaborationObjectTypes.RELATION_ATTRIBUTE);
-        component.setProps({
-            attributeValue: __assign(__assign({}, nestedAttributeValue), { uri: 'entities/123/attributes/Reference/r123/AdditionalAttributes/2zoXFFwDl' })
+                        uri: 'entities/sIeHttl/attributes/Nested/2zoXFFwDl'
+                    };
+                    props = {
+                        label: 'test',
+                        attributeType: attributeType,
+                        attributeValue: attributeValue,
+                        attributeTypesList: attributeType.analyticsAttributes
+                    };
+                    user = setUp({ props: props }).user;
+                    return [4 /*yield*/, user.click(screen.getByTestId('arrow-expand-button'))];
+                case 1:
+                    _a.sent();
+                    screen.getByText('test');
+                    screen.getByText('String');
+                    screen.getByText('12321');
+                    return [2 /*return*/];
+            }
         });
-        commentsContainer = component.find(CommentsContainer);
-        expect(commentsContainer.prop('relatedObjectUris')).toEqual(['entities/123']);
-        expect(commentsContainer.prop('objectType')).toBe(CollaborationObjectTypes.ENTITY_ATTRIBUTE);
+    }); });
+    it('should render custom label instead of label and comments container if "LabelRenderer" prop is defined', function () {
+        var props = __assign(__assign({}, defaultProps), { LabelRenderer: function () { return React.createElement("div", null, "Custom label"); } });
+        setUp({ props: props });
+        screen.getByText('Custom label');
+        expect(screen.queryByText('Complex attribute label')).not.toBeInTheDocument();
     });
-    it('should render LabelRenderer instead of label and CommentsContainer if "LabelRenderer" prop is defined', function () {
-        var LabelRenderer = function () { return React.createElement("span", null); };
-        var component = shallow(React.createElement(ReadOnlyComplexAttribute, __assign({}, defaultProps, { LabelRenderer: LabelRenderer })));
-        expect(findExpandButton(component).length).toBe(1);
-        expect(findLabel(component).length).toBe(0);
-        expect(component.find(CommentsContainer).length).toBe(0);
-        var labelRenderer = component.find(LabelRenderer);
-        expect(labelRenderer.length).toBe(1);
-        expect(labelRenderer.prop('attributeType')).toBe(defaultProps.attributeType);
-        expect(labelRenderer.prop('attributeValue')).toBe(defaultProps.attributeValue);
-    });
-    it('should render RightSlot if "RightSlot" prop is defined', function () {
-        var RightSlot = function () { return React.createElement("span", null); };
-        var component = shallow(React.createElement(ReadOnlyComplexAttribute, __assign({}, defaultProps, { RightSlot: RightSlot })));
-        expect(findExpandButton(component).length).toBe(1);
-        expect(findLabel(component).length).toBe(1);
-        expect(component.find(CommentsContainer).length).toBe(1);
-        var rightSlot = component.find(RightSlot);
-        expect(rightSlot.length).toBe(1);
-        expect(rightSlot.prop('attributeType')).toBe(defaultProps.attributeType);
-        expect(rightSlot.prop('attributeValue')).toBe(defaultProps.attributeValue);
-    });
-    it('should set correct props for CommentsContainer component if we have entity attribute', function () {
-        var attributeType = {
-            uri: 'configuration/entityTypes/HCA/attributes/ContactPreference',
-            type: 'Nested',
-            name: 'ContactPreference',
-            label: 'Contact Preference'
-        };
-        var attributeValue = {
-            uri: 'entities/1Gw3QsjR/attributes/Affiliations/pdVWCxm/ContactPreference/14wY5z5Nr',
-            value: {},
-            ov: true
-        };
-        var props = __assign(__assign({}, defaultProps), { attributeType: attributeType, attributeValue: attributeValue });
-        var component = shallow(React.createElement(ReadOnlyComplexAttribute, __assign({}, props)));
-        var commentsContainer = component.find(CommentsContainer);
-        expect(commentsContainer.prop('relatedObjectUris')).toEqual(['entities/1Gw3QsjR']);
-        expect(commentsContainer.prop('objectType')).toBe(CollaborationObjectTypes.ENTITY_ATTRIBUTE);
+    it('should render right slot if "RightSlot" prop is defined', function () {
+        var props = __assign(__assign({}, defaultProps), { RightSlot: function () { return React.createElement("div", null, "Right slot"); } });
+        setUp({ props: props });
+        screen.getByText('Complex attribute label');
+        screen.getByText('Right slot');
     });
     it('should add ovFalse style for attribute', function () {
-        var component = shallow(React.createElement(ReadOnlyComplexAttribute, __assign({}, defaultProps, { attributeValue: __assign(__assign({}, nestedAttributeValue), { ov: false }) })));
-        var label = findLabel(component);
-        expect(label.hasClass('ovFalse')).toBe(true);
+        var attributeValue = __assign(__assign({}, nestedAttributeValue), { ov: false });
+        var props = __assign(__assign({}, defaultProps), { attributeValue: attributeValue });
+        setUp({ props: props });
+        expect(screen.getByText('Complex attribute label')).toHaveClass('ovFalse');
+    });
+    it('should render comments container', function () {
+        setUp();
+        screen.getByLabelText('Add comment');
     });
 });