@reltio/components 1.4.2051 → 1.4.2053

package/MapChart/MapChart.test.js

@@ -46,201 +46,178 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import React from 'react';
-import { act } from 'react-dom/test-utils';
-import { mount, shallow } from 'enzyme';
-import MapChart from './MapChart';
-import { Tooltip } from 'recharts';
-import { Legend } from './components/Legend';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { LEGEND_WIDTH } from './constants';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import { Geographies, Geography, MapProvider } from 'react-simple-maps';
 import { PageRequestsAbortingContext } from '../contexts/PageRequestsAbortingContext';
-describe('MapChart', function () {
-    var signal = new AbortController().signal;
-    var data = [
-        { label: 'first', value: 1, percent: 1, group: 'AL' },
-        { label: 'second', value: 2, percent: 99, group: 'AD' }
-    ];
-    var props = {
-        data: data,
-        width: 600,
-        height: 300,
-        options: {
-            geoUrl: 'some/geo/url',
-            geoIdName: 'iso_a2'
-        }
-    };
-    var geography = {
-        type: 'Topology',
-        arcs: [
-            [
-                [5840, 2515],
-                [5, -5],
-                [10, -26],
-                [6, -22],
-                [13, -7],
-                [7, -9],
-                [10, -13],
-                [4, -13],
-                [6, -40],
-                [1, -25],
-                [-2, -11]
-            ]
-        ],
-        objects: {
-            europe: {
-                type: 'GeometryCollection',
-                geometries: [
-                    {
-                        type: 'Polygon',
-                        properties: {
-                            iso_n3: '008',
-                            name: 'Albania',
-                            iso_a3: 'ALB',
-                            iso_a2: 'AL'
-                        },
-                        arcs: [[0]]
+import MapChart from './MapChart';
+var data = [
+    { label: 'first', value: 1, percent: 1, group: 'AL' },
+    { label: 'second', value: 2, percent: 99, group: 'AD' }
+];
+var defaultProps = {
+    data: data,
+    width: 600,
+    height: 300,
+    options: { geoUrl: 'some/geo/url', geoIdName: 'iso_a2' }
+};
+var geography = {
+    type: 'Topology',
+    arcs: [
+        [
+            [5840, 2515],
+            [5, -5],
+            [10, -26],
+            [6, -22],
+            [13, -7],
+            [7, -9],
+            [10, -13],
+            [4, -13],
+            [6, -40],
+            [1, -25],
+            [-2, -11]
+        ]
+    ],
+    objects: {
+        europe: {
+            type: 'GeometryCollection',
+            geometries: [
+                {
+                    type: 'Polygon',
+                    properties: {
+                        iso_n3: '008',
+                        name: 'Albania',
+                        iso_a3: 'ALB',
+                        iso_a2: 'AL'
                     },
-                    {
-                        type: 'Polygon',
-                        properties: {
-                            iso_n3: '020',
-                            name: 'Andorra',
-                            iso_a3: 'AND',
-                            iso_a2: 'AD'
-                        },
-                        arcs: [[0]]
-                    }
-                ]
-            }
+                    arcs: [[0]]
+                },
+                {
+                    type: 'Polygon',
+                    properties: {
+                        iso_n3: '020',
+                        name: 'Andorra',
+                        iso_a3: 'AND',
+                        iso_a2: 'AD'
+                    },
+                    arcs: [[0]]
+                }
+            ]
         }
-    };
+    }
+};
+describe('MapChart', function () {
+    var signal = new AbortController().signal;
     beforeAll(function () {
-        jest.spyOn(window, 'fetch').mockResolvedValue({
-            ok: true,
-            json: function () { return Promise.resolve(geography); }
-        });
+        jest.spyOn(window, 'fetch').mockResolvedValue({ ok: true, json: function () { return Promise.resolve(geography); } });
     });
+    var setUp = function (props) {
+        if (props === void 0) { props = {}; }
+        var user = userEvent.setup();
+        var Providers = function (_a) {
+            var children = _a.children;
+            return (React.createElement(PageRequestsAbortingContext.Provider, { value: signal }, children));
+        };
+        return __assign({ user: user }, render(React.createElement(MapChart, __assign({}, defaultProps, props)), { wrapper: Providers }));
+    };
     it('should render ComposableMap with Geographies, Legend and Tooltip', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var wrapper, mapWidth, mapHeight, mapProvider, map, g;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0: return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
-                        return __generator(this, function (_a) {
-                            wrapper = mount(React.createElement(PageRequestsAbortingContext.Provider, { value: signal },
-                                React.createElement(MapChart, __assign({}, props))));
-                            return [2 /*return*/];
-                        });
-                    }); })];
+        var user, mapChart, mapChartSvg, _a, firstGeo, secondGeo;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    user = setUp().user;
+                    expect(window.fetch).toHaveBeenCalledWith(defaultProps.options.geoUrl, { signal: signal });
+                    mapChart = screen.getByTestId('map-chart');
+                    mapChartSvg = mapChart.querySelector('svg');
+                    expect(mapChart).toHaveStyle({ width: "".concat(defaultProps.width, "px"), height: "".concat(defaultProps.height, "px") });
+                    expect(mapChartSvg).toHaveAttribute('width', "".concat(defaultProps.width - LEGEND_WIDTH));
+                    expect(mapChartSvg).toHaveAttribute('height', "".concat(defaultProps.height));
+                    return [4 /*yield*/, screen.findAllByTestId('map-geography')];
                 case 1:
-                    _a.sent();
-                    wrapper.update();
-                    expect(window.fetch).toHaveBeenCalledWith(props.options.geoUrl, { signal: signal });
-                    mapWidth = props.width - LEGEND_WIDTH;
-                    mapHeight = props.height;
-                    mapProvider = wrapper.find(MapProvider);
-                    expect(mapProvider.prop('width')).toBe(mapWidth);
-                    expect(mapProvider.prop('height')).toBe(mapHeight);
-                    map = mapProvider.find('svg');
-                    expect(map.props()).toMatchObject({
-                        width: mapWidth,
-                        height: mapHeight,
-                        viewBox: "0 0 ".concat(mapWidth, " ").concat(mapHeight)
-                    });
-                    expect(map.find(Geographies).prop('geography')).toBe(geography);
-                    g = map.find(Geography);
-                    expect(g).toHaveLength(2);
-                    expect(g.first().prop('fill')).toBe('rgb(205, 224, 254)'); //#CDE0FE
-                    expect(g.last().prop('fill')).toBe('rgb(1, 96, 173)'); //#0160AD
-                    expect(wrapper.find(Legend).props()).toMatchObject({
-                        width: LEGEND_WIDTH,
-                        minValue: 1,
-                        maxValue: 2
-                    });
-                    expect(wrapper.find(Tooltip)).toHaveLength(1);
+                    _a = _b.sent(), firstGeo = _a[0], secondGeo = _a[1];
+                    expect(firstGeo).toHaveAttribute('fill', 'rgb(205, 224, 254)');
+                    expect(secondGeo).toHaveAttribute('fill', 'rgb(1, 96, 173)');
+                    expect(screen.getByTestId('map-chart-legend')).toBeInTheDocument();
+                    expect(screen.getByTestId('max-legend-metric')).toHaveTextContent('2');
+                    expect(screen.getByTestId('min-legend-metric')).toHaveTextContent('1');
+                    expect(screen.queryByText('first')).not.toBeInTheDocument();
+                    return [4 /*yield*/, user.hover(firstGeo)];
+                case 2:
+                    _b.sent();
+                    expect(screen.getByTestId('chart-tooltip')).toBeInTheDocument();
+                    expect(screen.getByText('first')).toBeInTheDocument();
+                    expect(screen.getByTestId('chart-tooltip-value')).toHaveTextContent('1 (33.3%)');
                     return [2 /*return*/];
             }
         });
     }); });
     it('should not fail and use default projection when it is empty string', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var wrapper, mapProvider;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0: return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
-                        return __generator(this, function (_a) {
-                            wrapper = mount(React.createElement(MapChart, __assign({}, props, { options: {
-                                    geoUrl: 'some/geo/url',
-                                    geoIdName: 'iso_a2',
-                                    projection: ''
-                                } })));
-                            return [2 /*return*/];
-                        });
-                    }); })];
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    setUp({ options: __assign(__assign({}, defaultProps.options), { projection: '' }) });
+                    expect(window.fetch).toHaveBeenCalledWith(defaultProps.options.geoUrl, { signal: signal });
+                    _a = expect;
+                    return [4 /*yield*/, screen.findAllByTestId('map-geography')];
                 case 1:
