From 82b7eef5633bd71aa45a86d4e928d62f68a0a597 Mon Sep 17 00:00:00 2001 From: k srisri reddy <58304531+srisri332@users.noreply.github.com> Date: Wed, 6 Dec 2023 13:03:48 +0530 Subject: [PATCH] [MM-53475] Migrate 'components/suggestion/emoticon_provider.test.jsx' to TypeScript (#25610) --- ...er.test.jsx => emoticon_provider.test.tsx} | 106 ++++++++++++------ 1 file changed, 70 insertions(+), 36 deletions(-) rename webapp/channels/src/components/suggestion/{emoticon_provider.test.jsx => emoticon_provider.test.tsx} (64%) diff --git a/webapp/channels/src/components/suggestion/emoticon_provider.test.jsx b/webapp/channels/src/components/suggestion/emoticon_provider.test.tsx similarity index 64% rename from webapp/channels/src/components/suggestion/emoticon_provider.test.jsx rename to webapp/channels/src/components/suggestion/emoticon_provider.test.tsx index 849bca7db8..85f07750d3 100644 --- a/webapp/channels/src/components/suggestion/emoticon_provider.test.jsx +++ b/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([ - ['thumbsdown-custom', {name: 'thumbsdown-custom', category: 'custom'}], + const customEmojis: Map = new Map([ + [ + '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); - getRecentEmojisNames.mockReturnValue([]); + mockedGetEmojiMap.mockReturnValue(emojiMap); + 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); - getRecentEmojisNames.mockReturnValue(recentEmojis); + 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); - expect(results.map((item) => item.name)).toEqual([ + const results = args.items.filter( + (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); - getRecentEmojisNames.mockReturnValue(recentEmojis); + mockedGetEmojiMap.mockReturnValue(emojiMap); + 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 name = `blocklisted-${index}`; - return [name, {name, category}]; - }); - const customEmojisWithBlocklist = new Map([ + const blocklistedEmojis: Array<[string, any]> = EMOJI_CATEGORY_SUGGESTION_BLOCKLIST.map( + (category, index) => { + const name = `blocklisted-${index}`; + return [name, {name, category}]; + }, + ); + const customEmojisWithBlocklist: Map = 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); - getRecentEmojisNames.mockReturnValue(recentEmojis); + mockedGetEmojiMap.mockReturnValue(emojiMapWithBlocklist); + 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); - getRecentEmojisNames.mockReturnValue(recentEmojis); + 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); - expect(results.map((item) => item.name)).toEqual([ + const results = args.items.filter( + (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); - getRecentEmojisNames.mockReturnValue(recentEmojis); + 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); - expect(results.map((item) => item.name)).toEqual([ + const results = args.items.filter( + (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']; - getEmojiMap.mockReturnValue(emojiMap); - getRecentEmojisNames.mockReturnValue(recentEmojis); + const recentEmojis = [ + 'thumbsdown-custom', + '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); - expect(results.map((item) => item.name)).toEqual([ + const results = args.items.filter( + (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']; - getEmojiMap.mockReturnValue(emojiMap); - getRecentEmojisNames.mockReturnValue(recentEmojis); + const recentEmojis = [ + 'lithuania-custom', + '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); - expect(results.map((item) => item.name)).toEqual([ + const results = args.items.filter( + (item: Emoji) => item.name.indexOf('skin') === -1, + ); + expect(results.map((item: Emoji) => item.name)).toEqual([ 'thumbsup', 'thumbsup-custom', 'thumbsdown',