@reltio/components 1.4.1906 → 1.4.1907

package/esm/CollaborationItem/components/SendMessageArea/SendMessageArea.test.js

@@ -46,202 +46,262 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import React from 'react';
-import { mount } from 'enzyme';
-import { act } from 'react-dom/test-utils';
+import { CollaborationObjectTypes } from '@reltio/mdm-sdk';
 import { MdmModuleProvider } from '../../../contexts/MdmModuleContext';
 import { CollaborationContext } from '../../../contexts/CollaborationContext';
-import { TextFieldWithMentions } from '../TextFieldWithMentions';
-import { Avatar } from '../Avatar';
 import { SendMessageArea } from './SendMessageArea';
-var createProps = function (comment, extraProps) {
-    if (extraProps === void 0) { extraProps = {}; }
-    return __assign(__assign({ comment: comment, inputRef: React.createRef() }, extraProps), { objectType: 'objectType', uri: 'uri', relatedObjectUris: ['entities/13JKIKAz'], className: 'root' });
-};
-var createReply = jest.fn().mockReturnValue(new Promise(function (res) { return res(); }));
-var createComment = jest.fn().mockReturnValue(new Promise(function (res) { return res(); }));
-var editCommentWithResolve = jest.fn().mockReturnValue(new Promise(function (res) { return res(); }));
-var editReply = jest.fn().mockReturnValue(new Promise(function (res) { return res(); }));
-var defaultGetCommentState = jest.fn().mockImplementation(function () { return ({}); });
-var clearCommentState = jest.fn();
-var updateCommentState = jest.fn();
-var createCommentObject = function (_a) {
-    var _b = _a === void 0 ? {} : _a, status = _b.status;
-    return {
-        commentId: 'commentId',
-        status: status
+import userEvent from '@testing-library/user-event';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { identity } from 'ramda';
+describe('SendMessageArea tests', function () {
+    var mdmValues = {
+        user: {
+            username: 'egor.ivanov'
+        }
     };
-};
-var collaborationContextValue;
-var mockCollaborationContext = function (_a) {
-    var _b = _a === void 0 ? {} : _a, _c = _b.sending, sending = _c === void 0 ? false : _c, _d = _b.editComment, editComment = _d === void 0 ? editCommentWithResolve : _d, _e = _b.getCommentState, getCommentState = _e === void 0 ? defaultGetCommentState : _e;
-    collaborationContextValue = {
-        createReply: createReply,
-        createComment: createComment,
-        editComment: editComment,
-        editReply: editReply,
-        getCommentState: getCommentState,
-        clearCommentState: clearCommentState,
-        updateCommentState: updateCommentState,
-        sending: sending
+    var createCommentObject = function (commentObject) {
+        if (commentObject === void 0) { commentObject = {}; }
+        return __assign({ selfLink: 'selfLink', commentId: 'commentId', createdBy: 'created by user', createdTime: 1, modifiedTime: 2, deleted: false, visibility: 'visible', objectId: 'id1', objectType: CollaborationObjectTypes.ENTITY, permanentLink: 'permanentLink', content: 'commentContent', namedUsers: ['user1'], replies: [], relatedObjectUris: ['uri1'], status: 'open' }, commentObject);
+    };
+    var createCollaborationContext = function (props) {
+        if (props === void 0) { props = {}; }
+        return __assign({ comments: [], commentsMap: null, currentComment: null, getComment: identity, getComments: function () { return new Promise(identity); }, getCommentsCount: identity, resolveThread: identity, reOpenThread: identity, clearCurrentComment: identity, deleteComment: identity, sending: false, loading: false, pageToken: null, deleteReply: identity, createReply: function () { return new Promise(function (res) { return res(); }); }, createComment: function () { return new Promise(function (res) { return res(); }); }, editComment: function () { return new Promise(function (res) { return res(); }); }, editReply: function () { return new Promise(function (res) { return res(); }); }, getCommentState: function () { return ({}); }, clearCommentState: function () { }, updateCommentState: function () { } }, props);
+    };
+    var createProps = function (comment, extraProps) {
+        if (extraProps === void 0) { extraProps = {}; }
+        return __assign(__assign({ comment: comment, inputRef: React.createRef() }, extraProps), { objectType: CollaborationObjectTypes.ENTITY, uri: 'uri', relatedObjectUris: ['entities/13JKIKAz'], className: 'root' });
+    };
+    var setUp = function (_a) {
+        var props = _a.props, _b = _a.collaborationContextValue, collaborationContextValue = _b === void 0 ? createCollaborationContext() : _b;
+        var Providers = function (_a) {
+            var children = _a.children;
+            return (React.createElement(CollaborationContext.Provider, { value: collaborationContextValue },
+                React.createElement(MdmModuleProvider, { values: mdmValues }, children)));
+        };
+        var user = userEvent.setup();
+        return __assign({ user: user }, render(React.createElement(SendMessageArea, __assign({}, props)), { wrapper: Providers }));
     };
-};
-var user = {
-    username: 'egor.ivanov'
-};
-var setUp = function (props) {
-    return mount(React.createElement(CollaborationContext.Provider, { value: collaborationContextValue },
-        React.createElement(MdmModuleProvider, { values: { user: user } },
-            React.createElement(SendMessageArea, __assign({}, props)))));
-};
-describe('SendMessageArea tests', function () {
-    afterEach(function () {
-        jest.clearAllMocks();
-    });
     it('should render avatar correctly', function () {
-        mockCollaborationContext();
-        var component = setUp(createProps(createCommentObject({ status: 'open' })));
-        expect(component.find(Avatar)).toHaveLength(1);
-        expect(component.find(Avatar).prop('children')).toBe('egor.ivanov');
+        setUp({
+            props: createProps(createCommentObject({ status: 'open' }))
+        });
+        expect(screen.queryByText('EI')).toBeInTheDocument();
     });
     it('should render input correctly if status is "open"', function () {
-        mockCollaborationContext();
-        var component = setUp(createProps(createCommentObject({ status: 'open' })));
-        expect(component.find(TextFieldWithMentions)).toHaveLength(1);
-        expect(component.find(TextFieldWithMentions).prop('placeholder')).toBe('Reply...');
+        setUp({
+            props: createProps(createCommentObject({ status: 'open' }))
+        });
+        expect(screen.queryByPlaceholderText('Reply...')).toBeInTheDocument();
     });
     it('should render input correctly if status is "resolved"', function () {
-        mockCollaborationContext();
-        var component = setUp(createProps(createCommentObject({ status: 'resolved' })));
-        expect(component.find(TextFieldWithMentions)).toHaveLength(1);
-        expect(component.find(TextFieldWithMentions).prop('placeholder')).toBe('Adding a comment will re-open this');
+        setUp({
+            props: createProps(createCommentObject({ status: 'resolved' }))
+        });
+        expect(screen.queryByPlaceholderText('Adding a comment will re-open this')).toBeInTheDocument();
     });
     it('should render input correctly if status is undefined', function () {
-        mockCollaborationContext();
-        var component = setUp(createProps());
-        expect(component.find(TextFieldWithMentions)).toHaveLength(1);
-        expect(component.find(TextFieldWithMentions).prop('placeholder')).toBe('');
-    });
-    it('should render Reply button correctly if status is "open"', function () {
-        mockCollaborationContext();
-        var component = setUp(createProps(createCommentObject({ status: 'open' })));
-        component.find(TextFieldWithMentions).find('textarea').simulate('focus');
-        var buttons = component.find('.buttons').last();
-        expect(buttons.childAt(0).text()).toBe('Reply');
-    });
-    it('should render Reply button correctly if status is "resolved"', function () {
-        mockCollaborationContext();
-        var component = setUp(createProps(createCommentObject({ status: 'resolved' })));
-        component.find(TextFieldWithMentions).find('textarea').simulate('focus');
-        var buttons = component.find('.buttons').last();
-        expect(buttons.childAt(0).text()).toBe('Reply');
-    });
-    it('should render Comment button correctly if comment is undefined', function () {
-        mockCollaborationContext();
-        var component = setUp(createProps());
-        component.find(TextFieldWithMentions).find('textarea').simulate('focus');
-        var buttons = component.find('.buttons').last();
-        expect(buttons.childAt(0).text()).toBe('Comment');
+        setUp({
+            props: createProps()
+        });
+        expect(screen.getByRole('textbox')).toHaveAttribute('placeholder', '');
     });
+    it('should render Reply button correctly if status is "open"', 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: createProps(createCommentObject({ status: 'open' }))
+                    }).user;
+                    return [4 /*yield*/, user.click(screen.getByRole('textbox'))];
+                case 1:
+                    _a.sent();
+                    expect(screen.getByRole('button', { name: 'Reply' })).toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should render Reply button correctly if status is "resolved"', 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: createProps(createCommentObject({ status: 'resolved' }))
+                    }).user;
+                    return [4 /*yield*/, user.click(screen.getByRole('textbox'))];
+                case 1:
+                    _a.sent();
+                    expect(screen.getByRole('button', { name: 'Reply' })).toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should render Comment button correctly if comment is undefined', 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: createProps()
+                    }).user;
+                    return [4 /*yield*/, user.click(screen.getByRole('textbox'))];
+                case 1:
+                    _a.sent();
+                    expect(screen.getByRole('button', { name: 'Comment' })).toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
     it('should render buttons if value is not empty string', function () {
         var getCommentState = jest.fn().mockImplementation(function () { return ({
             value: 'value',
             plainTextValue: 'value',
             mentions: []
         }); });
-        mockCollaborationContext({ getCommentState: getCommentState });
-        var component = setUp(createProps(createCommentObject({ status: 'open' })));
-        expect(component.find('.buttons').length).toBeTruthy();
-    });
-    it('should render buttons if input is focused', function () {
-        mockCollaborationContext();
-        var component = setUp(createProps(createCommentObject({ status: 'open' })));
-        expect(component.find('.buttons')).toHaveLength(0);
-        component.find(TextFieldWithMentions).find('textarea').simulate('focus');
-        expect(component.find('.buttons').length).toBeTruthy();
-        component.find(TextFieldWithMentions).find('textarea').simulate('blur');
-        expect(component.find('.buttons')).toHaveLength(0);
-    });
-    it('should disable Reply or Comment button if value is empty', function () {
-        var getCommentState = jest.fn().mockImplementation(function () { return ({
-            value: 'value',
-            plainTextValue: 'value',
-            mentions: []
-        }); });
-        mockCollaborationContext({ getCommentState: getCommentState });
-        var component = setUp(createProps(createCommentObject({ status: 'open' })));
-        component.find(TextFieldWithMentions).find('textarea').simulate('focus');
-        var buttons = component.find('.buttons').last();
-        expect(buttons.childAt(0).prop('disabled')).toBe(false);
-    });
-    it('should disable Cancel button if loading is "true"', function () {
-        mockCollaborationContext({ sending: true });
-        var component = setUp(createProps(createCommentObject({ status: 'open' })));
-        component.find(TextFieldWithMentions).find('textarea').simulate('focus');
-        var buttons = component.find('.buttons').last();
-        expect(buttons.childAt(1).prop('disabled')).toBe(true);
+        setUp({
+            props: createProps(),
+            collaborationContextValue: createCollaborationContext({ getCommentState: getCommentState })
+        });
+        expect(screen.queryAllByRole('button')).toHaveLength(2);
     });
-    it('should disable Reply or Comment button if loading is "true"', function () {
-        mockCollaborationContext({ sending: true });
-        var component = setUp(createProps(createCommentObject({ status: 'open' })));
-        component.find(TextFieldWithMentions).find('textarea').simulate('focus');
-        var buttons = component.find('.buttons').last();
-        expect(buttons.childAt(0).prop('disabled')).toBe(true);
+    it('should render buttons if input is focused', 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: createProps(createCommentObject({ status: 'open' }))
+                    }).user;
+                    return [4 /*yield*/, user.click(screen.getByRole('textbox'))];
+                case 1:
+                    _a.sent();
+                    expect(screen.queryAllByRole('button')).toHaveLength(2);
+                    return [4 /*yield*/, userEvent.tab()];
+                case 2:
+                    _a.sent();
+                    expect(screen.queryAllByRole('button')).toHaveLength(0);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should disable Reply or Comment button if value is empty', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var getCommentState, user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    getCommentState = jest.fn().mockImplementation(function () { return ({
+                        value: '',
+                        plainTextValue: '',
+                        mentions: []
+                    }); });
+                    user = setUp({
+                        props: createProps(createCommentObject({ status: 'open' })),
+                        collaborationContextValue: createCollaborationContext({ getCommentState: getCommentState })
+                    }).user;
+                    return [4 /*yield*/, user.click(screen.getByRole('textbox'))];
+                case 1:
+                    _a.sent();
+                    expect(screen.queryByRole('button', { name: 'Reply' })).toBeDisabled();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should disable Cancel button if sending is "true"', function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            setUp({
+                props: createProps(createCommentObject({ status: 'open' })),
+                collaborationContextValue: createCollaborationContext({ sending: true })
+            });
+            fireEvent.focus(screen.getByRole('textbox'));
+            expect(screen.queryByRole('button', { name: 'Cancel' })).toBeDisabled();
+            return [2 /*return*/];
+        });
+    }); });
+    it('should disable Reply or Comment button if sending is "true"', function () {
+        setUp({
+            props: createProps(createCommentObject({ status: 'open' })),
+            collaborationContextValue: createCollaborationContext({ sending: true })
+        });
+        fireEvent.focus(screen.getByRole('textbox'));
+        expect(screen.queryByRole('button', { name: 'Reply' })).toBeDisabled();
     });
     it('should pass correct default value to TextFieldWithMentions if isEditingComment equals true', function () {
-        mockCollaborationContext();
         var comment = {
             content: 'Hello +denis',
-            namedUsers: ['denis'],
-            commentId: 'commentId',
-            status: 'open'
+            namedUsers: ['denis']
         };
-        var component = setUp(createProps(comment, { isEditingComment: true }));
-        expect(component.find(TextFieldWithMentions).prop('value')).toBe('Hello @[denis](denis)');
+        setUp({
+            props: createProps(createCommentObject(comment), { isEditingComment: true })
+        });
+        expect(screen.getByPlaceholderText('Reply...')).toHaveTextContent('Hello +denis');
     });
     it('should pass correct default value to TextFieldWithMentions if isEditingReply equals true', function () {
-        mockCollaborationContext();
         var reply = {
             content: 'Hello +ainsteisha',
             namedUsers: ['ainsteisha'],
             replyId: 'replyId'
         };
-        var component = setUp(createProps(createCommentObject(), { isEditingReply: true, reply: reply }));
-        expect(component.find(TextFieldWithMentions).prop('value')).toBe('Hello @[ainsteisha](ainsteisha)');
+        setUp({
+            props: createProps(createCommentObject(), { isEditingReply: true, reply: reply })
+        });
+        expect(screen.getByPlaceholderText('Reply...')).toHaveTextContent('Hello +ainsteisha');
     });
     it('should pass correct default value to TextFieldWithMentions if isEditingReply and isEditingComment equals false', function () {
-        mockCollaborationContext();
-        var component = setUp(createProps(createCommentObject()));
-        expect(component.find(TextFieldWithMentions).prop('value')).toBe('');
-    });
-    it('handleChange handler should work correctly', function () {
-        mockCollaborationContext();
-        var component = setUp(createProps());
-        var onChange = component.find(TextFieldWithMentions).prop('onChange');
-        var value = 'Hello @[+vyacheslav](vyacheslav)';
-        var plainTextValue = 'Hello +vyacheslav';
-        var mentions = ['vyacheslav'];
-        act(function () {
-            onChange === null || onChange === void 0 ? void 0 : onChange(value, plainTextValue, mentions);
+        setUp({
+            props: createProps(createCommentObject())
         });
-        expect(updateCommentState).toHaveBeenCalledWith('uri', 'comment/new', { value: value, plainTextValue: plainTextValue, mentions: mentions });
+        expect(screen.getByPlaceholderText('Reply...')).toHaveTextContent('');
     });
+    it('handleChange handler should work correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var value, plainTextValue, mentions, getCommentState, updateCommentState, user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    value = 'Hello @[vyacheslav](vyacheslav)';
+                    plainTextValue = 'Hello +vyacheslav';
+                    mentions = ['vyacheslav'];
+                    getCommentState = jest.fn().mockImplementation(function () { return ({
+                        value: value,
+                        plainTextValue: plainTextValue,
+                        mentions: mentions
+                    }); });
+                    updateCommentState = jest.fn();
+                    user = setUp({
+                        props: createProps(),
+                        collaborationContextValue: createCollaborationContext({ getCommentState: getCommentState, updateCommentState: updateCommentState })
+                    }).user;
+                    return [4 /*yield*/, user.type(screen.getByRole('textbox'), ' ')];
+                case 1:
+                    _a.sent();
+                    expect(updateCommentState).toHaveBeenCalledWith('uri', 'comment/new', {
+                        value: "".concat(value, " "),
+                        plainTextValue: "".concat(plainTextValue, " "),
+                        mentions: mentions
+                    });
+                    return [2 /*return*/];
+            }
+        });
+    }); });
     it('handleSubmit handler should work correctly if comment exists and last status is "open"', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var getCommentState, component, buttons, preventDefault;
+        var getCommentState, clearCommentState, createReply, user;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     getCommentState = jest.fn().mockImplementation(function () { return ({
-                        value: 'Hello @[+vyacheslav](vyacheslav)',
+                        value: 'Hello @[vyacheslav](vyacheslav)',
                         plainTextValue: 'Hello +vyacheslav',
                         mentions: ['vyacheslav']
                     }); });
-                    mockCollaborationContext({ getCommentState: getCommentState });
-                    component = setUp(createProps(createCommentObject({ status: 'open' })));
-                    buttons = component.find('.buttons').last();
-                    buttons.childAt(0).find('button').simulate('click');
-                    preventDefault = jest.fn();
-                    component.find('.form').simulate('submit', { preventDefault: preventDefault });
-                    expect(preventDefault).toHaveBeenCalled();
+                    clearCommentState = jest.fn();
+                    createReply = jest.fn().mockReturnValue(new Promise(function (res) { return res(); }));
+                    user = setUp({
+                        props: createProps(createCommentObject({ status: 'open' })),
+                        collaborationContextValue: createCollaborationContext({ getCommentState: getCommentState, createReply: createReply, clearCommentState: clearCommentState })
+                    }).user;
+                    return [4 /*yield*/, user.click(screen.getByRole('button', { name: 'Reply' }))];
+                case 1:
+                    _a.sent();
                     expect(createReply).toHaveBeenCalledWith({
                         content: 'Hello +vyacheslav',
                         namedUsers: ['vyacheslav'],
@@ -249,36 +309,30 @@ describe('SendMessageArea tests', function () {
                         action: 'none',
                         uri: 'uri'
                     });
-                    return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
-                            return __generator(this, function (_a) {
-                                component.update();
-                                return [2 /*return*/];
-                            });
-                        }); })];
-                case 1:
-                    _a.sent();
                     expect(clearCommentState).toHaveBeenCalledWith('uri', 'comment/commentId/reply/new');
                     return [2 /*return*/];
             }
         });
     }); });
     it('handleSubmit handler should work correctly if comment exists and last status is "resolved"', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var getCommentState, component, buttons, preventDefault;
+        var getCommentState, createReply, clearCommentState, user;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     getCommentState = jest.fn().mockImplementation(function () { return ({
-                        value: 'Hello @[+vyacheslav](vyacheslav)',
+                        value: 'Hello @[vyacheslav](vyacheslav)',
                         plainTextValue: 'Hello +vyacheslav',
                         mentions: ['vyacheslav']
                     }); });
-                    mockCollaborationContext({ getCommentState: getCommentState });
-                    component = setUp(createProps(createCommentObject({ status: 'resolved' })));
-                    buttons = component.find('.buttons').last();
-                    buttons.childAt(0).find('button').simulate('click');
-                    preventDefault = jest.fn();
-                    component.find('.form').simulate('submit', { preventDefault: preventDefault });
-                    expect(preventDefault).toHaveBeenCalled();
+                    createReply = jest.fn().mockReturnValue(new Promise(function (res) { return res(); }));
+                    clearCommentState = jest.fn();
+                    user = setUp({
+                        props: createProps(createCommentObject({ status: 'resolved' })),
+                        collaborationContextValue: createCollaborationContext({ getCommentState: getCommentState, createReply: createReply, clearCommentState: clearCommentState })
+                    }).user;
+                    return [4 /*yield*/, user.click(screen.getByRole('button', { name: 'Reply' }))];
+                case 1:
+                    _a.sent();
                     expect(createReply).toHaveBeenCalledWith({
                         content: 'Hello +vyacheslav',
                         namedUsers: ['vyacheslav'],
@@ -286,99 +340,86 @@ describe('SendMessageArea tests', function () {
                         action: 'reopen',
                         uri: 'uri'
                     });
-                    return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
-                            return __generator(this, function (_a) {
-                                component.update();
-                                return [2 /*return*/];
-                            });
-                        }); })];
-                case 1:
-                    _a.sent();
                     expect(clearCommentState).toHaveBeenCalledWith('uri', 'comment/commentId/reply/new');
                     return [2 /*return*/];
             }
         });
     }); });
     it('handleSubmit handler should work correctly if comment does not exist', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var getCommentState, component, buttons, preventDefault;
+        var getCommentState, clearCommentState, createComment, user;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     getCommentState = jest.fn().mockImplementation(function () { return ({
-                        value: 'Hello @[+vyacheslav](vyacheslav)',
+                        value: 'Hello @[vyacheslav](vyacheslav)',
                         plainTextValue: 'Hello +vyacheslav',
                         mentions: ['vyacheslav']
                     }); });
-                    mockCollaborationContext({ getCommentState: getCommentState });
-                    component = setUp(createProps());
-                    buttons = component.find('.buttons').last();
-                    buttons.childAt(0).find('button').simulate('click');
-                    preventDefault = jest.fn();
-                    component.find('.form').simulate('submit', { preventDefault: preventDefault });
-                    expect(preventDefault).toHaveBeenCalled();
+                    clearCommentState = jest.fn();
+                    createComment = jest.fn().mockReturnValue(new Promise(function (res) { return res(); }));
+                    user = setUp({
+                        props: createProps(),
+                        collaborationContextValue: createCollaborationContext({ getCommentState: getCommentState, createComment: createComment, clearCommentState: clearCommentState })
+                    }).user;
+                    return [4 /*yield*/, user.click(screen.getByRole('button', { name: 'Comment' }))];
+                case 1:
+                    _a.sent();
                     expect(createComment).toHaveBeenCalledWith({
                         content: 'Hello +vyacheslav',
                         namedUsers: ['vyacheslav'],
-                        objectType: 'objectType',
+                        objectType: 'entity',
                         uri: 'uri',
                         relatedObjectUris: ['entities/13JKIKAz']
                     });
-                    return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
-                            return __generator(this, function (_a) {
-                                component.update();
-                                return [2 /*return*/];
-                            });
-                        }); })];
+                    expect(clearCommentState).toHaveBeenCalledWith('uri', 'comment/new');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should render Edit button if isEditingComment prop is 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: createProps(createCommentObject({ status: 'resolved' }), { isEditingComment: true })
+                    }).user;
+                    return [4 /*yield*/, user.click(screen.getByRole('textbox'))];
                 case 1:
                     _a.sent();