-                    _a.sent();
-                    wrapper.update();
-                    mapProvider = wrapper.find(MapProvider);
-                    expect(mapProvider).toHaveLength(1);
-                    expect(mapProvider.find('svg')).toHaveLength(1);
-                    expect(mapProvider.find(Geographies).prop('geography')).toBe(geography);
+                    _a.apply(void 0, [_b.sent()]).toHaveLength(2);
+                    expect(screen.getByTestId('map-chart')).toBeInTheDocument();
                     return [2 /*return*/];
             }
         });
     }); });
     it('should not fail and use default projection when it is incorrect', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var wrapper, mapProvider;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0: return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
-                        return __generator(this, function (_a) {
-                            wrapper = mount(React.createElement(MapChart, __assign({}, props, { options: {
-                                    geoUrl: 'some/geo/url',
-                                    geoIdName: 'iso_a2',
-                                    projection: 'wrong'
-                                } })));
-                            return [2 /*return*/];
-                        });
-                    }); })];
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    setUp({ options: __assign(__assign({}, defaultProps.options), { projection: 'wrong' }) });
+                    expect(window.fetch).toHaveBeenCalledWith(defaultProps.options.geoUrl, { signal: signal });
+                    _a = expect;
+                    return [4 /*yield*/, screen.findAllByTestId('map-geography')];
                 case 1:
