@reltio/components 1.4.2051 → 1.4.2053

package/cjs/MapChart/MapChart.test.js

@@ -51,201 +51,178 @@ var __importDefault = (this && this.__importDefault) || function (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 MapChart_1 = __importDefault(require("./MapChart"));
-var recharts_1 = require("recharts");
-var Legend_1 = require("./components/Legend");
+var react_2 = require("@testing-library/react");
+var user_event_1 = __importDefault(require("@testing-library/user-event"));
 var constants_1 = require("./constants");
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-var react_simple_maps_1 = require("react-simple-maps");
 var PageRequestsAbortingContext_1 = require("../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]]
+var MapChart_1 = __importDefault(require("./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 = user_event_1.default.setup();
+        var Providers = function (_a) {
+            var children = _a.children;
+            return (react_1.default.createElement(PageRequestsAbortingContext_1.PageRequestsAbortingContext.Provider, { value: signal }, children));
+        };
+        return __assign({ user: user }, (0, react_2.render)(react_1.default.createElement(MapChart_1.default, __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*/, (0, test_utils_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
-                        return __generator(this, function (_a) {
-                            wrapper = (0, enzyme_1.mount)(react_1.default.createElement(PageRequestsAbortingContext_1.PageRequestsAbortingContext.Provider, { value: signal },
-                                react_1.default.createElement(MapChart_1.default, __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 = react_2.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 - constants_1.LEGEND_WIDTH));
+                    expect(mapChartSvg).toHaveAttribute('height', "".concat(defaultProps.height));
+                    return [4 /*yield*/, react_2.screen.findAllByTestId('map-geography')];
                 case 1:
-                    _a.sent();
-                    wrapper.update();
-                    expect(window.fetch).toHaveBeenCalledWith(props.options.geoUrl, { signal: signal });
-                    mapWidth = props.width - constants_1.LEGEND_WIDTH;
-                    mapHeight = props.height;
-                    mapProvider = wrapper.find(react_simple_maps_1.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(react_simple_maps_1.Geographies).prop('geography')).toBe(geography);
-                    g = map.find(react_simple_maps_1.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_1.Legend).props()).toMatchObject({
-                        width: constants_1.LEGEND_WIDTH,
-                        minValue: 1,
-                        maxValue: 2
-                    });
-                    expect(wrapper.find(recharts_1.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(react_2.screen.getByTestId('map-chart-legend')).toBeInTheDocument();
+                    expect(react_2.screen.getByTestId('max-legend-metric')).toHaveTextContent('2');
+                    expect(react_2.screen.getByTestId('min-legend-metric')).toHaveTextContent('1');
+                    expect(react_2.screen.queryByText('first')).not.toBeInTheDocument();
+                    return [4 /*yield*/, user.hover(firstGeo)];
+                case 2:
+                    _b.sent();
+                    expect(react_2.screen.getByTestId('chart-tooltip')).toBeInTheDocument();
+                    expect(react_2.screen.getByText('first')).toBeInTheDocument();
+                    expect(react_2.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*/, (0, test_utils_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
-                        return __generator(this, function (_a) {
-                            wrapper = (0, enzyme_1.mount)(react_1.default.createElement(MapChart_1.default, __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*/, react_2.screen.findAllByTestId('map-geography')];
                 case 1:
-                    _a.sent();
-                    wrapper.update();
-                    mapProvider = wrapper.find(react_simple_maps_1.MapProvider);
-                    expect(mapProvider).toHaveLength(1);
-                    expect(mapProvider.find('svg')).toHaveLength(1);
-                    expect(mapProvider.find(react_simple_maps_1.Geographies).prop('geography')).toBe(geography);
+                    _a.apply(void 0, [_b.sent()]).toHaveLength(2);
+                    expect(react_2.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*/, (0, test_utils_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
-                        return __generator(this, function (_a) {
-                            wrapper = (0, enzyme_1.mount)(react_1.default.createElement(MapChart_1.default, __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*/, react_2.screen.findAllByTestId('map-geography')];
                 case 1:
-                    _a.sent();
-                    wrapper.update();
-                    mapProvider = wrapper.find(react_simple_maps_1.MapProvider);
-                    expect(mapProvider).toHaveLength(1);
-                    expect(mapProvider.find('svg')).toHaveLength(1);
-                    expect(mapProvider.find(react_simple_maps_1.Geographies).prop('geography')).toBe(geography);
+                    _a.apply(void 0, [_b.sent()]).toHaveLength(2);
+                    expect(react_2.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*/, react_2.screen.findAllByTestId('map-geography')];
+                case 1:
+                    _a.apply(void 0, [_b.sent()]).toHaveLength(2);
+                    expect(react_2.screen.queryByTestId('map-chart-legend')).not.toBeInTheDocument();
                     return [2 /*return*/];
             }
         });
     }); });
-    it('should not render Legend when props.options.showLegend = false', function () {
-        var wrapper = (0, enzyme_1.shallow)(react_1.default.createElement(MapChart_1.default, __assign({}, props, { options: { showLegend: false } })));
-        expect(wrapper.find(Legend_1.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*/, (0, test_utils_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
-                            return __generator(this, function (_a) {
-                                wrapper = (0, enzyme_1.mount)(react_1.default.createElement(MapChart_1.default, __assign({}, props, { onItemClick: onItemClick })));
-                                return [2 /*return*/];
-                            });
-                        }); })];
+                    user = setUp({ onItemClick: onItemClick }).user;
+                    return [4 /*yield*/, react_2.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(react_simple_maps_1.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:
@@ -291,38 +268,25 @@ describe('MapChart', function () {
                         ok: true,
                         json: function () { return Promise.resolve(FutureCollection); }
                     });
-                    return [4 /*yield*/, (0, test_utils_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
-                            return __generator(this, function (_a) {
-                                wrapper = (0, enzyme_1.mount)(react_1.default.createElement(PageRequestsAbortingContext_1.PageRequestsAbortingContext.Provider, { value: signal },
-                                    react_1.default.createElement(MapChart_1.default, __assign({}, props))));
-                                return [2 /*return*/];
-                            });
-                        }); })];
+                    user = setUp().user;
+                    expect(window.fetch).toHaveBeenCalledWith(defaultProps.options.geoUrl, { signal: signal });
+                    mapChart = react_2.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 - constants_1.LEGEND_WIDTH));
+                    expect(mapChartSvg).toHaveAttribute('height', "".concat(defaultProps.height));
+                    return [4 /*yield*/, react_2.screen.findByTestId('map-geography')];
                 case 1:
+                    geo = _a.sent();
+                    expect(geo).toHaveAttribute('fill', '#EEE');
+                    expect(react_2.screen.getByTestId('map-chart-legend')).toBeInTheDocument();
+                    expect(react_2.screen.getByTestId('max-legend-metric')).toHaveTextContent('2');
+                    expect(react_2.screen.getByTestId('min-legend-metric')).toHaveTextContent('1');
+                    expect(react_2.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 - constants_1.LEGEND_WIDTH;
-                    mapHeight = props.height;
-                    mapProvider = wrapper.find(react_simple_maps_1.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(react_simple_maps_1.Geographies).prop('geography')).toBe(FutureCollection);
-                    g = map.find(react_simple_maps_1.Geography);
-                    expect(g).toHaveLength(1);
-                    expect(g.first().prop('fill')).toBe('#EEE');
-                    expect(wrapper.find(Legend_1.Legend).props()).toMatchObject({
-                        width: constants_1.LEGEND_WIDTH,
-                        minValue: 1,
-                        maxValue: 2
-                    });
-                    expect(wrapper.find(recharts_1.Tooltip)).toHaveLength(1);
+                    expect(react_2.screen.getByTestId('chart-tooltip')).toBeInTheDocument();
                     return [2 /*return*/];
             }
         });

package/cjs/MapChart/components/Legend/Legend.js

@@ -15,9 +15,9 @@ var Legend = function (_a) {
         colors: colors,
         width: width
     });
-    return (react_1.default.createElement("div", { className: styles.legendContainer },
-        react_1.default.createElement(Typography_1.default, { className: (0, classnames_1.default)(styles.legendLabel, styles.alignTop) }, (0, mdm_sdk_1.formatNumberAsMetric)(maxValue)),
+    return (react_1.default.createElement("div", { "data-reltio-id": "map-chart-legend", className: styles.legendContainer },
+        react_1.default.createElement(Typography_1.default, { "data-reltio-id": "max-legend-metric", className: (0, classnames_1.default)(styles.legendLabel, styles.alignTop) }, (0, mdm_sdk_1.formatNumberAsMetric)(maxValue)),
         react_1.default.createElement("div", { className: styles.legendBar }),
-        react_1.default.createElement(Typography_1.default, { className: (0, classnames_1.default)(styles.legendLabel, styles.alignBottom) }, (0, mdm_sdk_1.formatNumberAsMetric)(minValue))));
+        react_1.default.createElement(Typography_1.default, { "data-reltio-id": "min-legend-metric", className: (0, classnames_1.default)(styles.legendLabel, styles.alignBottom) }, (0, mdm_sdk_1.formatNumberAsMetric)(minValue))));
 };
 exports.Legend = Legend;

package/cjs/MaskingSwitcher/MaskingSwitcher.js

@@ -18,6 +18,6 @@ var MaskingSwitcher = function (_a) {
     var styles = (0, styles_1.useStyles)();
     var tooltipTitle = isMasked ? ui_i18n_1.default.text('Show') : ui_i18n_1.default.text('Hide');
     return isUnmasking ? (react_1.default.createElement(CircularProgress_1.default, { size: 16, className: (0, classnames_1.default)(className, styles.switcherWrapper) })) : (react_1.default.createElement(Tooltip_1.default, { key: String(isMasked), title: tooltipTitle },
-        react_1.default.createElement(IconButton_1.default, { "aria-label": tooltipTitle, onClick: onToggleMasking, className: (0, classnames_1.default)(className, styles.switcherWrapper) }, isMasked ? react_1.default.createElement(Visibility_1.default, { className: styles.icon }) : react_1.default.createElement(VisibilityOff_1.default, { className: styles.icon }))));
+        react_1.default.createElement(IconButton_1.default, { "data-reltio-id": "masking-switcher", "aria-label": tooltipTitle, onClick: onToggleMasking, className: (0, classnames_1.default)(className, styles.switcherWrapper) }, isMasked ? react_1.default.createElement(Visibility_1.default, { className: styles.icon }) : react_1.default.createElement(VisibilityOff_1.default, { className: styles.icon }))));
 };
 exports.MaskingSwitcher = MaskingSwitcher;

package/cjs/MatchRulesBadge/MatchRulesBadge.test.js

@@ -10,40 +10,109 @@ 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 };
+    }
+};
 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 react_2 = require("@testing-library/react");
+var user_event_1 = __importDefault(require("@testing-library/user-event"));
 var MatchRulesBadge_1 = require("./MatchRulesBadge");
-var ArrowExpandButton_1 = require("../ArrowExpandButton");
-var setUp = function (props) { return (0, enzyme_1.shallow)(react_1.default.createElement(MatchRulesBadge_1.MatchRulesBadge, __assign({}, props), "label")); };
-describe('MatchRulesBadge test', function () {
-    var getLabel = function (component) { return component.find('.label'); };
-    var getArrow = function (component) { return component.find(ArrowExpandButton_1.ArrowExpandButton); };
-    var getContainer = function (component) { return component.find('.container'); };
+var test_utils_1 = require("../test-utils");
+var defaultProps = {
+    children: 'label',
+    expanded: false,
+    onExpand: jest.fn()
+};
+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(MatchRulesBadge_1.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(react_2.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((0, test_utils_1.getMuiIconByName)('ArrowRight')).toHaveClass('expanded');
+        rerender(react_1.default.createElement(MatchRulesBadge_1.MatchRulesBadge, __assign({}, defaultProps, { expanded: false }), "label"));
+        expect((0, test_utils_1.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(react_2.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(react_2.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(react_2.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_1.default.createRef();
+        setUp({ ref: ref });
+        expect(ref.current).toBeInstanceOf(HTMLDivElement);
     });
 });

package/cjs/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/cjs/SelectEditor/SelectEditor.js

@@ -27,7 +27,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectEditor = void 0;
 var react_1 = __importDefault(require("react"));
-var prop_types_1 = __importDefault(require("prop-types"));
 var classnames_1 = __importDefault(require("classnames"));
 var ramda_1 = require("ramda");
 var DropDownEditor_1 = require("../DropDownEditor");
@@ -40,6 +39,3 @@ var SelectEditor = function (_a) {
         }, classes: __assign(__assign({}, classes), { root: (0, classnames_1.default)(styles.root, (0, ramda_1.prop)('root', classes)), icon: (0, classnames_1.default)(styles.icon, (0, ramda_1.prop)('icon', classes)) }) }, otherProps)));
 };
 exports.SelectEditor = SelectEditor;
-exports.SelectEditor.propTypes = {
-    classes: prop_types_1.default.object
-};