@reltio/components 1.4.2051 → 1.4.2053

package/ImageAttributesGallery/ImageAttributesGallery.test.js

@@ -9,16 +9,47 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 import React from 'react';
 import { range } from 'ramda';
-import { mount } from 'enzyme';
-import { act } from 'react-dom/test-utils';
+import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { Mode } from '@reltio/mdm-sdk';
-import { GalleryView } from './components/GalleryView';
-import { HeaderLeft } from './components/HeaderLeft';
-import { HeaderRight } from './components/HeaderRight';
-import { ImageGalleryDialog } from '../ImageGalleryDialog';
-import { ImageDetailsView } from '../ImageDetailsView';
 import { MdmModuleProvider } from '../contexts/MdmModuleContext';
 import { ImageAttributesGallery } from './ImageAttributesGallery';
 var generateAttributeValues = function (count) {
@@ -70,110 +101,241 @@ var defaultProps = {
     onDeleteAttribute: 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;
-    return mount(React.createElement(MdmModuleProvider, { values: mdmValues },
-        React.createElement(ImageAttributesGallery, __assign({}, props))));
+    var _b = _a === void 0 ? {} : _a, _c = _b.props, props = _c === void 0 ? {} : _c, _d = _b.mdmValues, mdmValues = _d === void 0 ? defaultMdmValues : _d;
+    var user = userEvent.setup({ skipHover: true });
+    var Providers = function (_a) {
+        var children = _a.children;
+        return (React.createElement(MdmModuleProvider, { values: mdmValues }, children));
+    };
+    return __assign({ user: user }, render(React.createElement(ImageAttributesGallery, __assign({}, defaultProps, props)), { wrapper: Providers }));
 };
 describe('ImageAttributesGallery tests', function () {
     afterEach(function () {
         jest.clearAllMocks();
     });
     it('should render main parts', function () {
-        var component = setUp();
-        expect(component.find(ImageGalleryDialog)).toHaveLength(1);
-        expect(component.find(GalleryView)).toHaveLength(1);
+        setUp();
+        var images = screen.getAllByRole('img');
+        expect(images).toHaveLength(3);
+        expect(screen.getByLabelText('Close')).toBeInTheDocument();
+        expect(screen.getByTestId('reltio-search-mode-gallery')).toHaveClass('current');
+        expect(screen.getByTestId('reltio-search-mode-details')).not.toHaveClass('current');
     });
-    it('should select and deselect items', function () {
-        var component = setUp();
-        var id = 'entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZ1';
-        expect(component.find(GalleryView).prop('selectedItems')).toEqual([]);
-        act(function () {
-            component.find(GalleryView).prop('onSelectImage')(id);
-        });
-        component.update();
-        expect(component.find(GalleryView).prop('selectedItems')).toEqual([id]);
-        act(function () {
-            component.find(GalleryView).prop('onDeselectImage')(id);
+    it('should select and deselect items', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, images, checkButton, checkedButtons;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    images = screen.getAllByRole('img');
+                    images.forEach(function (image) {
+                        fireEvent.load(image);
+                    });
+                    expect(screen.queryByTestId('checked-button')).not.toBeInTheDocument();
+                    return [4 /*yield*/, user.hover(screen.getAllByTestId('image-actions-overlay')[0])];
+                case 1:
+                    _a.sent();
+                    checkButton = screen.getByTestId('checked-button');
+                    expect(checkButton).toHaveAttribute('data-testid', 'RadioButtonUncheckedIcon');
+                    expect(screen.queryByText('Deselect')).not.toBeInTheDocument();
+                    expect(screen.queryByText('Select all images')).not.toBeInTheDocument();
+                    expect(screen.queryByLabelText('Download selected items')).not.toBeInTheDocument();
+                    return [4 /*yield*/, user.click(checkButton)];
+                case 2:
+                    _a.sent();
+                    expect(screen.getByText('Deselect')).toBeInTheDocument();
+                    expect(screen.getByText('Select all images')).toBeInTheDocument();
+                    expect(screen.getByLabelText('Download selected items')).toBeInTheDocument();
+                    checkedButtons = screen.getAllByTestId('checked-button');
+                    expect(checkedButtons).toHaveLength(3);
+                    expect(checkedButtons[0]).toHaveAttribute('data-testid', 'CheckCircleIcon');
+                    expect(checkedButtons[1]).toHaveAttribute('data-testid', 'RadioButtonUncheckedIcon');
+                    expect(checkedButtons[2]).toHaveAttribute('data-testid', 'RadioButtonUncheckedIcon');
+                    return [4 /*yield*/, user.click(checkedButtons[1])];
+                case 3:
+                    _a.sent();
+                    expect(screen.getAllByText('Deselect')).toHaveLength(2);
+                    expect(screen.getAllByTestId('checked-button')[1]).toHaveAttribute('data-testid', 'CheckCircleIcon');
+                    return [4 /*yield*/, user.click(screen.getByLabelText('Download selected items'))];
+                case 4:
+                    _a.sent();
+                    expect(defaultProps.onDownload).toHaveBeenCalledWith(['./image0.jpg', './image1.jpg']);
+                    return [4 /*yield*/, user.click(screen.getAllByText('Deselect')[0])];
+                case 5:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(screen.getAllByTestId('checked-button')[1])];
+                case 6:
+                    _a.sent();
+                    expect(screen.queryByText('Deselect')).not.toBeInTheDocument();
+                    expect(screen.queryByText('Select all images')).not.toBeInTheDocument();
+                    expect(screen.queryByLabelText('Download selected items')).not.toBeInTheDocument();
+                    return [2 /*return*/];
+            }
         });
-        component.update();
-        expect(component.find(GalleryView).prop('selectedItems')).toEqual([]);
-    });
-    it('should select all and deselect all items', function () {
-        var component = setUp();
-        var id0 = 'entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZ0';
-        var id1 = 'entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZ1';
-        var id2 = 'entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZ2';
-        act(function () {
-            component.find(GalleryView).prop('onSelectImage')(id1);
+    }); });
+    it('should select all and deselect all items', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, images, checkedButtons;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    images = screen.getAllByRole('img');
+                    images.forEach(function (image) {
+                        fireEvent.load(image);
+                    });
+                    expect(screen.queryByTestId('checked-button')).not.toBeInTheDocument();
+                    return [4 /*yield*/, user.hover(screen.getAllByTestId('image-actions-overlay')[0])];
+                case 1:
+                    _a.sent();
+                    expect(screen.queryByText('Deselect')).not.toBeInTheDocument();
+                    expect(screen.queryByText('Select all images')).not.toBeInTheDocument();
+                    expect(screen.queryByLabelText('Download selected items')).not.toBeInTheDocument();
+                    return [4 /*yield*/, user.click(screen.getByTestId('checked-button'))];
+                case 2:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(screen.getByText('Select all images'))];
+                case 3:
+                    _a.sent();
+                    expect(screen.getAllByText('Deselect')).toHaveLength(3);
+                    checkedButtons = screen.getAllByTestId('checked-button');
+                    expect(checkedButtons).toHaveLength(3);
+                    expect(checkedButtons[0]).toHaveAttribute('data-testid', 'CheckCircleIcon');
+                    expect(checkedButtons[1]).toHaveAttribute('data-testid', 'CheckCircleIcon');
+                    expect(checkedButtons[2]).toHaveAttribute('data-testid', 'CheckCircleIcon');
+                    return [4 /*yield*/, user.click(screen.getByLabelText('Download selected items'))];
+                case 4:
+                    _a.sent();
+                    expect(defaultProps.onDownload).toHaveBeenCalledWith(['./image0.jpg', './image1.jpg', './image2.jpg']);
+                    return [4 /*yield*/, user.click(screen.getByText('Clear selection'))];
+                case 5:
+                    _a.sent();
+                    expect(screen.queryByText('Deselect')).not.toBeInTheDocument();
+                    expect(screen.queryByText('Select all images')).not.toBeInTheDocument();
+                    expect(screen.queryByLabelText('Download selected items')).not.toBeInTheDocument();
+                    return [2 /*return*/];
+            }
         });
