@reltio/components 1.4.1896 → 1.4.1898

package/cjs/features/history/HistoryTree/HistoryTree.specs.js

@@ -51,14 +51,9 @@ var __importDefault = (this && this.__importDefault) || function (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 ui_i18n_1 = __importDefault(require("ui-i18n"));
-var Button_1 = __importDefault(require("@mui/material/Button"));
-var LinearLoadIndicator_1 = require("../../../LinearLoadIndicator");
-var HistoryGraph_1 = require("../HistoryGraph");
-var HistoryRow_1 = require("../HistoryRow");
+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 MdmModuleContext_1 = require("../../../contexts/MdmModuleContext");
 var HistoryTree_1 = require("./HistoryTree");
@@ -72,6 +67,7 @@ var metadata = {
         { uri: 'configuration/sources/DEA', label: 'DEA' }
     ]
 };
+var historyEvent = { aStamp: 1633089195406, overrideUri: 'entities/123' };
 var historyData = {
     historyLanes: {
         'entities/123': {
@@ -96,15 +92,8 @@ var historyData = {
         }
     ]
 };
-var defaultMdmValues = {
-    metadata: metadata,
-    mode: mdm_sdk_1.Mode.Viewing
-};
-var mdmActions = {
-    setHistoryEvent: jest.fn(),
-    clearHistoryEvent: jest.fn(),
-    modeUpdated: jest.fn()
-};
+var mdmActions = { setHistoryEvent: jest.fn(), clearHistoryEvent: jest.fn(), modeUpdateRequested: jest.fn() };
+var defaultMdmValues = { metadata: metadata, mode: mdm_sdk_1.Mode.Viewing };
 var defaultProps = {
     historyData: historyData,
     isLoading: false,
@@ -115,12 +104,15 @@ var defaultProps = {
     findPreviousChange: function (index) { return historyData.rows[index + 1]; }
 };
 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 (0, enzyme_1.mount)(react_1.default.createElement(MdmModuleContext_1.MdmModuleProvider, { values: mdmValues, actions: mdmActions },
-        react_1.default.createElement(HistoryTree_1.HistoryTree, __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 = user_event_1.default.setup();
+    var Providers = function (_a) {
+        var children = _a.children;
+        return (react_1.default.createElement(MdmModuleContext_1.MdmModuleProvider, { values: mdmValues, actions: mdmActions }, children));
+    };
+    return __assign({ user: user }, (0, react_2.render)(react_1.default.createElement(HistoryTree_1.HistoryTree, __assign({}, defaultProps, props)), { wrapper: Providers }));
 };
 describe('HistoryTree tests', function () {
-    var historyEvent = { aStamp: 1633089195406, overrideUri: 'entities/123' };
     beforeAll(function () {
         jest.spyOn(Element.prototype, 'clientHeight', 'get').mockReturnValue(100);
     });
@@ -128,149 +120,135 @@ describe('HistoryTree tests', function () {
         jest.clearAllMocks();
     });
     it('should render correct default state', function () {
-        var wrapper = setUp();
-        expect(wrapper.find(LinearLoadIndicator_1.LinearLoadIndicator).length).toBe(0);
-        var graph = wrapper.find('.graph');
-        expect(graph.length).toBe(1);
-        expect(graph.hasClass('shadow')).toBe(false);
-        expect(graph.find(HistoryGraph_1.HistoryGraph).length).toBe(1);
-        expect(graph.find(HistoryGraph_1.HistoryGraph).prop('graphData')).toEqual({
-            historyLanes: historyData.historyLanes,
-            rows: historyData.rows.map(function (row) { return (__assign(__assign({}, row), { height: 100 })); })
-        });
-        expect(graph.find(react_resize_detector_1.default).length).toBe(1);
-        var history = wrapper.find('.history');
-        expect(history.length).toBe(1);
-        var historyRows = history.find(HistoryRow_1.HistoryRow);
-        expect(historyRows.length).toBe(2);
-        historyRows.forEach(function (row, i) {
-            expect(row.prop('change')).toBe(historyData.rows[i]);
-            expect(row.prop('isCurrent')).toBe(i === 0);
-            expect(row.prop('isSelected')).toBe(i === 0);
-        });
-        var buttonContainer = wrapper.find('.buttonContainer');
-        expect(buttonContainer.length).toBe(0);
-    });
-    it('should show "load more" button and call onLoadMore prop on click if canLoadMore === true', function () {
-        var onLoadMore = defaultProps.onLoadMore;
-        var props = __assign(__assign({}, defaultProps), { canLoadMore: true });
-        var wrapper = setUp({ props: props });
-        expect(onLoadMore).not.toBeCalled();
-        var buttonContainer = wrapper.find('.buttonContainer');
-        expect(buttonContainer.length).toBe(1);
-        var button = buttonContainer.find(Button_1.default).find('button');
-        expect(button.length).toBe(1);
-        expect(button.text()).toBe('Show more');
-        button.simulate('click');
-        expect(onLoadMore).toBeCalled();
+        setUp();
+        expect(react_2.screen.getByTestId('reltio-history-graph')).toBeInTheDocument();
+        var rows = react_2.screen.getAllByTestId('history-row');
+        expect(rows).toHaveLength(2);
+        var current = rows[0], unmerged = rows[1];
+        expect(current).toHaveClass('selected');
+        (0, react_2.within)(current).getByText('Current view');
+        (0, react_2.within)(current).getByText('user1');
+        (0, react_2.within)(unmerged).getByText(ui_i18n_1.default.date(historyData.rows[1].timestamp, 'L LT'));
+        (0, react_2.within)(unmerged).getByText('Profile un-merged');
+        (0, react_2.within)(unmerged).getByText('user2');
+        (0, react_2.within)(unmerged).getByText(ui_i18n_1.default.date(historyData.rows[1].timestamp, 'L LT'));
+        expect(react_2.screen.queryByTestId('reltio-linear-load-indicator')).not.toBeInTheDocument();
+        expect(react_2.screen.queryByText('Show more')).not.toBeInTheDocument();
     });
+    it('should show "load more" button and call onLoadMore prop on click if canLoadMore === true', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp({ props: { canLoadMore: true } }).user;
+                    return [4 /*yield*/, user.click(react_2.screen.getByText('Show more'))];
+                case 1:
+                    _a.sent();
+                    expect(defaultProps.onLoadMore).toBeCalled();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
     it('should show loading indicator if isLoading === true', function () {
-        var props = __assign(__assign({}, defaultProps), { isLoading: true });
-        var wrapper = setUp({ props: props });
-        expect(wrapper.find(LinearLoadIndicator_1.LinearLoadIndicator).length).toBe(1);
+        setUp({ props: { isLoading: true } });
+        expect(react_2.screen.getByTestId('reltio-linear-load-indicator')).toBeInTheDocument();
     });
-    it('should show shadow if content scrollable right', function () {
-        var wrapper = setUp();
-        var graph = wrapper.find('.graph');
-        var reactResizeDetector = wrapper.find(react_resize_detector_1.default);
-        expect(graph.length).toBe(1);
-        expect(graph.hasClass('shadow')).toBe(false);
-        expect(reactResizeDetector.length).toBe(1);
+    it('should show shadow if content is scrollable right', function () {
         jest.spyOn(Element.prototype, 'clientWidth', 'get').mockReturnValue(100);
         jest.spyOn(Element.prototype, 'scrollWidth', 'get').mockReturnValue(150);
         jest.spyOn(Element.prototype, 'scrollLeft', 'get').mockReturnValueOnce(0);
-        (0, test_utils_1.act)(function () {
-            var onResize = reactResizeDetector.prop('onResize');
-            onResize();
-        });
-        wrapper.update();
-        expect(wrapper.find('.graph').hasClass('shadow')).toBe(true);
-        jest.spyOn(Element.prototype, 'scrollLeft', 'get').mockReturnValueOnce(50);
-        (0, test_utils_1.act)(function () {
-            wrapper.find('.graph').simulate('scroll');
-        });
-        wrapper.update();
-        expect(wrapper.find('.graph').hasClass('shadow')).toBe(false);
-    });
-    it('should render the latest event as selected if props.historyEvent is undefined', function () {
-        var wrapper = setUp();
-        var historyRows = wrapper.find(HistoryRow_1.HistoryRow);
-        expect(historyRows.at(0).prop('isSelected')).toBeTruthy();
-        expect(historyRows.at(1).prop('isSelected')).toBeFalsy();
+        setUp();
+        var graph = react_2.screen.getByTestId('reltio-history-graph');
+        react_2.fireEvent.scroll(graph.parentElement);
+        expect(graph.parentElement).toHaveClass('shadow');
     });
-    it('should render correct selected row', function () {
-        var props = __assign(__assign({}, defaultProps), { historyEvent: historyEvent });
-        var wrapper = setUp({ props: props });
-        var historyRows = wrapper.find(HistoryRow_1.HistoryRow);
-        expect(historyRows.at(0).prop('isSelected')).toBeFalsy();
-        expect(historyRows.at(1).prop('isSelected')).toBeTruthy();
+    it('should not show shadow if content is not scrollable right', function () {
+        jest.spyOn(Element.prototype, 'clientWidth', 'get').mockReturnValue(100);
+        jest.spyOn(Element.prototype, 'scrollWidth', 'get').mockReturnValue(100);
+        jest.spyOn(Element.prototype, 'scrollLeft', 'get').mockReturnValueOnce(0);
+        setUp();
+        var graph = react_2.screen.getByTestId('reltio-history-graph');
+        react_2.fireEvent.scroll(graph.parentElement);
+        expect(graph.parentElement).not.toHaveClass('shadow');
     });
-    it('should dipatch setHistoryEvent when invoke HistoryRow prop onClick', function () {
-        var setHistoryEvent = mdmActions.setHistoryEvent;
-        var wrapper = setUp();
-        (0, test_utils_1.act)(function () {
-            wrapper.find(HistoryRow_1.HistoryRow).at(1).prop('onClick')();
-        });
-        var event = { aStamp: 1633089195406, overrideUri: null };
-        expect(setHistoryEvent).toBeCalledWith(event);
+    it('should not show shadow if content is scrollable right but you scrolled right already', function () {
+        jest.spyOn(Element.prototype, 'clientWidth', 'get').mockReturnValue(100);
+        jest.spyOn(Element.prototype, 'scrollWidth', 'get').mockReturnValue(150);
+        jest.spyOn(Element.prototype, 'scrollLeft', 'get').mockReturnValueOnce(50);
+        setUp();
+        var graph = react_2.screen.getByTestId('reltio-history-graph');
+        react_2.fireEvent.scroll(graph.parentElement);
+        expect(graph.parentElement).not.toHaveClass('shadow');
     });
-    it('should dipatch clearHistoryEvent when invoke HistoryRow prop onClick on selected event', function () {
-        var clearHistoryEvent = mdmActions.clearHistoryEvent;
-        var props = __assign(__assign({}, defaultProps), { historyEvent: historyEvent });
-        var wrapper = setUp({ props: props });
-        (0, test_utils_1.act)(function () {
-            wrapper.find(HistoryRow_1.HistoryRow).at(1).prop('onClick')();
-        });
-        expect(clearHistoryEvent).toHaveBeenCalled();
+    it('should render correct selected row', function () {
+        setUp({ props: { historyEvent: historyEvent } });
+        var rows = react_2.screen.getAllByTestId('history-row');
+        expect(rows[0]).not.toHaveClass('selected');
+        expect(rows[1]).toHaveClass('selected');
     });
-    it('should dipatch clearHistoryEvent when invoke HistoryRow prop onClick on the latest event', function () {
-        var clearHistoryEvent = mdmActions.clearHistoryEvent;
-        var props = __assign(__assign({}, defaultProps), { historyEvent: historyEvent });
-        var wrapper = setUp({ props: props });
-        (0, test_utils_1.act)(function () {
-            wrapper.find(HistoryRow_1.HistoryRow).at(0).prop('onClick')();
+    it('should dispatch setHistoryEvent when invoke HistoryRow prop onClick', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    return [4 /*yield*/, user.click(react_2.screen.getAllByTestId('history-row')[1])];
+                case 1:
+                    _a.sent();
+                    expect(mdmActions.clearHistoryEvent).not.toHaveBeenCalled();
+                    expect(mdmActions.setHistoryEvent).toHaveBeenCalledWith({ aStamp: 1633089195406, overrideUri: null });
+                    return [2 /*return*/];
+            }
         });
-        expect(clearHistoryEvent).toHaveBeenCalled();
-    });
-    it('should not dipatch clearHistoryEvent when invoke HistoryRow prop onClick on the latest event if props.historyEvent is undefined', function () {
-        var clearHistoryEvent = mdmActions.clearHistoryEvent;
-        var wrapper = setUp();
-        (0, test_utils_1.act)(function () {
-            wrapper.find(HistoryRow_1.HistoryRow).at(0).prop('onClick')();
+    }); });
+    it('should dispatch clearHistoryEvent when click on selected view', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp({ props: { historyEvent: historyEvent } }).user;
+                    return [4 /*yield*/, user.click(react_2.screen.getAllByTestId('history-row')[1])];
+                case 1:
+                    _a.sent();
+                    expect(mdmActions.clearHistoryEvent).toHaveBeenCalled();
+                    expect(mdmActions.setHistoryEvent).not.toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
         });
-        expect(clearHistoryEvent).not.toBeCalled();
-    });
-    it('should dipatch modeUpdated and setHistoryEvent when invoke HistoryRow prop onClick in Editing mode and apply confirmation', function () {
-        var confirm = jest.spyOn(window, 'confirm').mockReturnValue(true);
-        var modeUpdated = mdmActions.modeUpdated, setHistoryEvent = mdmActions.setHistoryEvent;
-        var mdmValues = __assign(__assign({}, defaultMdmValues), { mode: mdm_sdk_1.Mode.Editing });
-        var wrapper = setUp({ mdmValues: mdmValues });
-        (0, test_utils_1.act)(function () {
-            wrapper.find(HistoryRow_1.HistoryRow).at(1).prop('onClick')();
+    }); });
+    it('should dispatch clearHistoryEvent when click on current view', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp({ props: { historyEvent: historyEvent } }).user;
+                    return [4 /*yield*/, user.click(react_2.screen.getAllByTestId('history-row')[0])];
+                case 1:
+                    _a.sent();
+                    expect(mdmActions.clearHistoryEvent).toHaveBeenCalled();
+                    expect(mdmActions.setHistoryEvent).not.toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
         });
-        var event = {
-            aStamp: 1633089195406,
-            overrideUri: null
-        };
-        expect(confirm).toHaveBeenCalledWith(ui_i18n_1.default.text('Are you sure you want to go in history mode? All your changes will be lost.'));
-        expect(modeUpdated).toHaveBeenCalledWith(mdm_sdk_1.Mode.Viewing);
-        expect(setHistoryEvent).toHaveBeenCalledWith(event);
-    });
-    it('should dipatch nothing when invoke HistoryRow prop onClick in Editing mode and cancel confirmation', function () {
-        var confirm = jest.spyOn(window, 'confirm').mockReturnValue(false);
-        var modeUpdated = mdmActions.modeUpdated, setHistoryEvent = mdmActions.setHistoryEvent, clearHistoryEvent = mdmActions.clearHistoryEvent;
-        var mdmValues = __assign(__assign({}, defaultMdmValues), { mode: mdm_sdk_1.Mode.Editing });
-        var wrapper = setUp({ mdmValues: mdmValues });
-        (0, test_utils_1.act)(function () {
-            wrapper.find(HistoryRow_1.HistoryRow).at(1).prop('onClick')();
+    }); });
+    it('should dispatch modeUpdateRequested and setHistoryEvent when click in Editing mode', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp({ mdmValues: __assign(__assign({}, defaultMdmValues), { mode: mdm_sdk_1.Mode.Editing }) }).user;
+                    return [4 /*yield*/, user.click(react_2.screen.getAllByTestId('history-row')[1])];
+                case 1:
+                    _a.sent();
+                    expect(mdmActions.clearHistoryEvent).not.toHaveBeenCalled();
+                    expect(mdmActions.setHistoryEvent).toHaveBeenCalledWith({ aStamp: 1633089195406, overrideUri: null });
+                    expect(mdmActions.modeUpdateRequested).toHaveBeenCalledWith(mdm_sdk_1.Mode.Viewing);
+                    return [2 /*return*/];
+            }
         });
-        expect(confirm).toHaveBeenCalledWith(ui_i18n_1.default.text('Are you sure you want to go in history mode? All your changes will be lost.'));
-        expect(clearHistoryEvent).not.toHaveBeenCalled();
-        expect(setHistoryEvent).not.toHaveBeenCalled();
-        expect(modeUpdated).not.toHaveBeenCalled();
-    });
-    it('handleHistoryCircleMouseOver handler should work correctly when crosswalks exist', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var crosswalks, wrapper, graphData;
+    }); });
+    it('should request circle label correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var crosswalks, user;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -282,96 +260,36 @@ describe('HistoryTree tests', function () {
                         { type: 'configuration/sources/MDS' }
                     ];
                     mdm_sdk_1.getEntity.mockImplementation(function () { return Promise.resolve({ crosswalks: crosswalks }); });
-                    wrapper = setUp();
-                    graphData = {
-                        historyLanes: historyData.historyLanes,
-                        rows: historyData.rows.map(function (row) { return (__assign(__assign({}, row), { height: 100 })); })
-                    };
-                    expect(wrapper.find(HistoryGraph_1.HistoryGraph).prop('graphData')).toEqual(graphData);
-                    return [4 /*yield*/, (0, test_utils_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
-                            var onHistoryCircleMouseOver;
-                            return __generator(this, function (_a) {
-                                onHistoryCircleMouseOver = wrapper.find(HistoryGraph_1.HistoryGraph).prop('onHistoryCircleMouseOver');
-                                if (onHistoryCircleMouseOver) {
-                                    onHistoryCircleMouseOver('entities/123', 1636456567409, 0);
-                                }
-                                return [2 /*return*/];
-                            });
-                        }); })];
+                    user = setUp().user;
+                    return [4 /*yield*/, user.hover(react_2.screen.getAllByTestId('history-circle')[0])];
                 case 1:
                     _a.sent();
