@reltio/components 1.4.2051 → 1.4.2052

package/cjs/ImageAttributesLine/ImageAttributesLine.js

@@ -136,7 +136,7 @@ var ImageAttributesLine = function (_a) {
             children,
             attributeValues.slice(0, maxItems).map(renderImage(renderImageProps)),
             hiddenItemsLength > 0 && (react_1.default.createElement("div", { className: styles.moreButtonContainer },
-                react_1.default.createElement("div", { className: styles.moreButton, onClick: function () { return handleOpenImageGalleryDialog(); } },
+                react_1.default.createElement("div", { "data-reltio-id": "more-image-button", className: styles.moreButton, onClick: function () { return handleOpenImageGalleryDialog(); } },
                     react_1.default.createElement(Typography_1.default, { className: styles.number }, "+".concat(hiddenItemsLength))))))));
 };
 exports.ImageAttributesLine = ImageAttributesLine;

package/cjs/ImageAttributesLine/ImageAttributesLine.test.js

@@ -10,29 +10,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -69,40 +46,43 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 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 test_utils_1 = require("react-dom/test-utils");
-var react_resize_detector_1 = __importDefault(require("react-resize-detector"));
+var jsdom_testing_mocks_1 = require("jsdom-testing-mocks");
+var react_2 = require("@testing-library/react");
+var user_event_1 = __importDefault(require("@testing-library/user-event"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
-var imageAttributesHelpers = __importStar(require("./helpers"));
-var ImageAttributesLine_1 = require("./ImageAttributesLine");
-var ImageAttributesGallery_1 = require("../ImageAttributesGallery");
 var imageAttributeValues_test_data_1 = require("./imageAttributeValues.test-data");
 var MdmModuleContext_1 = require("../contexts/MdmModuleContext");
 var BlockImageGalleryDialogContext_1 = require("../contexts/BlockImageGalleryDialogContext");
+var helpers_1 = require("./helpers");
+var ImageAttributesLine_1 = require("./ImageAttributesLine");
 jest.mock('@reltio/mdm-sdk', function () { return (__assign(__assign({}, jest.requireActual('@reltio/mdm-sdk')), { insertDefaultImageByAttrUri: jest.fn() })); });
+jest.mock('./helpers', function () { return (__assign(__assign({}, jest.requireActual('./helpers')), { downloadImagesByURLs: jest.fn() })); });
 describe('ImageAttributesLine tests', function () {
-    var renderImage = jest.fn();
+    var resizeObserver = (0, jsdom_testing_mocks_1.mockResizeObserver)();
+    var renderImage = function (_a) {
+        var onOpenImageGalleryDialog = _a.onOpenImageGalleryDialog, onDownload = _a.onDownload, onShareLink = _a.onShareLink, onSetAsDefault = _a.onSetAsDefault;
+        var renderImage = function (attributeValue) { return (react_1.default.createElement("div", { key: attributeValue.uri, "data-reltio-id": "image" },
+            react_1.default.createElement("div", { "data-reltio-id": "image-content", onClick: function () { return onOpenImageGalleryDialog(attributeValue.uri); } }),
+            onDownload && react_1.default.createElement("div", { "data-reltio-id": "download", onClick: function () { return onDownload([attributeValue.uri]); } }),
+            onShareLink && react_1.default.createElement("div", { "data-reltio-id": "share", onClick: function () { return onShareLink(attributeValue.uri); } }),
+            onSetAsDefault && (react_1.default.createElement("div", { "data-reltio-id": "set-as-default", onClick: function () { return onSetAsDefault(attributeValue); } })))); };
+        return renderImage;
+    };
     var defaultProps = {
         attributeValues: [],
-        attributeType: { name: 'ImageGallery', type: '', uri: 'uri' },
+        attributeType: imageAttributeValues_test_data_1.attributeType,
         renderImage: renderImage
     };
     var defaultMdmValues = {
-        entity: { uri: 'entityuri' },
+        entity: { uri: 'entities/123', type: 'configuration/entityTypes/HCP' },
+        modifiedEntities: {
+            'entities/123': { uri: 'entities/123', type: 'configuration/entityTypes/HCP', attributes: {} }
+        },
         mode: mdm_sdk_1.Mode.Viewing
     };
     var defaultMdmActions = {
@@ -110,192 +90,186 @@ describe('ImageAttributesLine tests', function () {
         setDefaultProfilePicForEntity: jest.fn()
     };
     var setUp = function (_a) {
-        var _b = _a === void 0 ? {} : _a, _c = _b.props, props = _c === void 0 ? defaultProps : _c, _d = _b.mdmValues, mdmValues = _d === void 0 ? defaultMdmValues : _d, _e = _b.mdmActions, mdmActions = _e === void 0 ? defaultMdmActions : _e, _f = _b.blockDialogContextValue, blockDialogContextValue = _f === void 0 ? false : _f;
-        var Wrapper = function (props) {
-            return (react_1.default.createElement(MdmModuleContext_1.MdmModuleProvider, { values: mdmValues, actions: mdmActions },
-                react_1.default.createElement(BlockImageGalleryDialogContext_1.BlockImageGalleryDialogContext.Provider, { value: blockDialogContextValue },
-                    react_1.default.createElement(ImageAttributesLine_1.ImageAttributesLine, __assign({}, props)))));
+        var _b = _a === void 0 ? {} : _a, _c = _b.props, props = _c === void 0 ? {} : _c, _d = _b.mdmValues, mdmValues = _d === void 0 ? {} : _d, _e = _b.mdmActions, mdmActions = _e === void 0 ? {} : _e, _f = _b.blockDialogContextValue, blockDialogContextValue = _f === void 0 ? false : _f;
+        var user = user_event_1.default.setup();
+        var Providers = function (_a) {
+            var children = _a.children;
+            return (react_1.default.createElement(MdmModuleContext_1.MdmModuleProvider, { values: __assign(__assign({}, defaultMdmValues), mdmValues), actions: __assign(__assign({}, defaultMdmActions), mdmActions) },
+                react_1.default.createElement(BlockImageGalleryDialogContext_1.BlockImageGalleryDialogContext.Provider, { value: blockDialogContextValue }, children)));
         };
-        return (0, enzyme_1.mount)(react_1.default.createElement(Wrapper, __assign({}, props)));
+        return __assign({ user: user }, (0, react_2.render)(react_1.default.createElement(ImageAttributesLine_1.ImageAttributesLine, __assign({}, defaultProps, props)), { wrapper: Providers }));
     };
-    beforeAll(function () {
-        jest.spyOn(imageAttributesHelpers, 'downloadImagesByURLs').mockImplementation(function () { });
-        mdm_sdk_1.insertDefaultImageByAttrUri.mockResolvedValue({ status: 'success' });
-        renderImage.mockReturnValue(function (_, i) { return react_1.default.createElement("div", { key: i, className: "Image" }); });
-        Object.assign(navigator, {
-            clipboard: {
-                writeText: jest.fn()
-            }
-        });
-    });
     beforeEach(function () {
         jest.clearAllMocks();
-    });
-    it('should render main parts', function () {
-        var component = setUp();
-        expect(component.find('.imageBox')).toHaveLength(1);
-        expect(component.find('.moreButton')).toHaveLength(0);
-        expect(component.find('.Image')).toHaveLength(0);
-        expect(component.find(ImageAttributesGallery_1.ImageAttributesGallery)).toHaveLength(1);
+        helpers_1.downloadImagesByURLs.mockReturnValue(undefined);
+        mdm_sdk_1.insertDefaultImageByAttrUri.mockResolvedValue({ status: 'success' });
     });
     it('should resize component', function () {
-        var props = __assign(__assign({}, defaultProps), { attributeValues: imageAttributeValues_test_data_1.imageAttributeValues });
-        var component = setUp({ props: props });
-        (0, test_utils_1.act)(function () {
-            component.find(react_resize_detector_1.default).prop('onResize')(600);
+        var container = setUp({ props: { attributeValues: imageAttributeValues_test_data_1.imageAttributeValues } }).container;
+        resizeObserver.mockElementSize(container, { contentBoxSize: { inlineSize: 600 } });
+        (0, react_2.act)(function () {
+            resizeObserver.resize();
         });
-        component.update();
-        expect(component.find('.Image')).toHaveLength(3);
-        expect(component.find('.moreButton')).toHaveLength(0);
-        (0, test_utils_1.act)(function () {
-            component.find(react_resize_detector_1.default).prop('onResize')(300);
+        expect(react_2.screen.getAllByTestId('image')).toHaveLength(3);
+        expect(react_2.screen.queryByTestId('more-image-button')).not.toBeInTheDocument();
+        resizeObserver.mockElementSize(container, { contentBoxSize: { inlineSize: 300 } });
+        (0, react_2.act)(function () {
+            resizeObserver.resize(container);
         });
-        component.update();
-        expect(component.find('.Image')).toHaveLength(2);
-        expect(component.find('.moreButton')).toHaveLength(1);
-        expect(component.find('.moreButton').text()).toBe('+1');
-        (0, test_utils_1.act)(function () {
-            component.find(react_resize_detector_1.default).prop('onResize')(239);
+        expect(react_2.screen.getAllByTestId('image')).toHaveLength(2);
+        expect(react_2.screen.getByTestId('more-image-button')).toHaveTextContent('+1');
+        resizeObserver.mockElementSize(container, { contentBoxSize: { inlineSize: 239 } });
+        (0, react_2.act)(function () {
+            resizeObserver.resize(container);
         });
-        component.update();
-        expect(component.find('.Image')).toHaveLength(2);
-        expect(component.find('.moreButton')).toHaveLength(1);
-        expect(component.find('.moreButton').text()).toBe('+2');
-        (0, test_utils_1.act)(function () {
-            component.find(react_resize_detector_1.default).prop('onResize')(240);
+        expect(react_2.screen.getAllByTestId('image')).toHaveLength(2);
+        expect(react_2.screen.getByTestId('more-image-button')).toHaveTextContent('+2');
+        resizeObserver.mockElementSize(container, { contentBoxSize: { inlineSize: 240 } });
+        (0, react_2.act)(function () {
+            resizeObserver.resize(container);
         });
-        component.update();
-        expect(component.find('.Image')).toHaveLength(2);
-        expect(component.find('.moreButton')).toHaveLength(1);
-        expect(component.find('.moreButton').text()).toBe('+1');
+        expect(react_2.screen.getAllByTestId('image')).toHaveLength(2);
+        expect(react_2.screen.getByTestId('more-image-button')).toHaveTextContent('+1');
     });
     it('should recalculate max items to screen width after attributeValues.length changing', function () {
-        var props = __assign(__assign({}, defaultProps), { attributeValues: imageAttributeValues_test_data_1.imageAttributeValues });
-        var component = setUp({ props: props });
-        (0, test_utils_1.act)(function () {
-            component.find(react_resize_detector_1.default).prop('onResize')(600);
-        });
-        component.update();
-        expect(component.find('.Image')).toHaveLength(3);
-        expect(component.find('.moreButton')).toHaveLength(0);
-        component.setProps({
-            attributeValues: [imageAttributeValues_test_data_1.imageAttributeValues[0]]
+        var _a = setUp({ props: { attributeValues: imageAttributeValues_test_data_1.imageAttributeValues } }), container = _a.container, rerender = _a.rerender;
+        resizeObserver.mockElementSize(container, { contentBoxSize: { inlineSize: 600 } });
+        (0, react_2.act)(function () {
+            resizeObserver.resize();
         });
-        expect(component.find('.Image')).toHaveLength(1);
-        expect(component.find('.moreButton')).toHaveLength(0);
-        component.setProps({
-            attributeValues: __spreadArray(__spreadArray([], imageAttributeValues_test_data_1.imageAttributeValues, true), imageAttributeValues_test_data_1.imageAttributeValues, true)
-        });
-        component.update();
-        expect(component.find('.Image')).toHaveLength(5);
-        expect(component.find('.moreButton')).toHaveLength(1);
-        expect(component.find('.moreButton').text()).toBe('+1');
+        expect(react_2.screen.getAllByTestId('image')).toHaveLength(3);
+        expect(react_2.screen.queryByTestId('more-image-button')).not.toBeInTheDocument();
+        rerender(react_1.default.createElement(ImageAttributesLine_1.ImageAttributesLine, __assign({}, defaultProps, { attributeValues: [imageAttributeValues_test_data_1.imageAttributeValues[0]] })));
+        expect(react_2.screen.getAllByTestId('image')).toHaveLength(1);
+        expect(react_2.screen.queryByTestId('more-image-button')).not.toBeInTheDocument();
+        var newAttributeValues = Array.from({ length: 6 }, function (_, i) { return (__assign(__assign({}, imageAttributeValues_test_data_1.imageAttributeValues[0]), { uri: imageAttributeValues_test_data_1.imageAttributeValues[0].uri + i })); });
+        rerender(react_1.default.createElement(ImageAttributesLine_1.ImageAttributesLine, __assign({}, defaultProps, { attributeValues: newAttributeValues })));
+        expect(react_2.screen.getAllByTestId('image')).toHaveLength(5);
+        expect(react_2.screen.getByTestId('more-image-button')).toHaveTextContent('+1');
     });
-    it('should open ImageAttributesGallery when click to image or button if BlockImageGalleryDialogContext context has value is "false" or context absent', function () {
-        var props = __assign(__assign({}, defaultProps), { attributeValues: imageAttributeValues_test_data_1.imageAttributeValues });
-        var component = setUp({ props: props });
-        (0, test_utils_1.act)(function () {
-            component.find(react_resize_detector_1.default).prop('onResize')(300);
-        });
-        component.update();
-        expect(component.find(ImageAttributesGallery_1.ImageAttributesGallery).prop('open')).toBe(false);
-        (0, test_utils_1.act)(function () {
-            renderImage.mock.calls[0][0].onOpenImageGalleryDialog();
-        });
-        component.update();
-        expect(component.find(ImageAttributesGallery_1.ImageAttributesGallery).prop('open')).toBe(true);
-        (0, test_utils_1.act)(function () {
-            component.find(ImageAttributesGallery_1.ImageAttributesGallery).prop('onClose')();
+    it('should open ImageAttributesGallery when click to image or button if BlockImageGalleryDialogContext context has falsy value', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, container, user;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _a = setUp({
+                        props: { attributeValues: imageAttributeValues_test_data_1.imageAttributeValues },
+                        blockDialogContextValue: false
+                    }), container = _a.container, user = _a.user;
+                    expect(react_2.screen.queryByRole('dialog')).not.toBeInTheDocument();
+                    resizeObserver.mockElementSize(container, { contentBoxSize: { inlineSize: 300 } });
+                    (0, react_2.act)(function () {
+                        resizeObserver.resize();
+                    });
+                    return [4 /*yield*/, user.click(react_2.screen.getAllByTestId('image-content')[0])];
+                case 1:
+                    _b.sent();
+                    expect(react_2.screen.getByRole('dialog')).toBeInTheDocument();
+                    expect(react_2.screen.getByTestId('thumbnails-container').childNodes).toHaveLength(3);
+                    expect(react_2.screen.getByText('Gallery')).toBeInTheDocument();
+                    expect(react_2.screen.getByText('Meta info')).toBeInTheDocument();
+                    expect(react_2.screen.getAllByTestId('image-meta-info-item')[0].querySelector('.link')).toHaveAttribute('href', '/test.jpg');
+                    return [4 /*yield*/, user.click(react_2.screen.getByLabelText('Close'))];
+                case 2:
+                    _b.sent();
+                    return [4 /*yield*/, (0, react_2.waitForElementToBeRemoved)(react_2.screen.queryByRole('dialog'))];
+                case 3:
+                    _b.sent();
+                    return [2 /*return*/];
+            }
         });
-        component.update();
-        expect(component.find(ImageAttributesGallery_1.ImageAttributesGallery).prop('open')).toBe(false);
-        component.find('.moreButton').simulate('click');
-        expect(component.find(ImageAttributesGallery_1.ImageAttributesGallery).prop('open')).toBe(true);
-    });
-    it('should not open ImageAttributesGallery when click to image if BlockImageGalleryDialogContext context has value is "true"', function () {
-        var props = __assign(__assign({}, defaultProps), { attributeValues: imageAttributeValues_test_data_1.imageAttributeValues });
-        var component = setUp({ props: props, blockDialogContextValue: true });
-        (0, test_utils_1.act)(function () {
-            component.find(react_resize_detector_1.default).prop('onResize')(300);
+    }); });
+    it('should not open ImageAttributesGallery when click to image if BlockImageGalleryDialogContext context has value is "true"', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, container, user;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _a = setUp({
+                        props: { attributeValues: imageAttributeValues_test_data_1.imageAttributeValues },
+                        blockDialogContextValue: true
+                    }), container = _a.container, user = _a.user;
+                    expect(react_2.screen.queryByRole('dialog')).not.toBeInTheDocument();
+                    resizeObserver.mockElementSize(container, { contentBoxSize: { inlineSize: 300 } });
+                    (0, react_2.act)(function () {
+                        resizeObserver.resize();
+                    });
+                    return [4 /*yield*/, user.click(react_2.screen.getAllByTestId('image-content')[0])];
+                case 1:
+                    _b.sent();
+                    expect(react_2.screen.queryByRole('dialog')).not.toBeInTheDocument();
+                    return [2 /*return*/];
+            }
         });
-        component.update();
-        expect(component.find(ImageAttributesGallery_1.ImageAttributesGallery).prop('open')).toBe(false);
-        renderImage.mock.calls[0][0].onOpenImageGalleryDialog();
-        expect(component.find(ImageAttributesGallery_1.ImageAttributesGallery).prop('open')).toBe(false);
-        component.find('.moreButton').simulate('click');
-        expect(component.find(ImageAttributesGallery_1.ImageAttributesGallery).prop('open')).toBe(false);
-    });
+    }); });
     describe('actions', function () {
         it('should call actions from Image component props', function () { return __awaiter(void 0, void 0, void 0, function () {
-            var setDefaultProfilePicForEntity, props, component, firstImageProps, image, images;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
+            var _a, container, user, clipboardText;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
                     case 0:
-                        setDefaultProfilePicForEntity = defaultMdmActions.setDefaultProfilePicForEntity;
-                        props = __assign(__assign({}, defaultProps), { attributeValues: imageAttributeValues_test_data_1.imageAttributeValues, overlay: true });
-                        component = setUp({ props: props });
-                        (0, test_utils_1.act)(function () {
-                            component.find(react_resize_detector_1.default).prop('onResize')(300);
+                        _a = setUp({ props: { attributeValues: imageAttributeValues_test_data_1.imageAttributeValues, overlay: true } }), container = _a.container, user = _a.user;
+                        resizeObserver.mockElementSize(container, { contentBoxSize: { inlineSize: 300 } });
+                        (0, react_2.act)(function () {
+                            resizeObserver.resize();
                         });
-                        component.update();
-                        firstImageProps = renderImage.mock.calls[0][0];
-                        image = './image1.jpg';
-                        images = [image];
-                        firstImageProps.onDownload(images);
-                        expect(imageAttributesHelpers.downloadImagesByURLs).toHaveBeenCalledWith(images);
-                        firstImageProps.onShareLink(image);
-                        expect(navigator.clipboard.writeText).toHaveBeenCalledWith(image);
-                        return [4 /*yield*/, firstImageProps.onSetAsDefault(imageAttributeValues_test_data_1.imageAttributeValues[0])];
+                        return [4 /*yield*/, user.click(react_2.screen.getAllByTestId('download')[0])];
                     case 1:
-                        _a.sent();
-                        expect(mdm_sdk_1.insertDefaultImageByAttrUri).toHaveBeenCalledWith('entityuri', imageAttributeValues_test_data_1.imageAttributeValues[0].uri);
-                        expect(setDefaultProfilePicForEntity).toHaveBeenCalledWith(imageAttributeValues_test_data_1.imageAttributeValues[0]);
+                        _b.sent();
+                        expect(helpers_1.downloadImagesByURLs).toHaveBeenCalledWith([imageAttributeValues_test_data_1.imageAttributeValues[0].uri]);
+                        return [4 /*yield*/, user.click(react_2.screen.getAllByTestId('share')[0])];
+                    case 2:
+                        _b.sent();
+                        return [4 /*yield*/, navigator.clipboard.readText()];
+                    case 3:
+                        clipboardText = _b.sent();
+                        expect(clipboardText).toBe(imageAttributeValues_test_data_1.imageAttributeValues[0].uri);
+                        return [4 /*yield*/, user.click(react_2.screen.getAllByTestId('set-as-default')[0])];
+                    case 4:
+                        _b.sent();
+                        expect(mdm_sdk_1.insertDefaultImageByAttrUri).toHaveBeenCalledWith('entities/123', imageAttributeValues_test_data_1.imageAttributeValues[0].uri);
+                        expect(defaultMdmActions.setDefaultProfilePicForEntity).toHaveBeenCalledWith(imageAttributeValues_test_data_1.imageAttributeValues[0]);
                         return [2 /*return*/];
                 }
             });
         }); });
         it('should call actions from ImageAttributesGallery props', function () { return __awaiter(void 0, void 0, void 0, function () {
-            var setDefaultProfilePicForModifiedEntity, mdmValues, onUpload, onDeleteAttribute, props, component, imageAttributesGallery, image1, image2, images, deletingParams;
-            return __generator(this, function (_a) {
-                setDefaultProfilePicForModifiedEntity = defaultMdmActions.setDefaultProfilePicForModifiedEntity;
-                mdmValues = __assign(__assign({}, defaultMdmValues), { mode: mdm_sdk_1.Mode.Editing });
-                onUpload = jest.fn();
-                onDeleteAttribute = jest.fn();
-                props = __assign(__assign({}, defaultProps), { attributeValues: imageAttributeValues_test_data_1.imageAttributeValues, onUpload: onUpload, onDeleteAttribute: onDeleteAttribute });
-                component = setUp({ props: props, mdmValues: mdmValues });
-                (0, test_utils_1.act)(function () {
-                    component.find(react_resize_detector_1.default).prop('onResize')(300);
-                });
-                component.update();
-                imageAttributesGallery = component.find(ImageAttributesGallery_1.ImageAttributesGallery);
-                image1 = './image1.jpg';
-                image2 = './image2.jpg';
-                images = [image1, image2];
-                imageAttributesGallery.prop('onDownload')(images);
-                expect(imageAttributesHelpers.downloadImagesByURLs).toHaveBeenCalledWith(images);
-                imageAttributesGallery.prop('onUpload')();
-                expect(onUpload).toHaveBeenCalled();
-                deletingParams = {
-                    uri: 'entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZ1',
-                    attributeType: defaultProps.attributeType
-                };
-                imageAttributesGallery.prop('onDeleteAttribute')(deletingParams);
-                expect(onDeleteAttribute).toHaveBeenCalledWith(deletingParams);
-                imageAttributesGallery.prop('onShareLink')(image1);
-                expect(navigator.clipboard.writeText).toHaveBeenCalledWith(image1);
-                imageAttributesGallery.prop('onSetAsDefault')(imageAttributeValues_test_data_1.imageAttributeValues[0]);
-                expect(setDefaultProfilePicForModifiedEntity).toHaveBeenCalledWith({
-                    entityUri: 'entityuri',
-                    value: imageAttributeValues_test_data_1.imageAttributeValues[0]
-                });
-                return [2 /*return*/];
+            var _a, container, user, clipboardText;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _a = setUp({ props: { attributeValues: imageAttributeValues_test_data_1.imageAttributeValues } }), container = _a.container, user = _a.user;
+                        resizeObserver.mockElementSize(container, { contentBoxSize: { inlineSize: 300 } });
+                        (0, react_2.act)(function () {
+                            resizeObserver.resize();
+                        });
+                        return [4 /*yield*/, user.click(react_2.screen.getAllByTestId('image-content')[0])];
+                    case 1:
+                        _b.sent();
+                        expect(react_2.screen.getByRole('dialog')).toBeInTheDocument();
+                        return [4 /*yield*/, user.click(react_2.screen.getByText('Set as default'))];
+                    case 2:
+                        _b.sent();
+                        expect(mdm_sdk_1.insertDefaultImageByAttrUri).toHaveBeenCalledWith('entities/123', imageAttributeValues_test_data_1.imageAttributeValues[0].uri);
+                        expect(defaultMdmActions.setDefaultProfilePicForEntity).toHaveBeenCalledWith(imageAttributeValues_test_data_1.imageAttributeValues[0]);
+                        return [4 /*yield*/, user.click(react_2.screen.getByLabelText('Copy link'))];
+                    case 3:
+                        _b.sent();
+                        return [4 /*yield*/, navigator.clipboard.readText()];
+                    case 4:
+                        clipboardText = _b.sent();
+                        expect(clipboardText).toBe('/test.jpg');
+                        return [4 /*yield*/, user.click(react_2.screen.getByLabelText('Download selected items'))];
+                    case 5:
+                        _b.sent();
+                        expect(helpers_1.downloadImagesByURLs).toHaveBeenCalledWith(['/test.jpg']);
+                        return [2 /*return*/];
+                }
             });
         }); });
         it('should call "requestNextPageOfAttributeValues" prop if "paging" prop is defined', function () {
-            var mdmValues = __assign(__assign({}, defaultMdmValues), { mode: mdm_sdk_1.Mode.Editing });
             var requestNextPageOfAttributeValues = jest.fn();
             var props = __assign(__assign({}, defaultProps), { attributeValues: imageAttributeValues_test_data_1.imageAttributeValues, requestNextPageOfAttributeValues: requestNextPageOfAttributeValues, paging: { totalValues: 10, totalOvValues: 10 }, parentUri: 'entity/1' });
-            setUp({ props: props, mdmValues: mdmValues });
+            setUp({ props: props });
             expect(requestNextPageOfAttributeValues).toHaveBeenCalledWith({
                 parentUri: 'entity/1',
                 attributeTypeUri: defaultProps.attributeType.uri,
@@ -305,10 +279,9 @@ describe('ImageAttributesLine tests', function () {
             });
         });
         it('should use showNonOv for determining defaultMaxValues param of requestNextPageOfAttributeValues', function () {
-            var mdmValues = __assign(__assign({}, defaultMdmValues), { mode: mdm_sdk_1.Mode.Editing });
             var requestNextPageOfAttributeValues = jest.fn();
             var props = __assign(__assign({}, defaultProps), { attributeValues: imageAttributeValues_test_data_1.imageAttributeValues, requestNextPageOfAttributeValues: requestNextPageOfAttributeValues, paging: { totalValues: 10, totalOvValues: 8 }, parentUri: 'entity/1', showNonOv: true });
-            setUp({ props: props, mdmValues: mdmValues });
+            setUp({ props: props });
             expect(requestNextPageOfAttributeValues).toHaveBeenCalledWith({
                 parentUri: 'entity/1',
                 attributeTypeUri: defaultProps.attributeType.uri,
@@ -319,35 +292,33 @@ describe('ImageAttributesLine tests', function () {
         });
     });
     it('should calculate max items if countFixedItems more than 0', function () {
-        var mdmValues = __assign(__assign({}, defaultMdmValues), { mode: mdm_sdk_1.Mode.Editing });
-        var props = __assign(__assign({}, defaultProps), { attributeValues: imageAttributeValues_test_data_1.imageAttributeValues, countFixedItems: 1 });
-        var component = setUp({ props: props, mdmValues: mdmValues });
-        (0, test_utils_1.act)(function () {
-            component.find(react_resize_detector_1.default).prop('onResize')(600);
+        var container = setUp({
+            props: { attributeValues: imageAttributeValues_test_data_1.imageAttributeValues, countFixedItems: 1 },
+            mdmValues: { mode: mdm_sdk_1.Mode.Editing }
+        }).container;
+        resizeObserver.mockElementSize(container, { contentBoxSize: { inlineSize: 600 } });
+        (0, react_2.act)(function () {
+            resizeObserver.resize();
         });
-        component.update();
-        expect(component.find('.Image')).toHaveLength(3);
-        expect(component.find('.moreButton')).toHaveLength(0);
-        (0, test_utils_1.act)(function () {
-            component.find(react_resize_detector_1.default).prop('onResize')(300);
+        expect(react_2.screen.getAllByTestId('image')).toHaveLength(3);
+        expect(react_2.screen.queryByTestId('more-image-button')).not.toBeInTheDocument();
+        resizeObserver.mockElementSize(container, { contentBoxSize: { inlineSize: 300 } });
+        (0, react_2.act)(function () {
+            resizeObserver.resize(container);
         });
-        component.update();
-        expect(component.find('.Image')).toHaveLength(1);
-        expect(component.find('.moreButton')).toHaveLength(1);
-        expect(component.find('.moreButton').text()).toBe('+2');
-        (0, test_utils_1.act)(function () {
-            component.find(react_resize_detector_1.default).prop('onResize')(239);
+        expect(react_2.screen.getAllByTestId('image')).toHaveLength(1);
+        expect(react_2.screen.getByTestId('more-image-button')).toHaveTextContent('+2');
+        resizeObserver.mockElementSize(container, { contentBoxSize: { inlineSize: 239 } });
+        (0, react_2.act)(function () {
+            resizeObserver.resize(container);
         });
-        component.update();
-        expect(component.find('.Image')).toHaveLength(1);
-        expect(component.find('.moreButton')).toHaveLength(1);
-        expect(component.find('.moreButton').text()).toBe('+3');
-        (0, test_utils_1.act)(function () {
-            component.find(react_resize_detector_1.default).prop('onResize')(240);
+        expect(react_2.screen.getAllByTestId('image')).toHaveLength(1);
+        expect(react_2.screen.getByTestId('more-image-button')).toHaveTextContent('+3');
+        resizeObserver.mockElementSize(container, { contentBoxSize: { inlineSize: 240 } });
+        (0, react_2.act)(function () {
+            resizeObserver.resize(container);
         });
-        component.update();
-        expect(component.find('.Image')).toHaveLength(1);
-        expect(component.find('.moreButton')).toHaveLength(1);
-        expect(component.find('.moreButton').text()).toBe('+2');
+        expect(react_2.screen.getAllByTestId('image')).toHaveLength(1);
+        expect(react_2.screen.getByTestId('more-image-button')).toHaveTextContent('+2');
     });
 });

package/cjs/ImageAttributesLine/imageAttributeValues.test-data.d.ts

@@ -1,2 +1,12 @@
 import { ImageAttributeValue } from '@reltio/mdm-sdk';
+export declare const attributeType: {
+    name: string;
+    type: string;
+    uri: string;
+    attributes: {
+        name: string;
+        type: string;
+        uri: string;
+    }[];
+};
 export declare const imageAttributeValues: ImageAttributeValue[];

package/cjs/ImageAttributesLine/imageAttributeValues.test-data.js

@@ -1,6 +1,28 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.imageAttributeValues = void 0;
+exports.imageAttributeValues = exports.attributeType = void 0;
+exports.attributeType = {
+    name: 'ImageGallery',
+    type: '',
+    uri: 'uri',
+    attributes: [
+        {
+            name: 'Url',
+            type: 'String',
+            uri: 'configuration/entityTypes/Series/attributes/ImageGallery/attributes/Url'
+        },
+        {
+            name: 'UrlThumbnail',
+            type: 'String',
+            uri: 'configuration/entityTypes/Series/attributes/ImageGallery/attributes/UrlThumbnail'
+        },
+        {
+            name: 'CdnUrlThumbnail',
+            type: 'String',
+            uri: 'configuration/entityTypes/Series/attributes/ImageGallery/attributes/CdnUrlThumbnail'
+        }
+    ]
+};
 exports.imageAttributeValues = [
     {
         value: {