-        component.update();
-        expect(component.find(GalleryView).prop('selectedItems')).toEqual([id1]);
-        act(function () {
-            component.find(HeaderLeft).prop('onSelectAll')();
+    }); });
+    it('should close gallery', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    return [4 /*yield*/, user.click(screen.getByLabelText('Close'))];
+                case 1:
+                    _a.sent();
+                    expect(defaultProps.onClose).toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
         });
-        component.update();
-        expect(component.find(GalleryView).prop('selectedItems')).toEqual([id0, id1, id2]);
-        act(function () {
-            component.find(HeaderLeft).prop('onClearAll')();
+    }); });
+    it('should not provide onDelete if viewing mode', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, images;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp({ mdmValues: __assign(__assign({}, defaultMdmValues), { mode: Mode.Viewing }) }).user;
+                    images = screen.getAllByRole('img');
+                    fireEvent.load(images[0]);
+                    return [4 /*yield*/, user.hover(screen.getAllByTestId('image-actions-overlay')[0])];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(screen.getByTestId('image-overlay-actions'))];
+                case 2:
+                    _a.sent();
+                    expect(screen.queryByText('Delete')).not.toBeInTheDocument();
+                    return [2 /*return*/];
+            }
         });
-        component.update();
-        expect(component.find(GalleryView).prop('selectedItems')).toEqual([]);
-    });
-    it('should close gallery', function () {
-        var component = setUp();
-        act(function () {
-            var onClose = component.find(ImageGalleryDialog).prop('onClose');
-            if (onClose) {
-                onClose();
+    }); });
+    it('should provide onDelete if editing mode', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, images;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp({ mdmValues: __assign(__assign({}, defaultMdmValues), { mode: Mode.Editing }) }).user;
+                    images = screen.getAllByRole('img');
+                    fireEvent.load(images[0]);
+                    return [4 /*yield*/, user.hover(screen.getAllByTestId('image-actions-overlay')[0])];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(screen.getByTestId('image-overlay-actions'))];
+                case 2:
+                    _a.sent();
+                    expect(screen.queryByText('Delete')).toBeInTheDocument();
+                    return [2 /*return*/];
             }
         });
