[MM57343] Add unit tests to Team Groups Management Modal (#28272)

* added basic unit tests for team_groups_manage_modal

* removed errorenously added getIntlMock from test_helpers

* added additional general tests

* updated test suite

* updated snapshot update using jest

* fixed minor linting problems

* fixed unintended snapshot changes

* modified test case to wait for element removal

webapp/channels/src/components/confirm_modal.tsx

@@ -156,6 +156,7 @@ export default class ConfirmModal extends React.Component<Props, State> {
             cancelButton = (
                 <button
                     type='button'
+                    data-testid='cancel-button'
                     className='btn btn-tertiary'
                     onClick={this.handleCancel}
                     id='cancelModalButton'
@@ -177,6 +178,7 @@ export default class ConfirmModal extends React.Component<Props, State> {
                 aria-modal={true}
                 aria-labelledby='confirmModalLabel'
                 aria-describedby='confirmModalBody'
+                data-testid={this.props.id}
             >
                 <Modal.Header closeButton={true}>
                     <Modal.Title

webapp/channels/src/components/team_groups_manage_modal/team_groups_manage_modal.test.tsx

@@ -0,0 +1,55 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {waitForElementToBeRemoved} from '@testing-library/react';
+import React from 'react';
+
+import TeamGroupsManageModal from 'components/team_groups_manage_modal/team_groups_manage_modal';
+
+import {renderWithContext, userEvent} from 'tests/react_testing_utils';
+import {TestHelper} from 'utils/test_helper';
+
+describe('components/TeamGroupsManageModal', () => {
+    const team = TestHelper.getTeamMock({type: 'O', allowed_domains: '', allow_open_invite: false, scheme_id: undefined});
+    const group = TestHelper.getGroupMock({id: 'group1', display_name: 'group1'});
+    const actions = {
+        getGroupsAssociatedToTeam: jest.fn().mockResolvedValue({data: {groups: [group], totalGroupCount: 1}}),
+        closeModal: jest.fn(),
+        openModal: jest.fn(),
+        unlinkGroupSyncable: jest.fn().mockResolvedValue({data: []}),
+        patchGroupSyncable: jest.fn().mockResolvedValue({data: []}),
+        getMyTeamMembers: jest.fn(),
+    };
+
+    const baseProps = {
+        intl: {
+            formatMessage: jest.fn(),
+        },
+        team,
+        actions,
+    };
+
+    test('should show confirm modal when remove-group button is clicked', async () => {
+        const wrapper = renderWithContext(<TeamGroupsManageModal {...baseProps}/>);
+        expect(await wrapper.findByTestId('group-name')).toBeInTheDocument();
+        userEvent.click(wrapper.getByTestId('menu-button'));
+        userEvent.click(wrapper.getByTestId('remove-group-button'));
+        expect(wrapper.getByTestId('confirm-modal')).toBeInTheDocument();
+    });
+
+    test('should call loadItems on render', async () => {
+        renderWithContext(<TeamGroupsManageModal {...baseProps}/>);
+        expect(actions.getGroupsAssociatedToTeam).toHaveBeenCalledTimes(1);
+    });
+
+    test('should hide confirm modal when cancel button is clicked', async () => {
+        const wrapper = renderWithContext(<TeamGroupsManageModal {...baseProps}/>);
+        await wrapper.findByTestId('group-name');
+        userEvent.click(wrapper.getByTestId('menu-button'));
+        userEvent.click(wrapper.getByTestId('remove-group-button'));
+        expect(wrapper.getByTestId('confirm-modal')).toBeInTheDocument();
+        userEvent.click(wrapper.getByTestId('cancel-button'));
+        await waitForElementToBeRemoved(() => wrapper.queryByTestId('confirm-modal'));
+        expect(wrapper.queryByTestId('confirm-modal')).toBeNull();
+    });
+});

webapp/channels/src/components/team_groups_manage_modal/team_groups_manage_modal.tsx

@@ -129,7 +129,10 @@ class TeamGroupsManageModal extends React.PureComponent<Props, State> {
                     height='32'
                 />
                 <div className='more-modal__details'>
-                    <div className='more-modal__name'>{item.display_name} <Nbsp/> {'-'} <Nbsp/>
+                    <div
+                        className='more-modal__name'
+                        data-testid='group-name'
+                    >{item.display_name} <Nbsp/> {'-'} <Nbsp/>
                         <span className='more-modal__name_count'>
                             <FormattedMessage
                                 id='numMembers'
@@ -148,6 +151,7 @@ class TeamGroupsManageModal extends React.PureComponent<Props, State> {
                             className='dropdown-toggle theme color--link style--none'
                             type='button'
                             aria-expanded='true'
+                            data-testid='menu-button'
                         >
                             <span>{title} </span>
                             <DropdownIcon/>
@@ -167,6 +171,7 @@ class TeamGroupsManageModal extends React.PureComponent<Props, State> {
                                 text={Utils.localizeMessage({id: 'team_members_dropdown.makeTeamMembers', defaultMessage: 'Make Team Members'})}
                             />
                             <Menu.ItemAction
+                                id='remove-group'
                                 onClick={() => this.onClickRemoveGroup(item, listModal)}
                                 text={Utils.localizeMessage({id: 'group_list_modal.removeGroupButton', defaultMessage: 'Remove Group'})}
                             />
@@ -191,6 +196,7 @@ class TeamGroupsManageModal extends React.PureComponent<Props, State> {
                     onHide={this.onHide}
                     titleBarButtonText={formatMessage({id: 'group_list_modal.addGroupButton', defaultMessage: 'Add Groups'})}
                     titleBarButtonOnClick={this.titleButtonOnClick}
+                    data-testid='list-modal'
                 />
                 <ConfirmModal
                     show={this.state.showConfirmModal}
@@ -199,6 +205,7 @@ class TeamGroupsManageModal extends React.PureComponent<Props, State> {
                     confirmButtonText={formatMessage({id: 'remove_group_confirm_button', defaultMessage: 'Yes, Remove Group and {memberCount, plural, one {Member} other {Members}}'}, {memberCount})}
                     onConfirm={this.handleDeleteConfirmed}
                     onCancel={this.handleDeleteCanceled}
+                    id='confirm-modal'
                 />
             </>
         );

webapp/channels/src/components/widgets/menu/menu_items/menu_item.test.tsx

@@ -35,6 +35,7 @@ describe('components/MenuItem', () => {
             >
               <Component
                 ariaLabel="test-text"
+                id="test-id-button"
                 otherProp="extra-prop"
                 text={
                   <React.Fragment>
@@ -62,6 +63,7 @@ describe('components/MenuItem', () => {
             >
               <Component
                 ariaLabel="test-text"
+                id="test-id-button"
                 otherProp="extra-prop"
                 text="test-text"
               />

webapp/channels/src/components/widgets/menu/menu_items/menu_item.tsx

@@ -50,6 +50,7 @@ export default function menuItem(Component: React.ComponentType<any>) {
                     <Component
                         text={textProp}
                         ariaLabel={text?.toString()}
+                        id={id + '-button'}
                         {...props}
                     />
                 </li>