@reltio/components 1.4.1905 → 1.4.1907

package/cjs/AttributesView/AttributesView.test.js

@@ -15,47 +15,80 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
-var enzyme_1 = require("enzyme");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var AttributesView_1 = require("./AttributesView");
-var ReadOnlyAttributesView_1 = require("../ReadOnlyAttributesView");
-var EditModeAttributesView_1 = require("../EditModeAttributesView");
-var EntityContext_1 = require("../contexts/EntityContext");
 var MdmModuleContext_1 = require("../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 (0, enzyme_1.mount)(react_1.default.createElement(MdmModuleContext_1.MdmModuleProvider, { values: { entityWithDiff: undefined, mode: undefined } },
-        react_1.default.createElement(AttributesView_1.AttributesView, __assign({}, props))));
-};
+var react_2 = require("@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_1.default.createElement(MdmModuleContext_1.MdmModuleProvider, { values: mdmValues, actions: actions }, children));
+        };
+        return (0, react_2.render)(react_1.default.createElement(AttributesView_1.AttributesView, __assign({}, props)), { wrapper: Providers });
+    };
     it('should render ReadOnlyAttributesView in read mode if mode is "viewing"', function () {
-        var component = setUp({ mode: mdm_sdk_1.Mode.Viewing });
-        expect(component.find(ReadOnlyAttributesView_1.ReadOnlyAttributesView).length).toBe(1);
+        setUp({ mode: mdm_sdk_1.Mode.Viewing, entity: entity });
+        expect(react_2.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: mdm_sdk_1.Mode.Viewing }));
+        expect(react_2.screen.getByText('nameValue')).toBeInTheDocument();
+    });
+    it('should render EditModeAttributesView in read mode if mode is "editing"', function () {
+        setUp({ mode: mdm_sdk_1.Mode.Editing, entity: entity });
+        expect(react_2.screen.getByRole('textbox')).toHaveValue('nameValue');
     });
-    it('should render EditModeAttributesView in edit mode if mode is "editing"', function () {
-        var component = setUp({ mode: mdm_sdk_1.Mode.Editing });
-        expect(component.find(EditModeAttributesView_1.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: mdm_sdk_1.Mode.Editing }));
+        expect(react_2.screen.getByRole('textbox')).toHaveValue('nameValue');
     });
-    it('should render EditModeAttributesView in edit mode id mode is "suggesting"', function () {
-        var component = setUp({ mode: mdm_sdk_1.Mode.Editing });
-        expect(component.find(EditModeAttributesView_1.EditModeAttributesView).length).toBe(1);
+    it('should render EditModeAttributesView in read mode if mode is "suggesting"', function () {
+        setUp({ mode: mdm_sdk_1.Mode.Suggesting, entity: entity });
+        expect(react_2.screen.getByRole('textbox')).toHaveValue('nameValue');
     });
-    it('should provide AttributesView with context', function () {
-        var entity = { uri: 'uri1' };
-        var component = setUp({ mode: mdm_sdk_1.Mode.Viewing, entity: entity });
-        var contextProvider = component.find(EntityContext_1.EntityContext.Provider);
-        expect(contextProvider.prop('value')).toBe(entity);
-        expect(contextProvider.childAt(0)).toEqual(component.find(ReadOnlyAttributesView_1.ReadOnlyAttributesView));
+    it('should render EditModeAttributesView in read mode if mode is "suggesting" in context', function () {
+        setUp({ entity: entity }, __assign(__assign({}, mdmDefaultValues), { mode: mdm_sdk_1.Mode.Suggesting }));
+        expect(react_2.screen.getByRole('textbox')).toHaveValue('nameValue');
     });
 });

package/cjs/AutoSizeList/AutoSizeList.test.js

@@ -10,15 +10,50 @@ 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 };
+    }
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
-var enzyme_1 = require("enzyme");
 var AutoSizeList_1 = __importDefault(require("./AutoSizeList"));
-var react_window_1 = require("react-window");
 var test_utils_1 = require("../test-utils");