-        component.update();
-        expect(defaultProps.onClose).toHaveBeenCalled();
-    });
-    it('should not provide onDelete if viewing mode', function () {
-        var component = setUp();
-        var onDelete = component.find(GalleryView).prop('onDelete');
-        expect(onDelete).toBeUndefined();
-    });
-    it('should provide onDelete if editing mode', function () {
-        var mdmValues = __assign(__assign({}, defaultMdmValues), { mode: Mode.Editing });
-        var component = setUp({ mdmValues: mdmValues });
-        var onDelete = component.find(GalleryView).prop('onDelete');
-        expect(onDelete).not.toBeUndefined();
-    });
-    it('handleClickByImage', function () {
-        var id = 'entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZ0';
-        var component = setUp();
-        expect(component.find(ImageGalleryDialog).prop('mode')).toBe('gallery');
-        act(function () {
-            component.find(GalleryView).prop('onClickImage')(id);
+    }); });
+    it('handleClickByImage', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, images;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    images = screen.getAllByRole('img');
+                    images.forEach(function (image) {
+                        fireEvent.load(image);
+                    });
+                    expect(screen.getByTestId('reltio-search-mode-gallery')).toHaveClass('current');
+                    expect(screen.getByTestId('reltio-search-mode-details')).not.toHaveClass('current');
+                    return [4 /*yield*/, user.click(images[0])];
+                case 1:
+                    _a.sent();
+                    expect(screen.getByTestId('reltio-search-mode-gallery')).not.toHaveClass('current');
+                    expect(screen.getByTestId('reltio-search-mode-details')).toHaveClass('current');
+                    expect(defaultProps.setCurrentAttributeValueUri).toHaveBeenCalledWith('entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZ0');
+                    expect(screen.getByText('Meta info')).toBeInTheDocument();
+                    return [2 /*return*/];
+            }
         });
-        expect(defaultProps.setCurrentAttributeValueUri).toHaveBeenCalledWith(id);
-        component.update();
-        expect(component.find(ImageGalleryDialog).prop('mode')).toBe('details');
-    });
+    }); });
     describe('share link', function () {
-        it('action for GalleryView', function () {
-            var id = 'entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZ0';
-            var component = setUp();
-            act(function () {
-                var onShareLink = component.find(GalleryView).prop('onShareLink');
-                if (onShareLink) {
-                    onShareLink(id);
+        it('action for GalleryView', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var user, images;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        user = setUp().user;
+                        images = screen.getAllByRole('img');
+                        images.forEach(function (image) {
+                            fireEvent.load(image);
+                        });
+                        return [4 /*yield*/, user.hover(screen.getAllByTestId('image-actions-overlay')[0])];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(screen.getByTestId('image-overlay-actions'))];
+                    case 2:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(screen.getByText('Share link'))];
+                    case 3:
+                        _a.sent();
+                        expect(defaultProps.onShareLink).toHaveBeenCalledWith('./image0.jpg');
+                        return [2 /*return*/];
                 }
             });
-            expect(defaultProps.onShareLink).toHaveBeenLastCalledWith('./image0.jpg');
-        });
-        it('action for HeaderRight', function () {
-            var id = 'entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZ0';
-            var props = __assign(__assign({}, defaultProps), { currentAttributeValueUri: id });
-            var component = setUp({ props: props });
-            act(function () {
-                var onShare = component.find(HeaderRight).prop('onShare');
-                onShare(id);
+        }); });
+        it('action for HeaderRight', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var user, images;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        user = setUp({
+                            props: { currentAttributeValueUri: 'entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZ0' }
+                        }).user;
+                        images = screen.getAllByRole('img');
+                        images.forEach(function (image) {
+                            fireEvent.load(image);
+                        });
+                        return [4 /*yield*/, user.click(screen.getByLabelText('Copy link'))];
+                    case 1:
+                        _a.sent();
+                        expect(defaultProps.onShareLink).toHaveBeenCalledWith('./image0.jpg');
+                        return [2 /*return*/];
+                }
             });