-                    expect(mdm_sdk_1.getEntity).toHaveBeenCalledWith('entities/123', {
-                        time: 1636456567409,
-                        select: 'crosswalks'
-                    });
-                    expect(mdm_sdk_1.getEntity.mock.calls.length).toBe(1);
-                    return [4 /*yield*/, (0, test_utils_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
-                            return __generator(this, function (_a) {
-                                Promise.resolve();
-                                return [2 /*return*/];
-                            });
-                        }); })];
+                    expect(mdm_sdk_1.getEntity).toHaveBeenCalledWith('entities/123', { time: 1636456567409, select: 'crosswalks' });
+                    return [4 /*yield*/, user.hover(react_2.screen.getAllByTestId('history-circle')[0])];
                 case 2:
                     _a.sent();
-                    wrapper.update();
-                    expect(wrapper.find(HistoryGraph_1.HistoryGraph).prop('graphData')).toEqual(__assign(__assign({}, graphData), { rows: [__assign(__assign({}, graphData.rows[0]), { label: 'AMA, Reltio, DEA' }), graphData.rows[1]] }));
-                    return [4 /*yield*/, (0, test_utils_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
-                            var onHistoryCircleMouseOver;
-                            return __generator(this, function (_a) {
-                                onHistoryCircleMouseOver = wrapper.find(HistoryGraph_1.HistoryGraph).prop('onHistoryCircleMouseOver');
-                                if (onHistoryCircleMouseOver) {
-                                    onHistoryCircleMouseOver('entities/123', 1636456567409, 0);
-                                }
-                                return [2 /*return*/];
-                            });
-                        }); })];
-                case 3:
-                    _a.sent();
-                    expect(mdm_sdk_1.getEntity.mock.calls.length).toBe(1);
-                    wrapper.update();
-                    expect(wrapper.find(HistoryGraph_1.HistoryGraph).prop('graphData')).toEqual(__assign(__assign({}, graphData), { rows: [__assign(__assign({}, graphData.rows[0]), { label: 'AMA, Reltio, DEA' }), graphData.rows[1]] }));
+                    react_2.screen.getByText('AMA, Reltio, DEA');
+                    expect(mdm_sdk_1.getEntity).toHaveBeenCalledTimes(1);
                     return [2 /*return*/];
             }
         });
     }); });
