[MM-53475] Migrate 'components/suggestion/emoticon_provider.test.jsx' to TypeScript (#25610)

webapp/channels/src/components/suggestion/emoticon_provider.test.tsx

@@ -1,6 +1,8 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import type {CustomEmoji, Emoji} from '@mattermost/types/emojis';
+
 import {getEmojiMap, getRecentEmojisNames} from 'selectors/emojis';
 
 import EmojiMap from 'utils/emoji_map';
@@ -15,11 +17,17 @@ jest.mock('selectors/emojis', () => ({
     getRecentEmojisNames: jest.fn(),
 }));
 
+const mockedGetEmojiMap = jest.mocked(getEmojiMap);
+const mockedGetRecentEmojisNames = jest.mocked(getRecentEmojisNames);
+
 describe('components/EmoticonProvider', () => {
     const resultsCallback = jest.fn();
     const emoticonProvider = new EmoticonProvider();
-    const customEmojis = new Map([
+    const customEmojis: Map<string, any> = new Map([
-        ['thumbsdown-custom', {name: 'thumbsdown-custom', category: 'custom'}],
+        [
+            'thumbsdown-custom',
+            {name: 'thumbsdown-custom', category: 'custom'},
+        ],
         ['thumbsup-custom', {name: 'thumbsup-custom', category: 'custom'}],
         ['lithuania-custom', {name: 'lithuania-custom', category: 'custom'}],
     ]);
@@ -34,8 +42,8 @@ describe('components/EmoticonProvider', () => {
     });
 
     it('should suggest emojis when partial name >= MIN_EMOTICON_LENGTH', () => {
-        getEmojiMap.mockReturnValue(emojiMap);
+        mockedGetEmojiMap.mockReturnValue(emojiMap);
-        getRecentEmojisNames.mockReturnValue([]);
+        mockedGetRecentEmojisNames.mockReturnValue([]);
 
         for (const i of [MIN_EMOTICON_LENGTH, MIN_EMOTICON_LENGTH + 1]) {
             const pretext = `:${'s'.repeat(i)}`;
@@ -48,14 +56,16 @@ describe('components/EmoticonProvider', () => {
     it('should order suggested emojis', () => {
         const pretext = ':thu';
         const recentEmojis = ['smile'];
-        getEmojiMap.mockReturnValue(emojiMap);
+        mockedGetEmojiMap.mockReturnValue(emojiMap);
-        getRecentEmojisNames.mockReturnValue(recentEmojis);
+        mockedGetRecentEmojisNames.mockReturnValue(recentEmojis);
 
         emoticonProvider.handlePretextChanged(pretext, resultsCallback);
         expect(resultsCallback).toHaveBeenCalled();
         const args = resultsCallback.mock.calls[0][0];
-        const results = args.items.filter((item) => item.name.indexOf('skin') === -1);
+        const results = args.items.filter(
-        expect(results.map((item) => item.name)).toEqual([
+            (item: Emoji) => item.name.indexOf('skin') === -1,
+        );
+        expect(results.map((item: Emoji) => item.name)).toEqual([
             'thumbsup', // thumbsup is a special case where it always appears before thumbsdown
             'thumbsdown',
             'thunder_cloud_and_rain',
@@ -70,8 +80,8 @@ describe('components/EmoticonProvider', () => {
         const pretext = ':supercalifragilisticexpialidocious';
         const recentEmojis = ['smile'];
 
-        getEmojiMap.mockReturnValue(emojiMap);
+        mockedGetEmojiMap.mockReturnValue(emojiMap);
-        getRecentEmojisNames.mockReturnValue(recentEmojis);
+        mockedGetRecentEmojisNames.mockReturnValue(recentEmojis);
 
         emoticonProvider.handlePretextChanged(pretext, resultsCallback);
         expect(resultsCallback).toHaveBeenCalled();
@@ -83,18 +93,23 @@ describe('components/EmoticonProvider', () => {
         const pretext = ':blocklisted';
         const recentEmojis = ['blocklisted-1'];
 
-        const blocklistedEmojis = EMOJI_CATEGORY_SUGGESTION_BLOCKLIST.map((category, index) => {
+        const blocklistedEmojis: Array<[string, any]> = EMOJI_CATEGORY_SUGGESTION_BLOCKLIST.map(
-            const name = `blocklisted-${index}`;
+            (category, index) => {
-            return [name, {name, category}];
+                const name = `blocklisted-${index}`;
-        });
+                return [name, {name, category}];
-        const customEmojisWithBlocklist = new Map([
+            },
+        );
+        const customEmojisWithBlocklist: Map<string, CustomEmoji> = new Map([
             ...blocklistedEmojis,
-            ['not-blocklisted', {name: 'not-blocklisted', category: 'custom'}],
+            [
+                'not-blocklisted',
+                {name: 'not-blocklisted', category: 'custom'},
+            ],
         ]);
         const emojiMapWithBlocklist = new EmojiMap(customEmojisWithBlocklist);
 
-        getEmojiMap.mockReturnValue(emojiMapWithBlocklist);
+        mockedGetEmojiMap.mockReturnValue(emojiMapWithBlocklist);
-        getRecentEmojisNames.mockReturnValue(recentEmojis);
+        mockedGetRecentEmojisNames.mockReturnValue(recentEmojis);
 
         emoticonProvider.handlePretextChanged(pretext, resultsCallback);
         expect(resultsCallback).toHaveBeenCalled();
@@ -108,14 +123,16 @@ describe('components/EmoticonProvider', () => {
         const emojis = ['thunder_cloud_and_rain', 'smile'];
         for (const thumbsup of ['+1', 'thumbsup']) {
             const recentEmojis = [...emojis, thumbsup];
-            getEmojiMap.mockReturnValue(emojiMap);
+            mockedGetEmojiMap.mockReturnValue(emojiMap);
-            getRecentEmojisNames.mockReturnValue(recentEmojis);
+            mockedGetRecentEmojisNames.mockReturnValue(recentEmojis);
 
             emoticonProvider.handlePretextChanged(pretext, resultsCallback);
             expect(resultsCallback).toHaveBeenCalled();
             const args = resultsCallback.mock.calls[0][0];
-            const results = args.items.filter((item) => item.name.indexOf('skin') === -1);
+            const results = args.items.filter(
-            expect(results.map((item) => item.name)).toEqual([
+                (item: Emoji) => item.name.indexOf('skin') === -1,
+            );
+            expect(results.map((item: Emoji) => item.name)).toEqual([
                 'thumbsup',
                 'thunder_cloud_and_rain',
                 'thumbsdown',
@@ -130,14 +147,16 @@ describe('components/EmoticonProvider', () => {
     it('should suggest emojis ordered by recently used first (custom only)', () => {
         const pretext = ':thu';
         const recentEmojis = ['lithuania-custom', 'thumbsdown-custom', 'smile'];
-        getEmojiMap.mockReturnValue(emojiMap);
+        mockedGetEmojiMap.mockReturnValue(emojiMap);
-        getRecentEmojisNames.mockReturnValue(recentEmojis);
+        mockedGetRecentEmojisNames.mockReturnValue(recentEmojis);
 
         emoticonProvider.handlePretextChanged(pretext, resultsCallback);
         expect(resultsCallback).toHaveBeenCalled();
         const args = resultsCallback.mock.calls[0][0];
-        const results = args.items.filter((item) => item.name.indexOf('skin') === -1);
+        const results = args.items.filter(
-        expect(results.map((item) => item.name)).toEqual([
+            (item: Emoji) => item.name.indexOf('skin') === -1,
+        );
+        expect(results.map((item: Emoji) => item.name)).toEqual([
             'thumbsdown-custom',
             'lithuania-custom',
             'thumbsup',
@@ -150,15 +169,23 @@ describe('components/EmoticonProvider', () => {
 
     it('should suggest emojis ordered by recently used first (custom and system)', () => {
         const pretext = ':thu';
-        const recentEmojis = ['thumbsdown-custom', 'lithuania-custom', 'thumbsup', '-1', 'smile'];
+        const recentEmojis = [
-        getEmojiMap.mockReturnValue(emojiMap);
+            'thumbsdown-custom',
-        getRecentEmojisNames.mockReturnValue(recentEmojis);
+            'lithuania-custom',
+            'thumbsup',
+            '-1',
+            'smile',
+        ];
+        mockedGetEmojiMap.mockReturnValue(emojiMap);
+        mockedGetRecentEmojisNames.mockReturnValue(recentEmojis);
 
         emoticonProvider.handlePretextChanged(pretext, resultsCallback);
         expect(resultsCallback).toHaveBeenCalled();
         const args = resultsCallback.mock.calls[0][0];
-        const results = args.items.filter((item) => item.name.indexOf('skin') === -1);
+        const results = args.items.filter(
-        expect(results.map((item) => item.name)).toEqual([
+            (item: Emoji) => item.name.indexOf('skin') === -1,
+        );
+        expect(results.map((item: Emoji) => item.name)).toEqual([
             'thumbsup',
             'thumbsdown',
             'thumbsdown-custom',
@@ -171,15 +198,22 @@ describe('components/EmoticonProvider', () => {
 
     it('should suggest emojis ordered by recently used first with partial name match', () => {
         const pretext = ':umbs';
-        const recentEmojis = ['lithuania-custom', 'thumbsup-custom', '+1', 'smile'];
+        const recentEmojis = [
-        getEmojiMap.mockReturnValue(emojiMap);
+            'lithuania-custom',
-        getRecentEmojisNames.mockReturnValue(recentEmojis);
+            'thumbsup-custom',
+            '+1',
+            'smile',
+        ];
+        mockedGetEmojiMap.mockReturnValue(emojiMap);
+        mockedGetRecentEmojisNames.mockReturnValue(recentEmojis);
 
         emoticonProvider.handlePretextChanged(pretext, resultsCallback);
         expect(resultsCallback).toHaveBeenCalled();
         const args = resultsCallback.mock.calls[0][0];
-        const results = args.items.filter((item) => item.name.indexOf('skin') === -1);
+        const results = args.items.filter(
-        expect(results.map((item) => item.name)).toEqual([
+            (item: Emoji) => item.name.indexOf('skin') === -1,
+        );
+        expect(results.map((item: Emoji) => item.name)).toEqual([
             'thumbsup',
             'thumbsup-custom',
             'thumbsdown',