@reltio/components 1.4.2070 → 1.4.2072

package/SidePanelContentHeader/SidePanelContentHeader.test.js

@@ -0,0 +1,104 @@
+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 __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 { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { SidePanelContentHeader } from './SidePanelContentHeader';
+import { getMuiIconByName } from '../test-utils';
+describe('SidePanelContentHeader test', function () {
+    var mainTitle = 'mainTitle';
+    var secondTitle = 'secondTitle';
+    var rightContent = 'rightContent';
+    var defaultProps = {
+        onClose: jest.fn(),
+        mainTitle: mainTitle,
+        secondTitle: secondTitle,
+        rightContent: rightContent
+    };
+    var setUp = function (props) {
+        if (props === void 0) { props = {}; }
+        var user = userEvent.setup();
+        return __assign({ user: user }, render(React.createElement(SidePanelContentHeader, __assign({}, defaultProps, props))));
+    };
+    it('should renders all component well', function () {
+        setUp();
+        expect(screen.getByText(mainTitle)).toBeInTheDocument();
+        expect(screen.getByTestId('content-header-divider')).toBeInTheDocument();
+        expect(screen.getByText(secondTitle)).toBeInTheDocument();
+        expect(screen.getByText(rightContent)).toBeInTheDocument();
+        var closeButton = screen.getByRole('button');
+        expect(getMuiIconByName('Close', closeButton)).toBeInTheDocument();
+    });
+    it('should renders component with content', function () {
+        var textContent = 'Test content';
+        var content = React.createElement("div", null, textContent);
+        setUp({ content: content });
+        expect(screen.getByText(textContent)).toBeInTheDocument();
+        expect(screen.queryByTestId('content-header-title')).not.toBeInTheDocument();
+    });
+    it('should not render Divider with empty secondTitle', function () {
+        setUp({ secondTitle: '' });
+        expect(screen.queryByTestId('content-header-divider')).not.toBeInTheDocument();
+    });
+    it('should call onClose after button click', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onClose, user, closeButton;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onClose = jest.fn();
+                    user = setUp({ onClose: onClose }).user;
+                    closeButton = screen.getByRole('button');
+                    return [4 /*yield*/, user.click(closeButton)];
+                case 1:
+                    _a.sent();
+                    expect(onClose).toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});

package/SidePanelEmptyState/SidePanelEmptyState.js

@@ -9,5 +9,5 @@ export var SidePanelEmptyState = function (_a) {
         React.createElement(IconRenderer, { className: styles.logo }),
         React.createElement("div", { className: styles.textBox },
             React.createElement(Typography, { className: styles.text }, text),
-            secondaryText && React.createElement(Typography, { className: styles.secondaryText }, secondaryText))));
+            secondaryText && (React.createElement(Typography, { "data-reltio-id": "empty-state-secondary-text", className: styles.secondaryText }, secondaryText)))));
 };

package/SidePanelEmptyState/SidePanelEmptyState.test.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { NoData as NoDataIcon } from '../icons';
+import { SidePanelEmptyState } from './SidePanelEmptyState';
+describe('SidePanelEmptyState test', function () {
+    it('should render correct default state', function () {
+        render(React.createElement(SidePanelEmptyState, { text: "test" }));
+        expect(screen.getByText('test')).toBeInTheDocument();
+        expect(screen.getByTestId('SvgAttributesList')).toBeInTheDocument();
+        expect(screen.queryByTestId('empty-state-secondary-text')).not.toBeInTheDocument();
+    });
+    it('should render icon passed in IconRenderer', function () {
+        render(React.createElement(SidePanelEmptyState, { IconRenderer: NoDataIcon, text: "test" }));
+        expect(screen.getByText('test')).toBeInTheDocument();
+        expect(screen.getByTestId('SvgNoData')).toBeInTheDocument();
+        expect(screen.queryByTestId('empty-state-secondary-text')).not.toBeInTheDocument();
+    });
+    it('should render secondary text', function () {
+        render(React.createElement(SidePanelEmptyState, { text: "test", secondaryText: "secondaryTest" }));
+        expect(screen.getByText('test')).toBeInTheDocument();
+        expect(screen.getByText('secondaryTest')).toBeInTheDocument();
+        expect(screen.getByTestId('SvgAttributesList')).toBeInTheDocument();
+    });
+});

package/SimpleAttribute/SimpleAttribute.js