-                    _a.sent();
-                    wrapper.update();
-                    mapProvider = wrapper.find(MapProvider);
-                    expect(mapProvider).toHaveLength(1);
-                    expect(mapProvider.find('svg')).toHaveLength(1);
-                    expect(mapProvider.find(Geographies).prop('geography')).toBe(geography);
+                    _a.apply(void 0, [_b.sent()]).toHaveLength(2);
+                    expect(screen.getByTestId('map-chart')).toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should not render Legend when props.options.showLegend = false', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    setUp({ options: __assign(__assign({}, defaultProps.options), { showLegend: false }) });
+                    _a = expect;
+                    return [4 /*yield*/, screen.findAllByTestId('map-geography')];
+                case 1:
+                    _a.apply(void 0, [_b.sent()]).toHaveLength(2);
+                    expect(screen.queryByTestId('map-chart-legend')).not.toBeInTheDocument();
                     return [2 /*return*/];
             }
         });
     }); });
-    it('should not render Legend when props.options.showLegend = false', function () {
-        var wrapper = shallow(React.createElement(MapChart, __assign({}, props, { options: { showLegend: false } })));
-        expect(wrapper.find(Legend)).toHaveLength(0);
-    });
     it('should call props.onItemClick on geography click', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var onItemClick, wrapper, geography;
+        var onItemClick, user, firstGeo;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     onItemClick = jest.fn();
-                    return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
-                            return __generator(this, function (_a) {
-                                wrapper = mount(React.createElement(MapChart, __assign({}, props, { onItemClick: onItemClick })));
-                                return [2 /*return*/];
-                            });
-                        }); })];
+                    user = setUp({ onItemClick: onItemClick }).user;
+                    return [4 /*yield*/, screen.findAllByTestId('map-geography')];
                 case 1:
+                    firstGeo = (_a.sent())[0];
+                    return [4 /*yield*/, user.click(firstGeo)];
+                case 2:
                     _a.sent();
-                    wrapper.update();
-                    geography = wrapper.find(Geography).first();
-                    geography.simulate('click');
                     expect(onItemClick).toHaveBeenCalledWith('AL');
                     return [2 /*return*/];
             }
         });
     }); });
     it('should render ComposableMap with Geographies, Legend and Tooltip if we get FeatureCollection instead of GeometryCollection', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var FutureCollection, wrapper, mapWidth, mapHeight, mapProvider, map, g;
+        var FutureCollection, user, mapChart, mapChartSvg, geo;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -286,38 +263,25 @@ describe('MapChart', function () {
                         ok: true,
                         json: function () { return Promise.resolve(FutureCollection); }
                     });
-                    return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
-                            return __generator(this, function (_a) {
-                                wrapper = mount(React.createElement(PageRequestsAbortingContext.Provider, { value: signal },
-                                    React.createElement(MapChart, __assign({}, props))));
-                                return [2 /*return*/];
-                            });
-                        }); })];
+                    user = setUp().user;
+                    expect(window.fetch).toHaveBeenCalledWith(defaultProps.options.geoUrl, { signal: signal });
+                    mapChart = screen.getByTestId('map-chart');
+                    mapChartSvg = mapChart.querySelector('svg');
+                    expect(mapChart).toHaveStyle({ width: "".concat(defaultProps.width, "px"), height: "".concat(defaultProps.height, "px") });
+                    expect(mapChartSvg).toHaveAttribute('width', "".concat(defaultProps.width - LEGEND_WIDTH));
+                    expect(mapChartSvg).toHaveAttribute('height', "".concat(defaultProps.height));
+                    return [4 /*yield*/, screen.findByTestId('map-geography')];
                 case 1:
