@reltio/components 1.4.1906 → 1.4.1907

package/esm/BlobRenderer/BlobRenderer.test.js

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

package/esm/BooleanRadioEditor/BooleanRadioEditor.test.js

@@ -1,41 +1,95 @@
+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 };
+    }
+};
 import React from 'react';
-import { mount } from 'enzyme';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import { BooleanEditor } from './components/BooleanEditor';
 import { BooleanRadioEditor } from './BooleanRadioEditor';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { getMuiIconByName } from '../test-utils';
 describe('BooleanRadioEditor', function () {
+    var setUp = function (props) {
+        if (props === void 0) { props = {}; }
+        var user = userEvent.setup();
+        return __assign({ user: user }, render(React.createElement(BooleanRadioEditor, __assign({}, props))));
+    };
     it('should render two boolean editors with "Yes" and "No" labels', function () {
-        var wrapper = mount(React.createElement(BooleanRadioEditor, null));
-        var controls = wrapper.find(FormControlLabel);
-        expect(controls).toHaveLength(2);
-        controls.forEach(function (n) {
-            expect(n.find(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 = mount(React.createElement(BooleanRadioEditor, null));
-        expect(wrapper.find(BooleanEditor).at(0).prop('value')).toBe(false);
-        expect(wrapper.find(BooleanEditor).at(1).prop('value')).toBe(false);
-        wrapper.setProps({ value: true });
-        expect(wrapper.find(BooleanEditor).at(0).prop('value')).toBe(true);
-        expect(wrapper.find(BooleanEditor).at(1).prop('value')).toBe(false);
-    });
-    it('should call props.onChange correctly on "Yes" input toggle', function () {
-        var onChange = jest.fn();
-        var wrapper = mount(React.createElement(BooleanRadioEditor, { onChange: onChange }));
-        var yesInput = wrapper.find(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 = mount(React.createElement(BooleanRadioEditor, { onChange: onChange }));
-        var yesInput = wrapper.find(BooleanEditor).at(1);
-        yesInput.prop('onChange')(true);
-        yesInput.prop('onChange')(false);
-        expect(onChange.mock.calls).toEqual([[false], [true]]);
+        setUp();
+        expect(screen.getAllByRole('checkbox')).toHaveLength(2);
+        expect(screen.getByLabelText('Yes'));
+        expect(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 = screen.getAllByRole('checkbox');
+            expect(checkboxes[0]).toBeChecked();
+            expect(checkboxes[1]).not.toBeChecked();
+            expect(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(screen.getByLabelText('Yes'))];
+                case 1:
+                    _a.sent();
+                    expect(onChangeSpy).toHaveBeenLastCalledWith(true);
+                    return [4 /*yield*/, user.click(screen.getByLabelText('No'))];
+                case 2:
+                    _a.sent();
+                    expect(onChangeSpy).toHaveBeenLastCalledWith(false);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
 });

package/esm/BubbleChart/BubbleChart.test.js

@@ -9,105 +9,129 @@ 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 { act } from 'react-dom/test-utils';
-import { mount, shallow } from 'enzyme';
+import { render, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import BubbleChartWithPercents, { BubbleChart } from './BubbleChart';
-import { Legend, Tooltip } from 'recharts';
 import { getChartItemColor } from '@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: getChartItemColor('first'),
-            value: 'first (1%)'
-        },
-        {
-            id: 'second',
-            type: 'square',
-            color: getChartItemColor('second'),
-            value: 'second (2%)'
-        },
-        {
-            id: 'third',
-            type: 'square',
-            color: 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 = userEvent.setup();
+        return __assign({ user: user }, render(React.createElement(BubbleChart, __assign({}, props))));
+    };
     it('should render svg with circles, Legend and Tooltip', function () {
-        var wrapper = shallow(React.createElement(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(Legend).prop('payload')).toStrictEqual(legendPayload);
-        expect(wrapper.find(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(within(legendItems[0]).queryByText('first (1%)')).toBeInTheDocument();
+        expect(legendItems[0].firstChild).toHaveStyle({ background: getChartItemColor('first') });
+        expect(within(legendItems[1]).queryByText('second (2%)')).toBeInTheDocument();
+        expect(legendItems[1].firstChild).toHaveStyle({ background: getChartItemColor('second') });
+        expect(within(legendItems[2]).queryByText('third (3%)')).toBeInTheDocument();
+        expect(legendItems[2].firstChild).toHaveStyle({ background: getChartItemColor('third') });
     });
     it('should not render Legend when props.options.showLegend = false', function () {
-        var wrapper = shallow(React.createElement(BubbleChart, __assign({}, props, { options: { showLegend: false } })));
-        expect(wrapper.find(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 = shallow(React.createElement(BubbleChart, __assign({}, props)));
-        expect(wrapper.find(Tooltip).props()).toMatchObject({
-            active: false
-        });
-        var circle = wrapper.find('svg').find('circle').at(0);
-        act(function () {
-            circle.simulate('mouseEnter');
-        });
-        expect(wrapper.find(Tooltip).props()).toMatchObject({
-            active: true,
-            coordinate: { x: circle.prop('cx'), y: circle.prop('cy') }
-        });
-        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(within(tootltip).getByText('third')).toBeInTheDocument();
+                    return [4 /*yield*/, user.unhover(circles[0])];
+                case 2:
+                    _b.sent();
+                    expect(tootltip).not.toBeVisible();
+                    expect(within(tootltip).queryByText('third')).not.toBeInTheDocument();
+                    return [2 /*return*/];
+            }
         });
-        expect(wrapper.find(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 = shallow(React.createElement(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: getChartItemColor('first'),
-                value: 'first (16.7%)'
-            },
-            {
-                id: 'second',
-                type: 'square',
-                color: getChartItemColor('second'),
-                value: 'second (33.3%)'
-            },
-            {
-                id: 'third',
-                type: 'square',
-                color: getChartItemColor('third'),
-                value: 'third (50%)'
-            }
-        ];
-        var wrapper = mount(React.createElement(BubbleChartWithPercents, __assign({}, props)));
-        expect(wrapper.find(Legend).prop('payload')).toEqual(legendPayload);
+        var container = render(React.createElement(BubbleChartWithPercents, __assign({}, defaultProps))).container;
+        var legendItems = container.querySelectorAll('.recharts-legend-wrapper .item');
+        expect(within(legendItems[0]).queryByText('first (16.7%)')).toBeInTheDocument();
+        expect(legendItems[0].firstChild).toHaveStyle({ background: getChartItemColor('first') });
+        expect(within(legendItems[1]).queryByText('second (33.3%)')).toBeInTheDocument();
+        expect(legendItems[1].firstChild).toHaveStyle({ background: getChartItemColor('second') });
+        expect(within(legendItems[2]).queryByText('third (50%)')).toBeInTheDocument();
+        expect(legendItems[2].firstChild).toHaveStyle({ background: getChartItemColor('third') });
     });
 });

package/esm/CloudChart/CloudChart.test.js

@@ -9,49 +9,108 @@ 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 { shallow } from 'enzyme';
 import { getChartItemColor } from '@reltio/mdm-sdk';
-import { Tooltip } from 'recharts';
+import userEvent from '@testing-library/user-event';
+import { render, screen, within } from '@testing-library/react';
 import { CloudChart } from './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 = userEvent.setup();
+        return __assign({ user: user }, render(React.createElement(CloudChart, __assign({}, props))));
+    };
     it('should render svg with text and Tooltip', function () {
-        var wrapper = shallow(React.createElement(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(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 = screen.getByText(data.label);
+            expect(text).toHaveAttribute('fill', getChartItemColor(data.label));
         });
-        expect(wrapper.find(Tooltip)).toHaveLength(1);
-    });
-    it('should show Tooltip on text hover and hide on text leave', function () {
-        var wrapper = shallow(React.createElement(CloudChart, __assign({}, props)));
-        expect(wrapper.find(Tooltip).prop('active')).toBe(false);
-        var text = wrapper.find('svg').find('text').at(0);
-        text.simulate('mouseEnter');
-        expect(wrapper.find(Tooltip).prop('active')).toBe(true);
-        expect(wrapper.find(Tooltip).prop('label')).toBe(text.text());
-        text.simulate('mouseLeave');
-        expect(wrapper.find(Tooltip).prop('active')).toBe(false);
-    });
-    it('should call props.onItemClick on text click', function () {
-        var onItemClick = jest.fn();
-        var wrapper = shallow(React.createElement(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 = screen.getByText('first');
+                    return [4 /*yield*/, user.hover(text)];
+                case 1:
+                    _b.sent();
+                    tootltip = container.querySelector('.recharts-tooltip-wrapper');
+                    expect(tootltip).toBeVisible();
+                    expect(within(tootltip).getByText('first')).toBeInTheDocument();
+                    return [4 /*yield*/, user.unhover(text)];
+                case 2:
+                    _b.sent();
+                    expect(tootltip).not.toBeVisible();
+                    expect(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(screen.getByText('first'))];
+                case 1:
+                    _a.sent();
+                    expect(onItemClickSpy).toHaveBeenCalledWith('1');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
 });