@reltio/components 1.4.2044 → 1.4.2046

package/ConnectionRelationTypeSelector/ConnectionRelationTypeSelector.test.js

@@ -9,11 +9,46 @@ 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 } from 'enzyme';
-import { path, pick, propEq } from 'ramda';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { Directions } from '@reltio/mdm-sdk';
-import { RelationTypeSelector } from '../RelationTypeSelector';
 import { ConnectionRelationTypeSelector } from './ConnectionRelationTypeSelector';
 var relationTypes = [
     {
@@ -21,37 +56,27 @@ var relationTypes = [
         label: 'supported by',
         startObject: {
             uri: 'configuration/relationTypes/AccountTeam/startObject',
-            directionalContext: [
-                {
-                    uri: 'configuration/relationTypes/AccountTeam/startObject/directionalContext',
-                    labelPattern: 'supported by'
-                }
-            ],
-            objectTypeURI: 'configuration/entityTypes/Organization'
+            objectTypeURI: 'configuration/entityTypes/Organization',
+            objectType: {
+                uri: 'configuration/entityTypes/Organization',
+                label: 'Organization',
+                attributes: []
+            }
         },
         endObject: {
             uri: 'configuration/relationTypes/AccountTeam/endObject',
-            directionalContext: [
-                {
-                    uri: 'configuration/relationTypes/AccountTeam/endObject/directionalContext',
-                    labelPattern: 'supports'
-                }
-            ],
-            objectTypeURI: 'configuration/entityTypes/Employee'
+            objectTypeURI: 'configuration/entityTypes/Employee',
+            objectType: {
+                uri: 'configuration/entityTypes/Employee',
+                label: 'Employee',
+                attributes: []
+            }
         },
         attributes: [
             {
                 label: 'Role',
                 name: 'Role',
                 type: 'String',
-                hidden: false,
-                important: false,
-                system: false,
-                required: false,
-                attributeOrdering: {
-                    orderType: 'ASC',
-                    orderingStrategy: 'LUD'
-                },
                 uri: 'configuration/relationTypes/AccountTeam/attributes/Role'
             }
         ],
@@ -62,115 +87,104 @@ var relationTypes = [
         label: 'knowledge',
         startObject: {
             uri: 'configuration/relationTypes/knowledge/startObject',
-            directionalContext: [
-                {
-                    uri: 'configuration/relationTypes/knowledge/startObject/directionalContext',
-                    labelPattern: ''
-                }
-            ],
-            objectTypeURI: 'configuration/entityTypes/Topic'
+            objectTypeURI: 'configuration/entityTypes/Topic',
+            objectType: {
+                uri: 'configuration/entityTypes/Topic',
+                label: 'Topic',
+                attributes: []
+            }
         },
         endObject: {
             uri: 'configuration/relationTypes/knowledge/endObject',
-            directionalContext: [
-                {
-                    uri: 'configuration/relationTypes/knowledge/endObject/directionalContext',
-                    labelPattern: ''
-                }
-            ],
-            objectTypeURI: 'configuration/entityTypes/Employee'
+            objectTypeURI: 'configuration/entityTypes/Employee',
+            objectType: {
+                uri: 'configuration/entityTypes/Employee',
+                label: 'Employee',
+                attributes: []
+            }
         },
         attributes: [
             {
                 label: 'Role',
                 name: 'Role',
                 type: 'String',
-                hidden: false,
-                important: false,
-                system: false,
-                required: false,
-                attributeOrdering: {
-                    orderType: 'ASC',
-                    orderingStrategy: 'LUD'
-                },
                 uri: 'configuration/relationTypes/knowledge/attributes/Role'
             }
         ],
         direction: 'directed'
     }
 ];
-// make useEffect work in shallow render
-jest.mock('react', function () { return (__assign(__assign({}, jest.requireActual('react')), { useEffect: jest.fn().mockImplementation(function (f) { return f(); }) })); });
-describe('ConnectionRelationTypeSelector tests', function () {
-    var expectedOptions = [
-        __assign({ label: relationTypes[1].label, value: "".concat(relationTypes[1].uri, ",").concat(Directions.IN) }, pick(['startObject', 'endObject'], relationTypes[1])),
-        __assign({ label: path(['directionalContext', 0, 'labelPattern'], relationTypes[0].endObject), value: "".concat(relationTypes[0].uri, ",").concat(Directions.OUT) }, pick(['startObject', 'endObject'], relationTypes[0]))
-    ];
-    it('should render main parts', function () {
-        var component = shallow(React.createElement(ConnectionRelationTypeSelector, null));
-        var selector = component.find(RelationTypeSelector);
-        expect(selector).toHaveLength(1);
-    });
-    it('should render correct props', function () {
-        var relation = { relationType: 'configuration/relationTypes/AccountTeam', direction: Directions.OUT };
-        var expectedValue = expectedOptions.find(propEq('value', "".concat(relation.relationType, ",").concat(relation.direction)));
-        var onChange = jest.fn();
-        var component = shallow(React.createElement(ConnectionRelationTypeSelector, { relation: relation, inRelationTypes: [relationTypes[1]], outRelationTypes: [relationTypes[0]], onChange: onChange }));
-        var selector = component.find(RelationTypeSelector);
-        expect(selector).toHaveLength(1);
-        expect(selector.prop('options')).toStrictEqual(expectedOptions);
-        expect(selector.prop('value')).toStrictEqual(expectedValue);
-        expect(onChange).not.toHaveBeenCalled();
-    });
-    it('should call onChange when RelationTypeSelector onChange was called', function () {
-        var expectedRelationType = {
-            type: relationTypes[0],
-            direction: Directions.OUT
-        };
-        var onChange = jest.fn();
-        var component = shallow(React.createElement(ConnectionRelationTypeSelector, { inRelationTypes: [relationTypes[1]], outRelationTypes: [relationTypes[0]], onChange: onChange }));
-        var selector = component.find(RelationTypeSelector);
-        expect(selector).toHaveLength(1);
-        selector.prop('onChange')(expectedOptions[1]);
-        expect(onChange).toHaveBeenCalledWith(expectedRelationType);
-    });
-    it('should not fail when onChange prop is undefined', function () {
-        var component = shallow(React.createElement(ConnectionRelationTypeSelector, { inRelationTypes: [relationTypes[1]], outRelationTypes: [relationTypes[0]] }));
-        var selector = component.find(RelationTypeSelector);
-        expect(selector).toHaveLength(1);
-        selector.prop('onChange')(expectedOptions[1]);
+var defaultProps = {
+    onChange: jest.fn(),
+    inRelationTypes: [relationTypes[1]],
+    outRelationTypes: [relationTypes[0]]
+};
+var setUp = function (props) {
+    if (props === void 0) { props = defaultProps; }
+    var user = userEvent.setup();
+    return __assign(__assign({}, render(React.createElement(ConnectionRelationTypeSelector, __assign({}, props)))), { user: user });
+};
+describe('Connection relation type selector tests', function () {
+    afterEach(function () {
+        jest.clearAllMocks();
     });
-    it('should set first relation if applyFirstByDefault is true and Selector is empty', function () {
-        var expectedRelation = {
-            direction: Directions.IN,
-            type: relationTypes[1]
-        };
-        var onChange = jest.fn();
-        var component = shallow(React.createElement(ConnectionRelationTypeSelector, { inRelationTypes: [relationTypes[1]], outRelationTypes: [relationTypes[0]], applyFirstByDefault: true, onChange: onChange }));
-        var selector = component.find(RelationTypeSelector);
-        expect(selector).toHaveLength(1);
-        expect(selector.prop('options')).toStrictEqual(expectedOptions);
-        expect(onChange).toHaveBeenCalledWith(expectedRelation);
+    it('should render correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var relation, props, user, options;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    relation = { relationType: 'configuration/relationTypes/AccountTeam', direction: Directions.OUT };
+                    props = __assign(__assign({}, defaultProps), { relation: relation });
+                    user = setUp(props).user;
+                    screen.getByText('Select relationship type');
+                    screen.getByText('supported by');
+                    return [4 /*yield*/, user.click(screen.getByRole('combobox'))];
+                case 1:
+                    _a.sent();
+                    options = screen.getAllByRole('option');
+                    expect(options).toHaveLength(2);
+                    expect(options[0]).toHaveTextContent('knowledge');
+                    expect(options[0]).toHaveTextContent('Topic ↔ Employee');
+                    expect(options[1]).toHaveTextContent('supported by');
+                    expect(options[1]).toHaveTextContent('Organization ↔ Employee');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should call onChange on item click correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    return [4 /*yield*/, user.click(screen.getByRole('combobox'))];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(screen.getByText('supported by'))];
+                case 2:
+                    _a.sent();
+                    expect(defaultProps.onChange).toHaveBeenCalledWith({ type: relationTypes[0], direction: Directions.OUT });
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should set first relation if applyFirstByDefault is true and selector is empty', function () {
+        var props = __assign(__assign({}, defaultProps), { applyFirstByDefault: true });
+        setUp(props);
+        expect(props.onChange).toHaveBeenCalledWith({ direction: Directions.IN, type: relationTypes[1] });
     });
-    it('should not set first relation if applyFirstByDefault is true and Selector is not empty', function () {
+    it('should not set first relation if applyFirstByDefault is true and selector is not empty', function () {
         var relation = {
             direction: Directions.OUT,
             relationUri: 'relations/uri123',
             relationType: relationTypes[0].uri
         };
-        var onChange = jest.fn();
-        var component = shallow(React.createElement(ConnectionRelationTypeSelector, { relation: relation, inRelationTypes: [relationTypes[1]], outRelationTypes: [relationTypes[0]], applyFirstByDefault: true, onChange: onChange }));
-        var selector = component.find(RelationTypeSelector);
-        expect(selector).toHaveLength(1);
-        expect(selector.prop('options')).toStrictEqual(expectedOptions);
-        expect(onChange).not.toHaveBeenCalled();
+        var props = __assign(__assign({}, defaultProps), { applyFirstByDefault: true, relation: relation });
+        setUp(props);
+        expect(props.onChange).not.toHaveBeenCalled();
     });
     it('should not set first relation if applyFirstByDefault is false', function () {
-        var onChange = jest.fn();
-        var component = shallow(React.createElement(ConnectionRelationTypeSelector, { inRelationTypes: [relationTypes[1]], outRelationTypes: [relationTypes[0]], applyFirstByDefault: false, onChange: onChange }));
-        var selector = component.find(RelationTypeSelector);
-        expect(selector).toHaveLength(1);
-        expect(selector.prop('options')).toStrictEqual(expectedOptions);
-        expect(onChange).not.toHaveBeenCalled();
+        setUp();
+        expect(defaultProps.onChange).not.toHaveBeenCalled();
     });
 });

package/DateIntervalSelector/DateIntervalSelector.test.js

@@ -9,72 +9,94 @@ 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 { act } from 'react-dom/test-utils';
-import TextField from '@mui/material/TextField';
-import { SimpleDropDownSelector } from '../SimpleDropDownSelector';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { DateIntervalSelector } from './DateIntervalSelector';
-describe('DateIntervalSelector tests', function () {
-    var interval = [4, 'months'];
-    var props = {
-        interval: interval,
-        onChange: jest.fn(),
-        onFocus: jest.fn()
-    };
-    var options = [
-        { value: 'minutes', label: 'Minutes' },
-        { value: 'hours', label: 'Hours' },
-        { value: 'days', label: 'Days' },
-        { value: 'weeks', label: 'Weeks' },
-        { value: 'months', label: 'Months' },
-        { value: 'years', label: 'Years' }
-    ];
-    it('should render correct default state', function () {
-        var wrapper = shallow(React.createElement(DateIntervalSelector, __assign({}, props)));
-        var numberInput = wrapper.find(TextField).filterWhere(function (component) { return component.prop('type') === 'number'; });
-        var unitInput = wrapper.find(SimpleDropDownSelector);
-        expect(numberInput.length).toBe(1);
-        expect(numberInput.prop('value')).toBe(4);
-        expect(unitInput.length).toBe(1);
-        expect(unitInput.prop('value')).toStrictEqual({ value: 'months', label: 'Months' });
-        expect(unitInput.prop('options')).toStrictEqual(options);
-    });
-    it('should call props.onChange on number change', function () {
-        var wrapper = shallow(React.createElement(DateIntervalSelector, __assign({}, props)));
-        var numberInput = wrapper.find(TextField).filterWhere(function (component) { return component.prop('type') === 'number'; });
-        act(function () {
-            var changeEvent = { target: { value: '10' } };
-            numberInput.prop('onChange')(changeEvent);
-        });
-        wrapper.update();
-        expect(props.onChange).toHaveBeenCalledWith([10, 'months']);
-    });
-    it('should call props.onChange on unit change', function () {
-        var wrapper = shallow(React.createElement(DateIntervalSelector, __assign({}, props)));
-        var unitInput = wrapper.find(SimpleDropDownSelector);
-        act(function () {
-            unitInput.prop('onChange')({ value: 'hours', label: 'Hours' });
-        });
-        wrapper.update();
-        expect(props.onChange).toHaveBeenCalledWith([4, 'hours']);
-    });
-    it('should call props.onFocus on focus number input', function () {
-        var wrapper = mount(React.createElement(DateIntervalSelector, __assign({}, props)));
-        var numberInput = wrapper.find('input[type="number"]');
-        act(function () {
-            numberInput.simulate('focus');
-        });
-        wrapper.update();
-        expect(props.onFocus).toHaveBeenCalled();
-    });
-    it('should call props.onFocus on focus unit input', function () {
-        var wrapper = mount(React.createElement(DateIntervalSelector, __assign({}, props)));
-        var unitInput = wrapper.find('input[type="text"]');
-        act(function () {
-            unitInput.simulate('focus');
+var defaultProps = {
+    interval: [4, 'months'],
+    onChange: jest.fn(),
+    onFocus: jest.fn()
+};
+var setUp = function (props) {
+    if (props === void 0) { props = defaultProps; }
+    var user = userEvent.setup();
+    return __assign(__assign({}, render(React.createElement(DateIntervalSelector, __assign({}, props)))), { user: user });
+};
+describe('Date interval selector tests', function () {
+    it('should work correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, input, combobox, options;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    input = screen.getByRole('spinbutton');
+                    expect(input).toHaveAttribute('min', '1');
+                    expect(input).toHaveValue(4);
+                    return [4 /*yield*/, user.click(input)];
+                case 1:
+                    _a.sent();
+                    expect(defaultProps.onFocus).toHaveBeenCalledWith(expect.objectContaining({ type: 'focus', target: input }));
+                    return [4 /*yield*/, user.type(input, '0')];
+                case 2:
+                    _a.sent();
+                    expect(defaultProps.onChange).toHaveBeenCalledWith([40, 'months']);
+                    screen.getByText('Months');
+                    combobox = screen.getByRole('combobox');
+                    return [4 /*yield*/, user.click(combobox)];
+                case 3:
+                    _a.sent();
+                    expect(defaultProps.onFocus).toHaveBeenCalledWith(expect.objectContaining({ type: 'focus', target: combobox }));
+                    options = screen.getAllByRole('option');
+                    expect(options).toHaveLength(6);
+                    expect(options[0]).toHaveTextContent('Minutes');
+                    expect(options[1]).toHaveTextContent('Hours');
+                    expect(options[2]).toHaveTextContent('Days');
+                    expect(options[3]).toHaveTextContent('Weeks');
+                    expect(options[4]).toHaveTextContent('Months');
+                    expect(options[5]).toHaveTextContent('Years');
+                    return [4 /*yield*/, user.click(options[0])];
+                case 4:
+                    _a.sent();
+                    expect(defaultProps.onChange).toHaveBeenCalledWith([4, 'minutes']);
+                    return [2 /*return*/];
+            }
         });
-        wrapper.update();
-        expect(props.onFocus).toHaveBeenCalled();
-    });
+    }); });
 });

package/DefaultCellValueRenderer/DefaultCellValueRenderer.js

@@ -25,7 +25,7 @@ export var DefaultCellValueRenderer = function (props) {
         default: {
             var dataTypeValue = React.createElement(DataTypeValue, { value: value, dataTypeDefinition: dataTypeDefinition });
             return (React.createElement(ExpandedValueTooltip, { value: dataTypeValue },
-                React.createElement("div", { className: classnames(styles.defaultWrapper, className) }, dataTypeValue)));
+                React.createElement("div", { "data-reltio-id": "default-renderer", className: classnames(styles.defaultWrapper, className) }, dataTypeValue)));
         }
     }
 };

package/DefaultCellValueRenderer/DefaultCellValueRenderer.test.js

@@ -1,54 +1,24 @@
-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 { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import { DataTypes } from '@reltio/mdm-sdk';
-import { DataTypeValue } from '../DataTypeValue';
 import { DefaultCellValueRenderer } from './DefaultCellValueRenderer';
-import { BlobRenderer } from '../BlobRenderer';
-describe('DefaultCellValueRenderer', function () {
-    it('should render BlobRenderer if data type is "Blob"', function () {
-        var props = {
-            value: 'test',
-            columnData: {
-                id: 'test',
-                label: 'Test',
-                dataTypeDefinition: {
-                    type: DataTypes.TYPE_BLOB
-                }
-            }
+describe('Default cell value renderer tests', function () {
+    it('should render blob renderer if data type is "Blob"', function () {
+        var columnData = {
+            id: 'test',
+            label: 'Test',
+            dataTypeDefinition: { type: DataTypes.TYPE_BLOB }
         };
-        var wrapper = shallow(React.createElement(DefaultCellValueRenderer, __assign({}, props)));
-        var blobRenderer = wrapper.find(BlobRenderer);
-        expect(blobRenderer).toHaveLength(1);
-        expect(blobRenderer.props()).toEqual(props);
+        render(React.createElement(DefaultCellValueRenderer, { value: "test", columnData: columnData }));
+        expect(screen.getByTestId('blob-renderer')).toHaveTextContent('test');
     });
-    it('should render DataTypeValue if data type is not "Blob"', function () {
-        var value = 123;
-        var dataTypeDefinition = {
-            type: DataTypes.TYPE_INT
+    it('should render data type value if data type is not "Blob"', function () {
+        var columnData = {
+            id: 'test',
+            label: 'Test',
+            dataTypeDefinition: { type: DataTypes.TYPE_INT }
         };
-        var props = {
-            value: value,
-            columnData: {
-                id: 'test',
-                label: 'Test',
-                dataTypeDefinition: dataTypeDefinition
-            }
-        };
-        var wrapper = shallow(React.createElement(DefaultCellValueRenderer, __assign({}, props)));
-        var dataValue = wrapper.find(DataTypeValue);
-        expect(dataValue).toHaveLength(1);
-        expect(dataValue.prop('value')).toEqual(value);
-        expect(dataValue.prop('dataTypeDefinition')).toEqual(dataTypeDefinition);
+        render(React.createElement(DefaultCellValueRenderer, { value: 123, columnData: columnData }));
+        expect(screen.getByTestId('default-renderer')).toHaveTextContent('123');
     });
 });

package/DeleteButton/DeleteButton.spec.js

@@ -1,20 +1,58 @@
+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 } from 'enzyme';
-import DeleteIcon from '@mui/icons-material/Delete';
-import { SmallIconButtonWithTooltip } from '../SmallIconButton';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { DeleteButton } from './DeleteButton';
 describe('Delete button test', function () {
-    var component, onClickFn;
-    var getButton = function (component) { return component.find(SmallIconButtonWithTooltip); };
-    beforeEach(function () {
-        onClickFn = jest.fn();
-        component = shallow(React.createElement(DeleteButton, { onClick: onClickFn }));
-    });
-    it('should render correctly', function () {
-        expect(getButton(component).props()).toMatchObject({
-            tooltipTitle: 'Delete',
-            onClick: onClickFn,
-            icon: DeleteIcon
+    it('should render and work correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, onClick;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = userEvent.setup();
+                    onClick = jest.fn();
+                    render(React.createElement(DeleteButton, { onClick: onClick }));
+                    return [4 /*yield*/, user.click(screen.getByLabelText('Delete'))];
+                case 1:
+                    _a.sent();
+                    expect(onClick).toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
         });
-    });
+    }); });
 });