@reltio/components 1.4.2050 → 1.4.2052

package/ImageAttributesLine/ImageAttributesLine.js

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

package/ImageAttributesLine/ImageAttributesLine.test.js

@@ -45,36 +45,39 @@ 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));
-};
 import React from 'react';
-import { mount } from 'enzyme';
-import { act } from 'react-dom/test-utils';
-import ReactResizeDetector from 'react-resize-detector';
-import { Mode, insertDefaultImageByAttrUri } from '@reltio/mdm-sdk';
-import * as imageAttributesHelpers from './helpers';
-import { ImageAttributesLine } from './ImageAttributesLine';
-import { ImageAttributesGallery } from '../ImageAttributesGallery';
-import { imageAttributeValues } from './imageAttributeValues.test-data';
+import { mockResizeObserver } from 'jsdom-testing-mocks';
+import { act, render, screen, waitForElementToBeRemoved } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { insertDefaultImageByAttrUri, Mode } from '@reltio/mdm-sdk';
+import { imageAttributeValues, attributeType } from './imageAttributeValues.test-data';
 import { MdmModuleProvider } from '../contexts/MdmModuleContext';
 import { BlockImageGalleryDialogContext } from '../contexts/BlockImageGalleryDialogContext';
+import { downloadImagesByURLs } from './helpers';
+import { ImageAttributesLine } from './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 = mockResizeObserver();
+    var renderImage = function (_a) {
+        var onOpenImageGalleryDialog = _a.onOpenImageGalleryDialog, onDownload = _a.onDownload, onShareLink = _a.onShareLink, onSetAsDefault = _a.onSetAsDefault;
+        var renderImage = function (attributeValue) { return (React.createElement("div", { key: attributeValue.uri, "data-reltio-id": "image" },
+            React.createElement("div", { "data-reltio-id": "image-content", onClick: function () { return onOpenImageGalleryDialog(attributeValue.uri); } }),
+            onDownload && React.createElement("div", { "data-reltio-id": "download", onClick: function () { return onDownload([attributeValue.uri]); } }),
+            onShareLink && React.createElement("div", { "data-reltio-id": "share", onClick: function () { return onShareLink(attributeValue.uri); } }),
+            onSetAsDefault && (React.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: 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: Mode.Viewing
     };
     var defaultMdmActions = {
@@ -82,192 +85,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.createElement(MdmModuleProvider, { values: mdmValues, actions: mdmActions },
-                React.createElement(BlockImageGalleryDialogContext.Provider, { value: blockDialogContextValue },
-                    React.createElement(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 = userEvent.setup();
+        var Providers = function (_a) {
+            var children = _a.children;
+            return (React.createElement(MdmModuleProvider, { values: __assign(__assign({}, defaultMdmValues), mdmValues), actions: __assign(__assign({}, defaultMdmActions), mdmActions) },
+                React.createElement(BlockImageGalleryDialogContext.Provider, { value: blockDialogContextValue }, children)));
         };
-        return mount(React.createElement(Wrapper, __assign({}, props)));
+        return __assign({ user: user }, render(React.createElement(ImageAttributesLine, __assign({}, defaultProps, props)), { wrapper: Providers }));
     };
-    beforeAll(function () {
-        jest.spyOn(imageAttributesHelpers, 'downloadImagesByURLs').mockImplementation(function () { });
-        insertDefaultImageByAttrUri.mockResolvedValue({ status: 'success' });
-        renderImage.mockReturnValue(function (_, i) { return React.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)).toHaveLength(1);
+        downloadImagesByURLs.mockReturnValue(undefined);
+        insertDefaultImageByAttrUri.mockResolvedValue({ status: 'success' });
     });
     it('should resize component', function () {
-        var props = __assign(__assign({}, defaultProps), { attributeValues: imageAttributeValues });
-        var component = setUp({ props: props });
+        var container = setUp({ props: { attributeValues: imageAttributeValues } }).container;
+        resizeObserver.mockElementSize(container, { contentBoxSize: { inlineSize: 600 } });
         act(function () {
-            component.find(ReactResizeDetector).prop('onResize')(600);
+            resizeObserver.resize();
         });
-        component.update();
-        expect(component.find('.Image')).toHaveLength(3);
-        expect(component.find('.moreButton')).toHaveLength(0);
+        expect(screen.getAllByTestId('image')).toHaveLength(3);
+        expect(screen.queryByTestId('more-image-button')).not.toBeInTheDocument();
+        resizeObserver.mockElementSize(container, { contentBoxSize: { inlineSize: 300 } });
         act(function () {
-            component.find(ReactResizeDetector).prop('onResize')(300);
+            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(screen.getAllByTestId('image')).toHaveLength(2);
+        expect(screen.getByTestId('more-image-button')).toHaveTextContent('+1');
+        resizeObserver.mockElementSize(container, { contentBoxSize: { inlineSize: 239 } });
         act(function () {
-            component.find(ReactResizeDetector).prop('onResize')(239);
+            resizeObserver.resize(container);
         });
-        component.update();
-        expect(component.find('.Image')).toHaveLength(2);
-        expect(component.find('.moreButton')).toHaveLength(1);
-        expect(component.find('.moreButton').text()).toBe('+2');
+        expect(screen.getAllByTestId('image')).toHaveLength(2);
+        expect(screen.getByTestId('more-image-button')).toHaveTextContent('+2');
+        resizeObserver.mockElementSize(container, { contentBoxSize: { inlineSize: 240 } });
         act(function () {
-            component.find(ReactResizeDetector).prop('onResize')(240);
+            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(screen.getAllByTestId('image')).toHaveLength(2);
+        expect(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 });
-        var component = setUp({ props: props });
+        var _a = setUp({ props: { attributeValues: imageAttributeValues } }), container = _a.container, rerender = _a.rerender;
+        resizeObserver.mockElementSize(container, { contentBoxSize: { inlineSize: 600 } });
         act(function () {
-            component.find(ReactResizeDetector).prop('onResize')(600);
+            resizeObserver.resize();
         });
-        component.update();
-        expect(component.find('.Image')).toHaveLength(3);
-        expect(component.find('.moreButton')).toHaveLength(0);
-        component.setProps({
-            attributeValues: [imageAttributeValues[0]]
-        });
-        expect(component.find('.Image')).toHaveLength(1);
-        expect(component.find('.moreButton')).toHaveLength(0);
-        component.setProps({
-            attributeValues: __spreadArray(__spreadArray([], imageAttributeValues, true), imageAttributeValues, true)
-        });
-        component.update();
-        expect(component.find('.Image')).toHaveLength(5);
-        expect(component.find('.moreButton')).toHaveLength(1);
-        expect(component.find('.moreButton').text()).toBe('+1');
+        expect(screen.getAllByTestId('image')).toHaveLength(3);
+        expect(screen.queryByTestId('more-image-button')).not.toBeInTheDocument();
+        rerender(React.createElement(ImageAttributesLine, __assign({}, defaultProps, { attributeValues: [imageAttributeValues[0]] })));
+        expect(screen.getAllByTestId('image')).toHaveLength(1);
+        expect(screen.queryByTestId('more-image-button')).not.toBeInTheDocument();
+        var newAttributeValues = Array.from({ length: 6 }, function (_, i) { return (__assign(__assign({}, imageAttributeValues[0]), { uri: imageAttributeValues[0].uri + i })); });
+        rerender(React.createElement(ImageAttributesLine, __assign({}, defaultProps, { attributeValues: newAttributeValues })));
+        expect(screen.getAllByTestId('image')).toHaveLength(5);
+        expect(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 });
-        var component = setUp({ props: props });
-        act(function () {
-            component.find(ReactResizeDetector).prop('onResize')(300);
-        });
-        component.update();
-        expect(component.find(ImageAttributesGallery).prop('open')).toBe(false);
-        act(function () {
-            renderImage.mock.calls[0][0].onOpenImageGalleryDialog();
-        });
-        component.update();
-        expect(component.find(ImageAttributesGallery).prop('open')).toBe(true);
-        act(function () {
-            component.find(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 },
+                        blockDialogContextValue: false
+                    }), container = _a.container, user = _a.user;
+                    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+                    resizeObserver.mockElementSize(container, { contentBoxSize: { inlineSize: 300 } });
+                    act(function () {
+                        resizeObserver.resize();
+                    });
+                    return [4 /*yield*/, user.click(screen.getAllByTestId('image-content')[0])];
+                case 1:
+                    _b.sent();
+                    expect(screen.getByRole('dialog')).toBeInTheDocument();
+                    expect(screen.getByTestId('thumbnails-container').childNodes).toHaveLength(3);
+                    expect(screen.getByText('Gallery')).toBeInTheDocument();
+                    expect(screen.getByText('Meta info')).toBeInTheDocument();
+                    expect(screen.getAllByTestId('image-meta-info-item')[0].querySelector('.link')).toHaveAttribute('href', '/test.jpg');
+                    return [4 /*yield*/, user.click(screen.getByLabelText('Close'))];
+                case 2:
+                    _b.sent();
+                    return [4 /*yield*/, waitForElementToBeRemoved(screen.queryByRole('dialog'))];
+                case 3:
+                    _b.sent();
+                    return [2 /*return*/];
+            }
         });
-        component.update();
-        expect(component.find(ImageAttributesGallery).prop('open')).toBe(false);
-        component.find('.moreButton').simulate('click');
-        expect(component.find(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 });
-        var component = setUp({ props: props, blockDialogContextValue: true });
-        act(function () {
-            component.find(ReactResizeDetector).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 },
+                        blockDialogContextValue: true
+                    }), container = _a.container, user = _a.user;
+                    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+                    resizeObserver.mockElementSize(container, { contentBoxSize: { inlineSize: 300 } });
+                    act(function () {
+                        resizeObserver.resize();
+                    });
+                    return [4 /*yield*/, user.click(screen.getAllByTestId('image-content')[0])];
+                case 1:
+                    _b.sent();
+                    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+                    return [2 /*return*/];
+            }
         });
-        component.update();
-        expect(component.find(ImageAttributesGallery).prop('open')).toBe(false);
-        renderImage.mock.calls[0][0].onOpenImageGalleryDialog();
-        expect(component.find(ImageAttributesGallery).prop('open')).toBe(false);
-        component.find('.moreButton').simulate('click');
-        expect(component.find(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, overlay: true });
-                        component = setUp({ props: props });
+                        _a = setUp({ props: { attributeValues: imageAttributeValues, overlay: true } }), container = _a.container, user = _a.user;
+                        resizeObserver.mockElementSize(container, { contentBoxSize: { inlineSize: 300 } });
                         act(function () {
-                            component.find(ReactResizeDetector).prop('onResize')(300);
+                            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[0])];
+                        return [4 /*yield*/, user.click(screen.getAllByTestId('download')[0])];
                     case 1:
-                        _a.sent();
-                        expect(insertDefaultImageByAttrUri).toHaveBeenCalledWith('entityuri', imageAttributeValues[0].uri);
-                        expect(setDefaultProfilePicForEntity).toHaveBeenCalledWith(imageAttributeValues[0]);
+                        _b.sent();
+                        expect(downloadImagesByURLs).toHaveBeenCalledWith([imageAttributeValues[0].uri]);
+                        return [4 /*yield*/, user.click(screen.getAllByTestId('share')[0])];
+                    case 2:
+                        _b.sent();
+                        return [4 /*yield*/, navigator.clipboard.readText()];
+                    case 3:
+                        clipboardText = _b.sent();
+                        expect(clipboardText).toBe(imageAttributeValues[0].uri);
+                        return [4 /*yield*/, user.click(screen.getAllByTestId('set-as-default')[0])];
+                    case 4:
+                        _b.sent();
+                        expect(insertDefaultImageByAttrUri).toHaveBeenCalledWith('entities/123', imageAttributeValues[0].uri);
+                        expect(defaultMdmActions.setDefaultProfilePicForEntity).toHaveBeenCalledWith(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: Mode.Editing });
-                onUpload = jest.fn();
-                onDeleteAttribute = jest.fn();
-                props = __assign(__assign({}, defaultProps), { attributeValues: imageAttributeValues, onUpload: onUpload, onDeleteAttribute: onDeleteAttribute });
-                component = setUp({ props: props, mdmValues: mdmValues });
-                act(function () {
-                    component.find(ReactResizeDetector).prop('onResize')(300);
-                });
-                component.update();
-                imageAttributesGallery = component.find(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[0]);
-                expect(setDefaultProfilePicForModifiedEntity).toHaveBeenCalledWith({
-                    entityUri: 'entityuri',
-                    value: 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 } }), container = _a.container, user = _a.user;
+                        resizeObserver.mockElementSize(container, { contentBoxSize: { inlineSize: 300 } });
+                        act(function () {
+                            resizeObserver.resize();
+                        });
+                        return [4 /*yield*/, user.click(screen.getAllByTestId('image-content')[0])];
+                    case 1:
+                        _b.sent();
+                        expect(screen.getByRole('dialog')).toBeInTheDocument();
+                        return [4 /*yield*/, user.click(screen.getByText('Set as default'))];
+                    case 2:
+                        _b.sent();
+                        expect(insertDefaultImageByAttrUri).toHaveBeenCalledWith('entities/123', imageAttributeValues[0].uri);
+                        expect(defaultMdmActions.setDefaultProfilePicForEntity).toHaveBeenCalledWith(imageAttributeValues[0]);
+                        return [4 /*yield*/, user.click(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(screen.getByLabelText('Download selected items'))];
+                    case 5:
+                        _b.sent();
+                        expect(downloadImagesByURLs).toHaveBeenCalledWith(['/test.jpg']);
+                        return [2 /*return*/];
+                }
             });
         }); });
         it('should call "requestNextPageOfAttributeValues" prop if "paging" prop is defined', function () {
-            var mdmValues = __assign(__assign({}, defaultMdmValues), { mode: Mode.Editing });
             var requestNextPageOfAttributeValues = jest.fn();
             var props = __assign(__assign({}, defaultProps), { attributeValues: 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,
@@ -277,10 +274,9 @@ describe('ImageAttributesLine tests', function () {
             });
         });
         it('should use showNonOv for determining defaultMaxValues param of requestNextPageOfAttributeValues', function () {
-            var mdmValues = __assign(__assign({}, defaultMdmValues), { mode: Mode.Editing });
             var requestNextPageOfAttributeValues = jest.fn();
             var props = __assign(__assign({}, defaultProps), { attributeValues: 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,
@@ -291,35 +287,33 @@ describe('ImageAttributesLine tests', function () {
         });
     });
     it('should calculate max items if countFixedItems more than 0', function () {
-        var mdmValues = __assign(__assign({}, defaultMdmValues), { mode: Mode.Editing });
-        var props = __assign(__assign({}, defaultProps), { attributeValues: imageAttributeValues, countFixedItems: 1 });
-        var component = setUp({ props: props, mdmValues: mdmValues });
+        var container = setUp({
+            props: { attributeValues: imageAttributeValues, countFixedItems: 1 },
+            mdmValues: { mode: Mode.Editing }
+        }).container;
+        resizeObserver.mockElementSize(container, { contentBoxSize: { inlineSize: 600 } });
         act(function () {
-            component.find(ReactResizeDetector).prop('onResize')(600);
+            resizeObserver.resize();
         });
-        component.update();
-        expect(component.find('.Image')).toHaveLength(3);
-        expect(component.find('.moreButton')).toHaveLength(0);
+        expect(screen.getAllByTestId('image')).toHaveLength(3);
+        expect(screen.queryByTestId('more-image-button')).not.toBeInTheDocument();
+        resizeObserver.mockElementSize(container, { contentBoxSize: { inlineSize: 300 } });
         act(function () {
-            component.find(ReactResizeDetector).prop('onResize')(300);
+            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(screen.getAllByTestId('image')).toHaveLength(1);
+        expect(screen.getByTestId('more-image-button')).toHaveTextContent('+2');
+        resizeObserver.mockElementSize(container, { contentBoxSize: { inlineSize: 239 } });
         act(function () {
-            component.find(ReactResizeDetector).prop('onResize')(239);
+            resizeObserver.resize(container);
         });
-        component.update();
-        expect(component.find('.Image')).toHaveLength(1);
-        expect(component.find('.moreButton')).toHaveLength(1);
-        expect(component.find('.moreButton').text()).toBe('+3');
+        expect(screen.getAllByTestId('image')).toHaveLength(1);
+        expect(screen.getByTestId('more-image-button')).toHaveTextContent('+3');
+        resizeObserver.mockElementSize(container, { contentBoxSize: { inlineSize: 240 } });
         act(function () {
-            component.find(ReactResizeDetector).prop('onResize')(240);
+            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(screen.getAllByTestId('image')).toHaveLength(1);
+        expect(screen.getByTestId('more-image-button')).toHaveTextContent('+2');
     });
 });

package/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/ImageAttributesLine/imageAttributeValues.test-data.js

@@ -1,3 +1,25 @@
+export var 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'
+        }
+    ]
+};
 export var imageAttributeValues = [
     {
         value: {