@@ -33,7 +33,7 @@ export var SimpleAttribute = function (_a) {
                     _d[styles.ovFalse] = !isOv(attributeValue),
                     _d)), "data-reltio-id": "reltio-attribute-value" },
                 dataTypeValue,
-                unmaskingControl)))) : (React.createElement("div", { className: classnames(className, styles.root, COMMENTS_CONTAINER_VISIBILITY_AREA, (_e = {},
+                unmaskingControl)))) : (React.createElement("div", { "data-reltio-id": "comments-container-visibility-area", className: classnames(className, styles.root, COMMENTS_CONTAINER_VISIBILITY_AREA, (_e = {},
             _e[highlightedClassName] = highlightedValuesUris.includes(attributeValue.uri),
             _e)) },
         React.createElement(PivotingTooltip, { value: attributeValue, attributeType: attributeType, key: attributeValue.uri },

package/SimpleAttribute/SimpleAttribute.test.js

@@ -9,85 +9,158 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 import React from 'react';
-import { mount, shallow } from 'enzyme';
-import { pick } from 'ramda';
-import { CollaborationObjectTypes, DataTypes } from '@reltio/mdm-sdk';
-import { DataTypeValue } from '../DataTypeValue';
-import { SimpleAttribute } from './SimpleAttribute';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { COMMENTS_CONTAINER_VISIBILITY_AREA } from '../constants/classnames';
-import { CommentsContainer } from '../CommentsContainer';
 import { HistoryDiffContext } from '../contexts/HistoryAppearanceContext';
-import { PivotingTooltip } from '../PivotingTooltip';
 import { HighlightedValuesContext } from '../contexts/HighlightedValuesContext';
+import { PivotingAttributeContext } from '../contexts/PivotingAttributeContext';
+import { SimpleAttribute } from './SimpleAttribute';
+import { CollaborationContext } from '../contexts/CollaborationContext';
 describe('SimpleAttribute tests', function () {
-    var historyDiff = {
-        appearance: { testAttributeUri: 'INSERT_ATTRIBUTE' },
-        attributes: {},
-        roles: [],
-        tags: []
+    var defaultProps = {
+        attributeType: { type: 'String', name: 'Name', uri: 'URI' },
+        attributeValue: { value: '123', uri: 'entities/16U21B8f/attributes/Name/2sAfjGOIh' }
+    };
+    var defaultCollaborationContextValue = {
+        commentsMap: {},
+        currentComment: null
+    };
+    var defaultContextValues = {
+        collaboration: defaultCollaborationContextValue,
+        pivotingAttribute: undefined,
+        highlightedValues: {
+            highlightedValuesUris: [],
+            highlightedClassName: 'test'
+        },
+        historyDiff: {}
+    };
+    var setUp = function (props, contextValues) {
+        if (props === void 0) { props = {}; }
+        if (contextValues === void 0) { contextValues = {}; }
+        var user = userEvent.setup();
+        var _a = __assign(__assign({}, defaultContextValues), contextValues), pivotingAttribute = _a.pivotingAttribute, highlightedValues = _a.highlightedValues, historyDiff = _a.historyDiff, collaboration = _a.collaboration;
+        var Providers = function (_a) {
+            var children = _a.children;
+            return (React.createElement(CollaborationContext.Provider, { value: collaboration },
+                React.createElement(PivotingAttributeContext.Provider, { value: pivotingAttribute },
+                    React.createElement(HighlightedValuesContext.Provider, { value: highlightedValues },
+                        React.createElement(HistoryDiffContext.Provider, { value: historyDiff }, children)))));
+        };
+        return __assign({ user: user }, render(React.createElement(SimpleAttribute, __assign({}, defaultProps, props)), { wrapper: Providers }));
     };
     it('should render DataTypeValue', function () {
-        var attrType = { type: 'String', name: 'Name', uri: 'URI' };
+        var attributeType = { type: 'String', name: 'Name', uri: 'URI' };
         var attributeValue = { value: '123', uri: 'entities/16U21B8f/attributes/Name/2sAfjGOIh' };
-        var component = shallow(React.createElement(SimpleAttribute, { attributeType: attrType, attributeValue: attributeValue }));
-        var dataTypeValue = component.find(DataTypeValue);
-        expect(dataTypeValue.length).toBe(1);
-        expect(dataTypeValue.prop('value')).toEqual(attributeValue.value);
-        expect(dataTypeValue.prop('dataTypeDefinition')).toEqual({ type: 'String', uri: 'URI', name: 'Name' });
+        setUp({ attributeType: attributeType, attributeValue: attributeValue });
+        expect(screen.getByTestId('reltio-attribute-value')).toHaveTextContent('123');
     });
-    it('should provide correct props DataTypeValue if attribute is lookup', function () {
-        var attrType = { type: 'String', dependentLookupCode: 'Code', name: 'Name', uri: 'URI', access: ['READ'] };
+    it('should render lookup correctly', function () {
+        var attributeType = { type: 'String', dependentLookupCode: 'Code', name: 'Name', uri: 'URI', access: ['READ'] };
         var attributeValue = {
-            value: '123',
-            lookupCode: '12',
-            rawLookupCode: '34',
+            value: 'India',
+            lookupCode: 'IN',
+            rawLookupCode: 'IND',
             uri: 'entities/16U21B8f/attributes/Name/2sAfjGOIh'
         };
-        var component = shallow(React.createElement(SimpleAttribute, { attributeType: attrType, attributeValue: attributeValue }));
-        var dataTypeValue = component.find(DataTypeValue);
-        expect(dataTypeValue.length).toBe(1);
-        expect(dataTypeValue.prop('value')).toEqual(pick(['value', 'lookupCode'], attributeValue));
-        expect(dataTypeValue.prop('dataTypeDefinition')).toEqual(__assign({ access: ['READ'], type: 'String', dependentLookupCode: 'Code', uri: 'URI', name: 'Name' }, { type: DataTypes.TYPE_DEPENDENT_LOOKUP }));
-    });
-    it('should render CommentsContainer inside COMMENTS_CONTAINER_VISIBILITY_AREA with correct uri', function () {
-        var attrType = { type: 'String', name: 'Name', uri: 'uri1' };
-        var attributeValue = { value: '123', uri: 'entities/uri1/attributes/ABCD' };
-        var component = shallow(React.createElement(SimpleAttribute, { attributeType: attrType, attributeValue: attributeValue }));
-        var commentsContainer = component.find(".".concat(COMMENTS_CONTAINER_VISIBILITY_AREA)).find(CommentsContainer);
-        expect(commentsContainer.length).toBe(1);
-        expect(commentsContainer.prop('uri')).toBe(attributeValue.uri);
-        expect(commentsContainer.prop('relatedObjectUris')).toEqual(['entities/uri1']);
-        expect(commentsContainer.prop('objectType')).toBe(CollaborationObjectTypes.ENTITY_ATTRIBUTE);
+        setUp({ attributeType: attributeType, attributeValue: attributeValue });
+        expect(screen.getByTestId('reltio-attribute-value')).toHaveTextContent('India (IN)');
     });
     it('should not render CommentsContainer if "inlined" prop is true', function () {
-        var attrType = { type: 'String', name: 'Name', uri: 'uri1' };
+        var attributeType = { type: 'String', name: 'Name', uri: 'uri1' };
         var attributeValue = { value: '123', uri: 'uri1' };
-        var component = shallow(React.createElement(SimpleAttribute, { attributeType: attrType, attributeValue: attributeValue, inlined: true }));
-        expect(component.find(".".concat(COMMENTS_CONTAINER_VISIBILITY_AREA)).find(CommentsContainer).length).toBe(0);
-        expect(component.find(CommentsContainer).length).toBe(0);
+        setUp({ attributeType: attributeType, attributeValue: attributeValue, inlined: true });
+        expect(screen.queryByTestId('comments-container-visibility-area')).not.toBeInTheDocument();
     });
     it('should provide history className', function () {
         var attrType = { type: 'String', name: 'Name', uri: 'testAttributeUri' };
         var attributeValue = { value: '123', uri: 'testAttributeUri' };
-        var component = mount(React.createElement(HistoryDiffContext.Provider, { value: historyDiff },
-            React.createElement(SimpleAttribute, { attributeType: attrType, attributeValue: attributeValue })));
-        expect(component.find('.insertAttribute')).toHaveLength(1);
-    });
-    it('should render PivotingTooltip with history', function () {
-        var attrType = { type: 'String', name: 'Name', uri: 'testAttributeUri' };
-        var attributeValue = { value: '123', uri: 'entities/16U21B8f/attributes/Name/2sAfjGOIh' };
-        var component = mount(React.createElement(HistoryDiffContext.Provider, { value: historyDiff },
-            React.createElement(SimpleAttribute, { attributeType: attrType, attributeValue: attributeValue })));
-        expect(component.find(PivotingTooltip)).toHaveLength(1);
+        var historyDiff = {
+            appearance: { testAttributeUri: 'INSERT_ATTRIBUTE' },
+            attributes: {},
+            roles: [],
+            tags: []
+        };
+        setUp({ attributeType: attrType, attributeValue: attributeValue }, { historyDiff: historyDiff });
+        expect(screen.getByTestId('reltio-attribute-value')).toHaveClass('insertAttribute');
     });
+    it('should render PivotingTooltip with history', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var attrType, attributeValue, historyDiff, pivotingAttribute;
+        return __generator(this, function (_a) {
+            attrType = { type: 'String', name: 'Name', uri: 'testAttributeUri' };
+            attributeValue = { value: '123', uri: 'entities/16U21B8f/attributes/Name/2sAfjGOIh' };
+            historyDiff = {
+                appearance: { testAttributeUri: 'INSERT_ATTRIBUTE' },
+                attributes: {},
+                roles: [],
+                tags: []
+            };
+            pivotingAttribute = [{ uri: 'testAttributeUri' }];
+            setUp({ attributeType: attrType, attributeValue: attributeValue }, { historyDiff: historyDiff, pivotingAttribute: pivotingAttribute });
+            expect(screen.getByTestId('SvgPivotingIcon')).toBeInTheDocument();
+            expect(screen.getByRole('link')).toHaveTextContent('123');
+            return [2 /*return*/];
+        });
+    }); });
     it('should render PivotingTooltip without history', function () {
-        var attrType = { type: 'String', name: 'Name', uri: 'testAttributeUri' };
+        var attributeType = { type: 'String', name: 'Name', uri: 'testAttributeUri' };
         var attributeValue = { value: '123', uri: 'entities/16U21B8f/attributes/Name/2sAfjGOIh' };
-        var component = mount(React.createElement(SimpleAttribute, { attributeType: attrType, attributeValue: attributeValue }));
-        expect(component.find(PivotingTooltip)).toHaveLength(1);
+        var pivotingAttribute = [{ uri: 'testAttributeUri' }];
+        setUp({ attributeType: attributeType, attributeValue: attributeValue }, { historyDiff: {}, pivotingAttribute: pivotingAttribute });
+        expect(screen.getByTestId('SvgPivotingIcon')).toBeInTheDocument();
+        expect(screen.getByRole('link')).toHaveTextContent('123');
     });
-    it('should set correct props for CommentsContainer component if we have entity attribute', function () {
+    it('should render comments correctly for entity type', function () {
+        var attributeType = { type: 'String', name: 'Name', uri: 'uri1' };
+        var attributeValue = { value: '123', uri: 'entities/uri1/attributes/ABCD' };
+        var commentsMap = {
+            'entities/uri1/attributes/ABCD': [{ commentId: 'commentId', status: 'open', replies: 0 }]
+        };
+        setUp({ attributeType: attributeType, attributeValue: attributeValue }, { collaboration: __assign(__assign({}, defaultCollaborationContextValue), { commentsMap: commentsMap }) });
+        expect(screen.getByTestId('comments-container-visibility-area')).toHaveClass(COMMENTS_CONTAINER_VISIBILITY_AREA);
+        expect(screen.getByText('123')).toBeInTheDocument();
+        expect(screen.getByTestId('comments-container')).toBeInTheDocument();
+        expect(screen.getByTestId('SvgAddComment')).toBeInTheDocument();
+        expect(screen.getByTestId('reltio-comment-button')).toBeInTheDocument();
+    });
+    it('should render comments correctly for relation type', function () {
         var attributeType = {
             uri: 'configuration/relationTypes/HCPtoHCP/attributes/AffiliationStatus',
             type: 'String',
@@ -100,49 +173,51 @@ describe('SimpleAttribute tests', function () {
             value: 'Active',
             ov: true
         };
-        var component = shallow(React.createElement(SimpleAttribute, { attributeType: attributeType, attributeValue: attributeValue }));
-        var commentsContainer = component.find(CommentsContainer);
-        expect(commentsContainer.prop('relatedObjectUris')).toEqual(['relations/12rMNliU']);
-        expect(commentsContainer.prop('objectType')).toBe(CollaborationObjectTypes.RELATION_ATTRIBUTE);
-        component.setProps({
-            attributeValue: __assign(__assign({}, attributeValue), { uri: 'entities/sIeHttl/attributes/Reference/r123/Simple/u123' })
-        });
-        commentsContainer = component.find(CommentsContainer);
-        expect(commentsContainer.prop('relatedObjectUris')).toEqual(['entities/sIeHttl']);
-        expect(commentsContainer.prop('objectType')).toBe(CollaborationObjectTypes.ENTITY_ATTRIBUTE);
+        var commentsMap = {
+            'relations/12rMNliU/attributes/AffiliationSubType/3e6txxgYJ': [
+                { commentId: 'commentId', status: 'open', replies: 0 }
+            ]
+        };
+        setUp({ attributeType: attributeType, attributeValue: attributeValue }, { collaboration: __assign(__assign({}, defaultCollaborationContextValue), { commentsMap: commentsMap }) });
+        expect(screen.getByTestId('comments-container-visibility-area')).toHaveClass(COMMENTS_CONTAINER_VISIBILITY_AREA);
+        expect(screen.getByTestId('comments-container')).toBeInTheDocument();
+        expect(screen.getByTestId('SvgAddComment')).toBeInTheDocument();
+        expect(screen.getByTestId('reltio-comment-button')).toBeInTheDocument();
     });
     it('should render highlighted label', function () {
         var attributeType = { type: 'String', name: 'Name', uri: 'testAttributeUri', label: 'Affiliation Status' };
         var attributeValue = { value: '123', uri: 'entities/16U21B8f/attributes/Name/2sAfjGOIh' };
-        var highlightedValuesContextValues = {
+        var highlightedValues = {
             highlightedValuesUris: [attributeValue.uri],
             highlightedClassName: 'hlClassName'
         };
-        var component = mount(React.createElement(HighlightedValuesContext.Provider, { value: highlightedValuesContextValues },
-            React.createElement(SimpleAttribute, { attributeType: attributeType, attributeValue: attributeValue })));
-        expect(component.find('div.root').hasClass('hlClassName')).toBeTruthy();
+        setUp({ attributeType: attributeType, attributeValue: attributeValue }, { highlightedValues: highlightedValues });
+        var container = screen.getByTestId('comments-container-visibility-area');
+        expect(container).toHaveClass('hlClassName');
+        expect(container).toHaveTextContent('123');
     });
     it('should render label without highlights', function () {
         var attributeType = { type: 'String', name: 'Name', uri: 'testAttributeUri', label: 'Affiliation Status' };
         var attributeValue = { value: '123', uri: 'entities/16U21B8f/attributes/Name/2sAfjGOIh' };
-        var highlightedValuesContextValues = {
+        var highlightedValues = {
             highlightedValuesUris: ['testAttributeUr'],
             highlightedClassName: 'hlClassName'
         };
-        var component = mount(React.createElement(HighlightedValuesContext.Provider, { value: highlightedValuesContextValues },
-            React.createElement(SimpleAttribute, { attributeType: attributeType, attributeValue: attributeValue })));
-        expect(component.hasClass('hlClassName')).toBeFalsy();
+        setUp({ attributeType: attributeType, attributeValue: attributeValue }, { highlightedValues: highlightedValues });
+        var container = screen.getByTestId('comments-container-visibility-area');
+        expect(container).not.toHaveClass('hlClassName');
+        expect(container).toHaveTextContent('123');
     });
     it('should add ovFalse style if inlined is true', function () {
-        var attrType = { type: 'String', name: 'Name', uri: 'uri1' };
+        var attributeType = { type: 'String', name: 'Name', uri: 'uri1' };
         var attributeValue = { value: '123', uri: 'uri1', ov: false };
-        var component = shallow(React.createElement(SimpleAttribute, { attributeType: attrType, attributeValue: attributeValue, inlined: true }));
-        expect(component.find('span').hasClass('ovFalse')).toBe(true);
+        setUp({ attributeType: attributeType, attributeValue: attributeValue, inlined: true });
+        expect(screen.getByTestId('reltio-attribute-value')).toHaveClass('ovFalse');
     });
     it('should add ovFalse style if inlined is false', function () {
-        var attrType = { type: 'String', name: 'Name', uri: 'uri1' };
+        var attributeType = { type: 'String', name: 'Name', uri: 'uri1' };
         var attributeValue = { value: '123', uri: 'uri1', ov: false };
-        var component = shallow(React.createElement(SimpleAttribute, { attributeType: attrType, attributeValue: attributeValue }));
-        expect(component.find('span').hasClass('ovFalse')).toBe(true);
+        setUp({ attributeType: attributeType, attributeValue: attributeValue, inlined: false });
+        expect(screen.getByTestId('reltio-attribute-value')).toHaveClass('ovFalse');
     });
 });