+                    geo = _a.sent();
+                    expect(geo).toHaveAttribute('fill', '#EEE');
+                    expect(screen.getByTestId('map-chart-legend')).toBeInTheDocument();
+                    expect(screen.getByTestId('max-legend-metric')).toHaveTextContent('2');
+                    expect(screen.getByTestId('min-legend-metric')).toHaveTextContent('1');
+                    expect(screen.queryByText('first')).not.toBeInTheDocument();
+                    return [4 /*yield*/, user.hover(geo)];
+                case 2:
                     _a.sent();
-                    wrapper.update();
-                    expect(window.fetch).toHaveBeenCalledWith(props.options.geoUrl, { signal: signal });
-                    mapWidth = props.width - LEGEND_WIDTH;
-                    mapHeight = props.height;
-                    mapProvider = wrapper.find(MapProvider);
-                    expect(mapProvider.prop('width')).toBe(mapWidth);
-                    expect(mapProvider.prop('height')).toBe(mapHeight);
-                    map = mapProvider.find('svg');
-                    expect(map.props()).toMatchObject({
-                        width: mapWidth,
-                        height: mapHeight,
-                        viewBox: "0 0 ".concat(mapWidth, " ").concat(mapHeight)
-                    });
-                    expect(map.find(Geographies).prop('geography')).toBe(FutureCollection);
-                    g = map.find(Geography);
-                    expect(g).toHaveLength(1);
-                    expect(g.first().prop('fill')).toBe('#EEE');
-                    expect(wrapper.find(Legend).props()).toMatchObject({
-                        width: LEGEND_WIDTH,
-                        minValue: 1,
-                        maxValue: 2
-                    });
-                    expect(wrapper.find(Tooltip)).toHaveLength(1);
+                    expect(screen.getByTestId('chart-tooltip')).toBeInTheDocument();
                     return [2 /*return*/];
             }
         });

package/MapChart/components/Legend/Legend.js

@@ -9,8 +9,8 @@ export var Legend = function (_a) {
         colors: colors,
         width: width
     });
-    return (React.createElement("div", { className: styles.legendContainer },
-        React.createElement(Typography, { className: classnames(styles.legendLabel, styles.alignTop) }, formatNumberAsMetric(maxValue)),
+    return (React.createElement("div", { "data-reltio-id": "map-chart-legend", className: styles.legendContainer },
+        React.createElement(Typography, { "data-reltio-id": "max-legend-metric", className: classnames(styles.legendLabel, styles.alignTop) }, formatNumberAsMetric(maxValue)),
         React.createElement("div", { className: styles.legendBar }),
-        React.createElement(Typography, { className: classnames(styles.legendLabel, styles.alignBottom) }, formatNumberAsMetric(minValue))));
+        React.createElement(Typography, { "data-reltio-id": "min-legend-metric", className: classnames(styles.legendLabel, styles.alignBottom) }, formatNumberAsMetric(minValue))));
 };

package/MaskingSwitcher/MaskingSwitcher.js

@@ -12,5 +12,5 @@ export var MaskingSwitcher = function (_a) {
     var styles = useStyles();
     var tooltipTitle = isMasked ? i18n.text('Show') : i18n.text('Hide');
     return isUnmasking ? (React.createElement(CircularProgress, { size: 16, className: classnames(className, styles.switcherWrapper) })) : (React.createElement(Tooltip, { key: String(isMasked), title: tooltipTitle },
-        React.createElement(IconButton, { "aria-label": tooltipTitle, onClick: onToggleMasking, className: classnames(className, styles.switcherWrapper) }, isMasked ? React.createElement(VisibilityIcon, { className: styles.icon }) : React.createElement(VisibilityOffIcon, { className: styles.icon }))));
+        React.createElement(IconButton, { "data-reltio-id": "masking-switcher", "aria-label": tooltipTitle, onClick: onToggleMasking, className: classnames(className, styles.switcherWrapper) }, isMasked ? React.createElement(VisibilityIcon, { className: styles.icon }) : React.createElement(VisibilityOffIcon, { className: styles.icon }))));
 };

package/MatchRulesBadge/MatchRulesBadge.test.js

