@reltio/components 1.4.1905 → 1.4.1907

package/cjs/BasicViewContent/BasicViewContent.test.js

@@ -4,14 +4,12 @@ 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 BasicViewContent_1 = require("./BasicViewContent");
-test('it should render styled div with children', function () {
-    var children = 123, className = 'class';
-    var wrapper = (0, enzyme_1.shallow)(react_1.default.createElement(BasicViewContent_1.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');
+var react_2 = require("@testing-library/react");
+describe('BasicViewContent test', function () {
+    it('should render styled div with children', function () {
+        (0, react_2.render)(react_1.default.createElement(BasicViewContent_1.BasicViewContent, { className: 'testClassName' }, "ChildrenContent"));
+        var child = react_2.screen.getByText('ChildrenContent');
+        expect(child).toHaveClass('basic-view-content', 'testClassName');
+    });
 });

package/cjs/BlobRenderer/BlobRenderer.test.js

@@ -1,23 +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 BlobRenderer_1 = require("./BlobRenderer");
-describe('BlobRenderer', function () {
+var react_2 = require("@testing-library/react");
+describe('BlobRenderer test', function () {
+    var defaultProps = {
+        value: 'testValue'
+    };
+    var setUp = function (props, wrapper) {
+        if (props === void 0) { props = defaultProps; }
+        return __assign({}, (0, react_2.render)(react_1.default.createElement(BlobRenderer_1.BlobRenderer, __assign({}, props)), { wrapper: wrapper }));
+    };
     it('should render value', function () {
-        var testValue = 'testValue';
-        var wrapper = (0, enzyme_1.shallow)(react_1.default.createElement(BlobRenderer_1.BlobRenderer, { value: testValue }));
-        expect(wrapper.html()).toContain(testValue);
+        setUp();
+        expect(react_2.screen.getByText(defaultProps.value)).toBeInTheDocument();
     });
     it('should stop propagation scroll event', function () {
-        var testValue = 'testValue';
         var scrollHandler = jest.fn();
-        var wrapper = (0, enzyme_1.mount)(react_1.default.createElement("div", { onScroll: scrollHandler },
-            react_1.default.createElement(BlobRenderer_1.BlobRenderer, { value: testValue })));
-        wrapper.find(BlobRenderer_1.BlobRenderer).simulate('scroll');
+        var scrollTestWrapper = function (_a) {
+            var children = _a.children;
+            return react_1.default.createElement("div", { onScroll: scrollHandler }, children);
+        };
+        setUp(defaultProps, scrollTestWrapper);
+        react_2.fireEvent.scroll(react_2.screen.getByText(defaultProps.value), { target: { scrollY: 100 } });
         expect(scrollHandler).not.toHaveBeenCalled();
     });
 });

package/cjs/BooleanRadioEditor/BooleanRadioEditor.test.js

@@ -1,46 +1,100 @@
 "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) {
+        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 FormControlLabel_1 = __importDefault(require("@mui/material/FormControlLabel"));
-var BooleanEditor_1 = require("./components/BooleanEditor");
 var BooleanRadioEditor_1 = require("./BooleanRadioEditor");
+var react_2 = require("@testing-library/react");
+var user_event_1 = __importDefault(require("@testing-library/user-event"));
+var test_utils_1 = require("../test-utils");
 describe('BooleanRadioEditor', function () {
+    var setUp = function (props) {
+        if (props === void 0) { props = {}; }
+        var user = user_event_1.default.setup();
+        return __assign({ user: user }, (0, react_2.render)(react_1.default.createElement(BooleanRadioEditor_1.BooleanRadioEditor, __assign({}, props))));
+    };
     it('should render two boolean editors with "Yes" and "No" labels', function () {
-        var wrapper = (0, enzyme_1.mount)(react_1.default.createElement(BooleanRadioEditor_1.BooleanRadioEditor, null));
-        var controls = wrapper.find(FormControlLabel_1.default);
-        expect(controls).toHaveLength(2);
-        controls.forEach(function (n) {
-            expect(n.find(BooleanEditor_1.BooleanEditor)).toHaveLength(1);
-        });
-        expect(controls.at(0).prop('label')).toBe('Yes');
-        expect(controls.at(1).prop('label')).toBe('No');
-    });
-    it('should have radio buttons behaviour', function () {
-        var wrapper = (0, enzyme_1.mount)(react_1.default.createElement(BooleanRadioEditor_1.BooleanRadioEditor, null));
-        expect(wrapper.find(BooleanEditor_1.BooleanEditor).at(0).prop('value')).toBe(false);
-        expect(wrapper.find(BooleanEditor_1.BooleanEditor).at(1).prop('value')).toBe(false);
-        wrapper.setProps({ value: true });
-        expect(wrapper.find(BooleanEditor_1.BooleanEditor).at(0).prop('value')).toBe(true);
-        expect(wrapper.find(BooleanEditor_1.BooleanEditor).at(1).prop('value')).toBe(false);
-    });
-    it('should call props.onChange correctly on "Yes" input toggle', function () {
-        var onChange = jest.fn();
-        var wrapper = (0, enzyme_1.mount)(react_1.default.createElement(BooleanRadioEditor_1.BooleanRadioEditor, { onChange: onChange }));
-        var yesInput = wrapper.find(BooleanEditor_1.BooleanEditor).at(0);
-        yesInput.prop('onChange')(true);
-        yesInput.prop('onChange')(false);
-        expect(onChange.mock.calls).toEqual([[true], [false]]);
-    });
-    it('should call props.onChange correctly on "No" input toggle', function () {
-        var onChange = jest.fn();
-        var wrapper = (0, enzyme_1.mount)(react_1.default.createElement(BooleanRadioEditor_1.BooleanRadioEditor, { onChange: onChange }));
-        var yesInput = wrapper.find(BooleanEditor_1.BooleanEditor).at(1);
-        yesInput.prop('onChange')(true);
-        yesInput.prop('onChange')(false);
-        expect(onChange.mock.calls).toEqual([[false], [true]]);
+        setUp();
+        expect(react_2.screen.getAllByRole('checkbox')).toHaveLength(2);
+        expect(react_2.screen.getByLabelText('Yes'));
+        expect(react_2.screen.getByLabelText('No'));
     });
+    it('should have radio buttons behaviour', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var checkboxes;
+        return __generator(this, function (_a) {
+            setUp({ value: true });
+            checkboxes = react_2.screen.getAllByRole('checkbox');
+            expect(checkboxes[0]).toBeChecked();
+            expect(checkboxes[1]).not.toBeChecked();
+            expect((0, test_utils_1.getMuiIconByName)('CheckBox')).toBeInTheDocument();
+            return [2 /*return*/];
+        });
+    }); });
+    it('should call props.onChange correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onChangeSpy, user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onChangeSpy = jest.fn();
+                    user = setUp({ onChange: onChangeSpy }).user;
+                    return [4 /*yield*/, user.click(react_2.screen.getByLabelText('Yes'))];
+                case 1:
+                    _a.sent();
+                    expect(onChangeSpy).toHaveBeenLastCalledWith(true);
+                    return [4 /*yield*/, user.click(react_2.screen.getByLabelText('No'))];
+                case 2:
+                    _a.sent();
+                    expect(onChangeSpy).toHaveBeenLastCalledWith(false);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
 });

package/cjs/BubbleChart/BubbleChart.test.js

@@ -33,109 +33,133 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+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 test_utils_1 = require("react-dom/test-utils");
-var enzyme_1 = require("enzyme");
+var react_2 = require("@testing-library/react");
+var user_event_1 = __importDefault(require("@testing-library/user-event"));
 var BubbleChart_1 = __importStar(require("./BubbleChart"));
-var recharts_1 = require("recharts");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
-describe('BubbleChart', function () {
-    var data = [
-        { label: 'first', value: 1, percent: 1, group: '1' },
-        { label: 'second', value: 2, percent: 2, group: '2' },
-        { label: 'third', value: 3, percent: 3, group: '3' }
-    ];
-    var legendPayload = [
-        {
-            id: 'first',
-            type: 'square',
-            color: (0, mdm_sdk_1.getChartItemColor)('first'),
-            value: 'first (1%)'
-        },
-        {
-            id: 'second',
-            type: 'square',
-            color: (0, mdm_sdk_1.getChartItemColor)('second'),
-            value: 'second (2%)'
-        },
-        {
-            id: 'third',
-            type: 'square',
-            color: (0, mdm_sdk_1.getChartItemColor)('third'),
-            value: 'third (3%)'
-        }
-    ];
-    var props = {
-        data: data,
+describe('BubbleChart tests', function () {
+    var defaultProps = {
+        data: [
+            { label: 'first', value: 1, percent: 1, group: '1' },
+            { label: 'second', value: 2, percent: 2, group: '2' },
+            { label: 'third', value: 3, percent: 3, group: '3' }
+        ],
         width: 600,
         height: 300
     };
+    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(BubbleChart_1.BubbleChart, __assign({}, props))));
+    };
     it('should render svg with circles, Legend and Tooltip', function () {
-        var wrapper = (0, enzyme_1.shallow)(react_1.default.createElement(BubbleChart_1.BubbleChart, __assign({}, props)));
-        var surface = wrapper.find('svg');
-        expect(surface.prop('width')).toBe(props.width);
-        expect(surface.prop('height')).toBe(props.height);
-        expect(surface.find('circle')).toHaveLength(3);
-        expect(wrapper.find(recharts_1.Legend).prop('payload')).toStrictEqual(legendPayload);
-        expect(wrapper.find(recharts_1.Tooltip)).toHaveLength(1);
+        var container = setUp().container;
+        var svg = container.querySelector('svg');
+        expect(svg).toHaveAttribute('height', "".concat(defaultProps.height));
+        expect(svg).toHaveAttribute('width', "".concat(defaultProps.width));
+        var circles = container.querySelectorAll('circle');
+        expect(circles).toHaveLength(3);
+        expect(container.querySelector('.recharts-tooltip-wrapper')).toBeInTheDocument();
+        var legendItems = container.querySelectorAll('.recharts-legend-wrapper .item');
+        expect((0, react_2.within)(legendItems[0]).queryByText('first (1%)')).toBeInTheDocument();
+        expect(legendItems[0].firstChild).toHaveStyle({ background: (0, mdm_sdk_1.getChartItemColor)('first') });
+        expect((0, react_2.within)(legendItems[1]).queryByText('second (2%)')).toBeInTheDocument();
+        expect(legendItems[1].firstChild).toHaveStyle({ background: (0, mdm_sdk_1.getChartItemColor)('second') });
+        expect((0, react_2.within)(legendItems[2]).queryByText('third (3%)')).toBeInTheDocument();
+        expect(legendItems[2].firstChild).toHaveStyle({ background: (0, mdm_sdk_1.getChartItemColor)('third') });
     });
     it('should not render Legend when props.options.showLegend = false', function () {
-        var wrapper = (0, enzyme_1.shallow)(react_1.default.createElement(BubbleChart_1.BubbleChart, __assign({}, props, { options: { showLegend: false } })));
-        expect(wrapper.find(recharts_1.Legend)).toHaveLength(0);
+        var container = setUp(__assign(__assign({}, defaultProps), { options: {
+                showLegend: false
+            } })).container;
+        expect(container.querySelector('.recharts-legend-wrapper')).not.toBeInTheDocument();
     });
-    it('should show Tooltip on dot hover and hide on dot leave', function () {
-        var wrapper = (0, enzyme_1.shallow)(react_1.default.createElement(BubbleChart_1.BubbleChart, __assign({}, props)));
-        expect(wrapper.find(recharts_1.Tooltip).props()).toMatchObject({
-            active: false
-        });
-        var circle = wrapper.find('svg').find('circle').at(0);
-        (0, test_utils_1.act)(function () {
-            circle.simulate('mouseEnter');
-        });
-        expect(wrapper.find(recharts_1.Tooltip).props()).toMatchObject({
-            active: true,
-            coordinate: { x: circle.prop('cx'), y: circle.prop('cy') }
-        });
-        (0, test_utils_1.act)(function () {
-            circle.simulate('mouseLeave');
+    it('should show Tooltip on dot hover and hide on dot leave', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, user, container, circles, tootltip;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _a = setUp(), user = _a.user, container = _a.container;
+                    circles = container.querySelectorAll('circle');
+                    return [4 /*yield*/, user.hover(circles[0])];
+                case 1:
+                    _b.sent();
+                    tootltip = container.querySelector('.recharts-tooltip-wrapper');
+                    expect(tootltip).toBeVisible();
+                    expect((0, react_2.within)(tootltip).getByText('third')).toBeInTheDocument();
+                    return [4 /*yield*/, user.unhover(circles[0])];
+                case 2:
+                    _b.sent();
+                    expect(tootltip).not.toBeVisible();
+                    expect((0, react_2.within)(tootltip).queryByText('third')).not.toBeInTheDocument();
+                    return [2 /*return*/];
+            }
         });
-        expect(wrapper.find(recharts_1.Tooltip).props()).toMatchObject({
-            active: false
+    }); });
+    it('should call props.onItemClick on circle click', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onItemClickSpy, _a, user, container;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    onItemClickSpy = jest.fn();
+                    _a = setUp(__assign(__assign({}, defaultProps), { onItemClick: onItemClickSpy })), user = _a.user, container = _a.container;
+                    return [4 /*yield*/, user.click(container.querySelector('circle'))];
+                case 1:
+                    _b.sent();
+                    expect(onItemClickSpy).toHaveBeenCalledWith('3');
+                    return [2 /*return*/];
+            }
         });
-    });
-    it('should call props.onItemClick on circle click', function () {
-        var onItemClick = jest.fn();
-        var wrapper = (0, enzyme_1.shallow)(react_1.default.createElement(BubbleChart_1.BubbleChart, __assign({}, props, { onItemClick: onItemClick })));
-        var circle = wrapper.find('circle').first();
-        circle.simulate('click');
-        expect(onItemClick).toBeCalledWith('3');
-    });
+    }); });
     it('should render legend with percents correctly', function () {
-        var legendPayload = [
-            {
-                id: 'first',
-                type: 'square',
-                color: (0, mdm_sdk_1.getChartItemColor)('first'),
-                value: 'first (16.7%)'
-            },
-            {
-                id: 'second',
-                type: 'square',
-                color: (0, mdm_sdk_1.getChartItemColor)('second'),
-                value: 'second (33.3%)'
-            },
-            {
-                id: 'third',
-                type: 'square',
-                color: (0, mdm_sdk_1.getChartItemColor)('third'),
-                value: 'third (50%)'
-            }
-        ];
-        var wrapper = (0, enzyme_1.mount)(react_1.default.createElement(BubbleChart_1.default, __assign({}, props)));
-        expect(wrapper.find(recharts_1.Legend).prop('payload')).toEqual(legendPayload);
+        var container = (0, react_2.render)(react_1.default.createElement(BubbleChart_1.default, __assign({}, defaultProps))).container;
+        var legendItems = container.querySelectorAll('.recharts-legend-wrapper .item');
+        expect((0, react_2.within)(legendItems[0]).queryByText('first (16.7%)')).toBeInTheDocument();
+        expect(legendItems[0].firstChild).toHaveStyle({ background: (0, mdm_sdk_1.getChartItemColor)('first') });
+        expect((0, react_2.within)(legendItems[1]).queryByText('second (33.3%)')).toBeInTheDocument();
+        expect(legendItems[1].firstChild).toHaveStyle({ background: (0, mdm_sdk_1.getChartItemColor)('second') });
+        expect((0, react_2.within)(legendItems[2]).queryByText('third (50%)')).toBeInTheDocument();
+        expect(legendItems[2].firstChild).toHaveStyle({ background: (0, mdm_sdk_1.getChartItemColor)('third') });
     });
 });

