test: add e2e

app/containers/message/Components/RightIcons/Pinned.tsx

@@ -4,10 +4,10 @@ import { CustomIcon } from '../../../CustomIcon';
 import styles from '../../styles';
 import { useTheme } from '../../../../theme';
 
-const Pinned = React.memo(({ pinned }: { pinned?: boolean }) => {
+const Pinned = React.memo(({ pinned, testID }: { pinned?: boolean; testID?: string }) => {
 	const { colors } = useTheme();
 	if (pinned) {
-		return <CustomIcon name='pin' color={colors.auxiliaryTintColor} size={16} style={styles.rightIcons} />;
+		return <CustomIcon testID={testID} name='pin' color={colors.auxiliaryTintColor} size={16} style={styles.rightIcons} />;
 	}
 	return null;
 });

app/containers/message/Components/RightIcons/index.tsx

@@ -26,7 +26,7 @@ interface IRightIcons {
 
 const RightIcons = ({ type, msg, isEdited, hasError, isReadReceiptEnabled, unread, pinned }: IRightIcons): React.ReactElement => (
 	<View style={styles.actionIcons}>
-		<Pinned pinned={pinned} />
+		<Pinned pinned={pinned} testID={`${msg}-pinned`} />
 		<Encrypted type={type} />
 		<Edited testID={`${msg}-edited`} isEdited={isEdited} />
 		<MessageError hasError={hasError} />

e2e/tests/room/03-roomactions.spec.ts

@@ -194,7 +194,10 @@ describe('Room actions screen', () => {
 
 				// Pin the message
 				await pinMessage(messageToPin);
-
+				// verify pin icon
+				await waitFor(element(by.id(`${messageToPin}-pinned`)))
+					.toExist()
+					.withTimeout(6000);
 				// Back into Room Actions
 				await element(by.id('room-header')).tap();
 				await waitFor(element(by.id('room-actions-view')))
@@ -220,6 +223,10 @@ describe('Room actions screen', () => {
 				await waitFor(element(by[textMatcher](messageToPin).withAncestor(by.id('pinned-messages-view'))))
 					.not.toExist()
 					.withTimeout(6000);
+				// verify pin icon
+				await waitFor(element(by.id(`${messageToPin}-pinned`)))
+					.not.toExist()
+					.withTimeout(6000);
 				await backToActions();
 			});
 		});