fix: reactions not being rendered correctly (#6330)

* fix: reactions not being rendered correctly

* fix: revert plain unused adjustment

* fix: lint

* feat: created reactions unit test

* fix: test e2e failing

Author: OtavioStasiak

app/containers/markdown/components/Plain.tsx

@@ -3,19 +3,17 @@ import { Text } from 'react-native';
 import { Plain as PlainProps } from '@rocket.chat/message-parser';
 
 import { useTheme } from '../../../theme';
-import usePreviewFormatText from '../../../lib/hooks/usePreviewFormatText';
 import styles from '../styles';
 
 interface IPlainProps {
 	value: PlainProps['value'];
 }
 
 const Plain = ({ value }: IPlainProps): React.ReactElement => {
-	const formattedText = usePreviewFormatText(value);
 	const { colors } = useTheme();
 	return (
 		<Text accessibilityLabel={value} style={[styles.plainText, { color: colors.fontDefault }]}>
-			{formattedText}
+			{value}
 		</Text>
 	);
 };

app/containers/message/Emoji.tsx

@@ -13,7 +13,7 @@ const Emoji = React.memo(
 		if (emoji) {
 			return <CustomEmoji key={content} style={customEmojiStyle} emoji={emoji} />;
 		}
-		return <Text style={standardEmojiStyle}>{formatShortnameToUnicode(parsedContent)}</Text>;
+		return <Text style={standardEmojiStyle}>{formatShortnameToUnicode(content)}</Text>;
 	},
 	() => true
 );

app/containers/message/Reactions.test.tsx

@@ -0,0 +1,89 @@
+import React, { useState } from 'react';
+import { Provider } from 'react-redux';
+import { render, fireEvent } from '@testing-library/react-native';
+
+import Reactions from './Reactions';
+import MessageContext from './Context';
+import { setUser } from '../../actions/login';
+import { mockedStore } from '../../reducers/mockedStore';
+import { IReaction } from '../../definitions';
+
+const initialMockedStoreState = () => {
+	mockedStore.dispatch(
+		setUser({
+			settings: {
+				preferences: {
+					convertAsciiEmoji: true
+				}
+			}
+		})
+	);
+};
+
+initialMockedStoreState();
+
+const TestWrapper = ({ initialReactions }: { initialReactions: IReaction[] }) => {
+	const [reactions, setReactions] = useState<IReaction[]>(initialReactions);
+	const handleReactionPress = (emoji: string) => {
+		setReactions(prev => prev.filter(r => r.emoji !== emoji));
+	};
+
+	return (
+		<Provider store={mockedStore}>
+			<MessageContext.Provider
+				value={{
+					user: { username: 'john' },
+					reactionInit: jest.fn(),
+					onReactionPress: handleReactionPress,
+					onReactionLongPress: jest.fn()
+				}}>
+				<Reactions reactions={reactions} getCustomEmoji={getCustomEmoji} />
+			</MessageContext.Provider>
+		</Provider>
+	);
+};
+
+const getCustomEmoji = jest.fn();
+
+it('renders all reactions and AddReaction button', () => {
+	const reactions: IReaction[] = [
+		{ _id: '1', emoji: '👍', usernames: ['john', 'alice'], names: [] },
+		{ _id: '2', emoji: '😂', usernames: ['bob'], names: [] }
+	];
+
+	const { getByTestId } = render(<TestWrapper initialReactions={reactions} />);
+
+	expect(getByTestId('message-reaction-👍')).toBeTruthy();
+	expect(getByTestId('message-reaction-😂')).toBeTruthy();
+	expect(getByTestId('message-add-reaction')).toBeTruthy();
+});
+
+it('should render unicode emoji reaction', () => {
+	const reactions = [{ _id: '1', emoji: ':)', usernames: ['john', 'alice'], names: [] }];
+	const { getByTestId } = render(<TestWrapper initialReactions={reactions} />);
+
+	expect(getByTestId('message-reaction-:)')).toBeTruthy();
+	expect(getByTestId('message-add-reaction')).toBeTruthy();
+});
+
+it('should render custom emoji reaction', () => {
+	const reactions = [{ _id: '1', emoji: ':aaaaa:', usernames: ['john', 'alice'], names: [] }];
+	const { getByTestId } = render(<TestWrapper initialReactions={reactions} />);
+
+	expect(getByTestId('message-reaction-:aaaaa:')).toBeTruthy();
+	expect(getByTestId('message-add-reaction')).toBeTruthy();
+});
+
+it('should remove reaction', () => {
+	const reactions = [
+		{ _id: '1', emoji: ':thumbsup:', usernames: ['john'], names: [] },
+		{ _id: '1', emoji: ':heart_eyes:', usernames: ['john', 'alice'], names: [] }
+	];
+	const { getByTestId, queryByTestId } = render(<TestWrapper initialReactions={reactions} />);
+
+	expect(getByTestId('message-reaction-:thumbsup:')).toBeTruthy();
+	expect(getByTestId('message-reaction-:heart_eyes:')).toBeTruthy();
+	fireEvent.press(getByTestId('message-reaction-:thumbsup:'));
+	expect(queryByTestId('message-reaction-:thumbsup:')).toBeNull();
+	expect(getByTestId('message-add-reaction')).toBeTruthy();
+});

e2e/tests/assorted/17-userpreferences.spec.ts

@@ -68,7 +68,7 @@ describe('User Preferences screen', () => {
 					.withTimeout(2000);
 				await expect(element(by.id('sidebar-chats'))).toBeVisible();
 				await element(by.id('sidebar-chats')).tap();
-				await waitFor(element(by.text(`${otherUser.username}::(`)))
+				await waitFor(element(by.text(`${otherUser.username}: :(`)))
 					.toBeVisible()
 					.withTimeout(2000);
 				await navigateToRoom(room);
@@ -93,7 +93,7 @@ describe('User Preferences screen', () => {
 					.withTimeout(2000);
 				await expect(element(by.id('sidebar-chats'))).toBeVisible();
 				await element(by.id('sidebar-chats')).tap();
-				await waitFor(element(by.text(`${otherUser.name}:😞`)))
+				await waitFor(element(by.text(`${otherUser.name}: 😞`)))
 					.toBeVisible()
 					.withTimeout(2000);
 				await navigateToRoom(room);