package/cjs/CloudChart/CloudChart.test.js

@@ -10,53 +10,112 @@ 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 mdm_sdk_1 = require("@reltio/mdm-sdk");
-var recharts_1 = require("recharts");
+var user_event_1 = __importDefault(require("@testing-library/user-event"));
+var react_2 = require("@testing-library/react");
 var CloudChart_1 = require("./CloudChart");
-describe('CloudChart', function () {
-    var data = [
-        { label: 'first', value: 1, percent: 1, group: '1' },
-        { label: 'second', value: 2, percent: 2, group: '2' },
-        { label: 'third', value: 3, percent: 3, group: '3' }
-    ];
-    var props = {
-        data: data,
+describe('CloudChart tests', function () {
+    var defaultProps = {
+        data: [
+            { label: 'first', value: 1, percent: 1, group: '1' },
+            { label: 'second', value: 2, percent: 2, group: '2' },
+            { label: 'third', value: 3, percent: 3, group: '3' }
+        ],
         width: 600,
         height: 300
     };
+    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(CloudChart_1.CloudChart, __assign({}, props))));
+    };
     it('should render svg with text and Tooltip', function () {
-        var wrapper = (0, enzyme_1.shallow)(react_1.default.createElement(CloudChart_1.CloudChart, __assign({}, props)));
-        var surface = wrapper.find('svg');
-        expect(surface.prop('width')).toBe(props.width);
-        expect(surface.prop('height')).toBe(props.height);
-        expect(surface.find('text')).toHaveLength(3);
-        surface.find('text').forEach(function (el, i) {
-            expect(el.text()).toEqual(data[i].label);
-            expect(el.prop('fill')).toEqual((0, mdm_sdk_1.getChartItemColor)(data[i].label));
+        var container = setUp().container;
+        var svg = container.querySelector('svg');
+        expect(svg).toHaveAttribute('height', "".concat(defaultProps.height));
+        expect(svg).toHaveAttribute('width', "".concat(defaultProps.width));
+        defaultProps.data.forEach(function (data) {
+            var text = react_2.screen.getByText(data.label);
+            expect(text).toHaveAttribute('fill', (0, mdm_sdk_1.getChartItemColor)(data.label));
         });
-        expect(wrapper.find(recharts_1.Tooltip)).toHaveLength(1);
-    });
-    it('should show Tooltip on text hover and hide on text leave', function () {
-        var wrapper = (0, enzyme_1.shallow)(react_1.default.createElement(CloudChart_1.CloudChart, __assign({}, props)));
-        expect(wrapper.find(recharts_1.Tooltip).prop('active')).toBe(false);
-        var text = wrapper.find('svg').find('text').at(0);
-        text.simulate('mouseEnter');
-        expect(wrapper.find(recharts_1.Tooltip).prop('active')).toBe(true);
-        expect(wrapper.find(recharts_1.Tooltip).prop('label')).toBe(text.text());
-        text.simulate('mouseLeave');
-        expect(wrapper.find(recharts_1.Tooltip).prop('active')).toBe(false);
-    });
-    it('should call props.onItemClick on text click', function () {
-        var onItemClick = jest.fn();
-        var wrapper = (0, enzyme_1.shallow)(react_1.default.createElement(CloudChart_1.CloudChart, __assign({}, props, { onItemClick: onItemClick })));
-        var text = wrapper.find('text').first();
-        text.simulate('click');
-        expect(onItemClick).toBeCalledWith('1');
+        expect(container.querySelector('.recharts-tooltip-wrapper')).toBeInTheDocument();
     });
+    it('should show Tooltip on text hover and hide on text leave', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, user, container, text, tootltip;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _a = setUp(), user = _a.user, container = _a.container;
+                    text = react_2.screen.getByText('first');
+                    return [4 /*yield*/, user.hover(text)];
+                case 1:
+                    _b.sent();
+                    tootltip = container.querySelector('.recharts-tooltip-wrapper');
+                    expect(tootltip).toBeVisible();
+                    expect((0, react_2.within)(tootltip).getByText('first')).toBeInTheDocument();
+                    return [4 /*yield*/, user.unhover(text)];
+                case 2:
+                    _b.sent();
+                    expect(tootltip).not.toBeVisible();
+                    expect((0, react_2.within)(tootltip).queryByText('first')).not.toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should call props.onItemClick on text click', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onItemClickSpy, user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onItemClickSpy = jest.fn();
+                    user = setUp(__assign(__assign({}, defaultProps), { onItemClick: onItemClickSpy })).user;
+                    return [4 /*yield*/, user.click(react_2.screen.getByText('first'))];
+                case 1:
+                    _a.sent();
+                    expect(onItemClickSpy).toHaveBeenCalledWith('1');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
 });