+var react_2 = require("@testing-library/react");
 jest.mock('resize-observer-polyfill', function () { return ({
     __esModule: true,
     default: jest.fn().mockImplementation(function (onResize) {
@@ -31,74 +66,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 = (0, enzyme_1.mount)(react_1.default.createElement(AutoSizeList_1.default, __assign({}, props)));
-        var itemCount = props.data.length;
-        var list = wrapper.find(react_window_1.VariableSizeList);
-        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 (0, test_utils_1.delayPromise)()
-            .then(function () { return (0, test_utils_1.delayPromise)(100); })
-            .then(function () {
-            wrapper.update();
-            listItems = wrapper.find(react_window_1.VariableSizeList).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 = (0, enzyme_1.mount)(react_1.default.createElement(AutoSizeList_1.default, __assign({}, props, { showNotMeasuredItems: true })));
-        var itemCount = props.data.length;
-        var list = wrapper.find(react_window_1.VariableSizeList);
-        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 (0, react_2.render)(react_1.default.createElement(AutoSizeList_1.default, __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(react_2.screen.getByText('child-1')).toHaveStyle({ visibility: 'hidden' });
+                    expect(react_2.screen.getByText('child-2')).toHaveStyle({ visibility: 'hidden' });
+                    expect(react_2.screen.getByText('child-3')).toHaveStyle({ visibility: 'hidden' });
+                    return [4 /*yield*/, (0, test_utils_1.delayPromise)(100)];
+                case 1:
+                    _a.sent();
+                    expect(react_2.screen.getByText('child-1')).toHaveStyle({ visibility: 'visible' });
+                    expect(react_2.screen.getByText('child-2')).toHaveStyle({ visibility: 'visible' });
+                    expect(react_2.screen.getByText('child-3')).toHaveStyle({ visibility: 'visible' });
+                    return [2 /*return*/];
+            }
         });
-        return (0, test_utils_1.delayPromise)()
-            .then(function () { return (0, test_utils_1.delayPromise)(); })
-            .then(function () {
-            wrapper.update();
-            listItems = wrapper.find(react_window_1.VariableSizeList).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(react_2.screen.getByText('child-1')).not.toHaveAttribute('visibility');
+                    expect(react_2.screen.getByText('child-2')).not.toHaveAttribute('visibility');
+                    expect(react_2.screen.getByText('child-3')).not.toHaveAttribute('visibility');
+                    return [4 /*yield*/, (0, test_utils_1.delayPromise)(100)];
+                case 1:
+                    _a.sent();
+                    expect(react_2.screen.getByText('child-1')).not.toHaveAttribute('visibility');
+                    expect(react_2.screen.getByText('child-2')).not.toHaveAttribute('visibility');
+                    expect(react_2.screen.getByText('child-3')).not.toHaveAttribute('visibility');
+                    return [2 /*return*/];
+            }
         });
-    });
+    }); });
     it('should support props.listRef', function () {
         var listRef = {
             current: undefined
         };
-        (0, enzyme_1.mount)(react_1.default.createElement(AutoSizeList_1.default, __assign({}, props, { listRef: listRef })));
+        setUp(__assign(__assign({}, defaultProps), { listRef: listRef }));
         expect(listRef.current.scrollTo).toBeDefined();
     });
 });

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

@@ -40,39 +40,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
+var AvatarWithFallback_1 = require("./AvatarWithFallback");
 var react_2 = require("@testing-library/react");
-var user_event_1 = __importDefault(require("@testing-library/user-event"));
-var MenuItemRenderer_1 = require("./MenuItemRenderer");
-describe('MenuItemRenderer tests', function () {
-    var ActionButton = function (_a) {
-        var mode = _a.mode, onMenuClose = _a.onMenuClose, testProp = _a.testProp;
-        return react_1.default.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 () {
-        (0, react_2.render)(react_1.default.createElement(MenuItemRenderer_1.MenuItemRenderer, { item: item }));
-        var button = react_2.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;
+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();
-                    (0, react_2.render)(react_1.default.createElement(MenuItemRenderer_1.MenuItemRenderer, { item: item, onMenuClose: onMenuClose }));
-                    return [4 /*yield*/, user_event_1.default.click(react_2.screen.getByTestId('action-button'))];
-                case 1:
-                    _a.sent();
-                    expect(onMenuClose).toHaveBeenCalled();
-                    return [2 /*return*/];
-            }
+            (0, react_2.render)(react_1.default.createElement(AvatarWithFallback_1.AvatarWithFallback, { icon: "icon" }));
+            expect(react_2.screen.getByRole('img')).toHaveAttribute('src', 'icon');
+            return [2 /*return*/];
         });
     }); });
+    it('should show text if icon url is not provided', function () {
+        (0, react_2.render)(react_1.default.createElement(AvatarWithFallback_1.AvatarWithFallback, { avatarText: "text" }));
+        expect(react_2.screen.getByText('text')).toBeInTheDocument();
+    });
+    it('should show text if error has happened', function () {
+        (0, react_2.render)(react_1.default.createElement(AvatarWithFallback_1.AvatarWithFallback, { icon: "icon", avatarText: "text" }));
+        react_2.fireEvent.error(react_2.screen.getByRole('img'));
+        expect(react_2.screen.getByText('text')).toBeInTheDocument();
+    });
 });

package/cjs/BarChart/BarChart.test.js

@@ -1,4 +1,15 @@
 "use strict";
+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) {
@@ -35,88 +46,140 @@ 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));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
-var enzyme_1 = require("enzyme");
-var recharts_1 = require("recharts");
 var BarChart_1 = require("./BarChart");