-    it('handleHistoryCircleMouseOver handler should work correctly when crosswalks do not exist', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var wrapper, graphData;
+    it('should work correctly when there is no crosswalks for circle', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     mdm_sdk_1.getEntity.mockImplementation(function () { return Promise.resolve({}); });
-                    wrapper = setUp();
-                    graphData = {
-                        historyLanes: historyData.historyLanes,
-                        rows: historyData.rows.map(function (row) { return (__assign(__assign({}, row), { height: 100 })); })
-                    };
-                    expect(wrapper.find(HistoryGraph_1.HistoryGraph).prop('graphData')).toEqual(graphData);
-                    return [4 /*yield*/, (0, test_utils_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
-                            var onHistoryCircleMouseOver;
-                            return __generator(this, function (_a) {
-                                onHistoryCircleMouseOver = wrapper.find(HistoryGraph_1.HistoryGraph).prop('onHistoryCircleMouseOver');
-                                if (onHistoryCircleMouseOver) {
-                                    onHistoryCircleMouseOver('entities/123', 1636456567409, 0);
-                                }
-                                return [2 /*return*/];
-                            });
-                        }); })];
+                    user = setUp().user;
+                    return [4 /*yield*/, user.hover(react_2.screen.getAllByTestId('history-circle')[0])];
                 case 1:
                     _a.sent();