-            expect(defaultProps.onShareLink).toHaveBeenLastCalledWith('./image0.jpg');
-        });
+        }); });
     });
     describe('set as default', function () {
         var result = {
@@ -199,217 +361,299 @@ describe('ImageAttributesGallery tests', function () {
                 ]
             }
         };
-        it('should be called from GalleryView', function () {
-            var id = 'entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZ0';
-            var component = setUp();
-            act(function () {
-                var onSetAsDefault = component.find(GalleryView).prop('onSetAsDefault');
-                if (onSetAsDefault) {
-                    onSetAsDefault(id);
+        it('should be called from GalleryView', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var user, images;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        user = setUp().user;
+                        images = screen.getAllByRole('img');
+                        images.forEach(function (image) {
+                            fireEvent.load(image);
+                        });
+                        return [4 /*yield*/, user.hover(screen.getAllByTestId('image-actions-overlay')[0])];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(screen.getByTestId('image-overlay-actions'))];
+                    case 2:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(screen.getByText('Set as default'))];
+                    case 3:
+                        _a.sent();
+                        expect(defaultProps.onSetAsDefault).toHaveBeenCalledWith(result);
+                        return [2 /*return*/];
                 }
             });
-            expect(defaultProps.onSetAsDefault).toHaveBeenLastCalledWith(result);
-        });
-        it('should be called from ImageDetailsView', function () {
-            var id = 'entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZ0';
-            var props = __assign(__assign({}, defaultProps), { currentAttributeValueUri: id });
-            var component = setUp({ props: props });
-            act(function () {
-                component.find(ImageDetailsView).prop('handleSetAsDefault')(id);
+        }); });
+        it('should be called from ImageDetailsView', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var user, images;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        user = setUp({
+                            props: { currentAttributeValueUri: 'entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZ0' }
+                        }).user;
+                        images = screen.getAllByRole('img');
+                        images.forEach(function (image) {
+                            fireEvent.load(image);
+                        });
+                        return [4 /*yield*/, user.click(screen.getByLabelText('Set as default'))];
+                    case 1:
+                        _a.sent();
+                        expect(defaultProps.onSetAsDefault).toHaveBeenCalledWith(result);
+                        return [2 /*return*/];
+                }
             });