@@ -9,36 +9,105 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { MatchRulesBadge } from './MatchRulesBadge';
-import { ArrowExpandButton } from '../ArrowExpandButton';
-var setUp = function (props) { return shallow(React.createElement(MatchRulesBadge, __assign({}, props), "label")); };
-describe('MatchRulesBadge test', function () {
-    var getLabel = function (component) { return component.find('.label'); };
-    var getArrow = function (component) { return component.find(ArrowExpandButton); };
-    var getContainer = function (component) { return component.find('.container'); };
+import { getMuiIconByName } from '../test-utils';
+var defaultProps = {
+    children: 'label',
+    expanded: false,
+    onExpand: jest.fn()
+};
+var setUp = function (props) {
+    if (props === void 0) { props = {}; }
+    var user = userEvent.setup();
+    return __assign({ user: user }, render(React.createElement(MatchRulesBadge, __assign({}, defaultProps, props))));
+};
+describe('MatchRulesBadge tests', function () {
     it('should render children as label correctly', function () {
-        var component = setUp({});
-        expect(getLabel(component).text()).toBe('label');
+        setUp();
+        expect(screen.getByText('label')).toBeInTheDocument();
     });
     it('should provide expanded prop to arrow', function () {
-        var component = setUp({ expanded: true });
-        expect(getArrow(component).prop('expanded')).toBe(true);
-        component.setProps({ expanded: false });
-        expect(getArrow(component).prop('expanded')).toBe(false);
+        var rerender = setUp({ expanded: true }).rerender;
+        expect(getMuiIconByName('ArrowRight')).toHaveClass('expanded');
+        rerender(React.createElement(MatchRulesBadge, __assign({}, defaultProps, { expanded: false }), "label"));
+        expect(getMuiIconByName('ArrowRight')).not.toHaveClass('expanded');
     });
-    it('should provide onExpand props as onClick handler to container', function () {
-        var onExpand = jest.fn();
-        var component = setUp({ onExpand: onExpand });
-        expect(getContainer(component).prop('onClick')).toBe(onExpand);
-        getContainer(component).simulate('click');
-        expect(onExpand).toHaveBeenCalled();
+    it('should provide call onExpand on click', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                case 1:
+                    _a.sent();
+                    expect(defaultProps.onExpand).toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should provide other props to container for work with withTooltip hoc', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onMouseEnter, user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onMouseEnter = jest.fn();
+                    user = setUp({ onMouseEnter: onMouseEnter }).user;
+                    return [4 /*yield*/, user.hover(screen.getByRole('button'))];
+                case 1:
+                    _a.sent();
+                    expect(onMouseEnter).toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should apply custom className', function () {
+        var className = 'custom-class';
+        setUp({ className: className });
+        expect(screen.getByRole('button').parentElement).toHaveClass(className);
     });
-    it('should provide other props to container for work with withTooltip hoc', function () {
-        var onHover = jest.fn();
-        var component = setUp({ onHover: onHover });
-        var container = getContainer(component);
-        expect(container.prop('onHover')).toBe(onHover);
+    it('should forward ref to the container', function () {
+        var ref = React.createRef();
+        setUp({ ref: ref });
+        expect(ref.current).toBeInstanceOf(HTMLDivElement);
     });
 });

package/SelectEditor/SelectEditor.d.ts

@@ -1,11 +1,5 @@
-export function SelectEditor({ classes, ...otherProps }: {
-    [x: string]: any;
-    classes: any;
-}): React.JSX.Element;
-export namespace SelectEditor {
-    namespace propTypes {
-        let classes: PropTypes.Requireable<object>;
-    }
-}
 import React from 'react';
-import PropTypes from 'prop-types';
+import { DropDownEditor } from '../DropDownEditor';
+type Props = React.ComponentProps<typeof DropDownEditor>;
+export declare const SelectEditor: ({ classes, ...otherProps }: Props) => React.JSX.Element;
+export {};

package/SelectEditor/SelectEditor.js

@@ -21,7 +21,6 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
-import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { prop } from 'ramda';
 import { DropDownEditor } from '../DropDownEditor';
@@ -33,6 +32,3 @@ export var SelectEditor = function (_a) {
             disableAutoFocusItem: true
         }, classes: __assign(__assign({}, classes), { root: classnames(styles.root, prop('root', classes)), icon: classnames(styles.icon, prop('icon', classes)) }) }, otherProps)));
 };
-SelectEditor.propTypes = {
-    classes: PropTypes.object
-};