diff --git a/webapp/channels/src/components/channel_invite_modal/group_option/__snapshots__/group_option.test.tsx.snap b/webapp/channels/src/components/channel_invite_modal/group_option/__snapshots__/group_option.test.tsx.snap new file mode 100644 index 0000000000..5aebc10803 --- /dev/null +++ b/webapp/channels/src/components/channel_invite_modal/group_option/__snapshots__/group_option.test.tsx.snap @@ -0,0 +1,190 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`GroupOption should match snapshot 1`] = ` +Object { + "asFragment": [Function], + "baseElement": +
+
+ + + + + +
+
+ + Group Name + + + @ + groupname + + + Add 2 people + + + + +
+
+
+
+ , + "container":
+
+ + + + + +
+
+ + Group Name + + + @ + groupname + + + Add 2 people + + + + +
+
+
+
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "replaceStoreState": [Function], + "rerender": [Function], + "unmount": [Function], + "updateStoreState": [Function], +} +`; diff --git a/webapp/channels/src/components/channel_invite_modal/group_option/group_option.test.tsx b/webapp/channels/src/components/channel_invite_modal/group_option/group_option.test.tsx new file mode 100644 index 0000000000..9cc4e01358 --- /dev/null +++ b/webapp/channels/src/components/channel_invite_modal/group_option/group_option.test.tsx @@ -0,0 +1,86 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react'; + +import type {Group} from '@mattermost/types/groups'; + +import type {Value} from 'components/multiselect/multiselect'; + +import {renderWithContext, waitFor} from 'tests/react_testing_utils'; + +import GroupOption from './group_option'; +import type{Props} from './group_option'; + +const mockGroup = { + id: 'group-id', + display_name: 'Group Name', + name: 'groupname', + member_ids: ['user1', 'user2'], + member_count: 2, +} as Group&Value; + +describe('GroupOption', () => { + const props: Props = { + group: mockGroup, + isSelected: false, + rowSelected: '', + selectedItemRef: React.createRef(), + onMouseMove: jest.fn(), + addUserProfile: jest.fn(), + }; + + test('should match snapshot', () => { + const wrapper = renderWithContext( + , + ); + expect(wrapper).toMatchSnapshot(); + }); + + it('should cleanup keydown event listener on unmount', () => { + const addUserProfileMock = jest.fn(); + const wrapper = renderWithContext( + {}} + addUserProfile={addUserProfileMock} + />, + ); + wrapper.unmount(); + const event = new KeyboardEvent('keydown', {key: 'Enter'}); + document.dispatchEvent(event); + expect(addUserProfileMock).not.toHaveBeenCalled(); + }); + + it('should cleanup keydown event listener on unmount and dispatch event correctly before unmount', () => { + const addUserProfileMock = jest.fn(); + props.isSelected = true; + + const wrapper = renderWithContext( + , + ); + + const event = new KeyboardEvent('keydown', {key: 'Enter'}); + document.dispatchEvent(event); + + waitFor(() => { + expect(addUserProfileMock).toHaveBeenCalled(); + }); + + wrapper.unmount(); + + document.dispatchEvent(event); + + waitFor(() => { + expect(addUserProfileMock).toHaveBeenCalledTimes(1); + }); + }); +}); diff --git a/webapp/channels/src/components/channel_invite_modal/group_option/group_option.tsx b/webapp/channels/src/components/channel_invite_modal/group_option/group_option.tsx index ef6b6ae308..ec382a69d5 100644 --- a/webapp/channels/src/components/channel_invite_modal/group_option/group_option.tsx +++ b/webapp/channels/src/components/channel_invite_modal/group_option/group_option.tsx @@ -13,7 +13,7 @@ import type {UserProfile} from '@mattermost/types/users'; import {getUser, makeDisplayNameGetter, makeGetProfilesByIdsAndUsernames} from 'mattermost-redux/selectors/entities/users'; import type {Value} from 'components/multiselect/multiselect'; -import SimpleTooltip from 'components/widgets/simple_tooltip'; +import WithTooltip from 'components/with_tooltip'; import Constants from 'utils/constants'; @@ -99,9 +99,10 @@ const GroupOption = (props: Props) => { > {'@'}{group.name} - { color={'var(--link-color)'} /> - +