-            expect(defaultProps.onSetAsDefault).toHaveBeenLastCalledWith(result);
-        });
+        }); });
     });
     describe('download images', function () {
-        afterEach(function () {
-            jest.resetAllMocks();
-        });
-        it('should call download prop', function () {
-            var component = setUp();
-            var id = 'entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZ0';
-            act(function () {
-                component.find(GalleryView).prop('onDownload')(id);
-            });
-            component.update();
-            expect(defaultProps.onDownload).toHaveBeenCalledWith(['./image0.jpg']);
-        });
-        it('should call download prop for selected images', function () {
-            var component = setUp();
-            var id0 = 'entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZ0';
-            var id1 = 'entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZ1';
-            act(function () {
-                component.find(GalleryView).prop('onSelectImage')(id0);
-            });
-            component.update();
-            act(function () {
-                component.find(GalleryView).prop('onSelectImage')(id1);
-            });
-            component.update();
-            act(function () {
-                var onDownload = component.find(HeaderRight).prop('onDownload');
-                if (onDownload) {
-                    onDownload();
+        it('should call download prop for selected images', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var user, images;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        user = setUp().user;
+                        images = screen.getAllByRole('img');
+                        images.forEach(function (image) {
+                            fireEvent.load(image);
+                        });
+                        return [4 /*yield*/, user.hover(screen.getAllByTestId('image-actions-overlay')[0])];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(screen.getByTestId('checked-button'))];
+                    case 2:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(screen.getAllByTestId('checked-button')[1])];
+                    case 3:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(screen.getByLabelText('Download selected items'))];
+                    case 4:
+                        _a.sent();
+                        expect(defaultProps.onDownload).toHaveBeenCalledWith(['./image0.jpg', './image1.jpg']);
+                        return [2 /*return*/];
                 }
             });
-            component.update();
-            expect(defaultProps.onDownload).toHaveBeenCalledWith(['./image0.jpg', './image1.jpg']);
-        });
-        it('should call download prop for opened image in details mode', function () {
-            var id0 = 'entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZ0';
-            var props = __assign(__assign({}, defaultProps), { currentAttributeValueUri: id0 });
-            var component = setUp({ props: props });
-            act(function () {
-                var onDownload = component.find(HeaderRight).prop('onDownload');
-                if (onDownload) {
-                    onDownload();
+        }); });
+        it('should call download prop for opened image in details mode', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var user, images;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        user = setUp({
+                            props: { currentAttributeValueUri: 'entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZ0' }
+                        }).user;
+                        images = screen.getAllByRole('img');
+                        images.forEach(function (image) {
+                            fireEvent.load(image);
+                        });
+                        return [4 /*yield*/, user.click(screen.getByLabelText('Download selected items'))];
+                    case 1:
+                        _a.sent();
+                        expect(defaultProps.onDownload).toHaveBeenCalledWith(['./image0.jpg']);
+                        return [2 /*return*/];
                 }
             });
-            expect(defaultProps.onDownload).toHaveBeenCalledWith(['./image0.jpg']);
-        });
+        }); });
     });
     describe('deleting images', function () {
-        it('should delete image in details mode', function () {
-            var onDeleteAttribute = defaultProps.onDeleteAttribute;
-            var props = __assign(__assign({}, defaultProps), { currentAttributeValueUri: 'entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZ1' });
-            var mdmValues = __assign(__assign({}, defaultMdmValues), { mode: Mode.Editing });
-            var component = setUp({ props: props, mdmValues: mdmValues });
-            act(function () {
-                var onDelete = component.find(HeaderRight).prop('onDelete');
-                if (onDelete) {
-                    onDelete();
+        it('should delete image in details mode', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var user, images;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        user = setUp({
+                            props: { currentAttributeValueUri: 'entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZ0' },
+                            mdmValues: __assign(__assign({}, defaultMdmValues), { mode: Mode.Editing })
+                        }).user;
+                        images = screen.getAllByRole('img');
+                        images.forEach(function (image) {
+                            fireEvent.load(image);
+                        });
+                        return [4 /*yield*/, user.click(screen.getByLabelText('Delete selected items'))];
+                    case 1:
+                        _a.sent();
+                        expect(defaultProps.onDeleteAttribute).toHaveBeenCalledWith({
+                            uri: 'entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZ0',
+                            attributeType: defaultProps.attributeType
+                        });
+                        return [2 /*return*/];
                 }
             });
-            expect(onDeleteAttribute).toHaveBeenCalledWith({
-                uri: 'entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZ1',
-                attributeType: defaultProps.attributeType
-            });
-        });
-        it('should delete image in gallery mode', function () {
-            var onDeleteAttribute = defaultProps.onDeleteAttribute;
-            var mdmValues = __assign(__assign({}, defaultMdmValues), { mode: Mode.Editing });
-            var component = setUp({ mdmValues: mdmValues });
-            var id = 'entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZ';
-            expect(component.find(GalleryView).prop('selectedItems')).toEqual([]);
-            act(function () {
-                component.find(GalleryView).prop('onSelectImage')("".concat(id, "1"));
-            });
-            component.update();
-            expect(component.find(GalleryView).prop('selectedItems')).toEqual(["".concat(id, "1")]);
-            act(function () {
-                var onDelete = component.find(HeaderRight).prop('onDelete');
-                if (onDelete) {
-                    onDelete();
+        }); });
+        it('should delete image in gallery mode', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var user, images;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        user = setUp({ mdmValues: __assign(__assign({}, defaultMdmValues), { mode: Mode.Editing }) }).user;
+                        images = screen.getAllByRole('img');
+                        images.forEach(function (image) {
+                            fireEvent.load(image);
+                        });
+                        return [4 /*yield*/, user.hover(screen.getAllByTestId('image-actions-overlay')[0])];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(screen.getByTestId('image-overlay-actions'))];
+                    case 2:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(screen.getByText('Delete'))];
+                    case 3:
+                        _a.sent();
+                        expect(defaultProps.onDeleteAttribute).toHaveBeenCalledWith({
+                            uri: 'entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZ0',
+                            attributeType: defaultProps.attributeType
+                        });
+                        return [2 /*return*/];
                 }
             });
