@reltio/components 1.4.2051 → 1.4.2053

package/AttributeListItem/AttributeListItem.d.ts

@@ -6,7 +6,7 @@ export declare const RecommendedIconWithTooltip: React.ForwardRefExoticComponent
     tooltipPlacement?: import("@mui/material").TooltipProps["placement"];
     showForDisabled?: boolean;
 } & React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<HTMLElement>>;
-type Data = {
+type Data = Record<string, unknown> & {
     attrType?: AttributeType;
 };
 type Props = {

package/ChartTooltip/ChartTooltip.js

@@ -9,11 +9,11 @@ export var ChartTooltip = function (_a) {
     var localizedValue = (tooltipPayload === null || tooltipPayload === void 0 ? void 0 : tooltipPayload.localizedValue) || (tooltipPayload === null || tooltipPayload === void 0 ? void 0 : tooltipPayload.value);
     var tooltipLabel = tooltipPayload === null || tooltipPayload === void 0 ? void 0 : tooltipPayload.label;
     var percent = tooltipPayload === null || tooltipPayload === void 0 ? void 0 : tooltipPayload.percent;
-    return (active && (React.createElement("div", { className: styles.tooltipWrapper },
+    return (active && (React.createElement("div", { "data-reltio-id": "chart-tooltip", className: styles.tooltipWrapper },
         React.createElement("p", { className: styles.tooltipTitle }, tooltipLabel),
-        isNil(percent) ? (React.createElement("p", { className: styles.tooltipValue },
+        isNil(percent) ? (React.createElement("p", { "data-reltio-id": "chart-tooltip-value", className: styles.tooltipValue },
             "Value: ",
-            localizedValue)) : (React.createElement("p", { className: styles.tooltipValueBold },
+            localizedValue)) : (React.createElement("p", { "data-reltio-id": "chart-tooltip-value", className: styles.tooltipValueBold },
             localizedValue,
             React.createElement("span", { className: styles.tooltipPercent },
                 " (",

package/ColumnsSettings/components/ColumnListItem/ColumnListItem.d.ts

@@ -1,27 +1,12 @@
-export function ColumnListItem({ item, onClick, checked, level, style, isFocused, isGroupItem, hideCheckBox }: {
-    item: any;
-    onClick: any;
-    checked: any;
-    level: any;
-    style: any;
-    isFocused: any;
-    isGroupItem: any;
-    hideCheckBox: any;
-}): React.JSX.Element;
-export namespace ColumnListItem {
-    namespace propTypes {
-        let item: PropTypes.Requireable<PropTypes.InferProps<{
-            label: PropTypes.Requireable<string>;
-            filterText: PropTypes.Requireable<string>;
-        }>>;
-        let level: PropTypes.Requireable<number>;
-        let onClick: PropTypes.Requireable<(...args: any[]) => any>;
-        let checked: PropTypes.Requireable<boolean>;
-        let style: PropTypes.Requireable<object>;
-        let isGroupItem: PropTypes.Requireable<boolean>;
-        let isFocused: PropTypes.Requireable<boolean>;
-        let hideCheckBox: PropTypes.Requireable<boolean>;
-    }
-}
 import React from 'react';
-import PropTypes from 'prop-types';
+import { AttributeListItem } from '../../../AttributeListItem';
+type Props = Pick<React.ComponentProps<typeof AttributeListItem>, 'hideCheckBox' | 'onClick' | 'checked' | 'level' | 'style' | 'isFocused'> & {
+    item: {
+        id: string;
+        label: string;
+        filterText?: string;
+    };
+    isGroupItem?: boolean;
+};
+export declare const ColumnListItem: ({ item, onClick, checked, level, style, isFocused, isGroupItem, hideCheckBox }: Props) => React.JSX.Element;
+export {};

package/ColumnsSettings/components/ColumnListItem/ColumnListItem.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { AttributeListItem } from '../../../AttributeListItem';
 import { Highlighter } from '../../../Highlighter';
@@ -10,16 +9,3 @@ export var ColumnListItem = function (_a) {
     var styles = useStyles();
     return (React.createElement(AttributeListItem, { hideCheckBox: hideCheckBox, key: item.id, onClick: onClick, checked: checked, level: level, data: item, label: React.createElement(Highlighter, { text: item.label, highlight: item.filterText }), labelInText: item.label, style: style, isFocused: isFocused, hideIcon: isGroupItem, className: classnames((_b = {}, _b[styles.groupItem] = isGroupItem, _b)) }));
 };
-ColumnListItem.propTypes = {
-    item: PropTypes.shape({
-        label: PropTypes.string,
-        filterText: PropTypes.string
-    }),
-    level: PropTypes.number,
-    onClick: PropTypes.func,
-    checked: PropTypes.bool,
-    style: PropTypes.object,
-    isGroupItem: PropTypes.bool,
-    isFocused: PropTypes.bool,
-    hideCheckBox: PropTypes.bool
-};

package/DropDownMenuButton/DropDownMenuButton.js

@@ -40,7 +40,7 @@ export function DropDownMenuButton(_a) {
         return React.createElement(MenuItemRenderer, { item: item, key: index, onMenuClose: handleToggle });
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement(ButtonComponent, __assign({ "data-reltio-id": 'drop-down-menu-button', ref: buttonRef, className: classnames(styles.buttonRoot, (_b = {},
+        React.createElement(ButtonComponent, __assign({ "data-reltio-id": "drop-down-menu-button", ref: buttonRef, className: classnames(styles.buttonRoot, (_b = {},
                 _b[styles.selected] = isOpen,
                 _b), className), onClick: handleToggle, "aria-pressed": isOpen, "aria-controls": isOpen ? menuId : undefined, "aria-haspopup": "true" }, buttonProps), buttonContent),
         React.createElement(Menu, __assign({ id: menuId, variant: "menu", open: isOpen, autoFocus: false, classes: { paper: styles.paper }, anchorEl: buttonRef.current, onClose: handleToggle, anchorOrigin: {

package/HOCs/withAsyncMount/withAsyncMount.test.js

@@ -1,90 +1,90 @@
+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 } from 'enzyme';
-import { act } from 'react-dom/test-utils';
+import { render, screen, act } from '@testing-library/react';
 import { AsyncMountContext } from '../../contexts/AsyncMountContext';
 import { withAsyncMount } from './withAsyncMount';
 describe('withAsyncMount tests', function () {
     beforeAll(function () {
         jest.useFakeTimers();
     });
+    var defaultContextValue = { enabled: true, queueSizeThreshold: 0 };
     var Component = function (_a) {
         var value = _a.value;
-        return React.createElement("div", { "data-id": value });
-    }; //eslint-disable-line
+        return React.createElement("div", { "data-reltio-id": value });
+    };
+    var Placeholder = function () { return React.createElement("span", { "data-reltio-id": "placeholder" }); };
+    var setUp = function (_a) {
+        var _b = _a === void 0 ? {} : _a, _c = _b.contextValue, contextValue = _c === void 0 ? {} : _c, _d = _b.withProvider, withProvider = _d === void 0 ? true : _d, _e = _b.withPlaceholder, withPlaceholder = _e === void 0 ? false : _e;
+        var Providers = function (_a) {
+            var children = _a.children;
+            return (React.createElement(AsyncMountContext.Provider, { value: __assign(__assign({}, defaultContextValue), contextValue) }, children));
+        };
+        var AsyncMountedComponent = withAsyncMount(Component, withPlaceholder ? Placeholder : undefined);
+        return render(React.createElement(AsyncMountedComponent, { value: "test-value" }), { wrapper: withProvider ? Providers : undefined });
+    };
     it('should mount wrapped component in sync way without AsyncMountContext.Provider', function () {
-        var AsyncMountedComponent = withAsyncMount(Component);
-        var component = mount(React.createElement(AsyncMountedComponent, { value: "123" }));
-        expect(component.find(Component).exists()).toBe(true);
+        setUp({ withProvider: false });
+        expect(screen.getByTestId('test-value')).toBeInTheDocument();
     });
     it('should mount wrapped component in sync way with AsyncMountContext.Provider if value.enabled = false', function () {
-        var AsyncMountedComponent = withAsyncMount(Component);
-        var component = mount(React.createElement(AsyncMountContext.Provider, { value: { enabled: false, queueSizeThreshold: 0 } },
-            React.createElement(AsyncMountedComponent, { value: "123" })));
-        expect(component.find(Component).exists()).toBe(true);
+        setUp({ contextValue: { enabled: false } });
+        expect(screen.getByTestId('test-value')).toBeInTheDocument();
     });
     it('should mount wrapped component in async way with AsyncMountContext.Provider if value.enabled = true', function () {
-        var AsyncMountedComponent = withAsyncMount(Component);
-        var component = mount(React.createElement(AsyncMountContext.Provider, { value: { enabled: true, queueSizeThreshold: 0 } },
-            React.createElement(AsyncMountedComponent, { value: "123" })));
-        expect(component.find(Component).exists()).toBe(false);
-        expect(component.isEmptyRender()).toBe(true);
+        setUp({ contextValue: { enabled: true } });
+        expect(screen.queryByTestId('test-value')).not.toBeInTheDocument();
         act(function () {
             jest.runOnlyPendingTimers();
         });
-        component.update();
-        expect(component.find(Component).exists()).toBe(true);
-        expect(component.find(Component).prop('value')).toBe('123');
-        expect(component.isEmptyRender()).toBe(false);
+        expect(screen.getByTestId('test-value')).toBeInTheDocument();
     });
     it('should render PlaceholderComponent instead of Component before mounting if its passed as second argument', function () {
-        var Placeholder = function () { return React.createElement("span", null); };
-        var AsyncMountedComponent = withAsyncMount(Component, Placeholder);
-        var component = mount(React.createElement(AsyncMountContext.Provider, { value: { enabled: true, queueSizeThreshold: 0 } },
-            React.createElement(AsyncMountedComponent, { value: "123" })));
-        expect(component.find(Component).exists()).toBe(false);
-        expect(component.find(Placeholder).exists()).toBe(true);
+        setUp({ withPlaceholder: true });
+        expect(screen.queryByTestId('test-value')).not.toBeInTheDocument();
+        expect(screen.getByTestId('placeholder')).toBeInTheDocument();
         act(function () {
             jest.runOnlyPendingTimers();
         });
-        component.update();
-        expect(component.find(Component).exists()).toBe(true);
-        expect(component.find(Component).prop('value')).toBe('123');
-        expect(component.find(Placeholder).exists()).toBe(false);
+        expect(screen.getByTestId('test-value')).toBeInTheDocument();
+        expect(screen.queryByTestId('placeholder')).not.toBeInTheDocument();
     });
     describe('queueSizeThreshold behavior', function () {
         it('should not use context value.queueSizeThreshold by default', function () {
             var AsyncMountedComponent = withAsyncMount(Component);
-            var component = mount(React.createElement(AsyncMountContext.Provider, { value: { enabled: true, queueSizeThreshold: 0 } },
-                React.createElement(AsyncMountedComponent, { value: "123" }),
-                React.createElement(AsyncMountedComponent, { value: "123" })));
-            expect(component.find(Component).length).toBe(0);
+            render(React.createElement(AsyncMountContext.Provider, { value: { enabled: true, queueSizeThreshold: 0 } },
+                React.createElement(AsyncMountedComponent, { value: "test-value" }),
+                React.createElement(AsyncMountedComponent, { value: "test-value" })));
+            expect(screen.queryAllByTestId('test-value').length).toBe(0);
             act(function () {
                 jest.runOnlyPendingTimers();
             });
-            component.update();
-            expect(component.find(Component).length).toBe(2);
+            expect(screen.queryAllByTestId('test-value').length).toBe(2);
         });
         it('should use async mount only after exceeding of "value.queueSizeThreshold" number of component mounts', function () {
             var AsyncMountedComponent = withAsyncMount(Component);
-            var component = mount(React.createElement(AsyncMountContext.Provider, { value: { enabled: true, queueSizeThreshold: 2 } },
-                React.createElement(AsyncMountedComponent, { value: "123" }),
-                React.createElement(AsyncMountedComponent, { value: "123" })));
-            expect(component.find(Component).length).toBe(2);
+            var Providers = function (_a) {
+                var children = _a.children;
+                return (React.createElement(AsyncMountContext.Provider, { value: { enabled: true, queueSizeThreshold: 2 } }, children));
+            };
+            render(React.createElement(React.Fragment, null,
+                React.createElement(AsyncMountedComponent, { value: "test-value" }),
+                React.createElement(AsyncMountedComponent, { value: "test-value" }),
+                React.createElement(AsyncMountedComponent, { value: "test-value" })), { wrapper: Providers });
+            expect(screen.queryAllByTestId('test-value').length).toBe(2);
             act(function () {
                 jest.runOnlyPendingTimers();
             });
-            component.update();
-            expect(component.find(Component).length).toBe(2);
-            component = mount(React.createElement(AsyncMountContext.Provider, { value: { enabled: true, queueSizeThreshold: 2 } },
-                React.createElement(AsyncMountedComponent, { value: "123" }),
-                React.createElement(AsyncMountedComponent, { value: "123" }),
-                React.createElement(AsyncMountedComponent, { value: "123" })));
-            expect(component.find(Component).length).toBe(2);
-            act(function () {
-                jest.runOnlyPendingTimers();
-            });
-            component.update();
-            expect(component.find(Component).length).toBe(3);
+            expect(screen.queryAllByTestId('test-value').length).toBe(3);
         });
     });
 });

package/IgnoreButton/IgnoreButton.spec.js

@@ -1,29 +1,118 @@
+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 = 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 { mount } from 'enzyme';
-import { SmallIconButtonWithTooltip } from '../SmallIconButton';
-import IgnoredIcon from '../icons/Ignored';
-import IgnoredOutlinedIcon from '../icons/IgnoredOutlined';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { IgnoreButton } from './IgnoreButton';
 describe('Ignore button test', function () {
-    var component, onClickFn;
-    var getButton = function (component) { return component.find(SmallIconButtonWithTooltip); };
+    var onClickSpy = jest.fn();
     beforeEach(function () {
-        onClickFn = jest.fn();
-        component = mount(React.createElement(IgnoreButton, { isIgnored: false, onClick: onClickFn }));
-    });
-    it('should pass button props correctly', function () {
-        expect(getButton(component).prop('onClick')).toBe(onClickFn);
-        component.setProps({ disabled: true });
-        expect(getButton(component).prop('disabled')).toBe(true);
+        jest.clearAllMocks();
     });
+    var setUp = function (props) {
+        if (props === void 0) { props = {}; }
+        var user = userEvent.setup();
+        render(React.createElement(IgnoreButton, __assign({ isIgnored: false, onClick: onClickSpy }, props)));
+        return { user: user };
+    };
+    it('should pass button props correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, button;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    button = screen.getByRole('button');
+                    expect(button).toBeEnabled();
+                    return [4 /*yield*/, user.click(button)];
+                case 1:
+                    _a.sent();
+                    expect(onClickSpy).toHaveBeenCalledTimes(1);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
     it('should show correct icon', function () {
-        expect(getButton(component).prop('icon')).toBe(IgnoredOutlinedIcon);
-        component.setProps({ isIgnored: true });
-        expect(getButton(component).prop('icon')).toBe(IgnoredIcon);
+        setUp();
+        expect(screen.getByTestId('SvgIgnoredOutlined')).toBeInTheDocument();
     });
-    it('should show correct tooltip', function () {
-        expect(getButton(component).prop('tooltipTitle')).toBe('Ignore');
-        component.setProps({ disabled: true });
-        expect(getButton(component).prop('tooltipTitle')).toBe("You don't have permissions to ignore");
+    it('should show correct icon when ignored', function () {
+        setUp({ isIgnored: true });
+        expect(screen.getByTestId('SvgIgnored')).toBeInTheDocument();
     });
+    it('should show correct tooltip', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, button;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    button = screen.getByRole('button');
+                    return [4 /*yield*/, user.hover(button)];
+                case 1:
+                    _a.sent();
+                    expect(screen.getByText('Ignore')).toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should show correct tooltip when disabled', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, button;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp({ disabled: true }).user;
+                    button = screen.getByRole('button');
+                    return [4 /*yield*/, user.hover(button)];
+                case 1:
+                    _a.sent();
+                    expect(button).toBeDisabled();
+                    expect(screen.getByText("You don't have permissions to ignore")).toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
 });

package/Image/Image.d.ts

@@ -8,5 +8,5 @@ type Props = {
     overlay?: React.ReactNode;
     onClick?: () => void;
 };
-declare const _default: React.MemoExoticComponent<(props: Props) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ src, className, containerClassName, size, overlay, ...otherProps }: Props) => React.JSX.Element>;
 export default _default;

package/Image/Image.js

@@ -28,12 +28,12 @@ import { isEmptyValue } from '@reltio/mdm-sdk';
 import { ImageSizesStyles } from './constants';
 import { RequestStates } from '../types';
 import { useStyles } from './styles';
-var Image = function (props) {
-    var _a;
-    var src = props.src, className = props.className, containerClassName = props.containerClassName, _b = props.size, size = _b === void 0 ? ImageSizesStyles.SMALL : _b, _c = props.overlay, overlay = _c === void 0 ? null : _c, otherProps = __rest(props, ["src", "className", "containerClassName", "size", "overlay"]);
+var Image = function (_a) {
+    var _b;
+    var src = _a.src, className = _a.className, containerClassName = _a.containerClassName, _c = _a.size, size = _c === void 0 ? ImageSizesStyles.SMALL : _c, _d = _a.overlay, overlay = _d === void 0 ? null : _d, otherProps = __rest(_a, ["src", "className", "containerClassName", "size", "overlay"]);
     var sizeStyles = size || ImageSizesStyles.SMALL;
     var styles = useStyles(sizeStyles);
-    var _d = useState(RequestStates.LOADING), imageLoadingState = _d[0], setImageLoadingState = _d[1];
+    var _e = useState(RequestStates.LOADING), imageLoadingState = _e[0], setImageLoadingState = _e[1];
     useEffect(function () {
         setImageLoadingState(RequestStates.LOADING);
     }, [src]);
@@ -47,10 +47,10 @@ var Image = function (props) {
     var imageIsLoaded = imageLoadingState === RequestStates.LOADED;
     var imageLoadingError = imageLoadingState === RequestStates.ERROR;
     return imageLoadingError ? (React.createElement("div", __assign({ className: classnames(styles.defaultContainer, styles.image, className) }, otherProps),
-        React.createElement(NotAvailableImage, { className: styles.defaultImage }))) : (React.createElement("div", { className: classnames(styles.root, containerClassName) },
-        !isEmptyValue(src) && (React.createElement("img", __assign({ src: src, className: classnames(styles.image, className, (_a = {},
-                _a[styles.hideImage] = imageIsLoading,
-                _a)), onLoad: onImageLoad, onError: onImageLoadFail, alt: 'image' }, otherProps))),
+        React.createElement(NotAvailableImage, { "data-reltio-id": "not-available-image", className: styles.defaultImage }))) : (React.createElement("div", { className: classnames(styles.root, containerClassName) },
+        !isEmptyValue(src) && (React.createElement("img", __assign({ src: src, className: classnames(styles.image, className, (_b = {},
+                _b[styles.hideImage] = imageIsLoading,
+                _b)), onLoad: onImageLoad, onError: onImageLoadFail, alt: 'image' }, otherProps))),
         imageIsLoading && (React.createElement("div", __assign({ className: classnames(styles.defaultContainer, styles.image, className) }, otherProps),
             React.createElement(DefaultImage, { className: styles.defaultImage }))),
         imageIsLoaded && overlay));

package/Image/Image.test.js

@@ -1,65 +1,60 @@
+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 { shallow } from 'enzyme';
-import { act } from 'react-dom/test-utils';
-import DefaultImage from '../icons/DefaultImage';
-import NotAvailableImage from '@mui/icons-material/BrokenImage';
-import { rerenderWrapper } from '../test-utils';
+import { render, screen, fireEvent } from '@testing-library/react';
 import Image from './Image';
+var setUp = function (props) {
+    if (props === void 0) { props = {}; }
+    return render(React.createElement(Image, __assign({ src: 'path' }, props)));
+};
 describe('Image tests', function () {
     it('should render main parts', function () {
-        var component = shallow(React.createElement(Image, { src: 'path' }));
-        expect(component.find('img')).toHaveLength(1);
+        setUp();
+        expect(screen.getByRole('img')).toBeInTheDocument();
     });
     it('should render default image', function () {
-        var component = shallow(React.createElement(Image, { src: '' }));
-        expect(component.find('img')).toHaveLength(0);
-        expect(component.find('.defaultContainer')).toHaveLength(1);
-        expect(component.find(DefaultImage)).toHaveLength(1);
+        setUp({ src: '' });
+        expect(screen.queryByRole('img')).not.toBeInTheDocument();
+        expect(screen.getByTestId('SvgDefaultImage')).toBeInTheDocument();
     });
     it('should reset "default image" state after src prop changing', function () {
-        var component = shallow(React.createElement(Image, { src: '' }));
-        expect(component.find('img')).toHaveLength(0);
-        expect(component.find('.defaultContainer')).toHaveLength(1);
-        expect(component.find(DefaultImage)).toHaveLength(1);
-        component.setProps({ src: '123' });
-        component.update();
-        var image = component.find('img');
-        expect(image).toHaveLength(1);
-        expect(image.prop('className')).toContain('hideImage');
-        expect(component.find('.defaultContainer')).toHaveLength(1);
-        expect(component.find(DefaultImage)).toHaveLength(1);
-        act(function () {
-            component.find('img').simulate('load');
-        });
-        rerenderWrapper(component);
-        expect(component.find('img')).toHaveLength(1);
-        expect(component.find('.defaultContainer')).toHaveLength(0);
+        var rerender = setUp({ src: '' }).rerender;
+        expect(screen.queryByRole('img')).not.toBeInTheDocument();
+        expect(screen.getByTestId('SvgDefaultImage')).toBeInTheDocument();
+        rerender(React.createElement(Image, { src: '123' }));
+        var image = screen.getByRole('img');
+        expect(image).toBeInTheDocument();
+        expect(image).toHaveClass('hideImage');
+        fireEvent.load(image);
+        expect(screen.queryByTestId('default-container')).not.toBeInTheDocument();
     });
     it('should reset "default image" state when image loading was unsuccessful', function () {
-        var component = shallow(React.createElement(Image, { src: '123' }));
-        var image = component.find('img');
-        expect(image).toHaveLength(1);
-        expect(image.prop('className')).toContain('hideImage');
-        expect(component.find('.defaultContainer')).toHaveLength(1);
-        expect(component.find(DefaultImage)).toHaveLength(1);
-        expect(component.find(NotAvailableImage)).toHaveLength(0);
-        act(function () {
-            image.simulate('error');
-        });
-        rerenderWrapper(component);
-        expect(component.find('img')).toHaveLength(0);
-        expect(component.find('.defaultContainer')).toHaveLength(1);
-        expect(component.find(NotAvailableImage)).toHaveLength(1);
-        expect(component.find(DefaultImage)).toHaveLength(0);
+        setUp({ src: '123' });
+        var image = screen.getByRole('img');
+        expect(image).toBeInTheDocument();
+        expect(image).toHaveClass('hideImage');
+        expect(screen.getByTestId('SvgDefaultImage')).toBeInTheDocument();
+        expect(screen.queryByTestId('not-available-image')).not.toBeInTheDocument();
+        fireEvent.error(image);
+        expect(screen.queryByRole('img')).not.toBeInTheDocument();
+        expect(screen.getByTestId('not-available-image')).toBeInTheDocument();
+        expect(screen.queryByTestId('SvgDefaultImage')).not.toBeInTheDocument();
     });
     it('should render overlay if image is loaded', function () {
-        var overlay = React.createElement("div", { className: "overlay" });
-        var component = shallow(React.createElement(Image, { src: '123', overlay: overlay }));
-        expect(component.find('.overlay')).toHaveLength(0);
-        act(function () {
-            component.find('img').simulate('load');
-        });
-        rerenderWrapper(component);
-        expect(component.find('.overlay')).toHaveLength(1);
+        var overlay = React.createElement("div", { "data-reltio-id": "overlay" });
+        setUp({ src: '123', overlay: overlay });
+        expect(screen.queryByTestId('overlay')).not.toBeInTheDocument();
+        var image = screen.getByRole('img');
+        fireEvent.load(image);
+        expect(screen.getByTestId('overlay')).toBeInTheDocument();
     });
 });

package/ImageActionsOverlay/ImageActionsOverlay.js

@@ -48,8 +48,9 @@ var ImageActionsOverlay = function (props) {
             _a)), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: selectionMode ? toggleSelected(selected) : handleClick, "data-reltio-id": "image-actions-overlay" },
         showCheckBox && (React.createElement(CheckedIcon, { className: styles.checkedIcon, checked: selected, onClick: toggleSelected(selected) })),
         showActions && (React.createElement("div", { className: styles.actions },
-            React.createElement(SmallIconButton, { onClick: onDownload, className: styles.actionButton, icon: DownloadIcon }),
+            React.createElement(SmallIconButton, { "data-reltio-id": "download-button", onClick: onDownload, className: styles.actionButton, icon: DownloadIcon }),
             React.createElement(DropDownMenuButton, { menuId: "image-overlay-actions-".concat(id), buttonComponent: SmallIconButton, buttonProps: {
+                    'data-reltio-id': 'image-overlay-actions',
                     icon: MoreVertIcon,
                     className: classnames(styles.actionButton, styles.dropDownMenuButton)
                 }, menuItems: menuItems }))),