@reltio/components 1.4.1906 → 1.4.1907

package/esm/AttributesView/AttributesView.test.js

@@ -10,47 +10,80 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import React from 'react';
-import { mount } from 'enzyme';
 import { Mode } from '@reltio/mdm-sdk';
 import { AttributesView } from './AttributesView';
-import { ReadOnlyAttributesView } from '../ReadOnlyAttributesView';
-import { EditModeAttributesView } from '../EditModeAttributesView';
-import { EntityContext } from '../contexts/EntityContext';
 import { MdmModuleProvider } from '../contexts/MdmModuleContext';
-jest.mock('../ReadOnlyAttributesView', function () { return ({
-    ReadOnlyAttributesView: function () { return null; }
-}); });
-jest.mock('../EditModeAttributesView', function () { return ({
-    EditModeAttributesView: function () { return null; }
-}); });
-jest.mock('../contexts/EntityContext', function () { return ({
-    EntityContext: { Provider: function (_a) {
-            var children = _a.children;
-            return children;
-        } }
-}); });
-var setUp = function (props) {
-    return mount(React.createElement(MdmModuleProvider, { values: { entityWithDiff: undefined, mode: undefined } },
-        React.createElement(AttributesView, __assign({}, props))));
-};
+import { render, screen } from '@testing-library/react';
 describe('AttributesView tests', function () {
+    var entity = {
+        type: 'configuration/entityTypes/HCP',
+        uri: 'entities/02ZRRE9',
+        attributes: {
+            FirstName: [
+                {
+                    type: 'configuration/entityTypes/HCP/attributes/FirstName',
+                    ov: true,
+                    value: 'nameValue',
+                    uri: 'entities/02ZRRE9/attributes/FirstName/15p60Tel'
+                }
+            ]
+        }
+    };
+    var metadata = {
+        entityTypes: [
+            {
+                uri: 'configuration/entityTypes/HCP',
+                attributes: [
+                    {
+                        uri: 'configuration/entityTypes/HCP/attributes/FirstName',
+                        type: 'String',
+                        name: 'FirstName',
+                        label: 'First Name',
+                        access: ['READ', 'CREATE', 'UPDATE', 'INITIATE_CHANGE_REQUEST']
+                    }
+                ]
+            }
+        ]
+    };
+    var actions = {
+        removeAttribute: function () { }
+    };
+    var mdmDefaultValues = {
+        metadata: metadata,
+        modifiedEntities: { 'entities/02ZRRE9': entity },
+        dependentLookups: { editors: {}, structure: {}, initedTypeUris: [] }
+    };
+    var setUp = function (props, mdmValues) {
+        if (props === void 0) { props = {}; }
+        if (mdmValues === void 0) { mdmValues = mdmDefaultValues; }
+        var Providers = function (_a) {
+            var children = _a.children;
+            return (React.createElement(MdmModuleProvider, { values: mdmValues, actions: actions }, children));
+        };
+        return render(React.createElement(AttributesView, __assign({}, props)), { wrapper: Providers });
+    };
     it('should render ReadOnlyAttributesView in read mode if mode is "viewing"', function () {
-        var component = setUp({ mode: Mode.Viewing });
-        expect(component.find(ReadOnlyAttributesView).length).toBe(1);
+        setUp({ mode: Mode.Viewing, entity: entity });
+        expect(screen.getByText('nameValue')).toBeInTheDocument();
+    });
+    it('should render ReadOnlyAttributesView in read mode if mode is "viewing" in context', function () {
+        setUp({ entity: entity }, __assign(__assign({}, mdmDefaultValues), { mode: Mode.Viewing }));
+        expect(screen.getByText('nameValue')).toBeInTheDocument();
+    });
+    it('should render EditModeAttributesView in read mode if mode is "editing"', function () {
+        setUp({ mode: Mode.Editing, entity: entity });
+        expect(screen.getByRole('textbox')).toHaveValue('nameValue');
     });
-    it('should render EditModeAttributesView in edit mode if mode is "editing"', function () {
-        var component = setUp({ mode: Mode.Editing });
-        expect(component.find(EditModeAttributesView).length).toBe(1);
+    it('should render EditModeAttributesView in read mode if mode is "editing" in context', function () {
+        setUp({ entity: entity }, __assign(__assign({}, mdmDefaultValues), { mode: Mode.Editing }));
+        expect(screen.getByRole('textbox')).toHaveValue('nameValue');
     });
-    it('should render EditModeAttributesView in edit mode id mode is "suggesting"', function () {
-        var component = setUp({ mode: Mode.Editing });
-        expect(component.find(EditModeAttributesView).length).toBe(1);
+    it('should render EditModeAttributesView in read mode if mode is "suggesting"', function () {
+        setUp({ mode: Mode.Suggesting, entity: entity });
+        expect(screen.getByRole('textbox')).toHaveValue('nameValue');
     });
-    it('should provide AttributesView with context', function () {
-        var entity = { uri: 'uri1' };
-        var component = setUp({ mode: Mode.Viewing, entity: entity });
-        var contextProvider = component.find(EntityContext.Provider);
-        expect(contextProvider.prop('value')).toBe(entity);
-        expect(contextProvider.childAt(0)).toEqual(component.find(ReadOnlyAttributesView));
+    it('should render EditModeAttributesView in read mode if mode is "suggesting" in context', function () {
+        setUp({ entity: entity }, __assign(__assign({}, mdmDefaultValues), { mode: Mode.Suggesting }));
+        expect(screen.getByRole('textbox')).toHaveValue('nameValue');
     });
 });

package/esm/AutoSizeList/AutoSizeList.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;
+    return g = { next: verb(0), "throw": verb(1), "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 } from 'enzyme';
 import AutoSizeList from './AutoSizeList';
-import { VariableSizeList as List } from 'react-window';
 import { delayPromise } from '../test-utils';
+import { render, screen } from '@testing-library/react';
 jest.mock('resize-observer-polyfill', function () { return ({
     __esModule: true,
     default: jest.fn().mockImplementation(function (onResize) {
@@ -26,74 +61,61 @@ jest.mock('resize-observer-polyfill', function () { return ({
     })
 }); });
 describe('AutoSizeList tests', function () {
-    var props = {
+    var defaultProps = {
         width: 100,
         height: 100,
         data: [1, 2, 3],
         defaultItemSize: 50,
-        children: function () { return null; }
+        children: function (_a) {
+            var data = _a.data, index = _a.index;
+            return "child-".concat(data[index]);
+        }
     };
-    it('should render correctly', function () {
-        var wrapper = mount(React.createElement(AutoSizeList, __assign({}, props)));
-        var itemCount = props.data.length;
-        var list = wrapper.find(List);
-        expect(list.props()).toMatchObject({
-            width: props.width,
-            height: props.height,
-            itemCount: itemCount,
-            itemData: props.data
-        });
-        var listItems = list.find('.item');
-        expect(listItems).toHaveLength(itemCount);
-        listItems.forEach(function (item) {
-            expect(item.childAt(0).prop('style')).toEqual({
-                visibility: 'hidden'
-            });
-        });
-        return delayPromise()
-            .then(function () { return delayPromise(100); })
-            .then(function () {
-            wrapper.update();
-            listItems = wrapper.find(List).find('.item');
-            expect(listItems).toHaveLength(itemCount);
-            listItems.forEach(function (item) {
-                expect(item.childAt(0).prop('style')).toEqual({
-                    visibility: undefined
-                });
-            });
-        });
-    });
-    it('should not add style.visibility to items if props.showNotMeasuredItems is true', function () {
-        var wrapper = mount(React.createElement(AutoSizeList, __assign({}, props, { showNotMeasuredItems: true })));
-        var itemCount = props.data.length;
-        var list = wrapper.find(List);
-        expect(list.props()).toMatchObject({
-            width: props.width,
-            height: props.height,
-            itemCount: itemCount,
-            itemData: props.data
-        });
-        var listItems = list.find('.item');
-        expect(listItems).toHaveLength(itemCount);
-        listItems.forEach(function (item) {
-            expect(item.childAt(0).prop('style')).toBeUndefined();
+    var setUp = function (props) {
+        if (props === void 0) { props = defaultProps; }
+        return render(React.createElement(AutoSizeList, __assign({}, props)));
+    };
+    it('should render correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setUp();
+                    expect(screen.getByText('child-1')).toHaveStyle({ visibility: 'hidden' });
+                    expect(screen.getByText('child-2')).toHaveStyle({ visibility: 'hidden' });
+                    expect(screen.getByText('child-3')).toHaveStyle({ visibility: 'hidden' });
+                    return [4 /*yield*/, delayPromise(100)];
+                case 1:
+                    _a.sent();
+                    expect(screen.getByText('child-1')).toHaveStyle({ visibility: 'visible' });
+                    expect(screen.getByText('child-2')).toHaveStyle({ visibility: 'visible' });
+                    expect(screen.getByText('child-3')).toHaveStyle({ visibility: 'visible' });
+                    return [2 /*return*/];
+            }
         });
-        return delayPromise()
-            .then(function () { return delayPromise(); })
-            .then(function () {
-            wrapper.update();
-            listItems = wrapper.find(List).find('.item');
-            expect(listItems).toHaveLength(itemCount);
-            listItems.forEach(function (item) {
-                expect(item.childAt(0).prop('style')).toBeUndefined();
-            });
+    }); });
+    it('should not add style.visibility to items if props.showNotMeasuredItems is true', function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setUp(__assign(__assign({}, defaultProps), { showNotMeasuredItems: true }));
+                    expect(screen.getByText('child-1')).not.toHaveAttribute('visibility');
+                    expect(screen.getByText('child-2')).not.toHaveAttribute('visibility');
+                    expect(screen.getByText('child-3')).not.toHaveAttribute('visibility');
+                    return [4 /*yield*/, delayPromise(100)];
+                case 1:
+                    _a.sent();
+                    expect(screen.getByText('child-1')).not.toHaveAttribute('visibility');
+                    expect(screen.getByText('child-2')).not.toHaveAttribute('visibility');
+                    expect(screen.getByText('child-3')).not.toHaveAttribute('visibility');
+                    return [2 /*return*/];
+            }
         });
-    });
+    }); });
     it('should support props.listRef', function () {
         var listRef = {
             current: undefined
         };
-        mount(React.createElement(AutoSizeList, __assign({}, props, { listRef: listRef })));
+        setUp(__assign(__assign({}, defaultProps), { listRef: listRef }));
         expect(listRef.current.scrollTo).toBeDefined();
     });
 });

package/esm/{ActionsPanel/components/MenuItemRenderer/MenuItemRenderer.spec.js → AvatarWithFallback/AvatarWithFallback.test.js}

@@ -35,39 +35,23 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { MenuItemRenderer } from './MenuItemRenderer';
-describe('MenuItemRenderer tests', function () {
-    var ActionButton = function (_a) {
-        var mode = _a.mode, onMenuClose = _a.onMenuClose, testProp = _a.testProp;
-        return React.createElement("div", { "data-reltio-id": "action-button", "data-mode": mode, "data-test": testProp, onClick: onMenuClose });
-    };
-    var item = {
-        ActionButton: ActionButton,
-        show: true,
-        testProp: 'testProp'
-    };
-    it('should render main parts', function () {
-        render(React.createElement(MenuItemRenderer, { item: item }));
-        var button = screen.getByTestId('action-button');
-        expect(button).toBeInTheDocument();
-        expect(button).toHaveAttribute('data-mode', 'menuItem');
-        expect(button).toHaveAttribute('data-test', 'testProp');
-    });
-    it('should call onMenuClose on button click', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var onMenuClose;
+import { AvatarWithFallback } from './AvatarWithFallback';
+import { fireEvent, render, screen } from '@testing-library/react';
+describe('Avatar with fallback suite', function () {
+    it('should show icon if icon url is provided', function () { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    onMenuClose = jest.fn();
-                    render(React.createElement(MenuItemRenderer, { item: item, onMenuClose: onMenuClose }));
-                    return [4 /*yield*/, userEvent.click(screen.getByTestId('action-button'))];
-                case 1:
-                    _a.sent();
-                    expect(onMenuClose).toHaveBeenCalled();
-                    return [2 /*return*/];
-            }
+            render(React.createElement(AvatarWithFallback, { icon: "icon" }));
+            expect(screen.getByRole('img')).toHaveAttribute('src', 'icon');
+            return [2 /*return*/];
         });
     }); });
+    it('should show text if icon url is not provided', function () {
+        render(React.createElement(AvatarWithFallback, { avatarText: "text" }));
+        expect(screen.getByText('text')).toBeInTheDocument();
+    });
+    it('should show text if error has happened', function () {
+        render(React.createElement(AvatarWithFallback, { icon: "icon", avatarText: "text" }));
+        fireEvent.error(screen.getByRole('img'));
+        expect(screen.getByText('text')).toBeInTheDocument();
+    });
 });

package/esm/BarChart/BarChart.test.js

@@ -1,3 +1,14 @@
+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) {
@@ -34,84 +45,136 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 import React from 'react';
-import { shallow, mount } from 'enzyme';
-import { BarChart as BarChartWidget, CartesianGrid, Tooltip, Bar, XAxis, YAxis } from 'recharts';
 import { BarChart } from './BarChart';
+import { render, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 describe('BarChart', function () {
-    var data = [
-        { label: 'first', value: 1, group: '1' },
-        { label: 'second', value: 2, group: '2' },
-        { label: 'third', value: 3, group: '3' }
-    ];
-    var defaultBarColor = '#0072CE';
-    var horizontalBarColor = '#9FC3FF';
+    var defaultProps = {
+        data: [
+            { label: 'first', value: 10, group: '1' },
+            { label: 'second', value: 20, group: '2' },
+            { label: 'third', value: 30, group: '3' }
+        ],
+        width: 100,
+        height: 200
+    };
+    var setUp = function (props) {
+        if (props === void 0) { props = defaultProps; }
+        var user = userEvent.setup();
+        return __assign({ user: user }, render(React.createElement(BarChart, __assign({}, props))));
+    };
     it('should render BarChartWidget', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var wrapper, barChart, bar, xAxis;
+        var container, chart, cartesianGrid, cartesianGridLines, xAxis, xAxisLine, xAxisTicks, yAxis, yAxisLine, yAxisTicks, barRectangles;
         return __generator(this, function (_a) {
-            wrapper = shallow(React.createElement(BarChart, { width: 100, height: 100, data: data }));
-            barChart = wrapper.find(BarChartWidget);
-            bar = wrapper.find(Bar);
-            xAxis = wrapper.find(XAxis);
-            expect(barChart).toHaveLength(1);
-            expect(wrapper.find(CartesianGrid)).toHaveLength(1);
-            expect(wrapper.find(Tooltip)).toHaveLength(1);
-            expect(bar).toHaveLength(1);
-            expect(xAxis).toHaveLength(1);
-            expect(wrapper.find(YAxis)).toHaveLength(1);
-            expect(barChart.prop('layout')).toBe('horizontal');
-            expect(bar.prop('fill')).toBe(defaultBarColor);
-            expect(xAxis.prop('angle')).toBe(0);
-            expect(xAxis.prop('textAnchor')).toBe('middle');
+            container = setUp().container;
+            chart = container.querySelector('.recharts-surface');
+            expect(chart).toHaveAttribute('width', "".concat(defaultProps.width));
+            expect(chart).toHaveAttribute('height', "".concat(defaultProps.height));
+            expect(container.querySelector('.recharts-cartesian-grid-vertical')).toBeInTheDocument();
+            expect(container.querySelector('.recharts-cartesian-grid-horizontal')).toBeInTheDocument();
+            expect(container.querySelector('.recharts-tooltip-wrapper')).toBeInTheDocument();
+            cartesianGrid = container.querySelector('.recharts-cartesian-grid');
+            cartesianGridLines = cartesianGrid.querySelectorAll('line');
+            expect(cartesianGrid).toBeInTheDocument();
+            expect(cartesianGridLines).toHaveLength(13);
+            cartesianGridLines.forEach(function (line) {
+                expect(line).toHaveAttribute('stroke', '#666');
+                expect(line).toHaveAttribute('stroke-dasharray', '3 3');
+                expect(line).toHaveAttribute('stroke-opacity', '0.4');
+            });
+            xAxis = container.querySelector('.recharts-xAxis');
+            xAxisLine = xAxis.querySelector('.recharts-cartesian-axis-line');
+            xAxisTicks = xAxis.querySelectorAll('.recharts-cartesian-axis-tick');
+            expect(xAxis).toBeInTheDocument();
+            expect(xAxisLine).toBeInTheDocument();
+            expect(xAxisLine).toHaveAttribute('text-anchor', 'middle');
+            expect(xAxisLine).toHaveAttribute('angle', '0');
+            expect(xAxisTicks).toHaveLength(3);
+            xAxisTicks.forEach(function (xAxisTick, index) {
+                within(xAxisTick).getByText(defaultProps.data[index].label);
+            });
+            yAxis = container.querySelector('.recharts-yAxis');
+            yAxisLine = yAxis.querySelector('.recharts-cartesian-axis-line');
+            yAxisTicks = yAxis.querySelectorAll('.recharts-cartesian-axis-tick');
+            expect(yAxis).toBeInTheDocument();
+            expect(yAxisLine).toBeInTheDocument();
+            expect(yAxisTicks).toHaveLength(8);
+            within(yAxisTicks[0]).getByText('0');
+            within(yAxisTicks[1]).getByText('5');
+            within(yAxisTicks[2]).getByText('10');
+            within(yAxisTicks[3]).getByText('15');
+            within(yAxisTicks[4]).getByText('20');
+            within(yAxisTicks[5]).getByText('25');
+            within(yAxisTicks[6]).getByText('30');
+            within(yAxisTicks[7]).getByText('35');
+            barRectangles = container.querySelectorAll('.recharts-bar-rectangle');
+            expect(barRectangles).toHaveLength(defaultProps.data.length);
             return [2 /*return*/];
         });
     }); });
     it('should render horizontal BarChartWidget', function () {
-        var wrapper = shallow(React.createElement(BarChart, { width: 100, height: 100, data: data, options: { isHorizontal: true } }));
-        var barChart = wrapper.find(BarChartWidget);
-        var bar = wrapper.find(Bar);
-        var xAxis = wrapper.find(XAxis);
-        expect(barChart).toHaveLength(1);
-        expect(wrapper.find(CartesianGrid)).toHaveLength(1);
-        expect(wrapper.find(Tooltip)).toHaveLength(1);
-        expect(bar).toHaveLength(1);
-        expect(xAxis).toHaveLength(1);
-        expect(wrapper.find(YAxis)).toHaveLength(1);
-        expect(barChart.prop('layout')).toBe('vertical');
-        expect(bar.prop('fill')).toBe(horizontalBarColor);
-        expect(xAxis.prop('angle')).toBe(0);
-        expect(xAxis.prop('textAnchor')).toBe('middle');
+        var container = setUp(__assign(__assign({}, defaultProps), { options: {
+                isHorizontal: true
+            } })).container;
+        expect(container.querySelector('.recharts-cartesian-grid-vertical')).not.toBeInTheDocument();
+        expect(container.querySelector('.recharts-cartesian-grid-horizontal')).toBeInTheDocument();
     });
     it('should render BarChartWidget with rotated XAxis labels', function () {
-        var wrapper = shallow(React.createElement(BarChart, { width: 100, height: 100, data: data, options: { isLabelRotated: true } }));
-        var xAxis = wrapper.find(XAxis);
-        expect(xAxis.prop('angle')).toBe(-45);
-        expect(xAxis.prop('textAnchor')).toBe('end');
+        var container = setUp(__assign(__assign({}, defaultProps), { options: {
+                isLabelRotated: true
+            } })).container;
+        var xAxis = container.querySelector('.recharts-xAxis');
+        var xAxisLine = xAxis.querySelector('.recharts-cartesian-axis-line');
+        expect(xAxisLine).toHaveAttribute('angle', '-45');
+        expect(xAxisLine).toHaveAttribute('text-anchor', 'end');
     });
     it('should render YAxis for big numbers correctly', function () {
-        var wrapper = shallow(React.createElement(BarChart, { width: 100, height: 100, data: data }));
-        expect(wrapper.find(YAxis)).toHaveLength(1);
-        var formatter = wrapper.find(YAxis).prop('tickFormatter');
-        expect(formatter(100100)).toBe('100.1K');
+        var container = setUp(__assign(__assign({}, defaultProps), { data: __spreadArray(__spreadArray([], defaultProps.data, true), [{ label: 'fouth', value: 100100, group: '3' }], false) })).container;
+        var yAxis = container.querySelector('.recharts-yAxis');
+        var yAxisTicks = yAxis.querySelectorAll('.recharts-cartesian-axis-tick');
+        expect(yAxisTicks).toHaveLength(8);
+        within(yAxisTicks[0]).getByText('0');
+        within(yAxisTicks[1]).getByText('15.0K');
+        within(yAxisTicks[2]).getByText('30.0K');
+        within(yAxisTicks[3]).getByText('45.0K');
+        within(yAxisTicks[4]).getByText('60.0K');
+        within(yAxisTicks[5]).getByText('75.0K');
+        within(yAxisTicks[6]).getByText('90.0K');
+        within(yAxisTicks[7]).getByText('105.0K');
     });
-    it('should render data cells', function () {
-        var _a;
-        var wrapper = mount(React.createElement(BarChart, { width: 100, height: 100, data: data }));
-        var bar = wrapper.find(Bar);
-        expect(bar).toHaveLength(1);
-        expect((_a = bar.prop('data')) === null || _a === void 0 ? void 0 : _a.length).toBe(3);
-        var barRectangles = bar.find('Rectangle');
-        barRectangles.forEach(function (item, index) {
-            expect(item.prop('label')).toBe(data[index].label);
-            expect(item.prop('value')).toBe(data[index].value);
-            expect(item.prop('fill')).toBe(defaultBarColor);
+    it('should call props.onItemClick on rect click', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onItemClickFn, _a, user, container, barRectangles;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    onItemClickFn = jest.fn();
+                    _a = setUp(__assign(__assign({}, defaultProps), { onItemClick: onItemClickFn })), user = _a.user, container = _a.container;
+                    barRectangles = container.querySelectorAll('.recharts-bar-rectangle');
+                    expect(barRectangles).toHaveLength(3);
+                    return [4 /*yield*/, user.click(barRectangles[0])];
+                case 1:
+                    _b.sent();
+                    expect(onItemClickFn).toHaveBeenLastCalledWith(defaultProps.data[0].group);
+                    return [4 /*yield*/, user.click(barRectangles[1])];
+                case 2:
+                    _b.sent();
+                    expect(onItemClickFn).toHaveBeenLastCalledWith(defaultProps.data[1].group);
+                    return [4 /*yield*/, user.click(barRectangles[2])];
+                case 3:
+                    _b.sent();
+                    expect(onItemClickFn).toHaveBeenLastCalledWith(defaultProps.data[2].group);
+                    return [2 /*return*/];
+            }
         });
-    });
-    it('should call props.onItemClick on rect click', function () {
-        var onItemClick = jest.fn();
-        var wrapper = mount(React.createElement(BarChart, { width: 100, height: 100, data: data, onItemClick: onItemClick }));
-        var rect = wrapper.find('.recharts-bar-rectangle').first();
-        rect.simulate('click');
-        expect(onItemClick).toBeCalledWith('1');
-    });
+    }); });
 });