-            expect(onDeleteAttribute).toHaveBeenCalledWith({
-                uri: 'entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZ1',
-                attributeType: defaultProps.attributeType
-            });
-        });
-        it('should delete image in gallery mode by clicking onDelete at GalleryView', function () {
-            var onDeleteAttribute = defaultProps.onDeleteAttribute;
-            var mdmValues = __assign(__assign({}, defaultMdmValues), { mode: Mode.Editing });
-            var component = setUp({ mdmValues: mdmValues });
-            act(function () {
-                var onDelete = component.find(GalleryView).prop('onDelete');
-                onDelete('entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZ1');
-            });
-            expect(onDeleteAttribute).toHaveBeenCalledWith({
-                uri: 'entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZ1',
-                attributeType: defaultProps.attributeType
+        }); });
+        it('should delete image in gallery mode by clicking onDelete at GalleryView', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var user, images;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        user = setUp({ mdmValues: __assign(__assign({}, defaultMdmValues), { mode: Mode.Editing }) }).user;
+                        images = screen.getAllByRole('img');
+                        images.forEach(function (image) {
+                            fireEvent.load(image);
+                        });
+                        return [4 /*yield*/, user.hover(screen.getAllByTestId('image-actions-overlay')[0])];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(screen.getByTestId('checked-button'))];
+                    case 2:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(screen.getByLabelText('Delete selected items'))];
+                    case 3:
+                        _a.sent();
+                        expect(defaultProps.onDeleteAttribute).toHaveBeenCalledWith({
+                            uri: 'entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZ0',
+                            attributeType: defaultProps.attributeType
+                        });
+                        return [2 /*return*/];
+                }
             });
-        });
-        it('should delete few images in gallery mode', function () {
-            var onDeleteAttribute = defaultProps.onDeleteAttribute;
-            var mdmValues = __assign(__assign({}, defaultMdmValues), { mode: Mode.Editing });
-            var component = setUp({ mdmValues: mdmValues });
-            var id = 'entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZ';
-            expect(component.find(GalleryView).prop('selectedItems')).toEqual([]);
-            act(function () {
-                component.find(GalleryView).prop('onSelectImage')("".concat(id, "1"));
-                component.find(GalleryView).prop('onSelectImage')("".concat(id, "2"));
+        }); });
+        it('should delete few images in gallery mode', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var user, images;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        user = setUp({ mdmValues: __assign(__assign({}, defaultMdmValues), { mode: Mode.Editing }) }).user;
+                        images = screen.getAllByRole('img');
+                        images.forEach(function (image) {
+                            fireEvent.load(image);
+                        });
+                        return [4 /*yield*/, user.hover(screen.getAllByTestId('image-actions-overlay')[0])];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(screen.getByTestId('checked-button'))];
+                    case 2:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(screen.getByText('Select all images'))];
+                    case 3:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(screen.getByLabelText('Delete selected items'))];
+                    case 4:
+                        _a.sent();
+                        expect(defaultProps.onDeleteAttribute).toHaveBeenCalledWith({
+                            uri: 'entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZ0',
+                            attributeType: defaultProps.attributeType
+                        });
+                        expect(defaultProps.onDeleteAttribute).toHaveBeenCalledWith({
+                            uri: 'entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZ1',
+                            attributeType: defaultProps.attributeType
+                        });
+                        expect(defaultProps.onDeleteAttribute).toHaveBeenCalledWith({
+                            uri: 'entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZ2',
+                            attributeType: defaultProps.attributeType
+                        });
+                        return [2 /*return*/];
+                }
             });
