@reltio/components 1.4.2051 → 1.4.2052

package/InlineSimpleAttributeEditor/InlineSimpleAttributeEditor.test.js

@@ -9,14 +9,57 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import React from 'react';
-import { shallow } from 'enzyme';
-import { act } from 'react-dom/test-utils';
-import { DataTypes } from '@reltio/mdm-sdk';
-import Popover from '@mui/material/Popover';
-import { DataTypeValueEditor } from '../DataTypeValueEditor';
+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, { createRef } from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { DataTypes, getDependentLookups } from '@reltio/mdm-sdk';
 import { InlineSimpleAttributeEditor } from './InlineSimpleAttributeEditor';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
+jest.mock('@reltio/mdm-sdk', function () { return (__assign(__assign({}, jest.requireActual('@reltio/mdm-sdk')), { getDependentLookups: jest.fn(function () { return Promise.resolve(); }) })); });
+var dependentLookups = {
+    codeValues: {
+        COUNTRY_CD: { IT: { displayName: 'Italy' }, BE: { displayName: 'Belgium' } }
+    }
+};
 describe('InlineSimpleAttributeEditor', function () {
+    var containerRef = createRef();
     var attributeType = {
         uri: 'configuration/entityTypes/HCP/attributes/Simple',
         type: 'String',
@@ -30,9 +73,7 @@ describe('InlineSimpleAttributeEditor', function () {
         ov: true
     };
     var defaultProps = {
-        containerRef: {
-            current: null
-        },
+        containerRef: containerRef,
         attributeType: attributeType,
         attributeValue: attributeValue,
         color: 'red',
@@ -42,204 +83,254 @@ describe('InlineSimpleAttributeEditor', function () {
     afterEach(function () {
         jest.clearAllMocks();
     });
-    it('should render component correctly', function () {
-        var component = shallow(React.createElement(InlineSimpleAttributeEditor, __assign({}, defaultProps)));
-        var dataTypeValueEditor = component.find(DataTypeValueEditor);
-        expect(dataTypeValueEditor.prop('dataTypeDefinition')).toEqual({
-            name: 'Simple',
-            type: 'String',
-            uri: 'configuration/entityTypes/HCP/attributes/Simple'
-        });
-        expect(dataTypeValueEditor.prop('fieldName')).toEqual('attributes.Simple');
-        expect(dataTypeValueEditor.prop('value')).toEqual('123');
-        expect(dataTypeValueEditor.prop('TextFieldProps')).toMatchObject({ fullWidth: true, autoFocus: true });
-        expect(component.find(Popover).prop('classes').paper).toBe('paper');
-    });
-    it('should change editorValue and save it on enter', function () {
-        var component = shallow(React.createElement(InlineSimpleAttributeEditor, __assign({}, defaultProps)));
-        var dataTypeValueEditor = component.find(DataTypeValueEditor);
-        expect(dataTypeValueEditor.prop('value')).toEqual('123');
-        act(function () {
-            dataTypeValueEditor.prop('onChange')('456');
-        });
-        expect(component.find(DataTypeValueEditor).prop('value')).toEqual('456');
-        act(function () {
-            component.find(Popover).simulate('keyup', { key: 'Enter' });
-        });
-        expect(defaultProps.onEdit).toHaveBeenCalledWith(__assign(__assign({}, attributeValue), { value: '456' }));
-        expect(defaultProps.onClose).toHaveBeenCalled();
-    });
-    it('should call onEdit with proper arguments for lookup value', function () {
-        var lookupAttributeValue = {
-            uri: 'entities/1/attributes/CountryCode/1',
-            value: 'Italy',
-            lookupCode: 'IT'
-        };
-        var lookupAttributeType = {
-            label: 'Country Code',
-            name: 'CountryCode',
-            type: 'String',
-            uri: 'configuration/entityTypes/HCP/attributes/CountryCode',
-            dependentLookupCode: 'COUNTRY_CD'
-        };
-        var props = __assign(__assign({}, defaultProps), { attributeType: lookupAttributeType, attributeValue: lookupAttributeValue });
-        var component = shallow(React.createElement(InlineSimpleAttributeEditor, __assign({}, props)));
-        var dataTypeValueEditor = component.find(DataTypeValueEditor);
-        expect(dataTypeValueEditor.prop('value')).toEqual({ lookupCode: 'IT', value: 'Italy' });
-        act(function () {
-            dataTypeValueEditor.prop('onChange')({ lookupCode: 'BE', value: 'Belgium' });
-        });
-        expect(component.find(DataTypeValueEditor).prop('value')).toEqual({ lookupCode: 'BE', value: 'Belgium' });
-        act(function () {
-            component.find(Popover).simulate('keyup', { key: 'Enter' });
-        });
-        expect(defaultProps.onEdit).toHaveBeenCalledWith({
-            uri: lookupAttributeValue.uri,
-            lookupCode: 'BE',
-            value: 'Belgium'
-        });
-        expect(defaultProps.onClose).toHaveBeenCalled();
-    });
-    it('should call onEdit with proper arguments for numeric empty value', function () {
-        var numericAttributeValue = {
-            uri: 'entities/1/attributes/Int/1',
-            value: '11'
-        };
-        var numericAttributeType = {
-            label: 'Int',
-            name: 'Int',
-            type: 'Int',
-            uri: 'configuration/entityTypes/Product/attributes/Int'
+    var setUp = function (props) {
+        if (props === void 0) { props = {}; }
+        var user = userEvent.setup();
+        var Providers = function (_a) {
+            var children = _a.children;
+            return (React.createElement(LocalizationProvider, { dateAdapter: AdapterMoment }, children));
         };
-        var props = __assign(__assign({}, defaultProps), { attributeType: numericAttributeType, attributeValue: numericAttributeValue });
-        var component = shallow(React.createElement(InlineSimpleAttributeEditor, __assign({}, props)));
-        var dataTypeValueEditor = component.find(DataTypeValueEditor);
-        expect(dataTypeValueEditor.prop('value')).toEqual('11');
-        act(function () {
-            dataTypeValueEditor.prop('onChange')('');
-        });
-        expect(component.find(DataTypeValueEditor).prop('value')).toBe('');
-        act(function () {
-            component.find(Popover).simulate('keyup', { key: 'Enter' });
-        });
-        expect(defaultProps.onEdit).toHaveBeenCalledWith({ uri: numericAttributeValue.uri, value: null });
-        expect(defaultProps.onClose).toHaveBeenCalled();
+        return __assign({ user: user }, render(React.createElement(InlineSimpleAttributeEditor, __assign({}, defaultProps, props)), { wrapper: Providers }));
+    };
+    it('should render component correctly', function () {
+        setUp();
+        expect(screen.getByTestId('inline-simple-attribute-editor')).toBeInTheDocument();
+        expect(screen.getByRole('textbox')).toHaveValue('123');
     });
-    it('should not call props.onEdit if value is the same', function () {
-        var component = shallow(React.createElement(InlineSimpleAttributeEditor, __assign({}, defaultProps)));
-        var dataTypeValueEditor = component.find(DataTypeValueEditor);
-        expect(dataTypeValueEditor.prop('value')).toEqual('123');
-        act(function () {
-            dataTypeValueEditor.prop('onChange')('123');
+    it('should change editorValue and save it on enter', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    return [4 /*yield*/, user.type(screen.getByRole('textbox'), '456')];
+                case 1:
+                    _a.sent();
+                    expect(screen.getByRole('textbox')).toHaveValue('123456');
+                    return [4 /*yield*/, user.keyboard('{enter}')];
+                case 2:
+                    _a.sent();
+                    expect(defaultProps.onEdit).toHaveBeenCalledWith(__assign(__assign({}, attributeValue), { value: '123456' }));
+                    expect(defaultProps.onClose).toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
         });
-        act(function () {
-            component.find(Popover).simulate('keyup', { key: 'Enter' });
+    }); });
+    it('should call onEdit with proper arguments for lookup value', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var lookupAttributeValue, lookupAttributeType, user, backdrop, comboBox;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    getDependentLookups.mockResolvedValueOnce(dependentLookups);
+                    lookupAttributeValue = {
+                        uri: 'entities/1/attributes/CountryCode/1',
+                        value: 'Italy',
+                        lookupCode: 'IT'
+                    };
+                    lookupAttributeType = {
+                        label: 'Country Code',
+                        name: 'CountryCode',
+                        type: 'String',
+                        uri: 'configuration/entityTypes/HCP/attributes/CountryCode',
+                        dependentLookupCode: 'COUNTRY_CD'
+                    };
+                    user = setUp({ attributeType: lookupAttributeType, attributeValue: lookupAttributeValue }).user;
+                    backdrop = screen.getByRole('presentation').firstChild;
+                    comboBox = screen.getByRole('combobox');
+                    return [4 /*yield*/, user.click(comboBox)];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(screen.getByText('Belgium (BE)'))];
+                case 2:
+                    _a.sent();
+                    expect(comboBox).toHaveValue('Belgium (BE)');
+                    return [4 /*yield*/, user.click(backdrop)];
+                case 3:
+                    _a.sent();
+                    expect(defaultProps.onEdit).toHaveBeenCalledWith({
+                        uri: lookupAttributeValue.uri,
+                        lookupCode: 'BE',
+                        value: 'Belgium'
+                    });
+                    expect(defaultProps.onClose).toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
         });
-        expect(defaultProps.onEdit).not.toHaveBeenCalled();
-        expect(defaultProps.onClose).toHaveBeenCalled();
-    });
-    it('should not call props.onEdit if lookup value is empty', function () {
-        var lookupAttributeValue = {
-            uri: 'entities/1/attributes/CountryCode/1',
-            value: 'Italy',
-            lookupCode: 'IT'
-        };
-        var lookupAttributeType = {
-            label: 'Country Code',
-            name: 'CountryCode',
-            type: 'String',
-            uri: 'configuration/entityTypes/HCP/attributes/CountryCode',
-            dependentLookupCode: 'COUNTRY_CD'
-        };
-        var props = __assign(__assign({}, defaultProps), { attributeType: lookupAttributeType, attributeValue: lookupAttributeValue });
-        var component = shallow(React.createElement(InlineSimpleAttributeEditor, __assign({}, props)));
-        var dataTypeValueEditor = component.find(DataTypeValueEditor);
-        expect(dataTypeValueEditor.prop('value')).toEqual({ lookupCode: 'IT', value: 'Italy' });
-        act(function () {
-            dataTypeValueEditor.prop('onChange')(null);
+    }); });
+    it('should call onEdit with proper arguments for numeric empty value', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var numericAttributeValue, numericAttributeType, user, input;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    numericAttributeValue = {
+                        uri: 'entities/1/attributes/Int/1',
+                        value: '11'
+                    };
+                    numericAttributeType = {
+                        label: 'Int',
+                        name: 'Int',
+                        type: 'Int',
+                        uri: 'configuration/entityTypes/Product/attributes/Int'
+                    };
+                    user = setUp({ attributeType: numericAttributeType, attributeValue: numericAttributeValue }).user;
+                    input = screen.getByRole('textbox');
+                    return [4 /*yield*/, user.clear(input)];
+                case 1:
+                    _a.sent();
+                    expect(input).toHaveValue('');
+                    return [4 /*yield*/, user.keyboard('{enter}')];
+                case 2:
+                    _a.sent();
+                    expect(defaultProps.onEdit).toHaveBeenCalledWith({ uri: numericAttributeValue.uri, value: null });
+                    expect(defaultProps.onClose).toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
         });
-        expect(component.find(DataTypeValueEditor).prop('value')).toBeNull();
-        act(function () {
-            component.find(Popover).simulate('keyup', { key: 'Enter' });
+    }); });
+    it('should not call props.onEdit if value is the same', 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.keyboard('{enter}')];
+                case 1:
+                    _a.sent();
+                    expect(defaultProps.onEdit).not.toHaveBeenCalled();
+                    expect(defaultProps.onClose).toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
         });
-        expect(defaultProps.onEdit).not.toHaveBeenCalled();
-        expect(defaultProps.onClose).toHaveBeenCalled();
-    });
-    it('should change editorValue and cancel it on esc', function () {
-        var component = shallow(React.createElement(InlineSimpleAttributeEditor, __assign({}, defaultProps)));
-        var dataTypeValueEditor = component.find(DataTypeValueEditor);
-        expect(dataTypeValueEditor.prop('value')).toEqual('123');
-        act(function () {
-            dataTypeValueEditor.prop('onChange')('456');
+    }); });
+    it('should not call props.onEdit if lookup value is empty', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var lookupAttributeType, user, backdrop, comboBox;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    getDependentLookups.mockResolvedValueOnce(dependentLookups);
+                    lookupAttributeType = {
+                        label: 'Country Code',
+                        name: 'CountryCode',
+                        type: 'String',
+                        uri: 'configuration/entityTypes/HCP/attributes/CountryCode',
+                        dependentLookupCode: 'COUNTRY_CD'
+                    };
+                    user = setUp({ attributeType: lookupAttributeType, attributeValue: null }).user;
+                    backdrop = screen.getByRole('presentation').firstChild;
+                    comboBox = screen.getByRole('combobox');
+                    expect(comboBox).toHaveValue('');
+                    return [4 /*yield*/, user.click(backdrop)];
+                case 1:
+                    _a.sent();
+                    expect(defaultProps.onEdit).not.toHaveBeenCalled();
+                    expect(defaultProps.onClose).toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
         });