-                    expect(mdm_sdk_1.getEntity).toHaveBeenCalledWith('entities/123', {
-                        time: 1636456567409,
-                        select: 'crosswalks'
-                    });
-                    return [4 /*yield*/, (0, test_utils_1.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
-                            return __generator(this, function (_a) {
-                                Promise.resolve();
-                                return [2 /*return*/];
-                            });
-                        }); })];
+                    expect(mdm_sdk_1.getEntity).toHaveBeenCalledWith('entities/123', { time: 1636456567409, select: 'crosswalks' });
+                    return [4 /*yield*/, user.hover(react_2.screen.getAllByTestId('history-circle')[0])];
                 case 2:
                     _a.sent();
-                    wrapper.update();
-                    expect(wrapper.find(HistoryGraph_1.HistoryGraph).prop('graphData')).toEqual(__assign(__assign({}, graphData), { rows: [__assign(__assign({}, graphData.rows[0]), { label: 'No data' }), graphData.rows[1]] }));
+                    react_2.screen.getByText('No data');
+                    expect(mdm_sdk_1.getEntity).toHaveBeenCalledTimes(1);
                     return [2 /*return*/];
             }
         });

package/cjs/features/workflow/WorkflowComments/WorkflowComments.js

@@ -92,6 +92,6 @@ var WorkflowComments = function (_a) {
                 react_1.default.createElement(SmallIconButton_1.SmallIconButton, { icon: Send_1.default, disabled: comment.length === 0, onClick: sendComment, "data-reltio-id": "send-button" })), classes: { root: styles.filledInputRoot }, placeholder: ui_i18n_1.default.text('Write a comment'), value: comment, onKeyPress: handleKeyPress, onChange: handleChange, disableUnderline: true, multiline: true })),
         react_1.default.createElement("div", { className: styles.modeSwitcherWrapper },
             buttonsGroup.length === 1 && (react_1.default.createElement(Button_1.default, { variant: "outlined", onClick: buttonsGroup[0].onClick, disabled: actionRequestIsInProgress }, buttonsGroup[0].label)),
-            buttonsGroup.length > 1 && (react_1.default.createElement(ModeSwitcherSelect_1.ModeSwitcherSelect, { buttonsGroup: buttonsGroup, value: currentAction, disabled: actionRequestIsInProgress })))));
+            buttonsGroup.length > 1 && (react_1.default.createElement(ModeSwitcherSelect_1.ModeSwitcherSelect, { buttonsGroup: buttonsGroup, value: currentAction, loading: actionRequestIsInProgress, disabled: actionRequestIsInProgress })))));
 };
 exports.WorkflowComments = WorkflowComments;