-                    expect(clearCommentState).toHaveBeenCalledWith('uri', 'comment/new');
+                    expect(screen.queryByRole('button', { name: 'Edit' })).toBeInTheDocument();
                     return [2 /*return*/];
             }
         });
     }); });
-    it('should render Edit button if isEditingComment prop is true', function () {
-        mockCollaborationContext();
-        var component = setUp(createProps(createCommentObject({ status: 'resolved' }), { isEditingComment: true }));
-        component.find(TextFieldWithMentions).find('textarea').simulate('focus');
-        var buttons = component.find('.buttons').last();
-        expect(buttons.childAt(0).text()).toBe('Edit');
-    });
     it('submitting should work correctly if comment is editing', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var onCancel, comment, component, buttons, preventDefault;
+        var onCancel, editComment, clearCommentState, comment, user;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    mockCollaborationContext();
                     onCancel = jest.fn();
+                    editComment = jest.fn().mockReturnValue(new Promise(function (res) { return res(); }));
+                    clearCommentState = jest.fn();
                     comment = {
                         content: 'Hello +denis',
-                        namedUsers: ['denis'],
-                        commentId: 'commentId',
-                        status: 'open'
+                        namedUsers: ['denis']
                     };
-                    component = setUp(createProps(comment, { isEditingComment: true, onCancel: onCancel }));
-                    buttons = component.find('.buttons').last();
-                    buttons.childAt(0).find('button').simulate('click');
-                    preventDefault = jest.fn();
-                    component.find('.form').simulate('submit', { preventDefault: preventDefault });
-                    expect(preventDefault).toHaveBeenCalled();
-                    expect(editCommentWithResolve).toHaveBeenCalledWith({
+                    user = setUp({
+                        props: createProps(createCommentObject(comment), { isEditingComment: true, onCancel: onCancel }),
+                        collaborationContextValue: createCollaborationContext({ editComment: editComment, clearCommentState: clearCommentState })
+                    }).user;
+                    return [4 /*yield*/, user.click(screen.getByRole('button', { name: 'Edit' }))];
+                case 1:
+                    _a.sent();
+                    expect(editComment).toHaveBeenCalledWith({
                         content: 'Hello +denis',
                         namedUsers: ['denis'],
                         commentId: 'commentId',
                         uri: 'uri',
                         relatedObjectUris: ['entities/13JKIKAz'],
-                        replies: undefined,
-                        objectType: 'objectType'
+                        replies: [],
+                        objectType: 'entity'
                     });
-                    return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
-                            return __generator(this, function (_a) {
-                                component.update();
-                                return [2 /*return*/];
-                            });
-                        }); })];
-                case 1:
-                    _a.sent();
                     expect(clearCommentState).toHaveBeenCalledWith('uri', 'comment/commentId');
                     expect(onCancel).toHaveBeenCalledTimes(1);
                     return [2 /*return*/];