-            component.update();
-            expect(component.find(GalleryView).prop('selectedItems')).toEqual(["".concat(id, "1"), "".concat(id, "2")]);
-            act(function () {
-                var onDelete = component.find(HeaderRight).prop('onDelete');
-                onDelete('entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZ1');
+        }); });
+    });
+    describe('HeaderRight rendering cases', function () {
+        it('should show delete, download, copy link, upload buttons in details view', function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                setUp({
+                    mdmValues: { mode: Mode.Editing },
+                    props: {
+                        currentAttributeValueUri: 'entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZ1'
+                    }
+                });
+                expect(screen.getByLabelText('Delete selected items')).toBeInTheDocument();
+                expect(screen.getByLabelText('Download selected items')).toBeInTheDocument();
+                expect(screen.getByLabelText('Copy link')).toBeInTheDocument();
+                expect(screen.getByText('Upload')).toBeInTheDocument();
+                return [2 /*return*/];
             });
-            expect(onDeleteAttribute).toHaveBeenCalledTimes(2);
-            expect(onDeleteAttribute).toHaveBeenNthCalledWith(1, {
-                uri: 'entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZ1',
-                attributeType: defaultProps.attributeType
+        }); });
+        it('should not show upload button in details view it onUpload is not defined', function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                setUp({
+                    mdmValues: { mode: Mode.Editing },
+                    props: {
+                        currentAttributeValueUri: 'entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZ1',
+                        onUpload: undefined
+                    }
+                });
+                expect(screen.getByLabelText('Delete selected items')).toBeInTheDocument();
+                expect(screen.getByLabelText('Download selected items')).toBeInTheDocument();
+                expect(screen.getByLabelText('Copy link')).toBeInTheDocument();
+                expect(screen.queryByText('Upload')).not.toBeInTheDocument();
+                return [2 /*return*/];
             });
-            expect(onDeleteAttribute).toHaveBeenNthCalledWith(2, {
-                uri: 'entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZ2',
-                attributeType: defaultProps.attributeType
+        }); });
+        it('should show only download and delete button in Gallery mode with selected items and in edit mode', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var user, images;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        user = setUp({ mdmValues: { mode: Mode.Editing } }).user;
+                        images = screen.getAllByRole('img');
+                        images.forEach(function (image) {
+                            fireEvent.load(image);
+                        });
+                        return [4 /*yield*/, user.hover(screen.getAllByTestId('image-actions-overlay')[0])];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(screen.getByTestId('checked-button'))];
+                    case 2:
+                        _a.sent();
+                        expect(screen.getByLabelText('Download selected items')).toBeInTheDocument();
+                        expect(screen.getByLabelText('Delete selected items')).toBeInTheDocument();
+                        expect(screen.queryByLabelText('Copy link')).not.toBeInTheDocument();
+                        expect(screen.queryByText('Upload')).not.toBeInTheDocument();
+                        return [2 /*return*/];
+                }
             });
+        }); });
+        it('should show only upload button in gallery edit mode without selected items', function () {
+            setUp({ mdmValues: { mode: Mode.Editing } });
+            expect(screen.queryByLabelText('Delete selected items')).not.toBeInTheDocument();
+            expect(screen.queryByLabelText('Download selected items')).not.toBeInTheDocument();
+            expect(screen.queryByLabelText('Copy link')).not.toBeInTheDocument();
+            expect(screen.getByText('Upload')).toBeInTheDocument();
         });