-        expect(component.find(DataTypeValueEditor).prop('value')).toEqual('456');
-        act(function () {
-            component.find(Popover).simulate('keyup', { key: 'Escape' });
+    }); });
+    it('should change editorValue and cancel it on esc', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, textBox;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    textBox = screen.getByRole('textbox');
+                    return [4 /*yield*/, user.type(textBox, '456')];
+                case 1:
+                    _a.sent();
+                    expect(textBox).toHaveValue('123456');
+                    return [4 /*yield*/, user.keyboard('{Escape}')];
+                case 2:
+                    _a.sent();
+                    expect(defaultProps.onEdit).not.toHaveBeenCalled();
+                    expect(defaultProps.onClose).toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
         });
-        expect(defaultProps.onEdit).not.toHaveBeenCalled();
-        expect(defaultProps.onClose).toHaveBeenCalled();
-    });
+    }); });
     it('should provide correct class to popover, if attribute type is boolean', function () {
-        var props = __assign(__assign({}, defaultProps), { attributeType: __assign(__assign({}, attributeType), { type: DataTypes.TYPE_BOOLEAN }) });
-        var component = shallow(React.createElement(InlineSimpleAttributeEditor, __assign({}, props)));
-        expect(component.find(Popover).prop('classes').paper).toBe('paper booleanEditor');
+        setUp({ attributeType: __assign(__assign({}, attributeType), { type: DataTypes.TYPE_BOOLEAN }) });
+        var editor = screen.getByTestId('inline-simple-attribute-editor');
+        expect(editor.querySelector('.paper')).toHaveClass('booleanEditor');
     });
     it('should provide correct class to popover, if attribute type is timestamp', function () {
-        var props = __assign(__assign({}, defaultProps), { attributeType: __assign(__assign({}, attributeType), { type: DataTypes.TYPE_TIMESTAMP }) });
-        var component = shallow(React.createElement(InlineSimpleAttributeEditor, __assign({}, props)));
-        expect(component.find(Popover).prop('classes').paper).toBe('paper timestampEditor');
+        setUp({ attributeType: __assign(__assign({}, attributeType), { type: DataTypes.TYPE_TIMESTAMP }) });
+        var editor = screen.getByTestId('inline-simple-attribute-editor');
+        expect(editor.querySelector('.paper')).toHaveClass('timestampEditor');
     });