@@ -386,41 +427,35 @@ describe('SendMessageArea tests', function () {
         });
     }); });
     it('submitting should work correctly if reply is editing', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var onCancel, reply, component, buttons, preventDefault;
+        var onCancel, editReply, clearCommentState, reply, user;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    mockCollaborationContext();
                     onCancel = jest.fn();
+                    editReply = jest.fn().mockReturnValue(new Promise(function (res) { return res(); }));
+                    clearCommentState = jest.fn();
                     reply = {
                         content: 'Hello +ainsteisha',
                         namedUsers: ['ainsteisha'],
                         replyId: 'replyId'
                     };
-                    component = setUp(createProps(createCommentObject({ status: 'open' }), {
-                        isEditingReply: true,
-                        onCancel: onCancel,
-                        reply: reply
-                    }));
-                    buttons = component.find('.buttons').last();
-                    buttons.childAt(0).find('button').simulate('click');
-                    preventDefault = jest.fn();
-                    component.find('.form').simulate('submit', { preventDefault: preventDefault });
-                    expect(preventDefault).toHaveBeenCalled();
+                    user = setUp({
+                        props: createProps(createCommentObject(), {
+                            isEditingReply: true,
+                            onCancel: onCancel,
+                            reply: reply
+                        }),
+                        collaborationContextValue: createCollaborationContext({ editReply: editReply, clearCommentState: clearCommentState })
+                    }).user;
+                    return [4 /*yield*/, user.click(screen.getByRole('button', { name: 'Edit' }))];
+                case 1:
+                    _a.sent();
                     expect(editReply).toHaveBeenCalledWith({
                         content: reply.content,
                         namedUsers: reply.namedUsers,
                         commentId: 'commentId',
                         replyId: reply.replyId
                     });
-                    return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
-                            return __generator(this, function (_a) {
-                                component.update();
-                                return [2 /*return*/];
-                            });
-                        }); })];
-                case 1:
-                    _a.sent();
                     expect(clearCommentState).toHaveBeenCalledWith('uri', 'comment/commentId/reply/replyId');
                     expect(onCancel).toHaveBeenCalledTimes(1);
                     return [2 /*return*/];