package/esm/BasicAttributeSelector/BasicAttributeSelector.spec.js

@@ -1,20 +1,37 @@
+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 BasicAttributeSelector from './BasicAttributeSelector';
-import { AttributeTitle } from './components/AttributeTitle';
+import { render, screen } from '@testing-library/react';
 describe('BasicAttributeSelector tests', function () {
-    var getAttributeTitle = function (component) { return component.find(AttributeTitle); };
     var selectedItem = {
         fieldName: 'selected',
         title: 'selectedField'
     };
-    var itemsGroups = [
-        { attributes: [{ fieldName: 'field1', title: 'field1' }, selectedItem], title: '' },
-        { attributes: [{ fieldName: 'field2', title: 'field2' }], title: '' }
-    ];
+    var defaultProps = {
+        value: selectedItem,
+        disabled: true,
+        itemsGroups: [
+            { attributes: [{ fieldName: 'field1', title: 'field1' }, selectedItem], title: '' },
+            { attributes: [{ fieldName: 'field2', title: 'field2' }], title: '' }
+        ],
+        onSelect: jest.fn()
+    };
+    var setUp = function (props) {
+        if (props === void 0) { props = defaultProps; }
+        return render(React.createElement(BasicAttributeSelector, __assign({}, props)));
+    };
     it('should provide disable props to AttributeTitle', function () {
-        var onSelect = jest.fn();
-        var component = mount(React.createElement(BasicAttributeSelector, { onSelect: onSelect, itemsGroups: itemsGroups, value: selectedItem, disabled: true }));
-        expect(getAttributeTitle(component).prop('disabled')).toBe(true);
+        setUp();
+        expect(screen.getByText(selectedItem.title)).toHaveClass('disabled');
     });
 });

package/esm/BasicViewContent/BasicViewContent.test.js

@@ -1,12 +1,10 @@
 import React from 'react';
-import { shallow } from 'enzyme';
 import { BasicViewContent } from './BasicViewContent';
-test('it should render styled div with children', function () {
-    var children = 123, className = 'class';
-    var wrapper = shallow(React.createElement(BasicViewContent, { className: className }, children));
-    var content = wrapper.find('div');
-    expect(content).toHaveLength(1);
-    expect(content.prop('children')).toEqual(children);
-    expect(content.prop('className')).toContain(className);
-    expect(content.prop('className')).toContain('basic-view-content');
+import { render, screen } from '@testing-library/react';
+describe('BasicViewContent test', function () {
+    it('should render styled div with children', function () {
+        render(React.createElement(BasicViewContent, { className: 'testClassName' }, "ChildrenContent"));
+        var child = screen.getByText('ChildrenContent');
+        expect(child).toHaveClass('basic-view-content', 'testClassName');
+    });
 });