-    it('should not call props.onEdit and props.onClose on enter if data type is DataTypes.TYPE_BLOB', function () {
-        var blobAttributeValue = {
-            uri: 'entities/1/attributes/Blob/484Uit5c0',
-            value: 'text\ntext'
-        };
-        var blobAttributeType = {
-            label: 'Blob',
-            name: 'Blob',
-            type: 'Blob',
-            uri: 'configuration/entityTypes/Product/attributes/Blob'
-        };
-        var props = __assign(__assign({}, defaultProps), { attributeType: blobAttributeType, attributeValue: blobAttributeValue });
-        var component = shallow(React.createElement(InlineSimpleAttributeEditor, __assign({}, props)));
-        act(function () {
-            component.find(Popover).simulate('keyup', { key: 'Enter' });
-        });
-        expect(defaultProps.onEdit).not.toHaveBeenCalled();
-        expect(defaultProps.onClose).not.toHaveBeenCalled();
-    });
-    it('should not call props.onEdit and props.onClose on enter if data type is DataTypes.TYPE_TEXT', function () {
-        var textAttributeValue = {
-            uri: 'entities/1/attributes/Text/484Uit5c0',
-            value: 'text\ntext'
-        };
-        var textAttributeType = {
-            label: 'Text',
-            name: 'Text',
-            type: 'Text',
-            uri: 'configuration/entityTypes/Product/attributes/Text'
-        };
-        var props = __assign(__assign({}, defaultProps), { attributeType: textAttributeType, attributeValue: textAttributeValue });
-        var component = shallow(React.createElement(InlineSimpleAttributeEditor, __assign({}, props)));
-        act(function () {
-            component.find(Popover).simulate('keyup', { key: 'Enter' });
+    it('should not call props.onEdit and props.onClose on enter if data type is DataTypes.TYPE_BLOB', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var blobAttributeValue, blobAttributeType, user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    blobAttributeValue = {
+                        uri: 'entities/1/attributes/Blob/484Uit5c0',
+                        value: 'text\ntext'
+                    };
+                    blobAttributeType = {
+                        label: 'Blob',
+                        name: 'Blob',
+                        type: 'Blob',
+                        uri: 'configuration/entityTypes/Product/attributes/Blob'
+                    };
+                    user = setUp({ attributeType: blobAttributeType, attributeValue: blobAttributeValue }).user;
+                    return [4 /*yield*/, user.click(screen.getByRole('textbox'))];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, user.keyboard('{Enter}')];
+                case 2:
+                    _a.sent();
+                    expect(defaultProps.onEdit).not.toHaveBeenCalled();
+                    expect(defaultProps.onClose).not.toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
         });
-        expect(defaultProps.onEdit).not.toHaveBeenCalled();
-        expect(defaultProps.onClose).not.toHaveBeenCalled();
-    });
-    it('should call props.onEdit and props.onClose on backdrop click if new value is set', function () {
-        var component = shallow(React.createElement(InlineSimpleAttributeEditor, __assign({}, defaultProps)));
-        var dataTypeValueEditor = component.find(DataTypeValueEditor);
-        act(function () {
-            dataTypeValueEditor.prop('onChange')('new 123');
+    }); });
+    it('should not call props.onEdit and props.onClose on enter if data type is DataTypes.TYPE_TEXT', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var textAttributeValue, textAttributeType, user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    textAttributeValue = {
+                        uri: 'entities/1/attributes/Text/484Uit5c0',
+                        value: 'text\ntext'
+                    };
+                    textAttributeType = {
+                        label: 'Text',
+                        name: 'Text',
+                        type: 'Text',
+                        uri: 'configuration/entityTypes/Product/attributes/Text'
+                    };
+                    user = setUp({ attributeType: textAttributeType, attributeValue: textAttributeValue }).user;
+                    return [4 /*yield*/, user.click(screen.getByRole('textbox'))];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, user.keyboard('{Enter}')];
+                case 2:
+                    _a.sent();
+                    expect(defaultProps.onEdit).not.toHaveBeenCalled();
+                    expect(defaultProps.onClose).not.toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
         });