@@ -428,30 +463,28 @@ describe('SendMessageArea tests', function () {
         });
     }); });
     it('if received error after send request, do not need to clear text input', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var editCommentWithReject, getCommentState, onCancel, component, buttons, preventDefault;
+        var editCommentWithReject, clearCommentState, getCommentState, onCancel, user;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     editCommentWithReject = jest.fn().mockRejectedValue('error');
+                    clearCommentState = jest.fn();
                     getCommentState = jest.fn().mockImplementation(function () { return ({
                         value: 'Hello @[+vyacheslav](vyacheslav)',
                         plainTextValue: 'Hello +vyacheslav',
                         mentions: ['vyacheslav']
                     }); });
-                    mockCollaborationContext({ sending: false, editComment: editCommentWithReject, getCommentState: getCommentState });
                     onCancel = jest.fn();
-                    component = setUp(createProps(createCommentObject({ status: 'open' }), { isEditingComment: true, onCancel: onCancel }));
-                    buttons = component.find('.buttons').last();
-                    buttons.childAt(0).find('button').simulate('click');
-                    preventDefault = jest.fn();
-                    component.find('.form').simulate('submit', { preventDefault: preventDefault });
-                    expect(preventDefault).toHaveBeenCalled();
-                    return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
-                            return __generator(this, function (_a) {
-                                component.update();
-                                return [2 /*return*/];
-                            });
-                        }); })];
+                    user = setUp({
+                        props: createProps(createCommentObject(), { isEditingComment: true, onCancel: onCancel }),
+                        collaborationContextValue: createCollaborationContext({
+                            sending: false,
+                            editComment: editCommentWithReject,
+                            getCommentState: getCommentState,
+                            clearCommentState: clearCommentState
+                        })
+                    }).user;
+                    return [4 /*yield*/, user.click(screen.getByRole('button', { name: 'Edit' }))];
                 case 1:
                     _a.sent();
                     expect(clearCommentState).not.toHaveBeenCalled();
@@ -460,13 +493,21 @@ describe('SendMessageArea tests', function () {
             }
         });
     }); });
-    it('should call onCancel if click cancel button', function () {
-        mockCollaborationContext();
-        var onCancel = jest.fn();
-        var component = setUp(createProps(createCommentObject({ status: 'open' }), { isEditingComment: true, onCancel: onCancel }));
-        component.find(TextFieldWithMentions).find('textarea').simulate('focus');
-        var buttons = component.find('.buttons').last();
-        buttons.childAt(1).find('button').simulate('click');
-        expect(onCancel).toHaveBeenCalledTimes(1);
-    });
+    it('should call onCancel if click cancel button', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onCancel, user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onCancel = jest.fn();
+                    user = setUp({
+                        props: createProps(createCommentObject(), { isEditingComment: true, onCancel: onCancel })
+                    }).user;
+                    return [4 /*yield*/, user.click(screen.getByRole('button', { name: 'Cancel' }))];
+                case 1:
+                    _a.sent();
+                    expect(onCancel).toHaveBeenCalledTimes(1);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
 });