+var react_2 = require("@testing-library/react");
+var user_event_1 = __importDefault(require("@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 = user_event_1.default.setup();
+        return __assign({ user: user }, (0, react_2.render)(react_1.default.createElement(BarChart_1.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 = (0, enzyme_1.shallow)(react_1.default.createElement(BarChart_1.BarChart, { width: 100, height: 100, data: data }));
-            barChart = wrapper.find(recharts_1.BarChart);
-            bar = wrapper.find(recharts_1.Bar);
-            xAxis = wrapper.find(recharts_1.XAxis);
-            expect(barChart).toHaveLength(1);
-            expect(wrapper.find(recharts_1.CartesianGrid)).toHaveLength(1);
-            expect(wrapper.find(recharts_1.Tooltip)).toHaveLength(1);
-            expect(bar).toHaveLength(1);
-            expect(xAxis).toHaveLength(1);
-            expect(wrapper.find(recharts_1.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) {
+                (0, react_2.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);
+            (0, react_2.within)(yAxisTicks[0]).getByText('0');
+            (0, react_2.within)(yAxisTicks[1]).getByText('5');
+            (0, react_2.within)(yAxisTicks[2]).getByText('10');
+            (0, react_2.within)(yAxisTicks[3]).getByText('15');
+            (0, react_2.within)(yAxisTicks[4]).getByText('20');
+            (0, react_2.within)(yAxisTicks[5]).getByText('25');
+            (0, react_2.within)(yAxisTicks[6]).getByText('30');
+            (0, react_2.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 = (0, enzyme_1.shallow)(react_1.default.createElement(BarChart_1.BarChart, { width: 100, height: 100, data: data, options: { isHorizontal: true } }));
-        var barChart = wrapper.find(recharts_1.BarChart);
-        var bar = wrapper.find(recharts_1.Bar);
-        var xAxis = wrapper.find(recharts_1.XAxis);
-        expect(barChart).toHaveLength(1);
-        expect(wrapper.find(recharts_1.CartesianGrid)).toHaveLength(1);
-        expect(wrapper.find(recharts_1.Tooltip)).toHaveLength(1);
-        expect(bar).toHaveLength(1);
-        expect(xAxis).toHaveLength(1);
-        expect(wrapper.find(recharts_1.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 = (0, enzyme_1.shallow)(react_1.default.createElement(BarChart_1.BarChart, { width: 100, height: 100, data: data, options: { isLabelRotated: true } }));
-        var xAxis = wrapper.find(recharts_1.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 = (0, enzyme_1.shallow)(react_1.default.createElement(BarChart_1.BarChart, { width: 100, height: 100, data: data }));
-        expect(wrapper.find(recharts_1.YAxis)).toHaveLength(1);
-        var formatter = wrapper.find(recharts_1.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);
+        (0, react_2.within)(yAxisTicks[0]).getByText('0');
+        (0, react_2.within)(yAxisTicks[1]).getByText('15.0K');
+        (0, react_2.within)(yAxisTicks[2]).getByText('30.0K');
+        (0, react_2.within)(yAxisTicks[3]).getByText('45.0K');
+        (0, react_2.within)(yAxisTicks[4]).getByText('60.0K');
+        (0, react_2.within)(yAxisTicks[5]).getByText('75.0K');
+        (0, react_2.within)(yAxisTicks[6]).getByText('90.0K');
+        (0, react_2.within)(yAxisTicks[7]).getByText('105.0K');
     });
-    it('should render data cells', function () {
-        var _a;
-        var wrapper = (0, enzyme_1.mount)(react_1.default.createElement(BarChart_1.BarChart, { width: 100, height: 100, data: data }));
-        var bar = wrapper.find(recharts_1.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 = (0, enzyme_1.mount)(react_1.default.createElement(BarChart_1.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/cjs/BasicAttributeSelector/BasicAttributeSelector.spec.js

@@ -1,25 +1,42 @@
 "use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
-var enzyme_1 = require("enzyme");
 var BasicAttributeSelector_1 = __importDefault(require("./BasicAttributeSelector"));
-var AttributeTitle_1 = require("./components/AttributeTitle");
+var react_2 = require("@testing-library/react");
 describe('BasicAttributeSelector tests', function () {
-    var getAttributeTitle = function (component) { return component.find(AttributeTitle_1.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 (0, react_2.render)(react_1.default.createElement(BasicAttributeSelector_1.default, __assign({}, props)));
+    };
     it('should provide disable props to AttributeTitle', function () {
-        var onSelect = jest.fn();
-        var component = (0, enzyme_1.mount)(react_1.default.createElement(BasicAttributeSelector_1.default, { onSelect: onSelect, itemsGroups: itemsGroups, value: selectedItem, disabled: true }));
-        expect(getAttributeTitle(component).prop('disabled')).toBe(true);
+        setUp();
+        expect(react_2.screen.getByText(selectedItem.title)).toHaveClass('disabled');
     });
 });