package/cjs/features/workflow/WorkflowComments/WorkflowCommments.spec.js

@@ -235,4 +235,10 @@ describe('WorkflowComments tests', function () {
     it('should not crash if preferredAction is undefined and workflowActions is empty array', function () {
         setUp({ props: __assign(__assign({}, defaultProps), { preferredAction: undefined, workflowActions: [] }) });
     });
+    it('should disabled action button and add loading if actionRequestIsInProgress is true', function () {
+        setUp({ props: __assign(__assign({}, defaultProps), { actionRequestIsInProgress: true }) });
+        var button = react_2.screen.getByRole('button', { name: 'Delete' });
+        expect(button).toHaveClass('Mui-disabled');
+        react_2.screen.getByTestId('mode-loading-spinner');
+    });
 });

package/esm/ModeSwitcherSelect/ModeSwitcherSelect.d.ts

@@ -13,8 +13,9 @@ type ModeSwitcherSelectProps = {
     buttonsGroup?: Button[];
     value: string;
     onChange?: (value: string) => void;
+    loading?: boolean;
     disabled?: boolean;
     variant?: 'normal' | 'thin';
 };
-export declare const ModeSwitcherSelect: ({ optionsGroup, buttonsGroup, value, onChange, disabled, variant }: ModeSwitcherSelectProps) => JSX.Element;
+export declare const ModeSwitcherSelect: ({ optionsGroup, buttonsGroup, value, onChange, loading, disabled, variant }: ModeSwitcherSelectProps) => JSX.Element;
 export {};