-        component.update();
-        expect(component.find(DataTypeValueEditor).prop('value')).toEqual('new 123');
-        var onBackdropClickProp = component.find(Popover).prop('onBackdropClick');
-        act(function () {
-            onBackdropClickProp();
+    }); });
+    it('should call props.onEdit and props.onClose on backdrop click if new value is set', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, backdrop;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    return [4 /*yield*/, user.type(screen.getByRole('textbox'), '456')];
+                case 1:
+                    _a.sent();
+                    backdrop = screen.getByRole('presentation').firstChild;
+                    return [4 /*yield*/, user.click(backdrop)];
+                case 2:
+                    _a.sent();
+                    expect(defaultProps.onEdit).toHaveBeenCalledWith(__assign(__assign({}, attributeValue), { value: '123456' }));
+                    expect(defaultProps.onClose).toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
         });
-        expect(defaultProps.onEdit).toHaveBeenCalledWith(__assign(__assign({}, attributeValue), { value: 'new 123' }));
-        expect(defaultProps.onClose).toHaveBeenCalled();
-    });
+    }); });
 });

package/InternalLink/InternalLink.test.js

@@ -1,24 +1,54 @@
+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);
+};
 import React from 'react';
-import { mount } from 'enzyme';
-import { BrowserRouter, Link } from 'react-router-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { BrowserRouter } from 'react-router-dom';
 import { InternalLink } from './InternalLink';
 describe('InternalLink tests', function () {
+    var setUp = function (props) {
+        if (props === void 0) { props = {}; }
+        var user = userEvent.setup();
+        var Providers = function (_a) {
+            var children = _a.children;
+            return React.createElement(BrowserRouter, null, children);
+        };
+        return __assign({ user: user }, render(React.createElement(InternalLink, __assign({}, props)), { wrapper: Providers }));
+    };
     it('should render router link in router context', function () {
         window.location.assign('https://tst-01.reltio.com/nui/uitest1');
-        var wrapper = mount(React.createElement(BrowserRouter, null,
-            React.createElement(InternalLink, { href: 'https://tst-01.reltio.com/nui/uitest1/search' })));
-        expect(wrapper.find(Link).prop('to')).toBe('/nui/uitest1/search');
+        setUp({ href: 'https://tst-01.reltio.com/nui/uitest1/search' });
+        var link = screen.getByRole('link');
+        expect(link).toHaveAttribute('href', '/nui/uitest1/search');
     });
     it('should render html link outside router context', function () {
         window.location.assign('https://tst-01.reltio.com/ui/uitest1');
-        var wrapper = mount(React.createElement(InternalLink, { href: 'https://tst-01.reltio.com/ui/uitest1/search' }));
-        expect(wrapper.find('a').prop('href')).toBe('https://tst-01.reltio.com/ui/uitest1/search');
+        render(React.createElement(InternalLink, { href: 'https://tst-01.reltio.com/ui/uitest1/search' }));
+        var link = screen.getByRole('link');
+        expect(link).toHaveAttribute('href', 'https://tst-01.reltio.com/ui/uitest1/search');
     });
     it('should not render Link if href is undefined', function () {
         window.location.assign('https://tst-01.reltio.com/nui/uitest1');
-        var wrapper = mount(React.createElement(BrowserRouter, null,
-            React.createElement(InternalLink, null)));
-        expect(wrapper.find(Link).length).toBe(0);
-        expect(wrapper.find('a').prop('href')).toBeUndefined();
+        setUp();
+        expect(screen.queryByRole('link')).not.toBeInTheDocument();
+    });
+    it('should apply custom class name', function () {
+        setUp({ href: 'https://tst-01.reltio.com/nui/uitest1/search', className: 'custom-class' });
+        var link = screen.getByRole('link');
+        expect(link).toHaveClass('custom-class');
+    });
+    it('should pass other props to the link', function () {
+        setUp({ href: 'https://tst-01.reltio.com/nui/uitest1/search', 'data-reltio-id': 'internal-link' });
+        var link = screen.getByTestId('internal-link');
+        expect(link).toBeInTheDocument();
     });
 });