-    });
-    describe('HeaderRight rendering cases', function () {
-        it('should provide onDelete, onDownload, onShare, onUpload to HeaderRight if Editing mode and Details mode', function () {
-            var props = __assign(__assign({}, defaultProps), { currentAttributeValueUri: 'entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZ1' });
-            var mdmValues = __assign(__assign({}, defaultMdmValues), { mode: Mode.Editing });
-            var component = setUp({ mdmValues: mdmValues, props: props });
-            var headerRight = component.find(HeaderRight);
-            expect(headerRight.prop('onDelete')).not.toBeUndefined();
-            expect(headerRight.prop('onDownload')).not.toBeUndefined();
-            expect(headerRight.prop('onShare')).not.toBeUndefined();
-            expect(headerRight.prop('onUpload')).not.toBeUndefined();
+        it('should not show buttons in viewing mode with non selected items', function () {
+            setUp({ mdmValues: { mode: Mode.Viewing } });
+            expect(screen.queryByLabelText('Delete selected items')).not.toBeInTheDocument();
+            expect(screen.queryByLabelText('Download selected items')).not.toBeInTheDocument();
+            expect(screen.queryByLabelText('Copy link')).not.toBeInTheDocument();
+            expect(screen.queryByText('Upload')).not.toBeInTheDocument();
         });
-        it('should provide onDelete, onDownload, onShare and not provide onUpload to HeaderRight if Editing mode and Details mode and onUpload is not defined', function () {
-            var props = __assign(__assign({}, defaultProps), { onUpload: undefined, currentAttributeValueUri: 'entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZ1' });
-            var mdmValues = __assign(__assign({}, defaultMdmValues), { mode: Mode.Editing });
-            var component = setUp({ mdmValues: mdmValues, props: props });
-            var headerRight = component.find(HeaderRight);
-            expect(headerRight.prop('onDelete')).not.toBeUndefined();
-            expect(headerRight.prop('onDownload')).not.toBeUndefined();
-            expect(headerRight.prop('onShare')).not.toBeUndefined();
-            expect(headerRight.prop('onUpload')).toBeUndefined();
-        });
-        it('should provide onDelete and onDownload and not provide onShare, onUpload to HeaderRight if Editing mode and Gallery mode and selectedImages exist', function () {
-            var id = 'entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZ';
-            var mdmValues = __assign(__assign({}, defaultMdmValues), { mode: Mode.Editing });
-            var component = setUp({ mdmValues: mdmValues });
-            expect(component.find(GalleryView).prop('selectedItems')).toEqual([]);
-            act(function () {
-                component.find(GalleryView).prop('onSelectImage')("".concat(id, "1"));
+        it('should show only copy link and download in details view for viewing mode', function () {
+            setUp({
+                mdmValues: { mode: Mode.Viewing },
+                props: {
+                    currentAttributeValueUri: 'entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZ1'
+                }
             });
-            component.update();
-            expect(component.find(GalleryView).prop('selectedItems')).toEqual(["".concat(id, "1")]);
-            var headerRight = component.find(HeaderRight);
-            expect(headerRight.prop('onDelete')).not.toBeUndefined();
-            expect(headerRight.prop('onDownload')).not.toBeUndefined();
-            expect(headerRight.prop('onShare')).toBeUndefined();
-            expect(headerRight.prop('onUpload')).toBeUndefined();
-        });
-        it('should not provide onDelete, onDownload and onShare and provide onUpload to HeaderRight if Editing mode and Gallery mode and selectedImages do not exist', function () {
-            var mdmValues = __assign(__assign({}, defaultMdmValues), { mode: Mode.Editing });
-            var component = setUp({ mdmValues: mdmValues });
-            expect(component.find(GalleryView).prop('selectedItems')).toEqual([]);
-            var headerRight = component.find(HeaderRight);
-            expect(headerRight.prop('onDelete')).toBeUndefined();
-            expect(headerRight.prop('onDownload')).toBeUndefined();
-            expect(headerRight.prop('onShare')).toBeUndefined();
-            expect(headerRight.prop('onUpload')).not.toBeUndefined();
-        });
-        it('should not provide onDelete, onDownload, onUpload, onShare to HeaderRight if Viewing mode and Gallery mode and selectedImages do not exist', function () {
-            var component = setUp();
-            expect(component.find(GalleryView).prop('selectedItems')).toEqual([]);
-            var headerRight = component.find(HeaderRight);
-            expect(headerRight.prop('onDelete')).toBeUndefined();
-            expect(headerRight.prop('onDownload')).toBeUndefined();
-            expect(headerRight.prop('onShare')).toBeUndefined();
-            expect(headerRight.prop('onUpload')).toBeUndefined();
-        });
-        it('should not provide onDelete, onUpload and provide onDownload, onShare to HeaderRight if Viewing mode and Details mode', function () {
-            var props = __assign(__assign({}, defaultProps), { currentAttributeValueUri: 'entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZ1' });
-            var component = setUp({ props: props });
-            var headerRight = component.find(HeaderRight);
-            expect(headerRight.prop('onDelete')).toBeUndefined();
-            expect(headerRight.prop('onDownload')).not.toBeUndefined();
-            expect(headerRight.prop('onShare')).not.toBeUndefined();
-            expect(headerRight.prop('onUpload')).toBeUndefined();
+            expect(screen.getByLabelText('Download selected items')).toBeInTheDocument();
+            expect(screen.getByLabelText('Copy link')).toBeInTheDocument();
+            expect(screen.queryByLabelText('Delete selected items')).not.toBeInTheDocument();
+            expect(screen.queryByText('Upload')).not.toBeInTheDocument();
         });
     });
 });