regression: custom emoji rendering as raw shortname in reaction bar and emoji picker

app/containers/EmojiPicker/Emoji.test.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react-native';
+
+import { Emoji } from './Emoji';
+
+const customEmojis = { clap: { name: 'clap', extension: 'png' } };
+
+jest.mock('../../lib/hooks/useAppSelector', () => ({
+	useAppSelector: (selector: (state: any) => any) =>
+		selector({ customEmojis, server: { server: 'https://open.rocket.chat' }, login: { user: {} } })
+}));
+
+describe('Emoji', () => {
+	it('renders the custom emoji image when a shortname collides with a custom emoji', () => {
+		render(<Emoji emoji='clap' />);
+
+		expect(screen.queryByText(':clap:')).toBeNull();
+	});
+
+	it('renders the unicode emoji when there is no custom emoji with that name', () => {
+		render(<Emoji emoji='thumbsup' />);
+
+		expect(screen.getByText('👍️')).toBeOnTheScreen();
+	});
+});

app/containers/EmojiPicker/Emoji.tsx

@@ -2,16 +2,18 @@ import { type ReactElement } from 'react';
 import { Text } from 'react-native';
 
 import useShortnameToUnicode from '../../lib/hooks/useShortnameToUnicode';
+import { useCustomEmoji } from '../../lib/hooks/useCustomEmoji';
 import styles from './styles';
 import CustomEmoji from './CustomEmoji';
 import { type IEmojiProps } from './interfaces';
 
 export const Emoji = ({ emoji }: IEmojiProps): ReactElement => {
 	const { formatShortnameToUnicode } = useShortnameToUnicode(true);
-	const unicodeEmoji = formatShortnameToUnicode(`:${emoji}:`);
+	const getCustomEmoji = useCustomEmoji();
+	const customEmoji = typeof emoji === 'string' ? getCustomEmoji(emoji) : emoji;
 
-	if (typeof emoji === 'string') {
-		return <Text style={styles.categoryEmoji}>{unicodeEmoji}</Text>;
+	if (customEmoji) {
+		return <CustomEmoji style={styles.customCategoryEmoji} emoji={customEmoji} />;
 	}
-	return <CustomEmoji style={styles.customCategoryEmoji} emoji={emoji} />;
+	return <Text style={styles.categoryEmoji}>{formatShortnameToUnicode(`:${emoji}:`)}</Text>;
 };

app/containers/MessageActions/Header.tsx

@@ -5,6 +5,7 @@ import { type TSupportedThemes, useTheme } from '../../theme';
 import { themes } from '../../lib/constants/colors';
 import { CustomIcon } from '../CustomIcon';
 import useShortnameToUnicode from '../../lib/hooks/useShortnameToUnicode';
+import { useCustomEmoji } from '../../lib/hooks/useCustomEmoji';
 import { addFrequentlyUsed } from '../../lib/methods/emojis';
 import { useFrequentlyUsedEmoji } from '../../lib/hooks/useFrequentlyUsedEmoji';
 import CustomEmoji from '../EmojiPicker/CustomEmoji';
@@ -66,18 +67,20 @@ const styles = StyleSheet.create({
 
 const HeaderItem = ({ item, onReaction, theme }: THeaderItem) => {
 	const { formatShortnameToUnicode } = useShortnameToUnicode();
-	const unicodeEmoji = formatShortnameToUnicode(`:${item}:`);
+	const getCustomEmoji = useCustomEmoji();
+	const emojiName = typeof item === 'string' ? item : item.name;
+	const customEmoji = typeof item === 'string' ? getCustomEmoji(item) : item;
 	return (
 		<Touch
-			testID={`message-actions-emoji-${item}`}
+			testID={`message-actions-emoji-${emojiName}`}
 			accessible
-			accessibilityLabel={I18n.t('React_with_emojjname', { emojiName: item })}
+			accessibilityLabel={I18n.t('React_with_emojjname', { emojiName })}
 			onPress={() => onReaction({ emoji: item })}
 			style={[styles.headerItem, { backgroundColor: themes[theme].surfaceHover }]}>
-			{typeof item === 'string' ? (
-				<Text style={styles.headerIcon}>{unicodeEmoji}</Text>
+			{customEmoji ? (
+				<CustomEmoji style={styles.customEmoji} emoji={customEmoji} />
 			) : (
-				<CustomEmoji style={styles.customEmoji} emoji={item} />
+				<Text style={styles.headerIcon}>{formatShortnameToUnicode(`:${emojiName}:`)}</Text>
 			)}
 		</Touch>
 	);