package/esm/ModeSwitcherSelect/ModeSwitcherSelect.js

@@ -26,10 +26,11 @@ import MenuItem from '@mui/material/MenuItem';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import Tooltip from '@mui/material/Tooltip';
+import CircularProgress from '@mui/material/CircularProgress';
 import { useStyles } from './styles';
 var isButton = function (value) { return 'onClick' in value; };
 export var ModeSwitcherSelect = function (_a) {
-    var _b = _a.optionsGroup, optionsGroup = _b === void 0 ? [] : _b, _c = _a.buttonsGroup, buttonsGroup = _c === void 0 ? [] : _c, value = _a.value, onChange = _a.onChange, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.variant, variant = _e === void 0 ? 'normal' : _e;
+    var _b = _a.optionsGroup, optionsGroup = _b === void 0 ? [] : _b, _c = _a.buttonsGroup, buttonsGroup = _c === void 0 ? [] : _c, value = _a.value, onChange = _a.onChange, _d = _a.loading, loading = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.variant, variant = _f === void 0 ? 'normal' : _f;
     var styles = useStyles();
     var handleChange = function (e) {
         var value = e.target.value;
@@ -60,14 +61,14 @@ export var ModeSwitcherSelect = function (_a) {
                         React.createElement(Typography, { className: styles.menuItemDescription }, description)))));
         });
     };
-    return (React.createElement(Select, { classes: {
+    return (React.createElement(Select, { className: styles.select, classes: {
             select: classnames(styles.root, styles[variant]),
             icon: classnames(styles.arrowIcon, styles[variant]),
             outlined: styles.outlined
         }, value: value, onChange: handleChange, variant: "outlined", renderValue: function (value) {
             var _a = optionsGroup.find(propEq('value', value)) || {}, IconComponent = _a.icon, _b = _a.label, label = _b === void 0 ? value : _b;
             return (React.createElement(Box, { className: styles.currentValue },
-                IconComponent && React.createElement(IconComponent, { className: styles.currentValueIcon }),
+                loading ? (React.createElement(CircularProgress, { size: "1em", "data-reltio-id": "mode-loading-spinner", className: styles.currentValueIcon })) : (IconComponent && React.createElement(IconComponent, { className: styles.currentValueIcon })),
                 React.createElement(Tooltip, { title: label },
                     React.createElement(Typography, { className: styles.currentValueText }, label))));
         }, MenuProps: {