Merge branch 'develop' into appium-v2

.eslintignore

@@ -4,4 +4,5 @@ coverage
 e2e/docker
 android
 ios
-.eslintrc.js
+.eslintrc.js
+appium/tests

app/containers/ActionSheet/Handle.tsx

@@ -4,11 +4,12 @@ import { View } from 'react-native';
 import styles from './styles';
 import { themes } from '../../lib/constants';
 import { useTheme } from '../../theme';
+import { testProps } from '../../lib/methods/testProps';
 
 export const Handle = React.memo(() => {
 	const { theme } = useTheme();
 	return (
-		<View style={[styles.handle, { backgroundColor: themes[theme].focusedBackground }]} testID='action-sheet-handle'>
+		<View style={[styles.handle, { backgroundColor: themes[theme].focusedBackground }]} {...testProps('action-sheet-handle')}>
 			<View style={[styles.handleIndicator, { backgroundColor: themes[theme].auxiliaryText }]} />
 		</View>
 	);

app/containers/ActionSheet/Item.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Text, View } from 'react-native';
 
 import { themes } from '../../lib/constants';
+import { testProps } from '../../lib/methods/testProps';
 import { CustomIcon } from '../CustomIcon';
 import { useTheme } from '../../theme';
 import { Button } from './Button';
@@ -25,7 +26,7 @@ export const Item = React.memo(({ item, hide }: IActionSheetItem) => {
 			onPress={onPress}
 			style={[styles.item, { backgroundColor: themes[theme].focusedBackground }]}
 			theme={theme}
-			testID={item.testID}>
+			{...testProps(item.testID || '')}>
 			<CustomIcon name={item.icon} size={20} color={item.danger ? themes[theme].dangerColor : themes[theme].bodyText} />
 			<View style={styles.titleContainer}>
 				<Text

app/containers/Avatar/Avatar.tsx

@@ -9,6 +9,7 @@ import { SubscriptionType } from '../../definitions/ISubscription';
 import Emoji from '../markdown/Emoji';
 import { IAvatar } from './interfaces';
 import { useTheme } from '../../theme';
+import { testProps } from '../../lib/methods/testProps';
 
 const Avatar = React.memo(
 	({
@@ -90,7 +91,7 @@ const Avatar = React.memo(
 		}
 
 		return (
-			<View style={[avatarStyle, style]} testID='avatar'>
+			<View style={[avatarStyle, style]} {...testProps('avatar')}>
 				{image}
 				{children}
 			</View>

app/containers/Button/__snapshots__/Button.stories.storyshot

@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Button disabled button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Press me!\\",\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#1d74f5\\",\\"opacity\\":0.3,\\"padding\\":10}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#ffffff\\",\\"fontSize\\":16},null],\\"accessibilityLabel\\":\\"Press me!\\"},\\"children\\":[\\"Press me!\\"]}]}"`;
+exports[`Storyshots Button disabled button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"testButton\\",\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#1d74f5\\",\\"opacity\\":0.3,\\"padding\\":10}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#ffffff\\",\\"fontSize\\":16},null],\\"accessibilityLabel\\":\\"Press me!\\"},\\"children\\":[\\"Press me!\\"]}]}"`;
 
-exports[`Storyshots Button disabled loading button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Press me!\\",\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#1d74f5\\",\\"opacity\\":0.3,\\"padding\\":10}},\\"children\\":[{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"animating\\":true,\\"color\\":\\"#ffffff\\",\\"hidesWhenStopped\\":true,\\"size\\":\\"small\\",\\"style\\":[{\\"padding\\":16,\\"flex\\":1},null]},\\"children\\":null}]}"`;
+exports[`Storyshots Button disabled loading button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"testButton\\",\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#1d74f5\\",\\"opacity\\":0.3,\\"padding\\":10}},\\"children\\":[{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"animating\\":true,\\"color\\":\\"#ffffff\\",\\"hidesWhenStopped\\":true,\\"size\\":\\"small\\",\\"style\\":[{\\"padding\\":16,\\"flex\\":1},null]},\\"children\\":null}]}"`;
 
-exports[`Storyshots Button loading button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Press me!\\",\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#1d74f5\\",\\"padding\\":10,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"animating\\":true,\\"color\\":\\"#ffffff\\",\\"hidesWhenStopped\\":true,\\"size\\":\\"small\\",\\"style\\":[{\\"padding\\":16,\\"flex\\":1},null]},\\"children\\":null}]}"`;
+exports[`Storyshots Button loading button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"testButton\\",\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#1d74f5\\",\\"padding\\":10,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"animating\\":true,\\"color\\":\\"#ffffff\\",\\"hidesWhenStopped\\":true,\\"size\\":\\"small\\",\\"style\\":[{\\"padding\\":16,\\"flex\\":1},null]},\\"children\\":null}]}"`;
 
-exports[`Storyshots Button primary button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Press me!\\",\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#1d74f5\\",\\"padding\\":10,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#ffffff\\",\\"fontSize\\":16},null],\\"accessibilityLabel\\":\\"Press me!\\"},\\"children\\":[\\"Press me!\\"]}]}"`;
+exports[`Storyshots Button primary button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"testButton\\",\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#1d74f5\\",\\"padding\\":10,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#ffffff\\",\\"fontSize\\":16},null],\\"accessibilityLabel\\":\\"Press me!\\"},\\"children\\":[\\"Press me!\\"]}]}"`;
 
-exports[`Storyshots Button secondary button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Press me!\\",\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#ffffff\\",\\"padding\\":10,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#2f343d\\",\\"fontSize\\":16},null],\\"accessibilityLabel\\":\\"Press me!\\"},\\"children\\":[\\"Press me!\\"]}]}"`;
+exports[`Storyshots Button secondary button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"testButton\\",\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#ffffff\\",\\"padding\\":10,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#2f343d\\",\\"fontSize\\":16},null],\\"accessibilityLabel\\":\\"Press me!\\"},\\"children\\":[\\"Press me!\\"]}]}"`;

app/containers/Button/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { StyleProp, StyleSheet, Text, TextStyle } from 'react-native';
 import Touchable, { PlatformTouchableProps } from 'react-native-platform-touchable';
 
+import { testProps } from '../../lib/methods/testProps';
 import { useTheme } from '../../theme';
 import sharedStyles from '../../views/Styles';
 import ActivityIndicator from '../ActivityIndicator';
@@ -45,6 +46,7 @@ const Button = ({
 	color,
 	style,
 	styleText,
+	testID,
 	...otherProps
 }: IButtonProps): React.ReactElement => {
 	const { colors } = useTheme();
@@ -66,7 +68,8 @@ const Button = ({
 				style
 			]}
 			accessibilityLabel={title}
-			{...otherProps}>
+			{...otherProps}
+			{...testProps((testID || title) as string)}>
 			{loading ? (
 				<ActivityIndicator color={textColor} />
 			) : (

app/containers/DirectoryItem/index.tsx

@@ -6,6 +6,7 @@ import Avatar from '../Avatar';
 import RoomTypeIcon from '../RoomTypeIcon';
 import styles, { ROW_HEIGHT } from './styles';
 import { themes } from '../../lib/constants';
+import { testProps } from '../../lib/methods/testProps';
 import { TSupportedThemes, useTheme } from '../../theme';
 
 export { ROW_HEIGHT };
@@ -49,7 +50,7 @@ const DirectoryItem = ({
 }: IDirectoryItem): React.ReactElement => {
 	const { theme } = useTheme();
 	return (
-		<Touch onPress={onPress} style={{ backgroundColor: themes[theme].backgroundColor }} testID={testID} theme={theme}>
+		<Touch onPress={onPress} style={{ backgroundColor: themes[theme].backgroundColor }} {...testProps(testID)} theme={theme}>
 			<View style={[styles.directoryItemContainer, styles.directoryItemButton, style]}>
 				<Avatar text={avatar} size={30} type={type} rid={rid} style={styles.directoryItemAvatar} />
 				<View style={styles.directoryItemTextContainer}>

app/containers/EmojiPicker/EmojiCategory.tsx

@@ -6,6 +6,7 @@ import styles from './styles';
 import CustomEmoji from './CustomEmoji';
 import scrollPersistTaps from '../../utils/scrollPersistTaps';
 import { IEmoji, IEmojiCategory } from '../../definitions/IEmoji';
+import { testProps } from '../../lib/methods/testProps';
 
 const EMOJI_SIZE = 50;
 
@@ -35,7 +36,7 @@ class EmojiCategory extends React.Component<IEmojiCategory> {
 				// @ts-ignore
 				key={emoji && emoji.isCustom ? emoji.content : emoji}
 				onPress={() => onEmojiSelected(emoji)}
-				testID={`reaction-picker-${emoji && emoji.isCustom ? emoji.content : emoji}`}>
+				{...testProps(`reaction-picker-${emoji && emoji.isCustom ? emoji.content : emoji}`)}>
 				{renderEmoji(emoji, EMOJI_SIZE, baseUrl)}
 			</TouchableOpacity>
 		);

app/containers/EmojiPicker/TabBar.tsx

@@ -3,6 +3,7 @@ import { StyleProp, Text, TextStyle, TouchableOpacity, View } from 'react-native
 
 import styles from './styles';
 import { themes } from '../../lib/constants';
+import { testProps } from '../../lib/methods/testProps';
 import { TSupportedThemes } from '../../theme';
 
 interface ITabBarProps {
@@ -40,7 +41,7 @@ export default class TabBar extends React.Component<ITabBarProps> {
 							}
 						}}
 						style={styles.tab}
-						testID={`reaction-picker-${tab}`}>
+						{...testProps(`reaction-picker-${tab}`)}>
 						<Text style={[styles.tabEmoji, tabEmojiStyle]}>{tab}</Text>
 						{activeTab === i ? (
 							<View style={[styles.activeTabLine, { backgroundColor: themes[theme].tintColor }]} />

app/containers/FormContainer.tsx

@@ -10,6 +10,7 @@ import StatusBar from './StatusBar';
 import AppVersion from './AppVersion';
 import { isTablet } from '../utils/deviceInfo';
 import SafeAreaView from './SafeAreaView';
+import { testProps } from '../lib/methods/testProps';
 
 interface IFormContainer extends ScrollViewProps {
 	testID: string;
@@ -40,7 +41,7 @@ const FormContainer = ({ children, testID, ...props }: IFormContainer) => {
 				contentContainerStyle={[sharedStyles.containerScrollView, styles.scrollView]}
 				{...scrollPersistTaps}
 				{...props}>
-				<SafeAreaView testID={testID} style={{ backgroundColor: themes[theme].backgroundColor }}>
+				<SafeAreaView {...testProps(testID)} style={{ backgroundColor: themes[theme].backgroundColor }}>
 					{children}
 					<AppVersion theme={theme} />
 				</SafeAreaView>

app/containers/HeaderButton/Common.tsx

@@ -4,6 +4,7 @@ import { isIOS } from '../../utils/deviceInfo';
 import I18n from '../../i18n';
 import Container from './HeaderButtonContainer';
 import Item from './HeaderButtonItem';
+import { testProps } from '../../lib/methods/testProps';
 
 interface IHeaderButtonCommon {
 	navigation?: any; // TODO: Evaluate proper type
@@ -15,7 +16,7 @@ interface IHeaderButtonCommon {
 export const Drawer = React.memo(
 	({ navigation, testID, onPress = () => navigation?.toggleDrawer(), ...props }: IHeaderButtonCommon) => (
 		<Container left>
-			<Item iconName='hamburguer' onPress={onPress} testID={testID} {...props} />
+			<Item iconName='hamburguer' onPress={onPress} {...testProps(testID as string as string)} {...props} />
 		</Container>
 	)
 );
@@ -23,7 +24,7 @@ export const Drawer = React.memo(
 export const CloseModal = React.memo(
 	({ navigation, testID, onPress = () => navigation?.pop(), ...props }: IHeaderButtonCommon) => (
 		<Container left>
-			<Item iconName='close' onPress={onPress} testID={testID} {...props} />
+			<Item iconName='close' onPress={onPress} {...testProps(testID as string)} {...props} />
 		</Container>
 	)
 );
@@ -31,9 +32,9 @@ export const CloseModal = React.memo(
 export const CancelModal = React.memo(({ onPress, testID }: Partial<IHeaderButtonCommon>) => (
 	<Container left>
 		{isIOS ? (
-			<Item title={I18n.t('Cancel')} onPress={onPress} testID={testID} />
+			<Item title={I18n.t('Cancel')} onPress={onPress} {...testProps(testID as string)} />
 		) : (
-			<Item iconName='close' onPress={onPress} testID={testID} />
+			<Item iconName='close' onPress={onPress} {...testProps(testID as string)} />
 		)}
 	</Container>
 ));
@@ -41,24 +42,24 @@ export const CancelModal = React.memo(({ onPress, testID }: Partial<IHeaderButto
 // Right
 export const More = React.memo(({ onPress, testID }: Partial<IHeaderButtonCommon>) => (
 	<Container>
-		<Item iconName='kebab' onPress={onPress} testID={testID} />
+		<Item iconName='kebab' onPress={onPress} {...testProps(testID as string)} />
 	</Container>
 ));
 
 export const Download = React.memo(({ onPress, testID, ...props }: IHeaderButtonCommon) => (
 	<Container>
-		<Item iconName='download' onPress={onPress} testID={testID} {...props} />
+		<Item iconName='download' onPress={onPress} {...testProps(testID as string)} {...props} />
 	</Container>
 ));
 
 export const Preferences = React.memo(({ onPress, testID, ...props }: IHeaderButtonCommon) => (
 	<Container>
-		<Item iconName='settings' onPress={onPress} testID={testID} {...props} />
+		<Item iconName='settings' onPress={onPress} {...testProps(testID as string)} {...props} />
 	</Container>
 ));
 
 export const Legal = React.memo(
 	({ navigation, testID, onPress = () => navigation?.navigate('LegalView') }: IHeaderButtonCommon) => (
-		<More onPress={onPress} testID={testID} />
+		<More onPress={onPress} {...testProps(testID as string)} />
 	)
 );

app/containers/HeaderButton/HeaderButtonItem.tsx

@@ -6,6 +6,7 @@ import { CustomIcon, TIconsName } from '../CustomIcon';
 import { useTheme } from '../../theme';
 import { themes } from '../../lib/constants';
 import sharedStyles from '../../views/Styles';
+import { testProps } from '../../lib/methods/testProps';
 
 interface IHeaderButtonItem {
 	title?: string;
@@ -42,7 +43,7 @@ const styles = StyleSheet.create({
 const Item = ({ title, iconName, onPress, testID, badge }: IHeaderButtonItem): React.ReactElement => {
 	const { theme } = useTheme();
 	return (
-		<Touchable onPress={onPress} testID={testID} hitSlop={BUTTON_HIT_SLOP} style={styles.container}>
+		<Touchable onPress={onPress} {...testProps(testID as string)} hitSlop={BUTTON_HIT_SLOP} style={styles.container}>
 			<>
 				{iconName ? (
 					<CustomIcon name={iconName} size={24} color={themes[theme].headerTintColor} />

app/containers/List/ListContainer.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ScrollView, StyleSheet } from 'react-native';
 
+import { testProps } from '../../lib/methods/testProps';
 import { withTheme } from '../../theme';
 import scrollPersistTaps from '../../utils/scrollPersistTaps';
 
@@ -19,7 +20,8 @@ const ListContainer = React.memo(({ children, ...props }: IListContainer) => (
 		contentContainerStyle={styles.container}
 		scrollIndicatorInsets={{ right: 1 }} // https://github.com/facebook/react-native/issues/26610#issuecomment-539843444
 		{...scrollPersistTaps}
-		{...props}>
+		{...props}
+		{...testProps(props.testID || '')}>
 		{children}
 	</ScrollView>
 ));

app/containers/List/ListIcon.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
 import { themes } from '../../lib/constants';
+import { testProps } from '../../lib/methods/testProps';
 import { CustomIcon, TIconsName } from '../CustomIcon';
 import { useTheme } from '../../theme';
 import { ICON_SIZE } from './constants';
@@ -26,7 +27,12 @@ const ListIcon = React.memo(({ name, color, style, testID, size }: IListIcon) =>
 
 	return (
 		<View style={[styles.icon, style]}>
-			<CustomIcon name={name} color={color ?? themes[theme].auxiliaryText} size={size ?? ICON_SIZE} testID={testID} />
+			<CustomIcon
+				name={name}
+				color={color ?? themes[theme].auxiliaryText}
+				size={size ?? ICON_SIZE}
+				{...testProps(testID || '')}
+			/>
 		</View>
 	);
 });

app/containers/List/ListItem.tsx

@@ -9,6 +9,7 @@ import I18n from '../../i18n';
 import { Icon } from '.';
 import { BASE_HEIGHT, ICON_SIZE, PADDING_HORIZONTAL } from './constants';
 import { useDimensions } from '../../dimensions';
+import { testProps } from '../../lib/methods/testProps';
 import { CustomIcon } from '../CustomIcon';
 
 const styles = StyleSheet.create({
@@ -60,7 +61,6 @@ interface IListItemContent {
 	right?: () => JSX.Element | null;
 	disabled?: boolean;
 	theme: TSupportedThemes;
-	testID?: string;
 	color?: string;
 	translateTitle?: boolean;
 	translateSubtitle?: boolean;
@@ -75,7 +75,6 @@ const Content = React.memo(
 		title,
 		subtitle,
 		disabled,
-		testID,
 		left,
 		right,
 		color,
@@ -90,9 +89,7 @@ const Content = React.memo(
 		const { fontScale } = useDimensions();
 
 		return (
-			<View
-				style={[styles.container, disabled && styles.disabled, { height: (heightContainer || BASE_HEIGHT) * fontScale }]}
-				testID={testID}>
+			<View style={[styles.container, disabled && styles.disabled, { height: (heightContainer || BASE_HEIGHT) * fontScale }]}>
 				{left ? <View style={styles.leftContainer}>{left()}</View> : null}
 				<View style={styles.textContainer}>
 					<View style={styles.textAlertContainer}>
@@ -120,25 +117,28 @@ const Content = React.memo(
 	}
 );
 
-interface IListButtonPress extends IListItemButton {
-	onPress: Function;
-}
-
 interface IListItemButton {
 	title?: string;
 	disabled?: boolean;
 	theme: TSupportedThemes;
 	backgroundColor?: string;
+	testID?: string;
 	underlayColor?: string;
 }
 
+interface IListButtonPress extends IListItemButton {
+	onPress: Function;
+}
+
 const Button = React.memo(({ onPress, backgroundColor, underlayColor, ...props }: IListButtonPress) => (
 	<Touch
 		onPress={() => onPress(props.title)}
 		style={{ backgroundColor: backgroundColor || themes[props.theme].backgroundColor }}
 		underlayColor={underlayColor}
 		enabled={!props.disabled}
-		theme={props.theme}>
+		theme={props.theme}
+		{...testProps(props.testID)}
+		touchable>
 		<Content {...props} />
 	</Touch>
 ));

app/containers/Loading.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
-import { Modal, StyleSheet, View, PixelRatio } from 'react-native';
-import Animated, {
+import { Animated, Modal, PixelRatio, StyleSheet, View } from 'react-native';
+import {
 	cancelAnimation,
 	Extrapolate,
 	interpolate,
@@ -11,6 +11,7 @@ import Animated, {
 	withTiming
 } from 'react-native-reanimated';
 
+import { testProps } from '../lib/methods/testProps';
 import { useTheme } from '../theme';
 
 const styles = StyleSheet.create({
@@ -54,7 +55,7 @@ const Loading = ({ visible }: ILoadingProps): React.ReactElement => {
 
 	return (
 		<Modal visible={visible} transparent onRequestClose={() => {}}>
-			<View style={styles.container} testID='loading'>
+			<View style={styles.container} {...testProps('loading')}>
 				<Animated.View
 					style={[
 						{

app/containers/MessageActions/Header.tsx

@@ -10,6 +10,7 @@ import database from '../../lib/database';
 import { Button } from '../ActionSheet';
 import { useDimensions } from '../../dimensions';
 import sharedStyles from '../../views/Styles';
+import { testProps } from '../../lib/methods/testProps';
 import { TAnyMessageModel, TFrequentlyUsedEmojiModel } from '../../definitions';
 
 type TItem = TFrequentlyUsedEmojiModel | string;
@@ -76,7 +77,7 @@ const HeaderItem = ({ item, onReaction, server, theme }: THeaderItem) => {
 	const emoji = (emojiModel.id ? emojiModel.content : item) as string;
 	return (
 		<Button
-			testID={`message-actions-emoji-${emoji}`}
+			{...testProps(`message-actions-emoji-${emoji}`)}
 			onPress={() => onReaction({ emoji: `:${emoji}:` })}
 			style={[styles.headerItem, { backgroundColor: themes[theme].auxiliaryBackground }]}
 			theme={theme}>
@@ -91,7 +92,7 @@ const HeaderItem = ({ item, onReaction, server, theme }: THeaderItem) => {
 
 const HeaderFooter = ({ onReaction, theme }: THeaderFooter) => (
 	<Button
-		testID='add-reaction'
+		{...testProps('add-reaction')}
 		onPress={onReaction}
 		style={[styles.headerItem, { backgroundColor: themes[theme].auxiliaryBackground }]}
 		theme={theme}>

app/containers/MessageBox/CommandsPreview/Item.tsx

@@ -3,6 +3,7 @@ import React, { useContext, useState } from 'react';
 import { TouchableOpacity } from 'react-native';
 
 import { themes } from '../../../lib/constants';
+import { testProps } from '../../../lib/methods/testProps';
 import { CustomIcon } from '../../CustomIcon';
 import { useTheme } from '../../../theme';
 import ActivityIndicator from '../../ActivityIndicator';
@@ -27,7 +28,7 @@ const Item = ({ item }: IMessageBoxCommandsPreviewItem) => {
 		<TouchableOpacity
 			style={styles.commandPreview}
 			onPress={() => onPressCommandPreview(item)}
-			testID={`command-preview-item${item.id}`}>
+			{...testProps(`command-preview-item${item.id}`)}>
 			{item.type === 'image' ? (
 				<FastImage
 					style={styles.commandPreviewImage}

app/containers/MessageBox/CommandsPreview/index.tsx

@@ -7,6 +7,7 @@ import { IPreviewItem } from '../../../definitions';
 import { useTheme } from '../../../theme';
 import styles from '../styles';
 import Item from './Item';
+import { testProps } from '../../../lib/methods/testProps';
 
 interface IMessageBoxCommandsPreview {
 	commandPreview: IPreviewItem[];
@@ -23,7 +24,7 @@ const CommandsPreview = React.memo(
 
 		return (
 			<FlatList
-				testID='commandbox-container'
+				{...testProps('commandbox-container')}
 				style={[styles.mentionList, { backgroundColor: themes[theme].messageboxBackground }]}
 				data={commandPreview}
 				renderItem={({ item }) => <Item item={item} />}

app/containers/MessageBox/EmojiKeyboard.tsx

@@ -7,6 +7,7 @@ import EmojiPicker from '../EmojiPicker';
 import styles from './styles';
 import { themes } from '../../lib/constants';
 import { TSupportedThemes, withTheme } from '../../theme';
+import { testProps } from '../../lib/methods/testProps';
 
 interface IMessageBoxEmojiKeyboard {
 	theme: TSupportedThemes;
@@ -30,7 +31,7 @@ export default class EmojiKeyboard extends React.PureComponent<IMessageBoxEmojiK
 		return (
 			<View
 				style={[styles.emojiKeyboardContainer, { borderTopColor: themes[theme].borderColor }]}
-				testID='messagebox-keyboard-emoji'>
+				{...testProps('messagebox-keyboard-emoji')}>
 				<EmojiPicker onEmojiSelected={this.onEmojiSelected} baseUrl={this.baseUrl} theme={theme} />
 			</View>
 		);

app/containers/MessageBox/Mentions/MentionItem.tsx

@@ -10,6 +10,7 @@ import MessageboxContext from '../Context';
 import styles from '../styles';
 import FixedMentionItem from './FixedMentionItem';
 import MentionEmoji from './MentionEmoji';
+import { testProps } from '../../../lib/methods/testProps';
 
 interface IMessageBoxMentionItem {
 	item: {
@@ -95,7 +96,7 @@ const MentionItem = ({ item, trackingType }: IMessageBoxMentionItem) => {
 				}
 			]}
 			onPress={() => onPressMention(item)}
-			testID={testID}>
+			{...testProps(testID)}>
 			<MentionItemContent item={item} trackingType={trackingType} />
 		</TouchableOpacity>
 	);

app/containers/MessageBox/Mentions/index.tsx

@@ -7,6 +7,7 @@ import styles from '../styles';
 import MentionItem from './MentionItem';
 import { themes } from '../../../lib/constants';
 import { useTheme } from '../../../theme';
+import { testProps } from '../../../lib/methods/testProps';
 
 interface IMessageBoxMentions {
 	mentions: any[];
@@ -23,7 +24,7 @@ const Mentions = React.memo(
 		}
 
 		return (
-			<View testID='messagebox-container'>
+			<View {...testProps('messagebox-container')}>
 				<FlatList
 					style={[styles.mentionList, { backgroundColor: themes[theme].auxiliaryBackground }]}
 					ListHeaderComponent={() => (

app/containers/MessageBox/RecordAudio.tsx

@@ -10,6 +10,7 @@ import I18n from '../../i18n';
 import { themes } from '../../lib/constants';
 import { CustomIcon } from '../CustomIcon';
 import { events, logEvent } from '../../utils/log';
+import { testProps } from '../../lib/methods/testProps';
 import { TSupportedThemes } from '../../theme';
 
 interface IMessageBoxRecordAudioProps {
@@ -195,7 +196,11 @@ export default class RecordAudio extends React.PureComponent<IMessageBoxRecordAu
 		}
 		if (!isRecording && !isRecorderActive) {
 			return (
-				<BorderlessButton onPress={this.startRecordingAudio} style={styles.actionButton} testID='messagebox-send-audio'>
+				<BorderlessButton
+					onPress={this.startRecordingAudio}
+					style={styles.actionButton}
+					testID='messagebox-send-audio'
+					{...testProps('messagebox-send-audio')}>
 					<View accessible accessibilityLabel={I18n.t('Send_audio_message')} accessibilityRole='button'>
 						<CustomIcon name='microphone' size={24} color={themes[theme].auxiliaryTintColor} />
 					</View>

app/containers/MessageBox/buttons/BaseButton.tsx

@@ -3,10 +3,11 @@ import React from 'react';
 import { View } from 'react-native';
 
 import styles from '../styles';
-import i18n from '../../../i18n';
 import { CustomIcon, TIconsName } from '../../CustomIcon';
 import { useTheme } from '../../../theme';
 import { themes } from '../../../lib/constants';
+import { testProps } from '../../../lib/methods/testProps';
+import i18n from '../../../i18n';
 
 interface IBaseButton {
 	onPress(): void;
@@ -19,7 +20,7 @@ interface IBaseButton {
 const BaseButton = ({ accessibilityLabel, icon, color, ...props }: IBaseButton) => {
 	const { theme } = useTheme();
 	return (
-		<BorderlessButton {...props} style={styles.actionButton}>
+		<BorderlessButton {...props} style={styles.actionButton} {...testProps(props.testID)}>
 			<View
 				accessible
 				accessibilityLabel={accessibilityLabel ? i18n.t(accessibilityLabel) : accessibilityLabel}

app/containers/MessageBox/index.tsx

@@ -51,6 +51,7 @@ import { IMessage } from '../../definitions/IMessage';
 import { forceJpgExtension } from './forceJpgExtension';
 import { IBaseScreen, IPreviewItem, IUser, TGetCustomEmoji, TSubscriptionModel, TThreadModel } from '../../definitions';
 import { MasterDetailInsideStackParamList } from '../../stacks/MasterDetailStack/types';
+import { testProps } from '../../lib/methods/testProps';
 import { getPermalinkMessage, hasPermission, search, sendFileMessage } from '../../lib/methods';
 import { Services } from '../../lib/services';
 import { TSupportedThemes } from '../../theme';
@@ -1009,7 +1010,7 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 			<TouchableWithoutFeedback
 				style={[styles.sendToChannelButton, { backgroundColor: themes[theme].messageboxBackground }]}
 				onPress={this.onPressSendToChannel}
-				testID='messagebox-send-to-channel'>
+				{...testProps('messagebox-send-to-channel')}>
 				<CustomIcon name={tshow ? 'checkbox-checked' : 'checkbox-unchecked'} size={24} color={themes[theme].auxiliaryText} />
 				<Text style={[styles.sendToChannelText, { color: themes[theme].auxiliaryText }]}>
 					{I18n.t('Messagebox_Send_to_channel')}
@@ -1130,7 +1131,7 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 							{ backgroundColor: themes[theme].messageboxBackground },
 							!recording && editing && { backgroundColor: themes[theme].chatComponentBackground }
 						]}
-						testID='messagebox'>
+						{...testProps('messagebox')}>
 						{textInputAndButtons}
 						{recordAudio}
 					</View>

app/containers/SearchHeader.tsx

@@ -8,6 +8,7 @@ import { themes } from '../lib/constants';
 import TextInput from './TextInput';
 import { isIOS, isTablet } from '../utils/deviceInfo';
 import { useOrientation } from '../dimensions';
+import { testProps } from '../lib/methods/testProps';
 
 const styles = StyleSheet.create({
 	container: {
@@ -40,7 +41,7 @@ const SearchHeader = ({ onSearchChangeText, testID }: ISearchHeaderProps): JSX.E
 				placeholder={I18n.t('Search')}
 				onChangeText={onSearchChangeText}
 				theme={theme}
-				testID={testID}
+				{...testProps(testID || '')}
 			/>
 		</View>
 	);

app/containers/TextInput/FormTextInput.tsx

@@ -8,6 +8,7 @@ import { themes } from '../../lib/constants';
 import { CustomIcon, TIconsName } from '../CustomIcon';
 import ActivityIndicator from '../ActivityIndicator';
 import { TSupportedThemes } from '../../theme';
+import { testProps } from '../../lib/methods/testProps';
 
 const styles = StyleSheet.create({
 	error: {
@@ -85,10 +86,10 @@ export default class FormTextInput extends React.PureComponent<IRCTextInputProps
 		return iconLeft ? (
 			<CustomIcon
 				name={iconLeft}
-				testID={testID ? `${testID}-icon-left` : undefined}
+				{...testProps(testID ? `${testID}-icon-left` : '')}
+				style={[styles.iconContainer, styles.iconLeft, { color: themes[theme].bodyText }]}
 				size={20}
 				color={themes[theme].bodyText}
-				style={[styles.iconContainer, styles.iconLeft]}
 			/>
 		) : null;
 	}
@@ -109,7 +110,8 @@ export default class FormTextInput extends React.PureComponent<IRCTextInputProps
 			<Touchable onPress={this.tooglePassword} style={[styles.iconContainer, styles.iconRight]}>
 				<CustomIcon
 					name={showPassword ? 'unread-on-top' : 'unread-on-top-disabled'}
-					testID={testID ? `${testID}-icon-right` : undefined}
+					{...testProps(testID ? `${testID}-icon-right` : '')}
+					style={{ color: themes[theme].auxiliaryText }}
 					size={20}
 					color={themes[theme].auxiliaryText}
 				/>
@@ -172,7 +174,7 @@ export default class FormTextInput extends React.PureComponent<IRCTextInputProps
 						autoCapitalize='none'
 						underlineColorAndroid='transparent'
 						secureTextEntry={secureTextEntry && !showPassword}
-						testID={testID}
+						{...testProps(testID || '')}
 						accessibilityLabel={placeholder}
 						placeholder={placeholder}
 						theme={theme}

app/containers/TextInput/__snapshots__/TextInput.stories.storyshot

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Text Input Short and Long Text 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingHorizontal\\":14}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"marginBottom\\":10},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"marginBottom\\":10,\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#0d0e12\\"},null]},\\"children\\":[\\"Short Text\\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"position\\":\\"relative\\"}},\\"children\\":[{\\"type\\":\\"TextInput\\",\\"props\\":{\\"allowFontScaling\\":true,\\"rejectResponderTermination\\":true,\\"underlineColorAndroid\\":\\"transparent\\",\\"style\\":[{\\"color\\":\\"#0d0e12\\"},[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\",\\"height\\":48,\\"fontSize\\":16,\\"padding\\":14,\\"borderWidth\\":0.5,\\"borderRadius\\":2},null,null,{\\"backgroundColor\\":\\"#ffffff\\",\\"borderColor\\":\\"#cbcbcc\\",\\"color\\":\\"#0d0e12\\"},null,null],{\\"textAlign\\":\\"auto\\"}],\\"placeholderTextColor\\":\\"#9ca2a8\\",\\"keyboardAppearance\\":\\"light\\",\\"autoCorrect\\":false,\\"autoCapitalize\\":\\"none\\",\\"accessibilityLabel\\":\\"placeholder\\",\\"placeholder\\":\\"placeholder\\",\\"value\\":\\"Rocket.Chat\\"},\\"children\\":null}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"marginBottom\\":10},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"marginBottom\\":10,\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#0d0e12\\"},null]},\\"children\\":[\\"Long Text\\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"position\\":\\"relative\\"}},\\"children\\":[{\\"type\\":\\"TextInput\\",\\"props\\":{\\"allowFontScaling\\":true,\\"rejectResponderTermination\\":true,\\"underlineColorAndroid\\":\\"transparent\\",\\"style\\":[{\\"color\\":\\"#0d0e12\\"},[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\",\\"height\\":48,\\"fontSize\\":16,\\"padding\\":14,\\"borderWidth\\":0.5,\\"borderRadius\\":2},null,null,{\\"backgroundColor\\":\\"#ffffff\\",\\"borderColor\\":\\"#cbcbcc\\",\\"color\\":\\"#0d0e12\\"},null,null],{\\"textAlign\\":\\"auto\\"}],\\"placeholderTextColor\\":\\"#9ca2a8\\",\\"keyboardAppearance\\":\\"light\\",\\"autoCorrect\\":false,\\"autoCapitalize\\":\\"none\\",\\"accessibilityLabel\\":\\"placeholder\\",\\"placeholder\\":\\"placeholder\\",\\"value\\":\\"https://open.rocket.chat/images/logo/android-chrome-512x512.png\\"},\\"children\\":null}]}]}]}"`;
+exports[`Storyshots Text Input Short and Long Text 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingHorizontal\\":14}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"marginBottom\\":10},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"marginBottom\\":10,\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#0d0e12\\"},null]},\\"children\\":[\\"Short Text\\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"position\\":\\"relative\\"}},\\"children\\":[{\\"type\\":\\"TextInput\\",\\"props\\":{\\"allowFontScaling\\":true,\\"rejectResponderTermination\\":true,\\"underlineColorAndroid\\":\\"transparent\\",\\"style\\":[{\\"color\\":\\"#0d0e12\\"},[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\",\\"height\\":48,\\"fontSize\\":16,\\"padding\\":14,\\"borderWidth\\":0.5,\\"borderRadius\\":2},null,null,{\\"backgroundColor\\":\\"#ffffff\\",\\"borderColor\\":\\"#cbcbcc\\",\\"color\\":\\"#0d0e12\\"},null,null],{\\"textAlign\\":\\"auto\\"}],\\"placeholderTextColor\\":\\"#9ca2a8\\",\\"keyboardAppearance\\":\\"light\\",\\"autoCorrect\\":false,\\"autoCapitalize\\":\\"none\\",\\"testID\\":\\"\\",\\"accessibilityLabel\\":\\"\\",\\"placeholder\\":\\"placeholder\\",\\"value\\":\\"Rocket.Chat\\"},\\"children\\":null}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"marginBottom\\":10},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"marginBottom\\":10,\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#0d0e12\\"},null]},\\"children\\":[\\"Long Text\\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"position\\":\\"relative\\"}},\\"children\\":[{\\"type\\":\\"TextInput\\",\\"props\\":{\\"allowFontScaling\\":true,\\"rejectResponderTermination\\":true,\\"underlineColorAndroid\\":\\"transparent\\",\\"style\\":[{\\"color\\":\\"#0d0e12\\"},[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\",\\"height\\":48,\\"fontSize\\":16,\\"padding\\":14,\\"borderWidth\\":0.5,\\"borderRadius\\":2},null,null,{\\"backgroundColor\\":\\"#ffffff\\",\\"borderColor\\":\\"#cbcbcc\\",\\"color\\":\\"#0d0e12\\"},null,null],{\\"textAlign\\":\\"auto\\"}],\\"placeholderTextColor\\":\\"#9ca2a8\\",\\"keyboardAppearance\\":\\"light\\",\\"autoCorrect\\":false,\\"autoCapitalize\\":\\"none\\",\\"testID\\":\\"\\",\\"accessibilityLabel\\":\\"\\",\\"placeholder\\":\\"placeholder\\",\\"value\\":\\"https://open.rocket.chat/images/logo/android-chrome-512x512.png\\"},\\"children\\":null}]}]}]}"`;

app/containers/TextInput/index.tsx

@@ -4,6 +4,7 @@ import { I18nManager, StyleProp, StyleSheet, TextInput, TextStyle } from 'react-
 import { IRCTextInputProps } from './FormTextInput';
 import { themes } from '../../lib/constants';
 import { TSupportedThemes } from '../../theme';
+import { testProps } from '../../lib/methods/testProps';
 
 const styles = StyleSheet.create({
 	input: {
@@ -23,6 +24,7 @@ const ThemedTextInput = React.forwardRef<TextInput, IThemedTextInput>(({ style,
 		placeholderTextColor={themes[theme].auxiliaryText}
 		keyboardAppearance={theme === 'light' ? 'light' : 'dark'}
 		{...props}
+		{...testProps(props.testID)}
 	/>
 ));
 

app/containers/markdown/Preview.tsx

@@ -8,6 +8,7 @@ import { formatText } from './formatText';
 import { useTheme } from '../../theme';
 import styles from './styles';
 import { formatHyperlink } from './formatHyperlink';
+import { testProps } from '../../lib/methods/testProps';
 
 interface IMarkdownPreview {
 	msg?: string;
@@ -35,7 +36,7 @@ const MarkdownPreview = ({ msg, numberOfLines = 1, testID, style = [] }: IMarkdo
 			accessibilityLabel={m}
 			style={[styles.text, { color: themes[theme].bodyText }, ...style]}
 			numberOfLines={numberOfLines}
-			testID={testID}>
+			{...testProps(testID)}>
 			{m}
 		</Text>
 	);

app/containers/message/Broadcast.tsx

@@ -10,6 +10,7 @@ import { themes } from '../../lib/constants';
 import MessageContext from './Context';
 import { IMessageBroadcast } from './interfaces';
 import { useTheme } from '../../theme';
+import { testProps } from '../../lib/methods/testProps';
 
 const Broadcast = React.memo(({ author, broadcast }: IMessageBroadcast) => {
 	const { user, replyBroadcast } = useContext(MessageContext);
@@ -24,7 +25,7 @@ const Broadcast = React.memo(({ author, broadcast }: IMessageBroadcast) => {
 					background={Touchable.Ripple(themes[theme].bannerBackground)}
 					style={[styles.button, { backgroundColor: themes[theme].tintColor }]}
 					hitSlop={BUTTON_HIT_SLOP}
-					testID='message-broadcast-reply'>
+					{...testProps('message-broadcast-reply')}>
 					<>
 						<CustomIcon name='arrow-back' size={20} style={styles.buttonIcon} color={themes[theme].buttonText} />
 						<Text style={[styles.buttonText, { color: themes[theme].buttonText }]}>{I18n.t('Reply')}</Text>

app/containers/message/Components/CollapsibleQuote/__snapshots__/CollapsibleQuote.stories.storyshot

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Message Item 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"padding\\":10}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"testID\\":\\"collapsibleQuoteTouchable-Engineering (9 today)\\",\\"hitSlop\\":{\\"top\\":4,\\"right\\":4,\\"bottom\\":4,\\"left\\":4},\\"focusable\\":true,\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"marginTop\\":6,\\"borderWidth\\":1,\\"borderRadius\\":4,\\"minHeight\\":40,\\"backgroundColor\\":\\"#f3f4f5\\",\\"borderLeftColor\\":\\"#CBCED1\\",\\"borderTopColor\\":\\"#e1e5e8\\",\\"borderRightColor\\":\\"#e1e5e8\\",\\"borderBottomColor\\":\\"#e1e5e8\\",\\"borderLeftWidth\\":2,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"borderRadius\\":4,\\"padding\\":8}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"Engineering (9 today)\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"width\\":20,\\"height\\":20,\\"right\\":8,\\"top\\":8,\\"justifyContent\\":\\"center\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":22,\\"color\\":\\"#6C727A\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]}]}"`;
+exports[`Storyshots Message Item 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"padding\\":10}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"collapsibleQuoteTouchable-Engineering (9 today)\\",\\"testID\\":\\"collapsibleQuoteTouchable-Engineering (9 today)\\",\\"hitSlop\\":{\\"top\\":4,\\"right\\":4,\\"bottom\\":4,\\"left\\":4},\\"focusable\\":true,\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"marginTop\\":6,\\"borderWidth\\":1,\\"borderRadius\\":4,\\"minHeight\\":40,\\"backgroundColor\\":\\"#f3f4f5\\",\\"borderLeftColor\\":\\"#CBCED1\\",\\"borderTopColor\\":\\"#e1e5e8\\",\\"borderRightColor\\":\\"#e1e5e8\\",\\"borderBottomColor\\":\\"#e1e5e8\\",\\"borderLeftWidth\\":2,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"borderRadius\\":4,\\"padding\\":8}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"Engineering (9 today)\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"width\\":20,\\"height\\":20,\\"right\\":8,\\"top\\":8,\\"justifyContent\\":\\"center\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":22,\\"color\\":\\"#6C727A\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]}]}"`;

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

@@ -13,6 +13,7 @@ import Markdown from '../../../markdown';
 import MessageContext from '../../Context';
 import Touchable from '../../Touchable';
 import { BUTTON_HIT_SLOP } from '../../utils';
+import { testProps } from '../../../../lib/methods/testProps';
 
 const styles = StyleSheet.create({
 	button: {
@@ -92,7 +93,9 @@ const Fields = React.memo(
 			<>
 				{attachment.fields.map(field => (
 					<View key={field.title} style={[styles.fieldContainer, { width: field.short ? '50%' : '100%' }]}>
-						<Text testID='collapsibleQuoteTouchableFieldTitle' style={[styles.fieldTitle, { color: themes[theme].bodyText }]}>
+						<Text
+							{...testProps('collapsibleQuoteTouchableFieldTitle')}
+							style={[styles.fieldTitle, { color: themes[theme].bodyText }]}>
 							{field.title}
 						</Text>
 						<Markdown
@@ -147,7 +150,7 @@ const CollapsibleQuote = React.memo(
 		return (
 			<>
 				<Touchable
-					testID={`collapsibleQuoteTouchable-${attachment.title}`}
+					{...testProps(`collapsibleQuoteTouchable-${attachment.title}`)}
 					onPress={onPress}
 					style={[
 						styles.button,

app/containers/message/Reactions.tsx

@@ -10,6 +10,7 @@ import { themes } from '../../lib/constants';
 import { TSupportedThemes, useTheme } from '../../theme';
 import MessageContext from './Context';
 import { TGetCustomEmoji } from '../../definitions/IEmoji';
+import { testProps } from '../../lib/methods/testProps';
 
 interface IReaction {
 	_id: string;
@@ -34,7 +35,7 @@ const AddReaction = React.memo(({ theme }: { theme: TSupportedThemes }) => {
 		<Touchable
 			onPress={reactionInit}
 			key='message-add-reaction'
-			testID='message-add-reaction'
+			{...testProps('message-add-reaction')}
 			style={[styles.reactionButton, { backgroundColor: themes[theme].backgroundColor }]}
 			background={Touchable.Ripple(themes[theme].bannerBackground)}
 			hitSlop={BUTTON_HIT_SLOP}>
@@ -53,7 +54,7 @@ const Reaction = React.memo(({ reaction, getCustomEmoji, theme }: IMessageReacti
 			onPress={() => onReactionPress(reaction.emoji)}
 			onLongPress={onReactionLongPress}
 			key={reaction.emoji}
-			testID={`message-reaction-${reaction.emoji}`}
+			{...testProps(`message-reaction-${reaction.emoji}`)}
 			style={[
 				styles.reactionButton,
 				{ backgroundColor: reacted ? themes[theme].bannerBackground : themes[theme].backgroundColor }

app/containers/message/RepliedThread.tsx

@@ -8,6 +8,7 @@ import I18n from '../../i18n';
 import { MarkdownPreview } from '../markdown';
 import { IMessageRepliedThread } from './interfaces';
 import { useTheme } from '../../theme';
+import { testProps } from '../../lib/methods/testProps';
 
 const RepliedThread = memo(({ tmid, tmsg, isHeader, fetchThreadName, id, isEncrypted }: IMessageRepliedThread) => {
 	const { theme } = useTheme();
@@ -33,7 +34,7 @@ const RepliedThread = memo(({ tmid, tmsg, isHeader, fetchThreadName, id, isEncry
 	}
 
 	return (
-		<View style={styles.repliedThread} testID={`message-thread-replied-on-${msg}`}>
+		<View style={styles.repliedThread} {...testProps(`message-thread-replied-on-${msg}`)}>
 			<CustomIcon name='threads' size={20} style={styles.repliedThreadIcon} color={themes[theme].tintColor} />
 			<MarkdownPreview msg={msg} style={[styles.repliedThreadName, { color: themes[theme].tintColor }]} />
 			<View style={styles.repliedThreadDisclosure}>

app/containers/message/Thread.tsx

@@ -8,6 +8,7 @@ import ThreadDetails from '../ThreadDetails';
 import I18n from '../../i18n';
 import { IMessageThread } from './interfaces';
 import { useTheme } from '../../theme';
+import { testProps } from '../../lib/methods/testProps';
 
 const Thread = React.memo(
 	({ msg, tcount, tlm, isThreadRoom, id }: IMessageThread) => {
@@ -20,7 +21,9 @@ const Thread = React.memo(
 
 		return (
 			<View style={styles.buttonContainer}>
-				<View style={[styles.button, { backgroundColor: themes[theme].tintColor }]} testID={`message-thread-button-${msg}`}>
+				<View
+					style={[styles.button, { backgroundColor: themes[theme].tintColor }]}
+					{...testProps(`message-thread-button-${msg}`)}>
 					<Text style={[styles.buttonText, { color: themes[theme].buttonText }]}>{I18n.t('Reply')}</Text>
 				</View>
 				<ThreadDetails

app/lib/methods/testProps.ts

@@ -0,0 +1,4 @@
+export const testProps = (testID?: string): { testID?: string; accessibilityLabel?: string } => ({
+	testID,
+	accessibilityLabel: testID
+});

app/utils/touch.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { RectButton, RectButtonProps } from 'react-native-gesture-handler';
+import { TouchableOpacity } from 'react-native';
 
 import { TSupportedThemes } from '../theme';
 import { themes } from '../lib/constants';
@@ -9,6 +10,7 @@ interface ITouchProps extends RectButtonProps {
 	theme: TSupportedThemes;
 	accessibilityLabel?: string;
 	testID?: string;
+	touchable?: boolean;
 }
 
 class Touch extends React.Component<ITouchProps> {
@@ -23,8 +25,15 @@ class Touch extends React.Component<ITouchProps> {
 	};
 
 	render(): JSX.Element {
-		const { children, onPress, theme, underlayColor, ...props } = this.props;
+		const { children, onPress, theme, underlayColor, touchable, ...props } = this.props;
 
+		if (touchable) {
+			return (
+				<TouchableOpacity onPress={onPress as () => {}} {...(props as any)}>
+					{children}
+				</TouchableOpacity>
+			);
+		}
 		return (
 			<RectButton
 				ref={this.getRef}

app/views/LoginView.tsx

@@ -216,7 +216,8 @@ class LoginView extends React.Component<ILoginViewProps, ILoginViewState> {
 						<Text
 							style={[styles.bottomContainerTextBold, { color: themes[theme].actionTintColor }]}
 							onPress={this.register}
-							testID='login-view-register'>
+							testID='login-view-register'
+							accessibilityLabel='login-view-register'>
 							{I18n.t('Create_account')}
 						</Text>
 					</View>

app/views/NewServerView/ServerInput/index.tsx

@@ -7,6 +7,7 @@ import { themes } from '../../../lib/constants';
 import I18n from '../../../i18n';
 import { TServerHistoryModel } from '../../../definitions/IServerHistory';
 import Item from './Item';
+import { testProps } from '../../../lib/methods/testProps';
 import { TSupportedThemes } from '../../../theme';
 
 const styles = StyleSheet.create({
@@ -57,7 +58,6 @@ const ServerInput = ({
 				value={text}
 				returnKeyType='send'
 				onChangeText={onChangeText}
-				testID='new-server-view-input'
 				onSubmitEditing={onSubmit}
 				clearButtonMode='while-editing'
 				keyboardType='url'
@@ -65,6 +65,7 @@ const ServerInput = ({
 				theme={theme}
 				onFocus={() => setFocused(true)}
 				onBlur={() => setFocused(false)}
+				{...testProps('new-server-view-input')}
 			/>
 			{focused && serversHistory?.length ? (
 				<View

app/views/NewServerView/index.tsx

@@ -375,6 +375,7 @@ class NewServerView extends React.Component<INewServerViewProps, INewServerViewS
 						loading={!connectingOpen && connecting}
 						style={[styles.connectButton, { marginTop: verticalScale({ size: 16, height }) }]}
 						testID='new-server-view-button'
+						accessibilityLabel='new-server-view-button'
 					/>
 					<OrSeparator theme={theme} />
 					<Text

app/views/SidebarView/SidebarItem.tsx

@@ -5,6 +5,7 @@ import Touch from '../../utils/touch';
 import { themes } from '../../lib/constants';
 import { TSupportedThemes, withTheme } from '../../theme';
 import styles from './styles';
+import { testProps } from '../../lib/methods/testProps';
 
 interface SidebarItemProps {
 	left: JSX.Element;
@@ -19,10 +20,11 @@ interface SidebarItemProps {
 const Item = React.memo(({ left, right, text, onPress, testID, current, theme }: SidebarItemProps) => (
 	<Touch
 		key={testID}
-		testID={testID}
+		{...testProps(testID)}
 		onPress={onPress}
 		theme={theme}
-		style={[styles.item, current && { backgroundColor: themes[theme].borderColor }]}>
+		style={[styles.item, current && { backgroundColor: themes[theme].borderColor }]}
+		touchable>
 		<View style={styles.itemHorizontal}>{left}</View>
 		<View style={styles.itemCenter}>
 			<Text style={[styles.itemText, { color: themes[theme].titleText }]} numberOfLines={1} accessibilityLabel={text}>

app/views/SidebarView/index.tsx

@@ -138,8 +138,10 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
 	}
 
 	sidebarNavigate = (route: string) => {
+		const { navigation } = this.props;
 		// @ts-ignore
 		logEvent(events[`SIDEBAR_GO_${route.replace('StackNavigator', '').replace('View', '').toUpperCase()}`]);
+		navigation?.closeDrawer();
 		Navigation.navigate(route);
 	};
 
@@ -180,7 +182,7 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
 	renderNavigation = () => {
 		const { theme } = this.props;
 		return (
-			<>
+			<View>
 				<SidebarItem
 					text={I18n.t('Chats')}
 					left={<CustomIcon name='message' size={20} color={themes[theme].titleText} />}
@@ -214,7 +216,7 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
 					current={this.currentItemKey === 'SettingsStackNavigator'}
 				/>
 				{this.renderAdmin()}
-			</>
+			</View>
 		);
 	};
 

appium/README.md

@@ -0,0 +1,21 @@
+# Rocket.chat Appium integration
+
+Project to run e2ed tests with appium.
+
+## Running
+Follow the below commands -
+- Clone the project - `https://github.com/RocketChat/Rocket.Chat.ReactNative.git`.
+
+- Go to appium folder using the same terminal - `cd appium`.
+
+- Install dependencies using `npm i` in the terminal.
+
+- Update the deviceName and platFormVersion in `config/android.info.js` and `config/ios.info.js` respectively.
+
+- Update the `apps` folder with apk to run on android or set .ipa to run on ios.
+
+- Start appium server.
+
+- Execute `npm run ios` to run ios app.
+
+- Execute `npm run android` to run ios app.

appium/appium-config.md

@@ -0,0 +1,31 @@
+## Settings
+
+- Install Node.js (Options)
+
+  - using installer `https://nodejs.org/en/download/`
+  - for mackbook - `brew install node`
+  - for windows - `choco install nodejs`
+
+- Download and install Appium from - `https://github.com/appium/appium-desktop/releases`.
+
+- Download and install Appium inspector from - `https://github.com/appium/appium-inspector/releases` (Optional).
+
+- install global dependencies for Appium using npm - `npm install -G appium`
+
+## Default settings for appium inspector
+
+- Set Remote Host to: `127.0.0.1`
+- Set Remote Path to: `/wd/hub`
+
+- And update Desired Capabilities/JSON to: 
+
+```
+{
+  "platformName": "android",
+  "appium:platformVersion": "12",
+  "appium:deviceName": "emulator",
+  "appium:automationName": "UiAutomator2",
+  "appium:appPackage": "chat.rocket.reactnative",
+  "appium:appActivity": "chat.rocket.reactnative.MainActivity"
+}
+```

appium/babel.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+	presets: ['@babel/preset-env'],
+	plugins: [['@babel/transform-runtime']]
+};

appium/config/android.config.js

@@ -0,0 +1,21 @@
+const { config } = require('./wdio.conf');
+const android = require('./android.info');
+// const path = require('path');
+
+// appium capabilities
+config.capabilities = [
+	{
+		platformName: 'Android',
+		automationName: 'uiautomator2',
+		maxInstances: 1,
+		noReset: true,
+		fullReset: false,
+		deviceName: android.deviceName,
+		platformVersion: android.platformVersion,
+		appPackage: android.appPackage,
+		appActivity: android.appActivity
+		// app: path.resolve('apps/' + android.app)
+	}
+];
+
+exports.config = config;

appium/config/android.info.js

@@ -0,0 +1,7 @@
+module.exports = {
+	deviceName: 'emulator', // pass the udid ode device
+	platformVersion: '12', // pass the platform version
+	appPackage: 'chat.rocket.reactnative',
+	appActivity: 'chat.rocket.reactnative.MainActivity'
+	// app: 'app.apk'
+};

appium/config/ios.config.js

@@ -0,0 +1,17 @@
+const { config } = require('./wdio.conf');
+const iosInfo = require('./ios.info');
+
+// appium capabilities
+config.capabilities = [
+	{
+		platformName: 'iOS',
+		automationName: 'XCUITest',
+		noReset: true,
+		fullReset: false,
+		deviceName: iosInfo.deviceName,
+		platformVersion: iosInfo.platformVersion,
+		app: iosInfo.app
+	}
+];
+
+exports.config = config;

appium/config/ios.info.js

@@ -0,0 +1,5 @@
+module.exports = {
+	deviceName: 'iPhone 11 Pro', // pass the udid or device name
+	platformVersion: '14.5', // pass the platform version
+	app: 'chat.rocket.reactnative'
+};

appium/config/wdio.conf.js

@@ -0,0 +1,144 @@
+exports.config = {
+	//
+	// ====================
+	// Runner Configuration
+	// ====================
+	//
+	// WebdriverIO allows it to run your tests in arbitrary locations (e.g. locally or
+	// on a remote machine).
+	runner: 'local',
+	//
+	// ==================
+	// Specify Test Files
+	// ==================
+	// Define which test specs should run. The pattern is relative to the directory
+	// from which `wdio` was called. Notice that, if you are calling `wdio` from an
+	// NPM script (see https://docs.npmjs.com/cli/run-script) then the current working
+	// directory is where your package.json resides, so `wdio` will be called from there.
+	//
+	// Patterns to exclude.
+	exclude: [
+		// 'path/to/excluded/files'
+	],
+	//
+	// ============
+	// Capabilities
+	// ============
+	// Define your capabilities here. WebdriverIO can run multiple capabilities at the same
+	// time. Depending on the number of capabilities, WebdriverIO launches several test
+	// sessions. Within your capabilities you can overwrite the spec and exclude options in
+	// order to group specific specs to a specific capability.
+	//
+	// First, you can define how many instances should be started at the same time. Let's
+	// say you have 3 different capabilities (Chrome, Firefox, and Safari) and you have
+	// set maxInstances to 1; wdio will spawn 3 processes. Therefore, if you have 10 spec
+	// files and you set maxInstances to 10, all spec files will get tested at the same time
+	// and 30 processes will get spawned. The property handles how many capabilities
+	// from the same test should run tests.
+	//
+	maxInstances: 1,
+	//
+	// If you have trouble getting all important capabilities together, check out the
+	// Sauce Labs platform configurator - a great tool to configure your capabilities:
+	// https://docs.saucelabs.com/reference/platforms-configurator
+	// capabilities: [{
+	//
+	//     // maxInstances can get overwritten per capability. So if you have an in-house Selenium
+	//     // grid with only 5 firefox instances available you can make sure that not more than
+	//     // 5 instances get started at a time.
+	//     maxInstances: 5,
+	//     //
+	//     browserName: 'chrome',
+	//     // If outputDir is provided WebdriverIO can capture driver session logs
+	//     // it is possible to configure which logTypes to include/exclude.
+	//     // excludeDriverLogs: ['*'], // pass '*' to exclude all driver session logs
+	//     // excludeDriverLogs: ['bugreport', 'server'],
+	// }],
+	//
+	// ===================
+	// Test Configurations
+	// ===================
+	// Define all options that are relevant for the WebdriverIO instance here
+	//
+	// Level of logging verbosity: trace | debug | info | warn | error | silent
+	logLevel: 'info',
+	//
+	// Set specific log levels per logger
+	// loggers:
+	// - webdriver, webdriverio
+	// - @wdio/applitools-service, @wdio/browserstack-service, @wdio/devtools-service, @wdio/sauce-service
+	// - @wdio/mocha-framework, @wdio/jasmine-framework
+	// - @wdio/local-runner, @wdio/lambda-runner
+	// - @wdio/sumologic-reporter
+	// - @wdio/cli, @wdio/config, @wdio/sync, @wdio/utils
+	// Level of logging verbosity: trace | debug | info | warn | error | silent
+	// logLevels: {
+	//     webdriver: 'info',
+	//     '@wdio/applitools-service': 'info'
+	// },
+	//
+	// If you only want to run your tests until a specific amount of tests have failed use
+	// bail (default is 0 - don't bail, run all tests).
+	bail: 0,
+	//
+	// Set a base URL in order to shorten url command calls. If your `url` parameter starts
+	// with `/`, the base url gets prepended, not including the path portion of your baseUrl.
+	// If your `url` parameter starts without a scheme or `/` (like `some/path`), the base url
+	// gets prepended directly.
+	//
+	// Default timeout for all waitFor* commands.
+	waitforTimeout: 10000,
+	//
+	// Default timeout in milliseconds for request
+	// if browser driver or grid doesn't send response
+	connectionRetryTimeout: 120000,
+	//
+	// Default request retries count
+	connectionRetryCount: 3,
+	//
+	// Test runner services
+	// Services take over a specific job you don't want to take care of. They enhance
+	// your test setup with almost no effort. Unlike plugins, they don't add new
+	// commands. Instead, they hook themselves up into the test process.
+	services: ['appium'],
+	appium: {
+		command: 'appium',
+		args: {}
+	},
+	port: 4723,
+	path: '/wd/hub',
+
+	// Framework you want to run your specs with.
+	// The following are supported: Mocha, Jasmine, and Cucumber
+	// see also: https://webdriver.io/docs/frameworks.html
+	//
+	// Make sure you have the wdio adapter package for the specific framework installed
+	// before running any tests.
+	framework: 'mocha',
+	mochaOpts: {
+		ui: 'bdd',
+		timeout: 60000
+	},
+	specs: ['./tests/specs/**/*.js'],
+	// beforeSuite() {
+	// 	const { setup } = require('../../e2e/helpers/data_setup');
+
+	// 	before(async () => {
+	// 		await setup();
+	// 	});
+	// }
+	autoCompileOpts: {
+		autoCompile: true,
+		// see https://github.com/TypeStrong/ts-node#cli-and-programmatic-options
+		// for all available options
+		tsNodeOpts: {
+			transpileOnly: true,
+			project: 'tsconfig.json'
+		},
+		// tsconfig-paths is only used if "tsConfigPathsOpts" are provided, if you
+		// do please make sure "tsconfig-paths" is installed as dependency
+		tsConfigPathsOpts: {
+			baseUrl: './'
+		}
+	}
+};

appium/package.json

@@ -0,0 +1,29 @@
+{
+	"name": "rocket-chat-appium",
+	"version": "1.0.0",
+	"description": "",
+	"main": "index.js",
+	"scripts": {
+		"ios": "wdio ./config/ios.config.js",
+		"android": "wdio ./config/android.config.js"
+	},
+	"author": "",
+	"license": "ISC",
+	"devDependencies": {
+		"@babel/core": "^7.17.9",
+		"@babel/plugin-transform-runtime": "^7.17.0",
+		"@babel/preset-env": "^7.16.11",
+		"@babel/register": "^7.17.7",
+		"@wdio/appium-service": "^7.19.1",
+		"@wdio/cli": "^7.19.3",
+		"@wdio/local-runner": "^7.19.3",
+		"@wdio/mocha-framework": "^7.19.3",
+		"@wdio/spec-reporter": "^7.19.1",
+		"@wdio/sync": "^7.19.3",
+		"chai": "^4.3.6",
+		"ts-node": "^10.7.0",
+		"typescript": "^4.6.2",
+		"wdio-json-reporter": "^3.0.0",
+		"webdriverio": "^7.19.3"
+	}
+}

appium/tests/helpers/gestures.ts

@@ -0,0 +1,123 @@
+// @ts-ignore
+import { RectReturn } from '@wdio/protocols/build/types';
+
+/**
+ * To make a Gesture methods more robust for multiple devices and also
+ * multiple screen sizes the advice is to work with percentages instead of
+ * actual coordinates. The percentages will calculate the position on the
+ * screen based on the SCREEN_SIZE which will be determined once if needed
+ * multiple times.
+ */
+
+let SCREEN_SIZE: RectReturn;
+interface XY {
+	x: number;
+	y: number;
+}
+
+/**
+ * The values in the below object are percentages of the screen
+ */
+const SWIPE_DIRECTION = {
+	down: {
+		start: { x: 50, y: 15 },
+		end: { x: 50, y: 85 }
+	},
+	left: {
+		start: { x: 95, y: 50 },
+		end: { x: 5, y: 50 }
+	},
+	right: {
+		start: { x: 5, y: 50 },
+		end: { x: 95, y: 50 }
+	},
+	up: {
+		start: { x: 50, y: 85 },
+		end: { x: 50, y: 15 }
+	}
+};
+
+async function swipe(from: XY, to: XY) {
+	// @ts-ignore
+	await driver.performActions([
+		{
+			// a. Create the event
+			type: 'pointer',
+			id: 'finger1',
+			parameters: { pointerType: 'touch' },
+			actions: [
+				// b. Move finger into start position
+				{ type: 'pointerMove', duration: 0, x: from.x, y: from.y },
+				// c. Finger comes down into contact with screen
+				{ type: 'pointerDown', button: 0 },
+				// d. Pause for a little bit
+				{ type: 'pause', duration: 100 },
+				// e. Finger moves to end position
+				//    We move our finger from the center of the element to the
+				//    starting position of the element.
+				//    Play with the duration to make the swipe go slower / faster
+				{ type: 'pointerMove', duration: 1000, x: to.x, y: to.y },
+				// f. Finger gets up, off the screen
+				{ type: 'pointerUp', button: 0 }
+			]
+		}
+	]);
+	// Add a pause, just to make sure the swipe is done
+	// @ts-ignore
+	await driver.pause(1000);
+}
+
+function calculateXY({ x, y }: XY, percentage: number): XY {
+	return {
+		x: x * percentage,
+		y: y * percentage
+	};
+}
+
+function getDeviceScreenCoordinates(screenSize: RectReturn, coordinates: XY): XY {
+	return {
+		x: Math.round(screenSize.width * (coordinates.x / 100)),
+		y: Math.round(screenSize.height * (coordinates.y / 100))
+	};
+}
+
+async function swipeOnPercentage(from: XY, to: XY) {
+	// Get the screen size and store it so it can be re-used.
+	// This will save a lot of webdriver calls if this methods is used multiple times.
+	// @ts-ignore
+	SCREEN_SIZE = SCREEN_SIZE || (await driver.getWindowRect());
+	// Get the start position on the screen for the swipe
+	const pressOptions = getDeviceScreenCoordinates(SCREEN_SIZE, from);
+	// Get the move to position on the screen for the swipe
+	const moveToScreenCoordinates = getDeviceScreenCoordinates(SCREEN_SIZE, to);
+
+	await swipe(pressOptions, moveToScreenCoordinates);
+}
+
+export async function swipeDown(percentage = 1) {
+	await swipeOnPercentage(calculateXY(SWIPE_DIRECTION.down.start, percentage), calculateXY(SWIPE_DIRECTION.down.end, percentage));
+}
+
+/**
+ * Swipe Up based on a percentage
+ */
+export async function swipeUp(percentage = 1) {
+	await swipeOnPercentage(calculateXY(SWIPE_DIRECTION.up.start, percentage), calculateXY(SWIPE_DIRECTION.up.end, percentage));
+}
+
+/**
+ * Swipe left based on a percentage
+ */
+export async function swipeLeft(percentage = 1) {
+	await swipeOnPercentage(calculateXY(SWIPE_DIRECTION.left.start, percentage), calculateXY(SWIPE_DIRECTION.left.end, percentage));
+}
+
+/**
+ * Swipe right based on a percentage
+ */
+export async function swipeRight(percentage = 1) {
+	await swipeOnPercentage(
+		calculateXY(SWIPE_DIRECTION.right.start, percentage),
+		calculateXY(SWIPE_DIRECTION.right.end, percentage)
+	);
+}

appium/tests/helpers/index.js

@@ -0,0 +1,41 @@
+const { expect } = require('chai');
+
+export const launchApp = async () => await driver.launchApp();
+
+export const setValue = async (tag, value) => await $(`~${tag}`).setValue(`${value}`);
+
+export const getText = async tag => await $(`~${tag}`).getText();
+
+export const equal = async (value, text) => expect(value).to.equal(prop);
+
+export const click = async tag => await $(`~${tag}`).click();
+
+export const clickById = async tag => await $(`id=${tag}`).click();
+
+export const isAndroid = () => driver.capabilities.platformName === 'Android';
+
+export const openDrawer = async () => {
+	if (isAndroid()) {
+		await $('//android.view.ViewGroup[@content-desc="rooms-list-view-sidebar"]/android.widget.TextView').click(); //TEMP
+	} else {
+		await $('[name="rooms-list-view-sidebar"]').click();
+	}
+};
+
+export const clickAlert = async tag => {
+	if (isAndroid()) {
+		await clickById('android:id/button1');
+	} else {
+		await $(`[name="${tag}"]`).click();
+	}
+};
+
+export const setValueAndEnter = async (tag, value) => {
+	if (isAndroid()) {
+		await $(`~${tag}`).click();
+		await $(`~${tag}`).setValue(value);
+		await $(`~${tag}`).pressKeyCode(66);
+	} else {
+		await $(`~${tag}`).setValue(`${value}\n`);
+	}
+};

appium/tests/helpers/login.js

@@ -0,0 +1,17 @@
+import { click, clickAlert, openDrawer, setValue, setValueAndEnter } from '.';
+import { swipeDown } from './gestures';
+
+export const login = async () => {
+	await setValueAndEnter('new-server-view-input', 'mobile');
+	await click('workspace-view-login');
+	await setValue('login-view-email', 'useroneqqshjglvfnkzamfqvgnb');
+	await setValueAndEnter('login-view-password', '123');
+};
+
+export const logout = async () => {
+	await openDrawer();
+	await click('sidebar-settings');
+	await swipeDown(20);
+	await click('settings-logout');
+	await clickAlert('Sair'); // iOS is text
+};

appium/tests/specs/01-onboarding.e2e.js

@@ -0,0 +1,55 @@
+// const data = require('../../../e2e/data');
+// // const { platformTypes } = require('../../../e2e/helpers/app');
+
+// describe('Onboarding', () => {
+// 	// let alertButtonType;
+// 	// let textMatcher;
+// 	before(async () => {
+// 		await driver.closeApp();
+// 		await driver.launchApp();
+// 		// await $('~new-server-view').toExis
+// 		// await waitFor(element(by.id('new-server-view')))
+// 		// 	.toBeVisible()
+// 		// 	.withTimeout(20000);
+// 	});
+
+// 	// describe('Render', () => {
+// 	// 	it('should have onboarding screen', async () => {
+// 	// 		await expect(element(by.id('new-server-view'))).toBeVisible();
+// 	// 	});
+
+// 	// 	it('should have "Join our open workspace"', async () => {
+// 	// 		await expect(element(by.id('new-server-view-open'))).toBeVisible();
+// 	// 	});
+// 	// });
+
+// 	describe('Usage', () => {
+// 		it('should enter an invalid server and get error', async () => {
+// 			await $('~new-server-view-input').addValue('invalidtest');
+// 			// await $('new-server-view-input').
+// 			// await waitFor(element(by[textMatcher]('Oops!')))
+// 			// 	.toExist()
+// 			// 	.withTimeout(10000);
+// 			// await element(by[textMatcher]('OK').and(by.type(alertButtonType))).tap();
+// 		});
+
+// 		// it('should tap on "Join our open workspace" and navigate', async () => {
+// 		// 	await element(by.id('new-server-view-open')).tap();
+// 		// 	await waitFor(element(by.id('workspace-view')))
+// 		// 		.toBeVisible()
+// 		// 		.withTimeout(60000);
+// 		// });
+
+// 		// it('should enter a valid server without login services and navigate to login', async () => {
+// 		// 	await device.launchApp({ newInstance: true });
+// 		// 	await waitFor(element(by.id('new-server-view')))
+// 		// 		.toBeVisible()
+// 		// 		.withTimeout(5000);
+// 		// 	await element(by.id('new-server-view-input')).replaceText(data.server);
+// 		// 	await element(by.id('new-server-view-input')).tapReturnKey();
+// 		// 	await waitFor(element(by.id('workspace-view')))
+// 		// 		.toBeVisible()
+// 		// 		.withTimeout(60000);
+// 		// });
+// 	});
+// });

appium/tests/specs/011-onboarding.e2e.js

@@ -0,0 +1,20 @@
+const { launchApp, equal, getText } = require('../helpers');
+const { login, logout } = require('../helpers/login');
+
+describe('Onboarding', () => {
+	before(() => {
+		launchApp();
+	});
+
+	describe('Login', () => {
+		it('Login in app', async () => {
+			await login();
+		});
+
+		it('Logout in app', async () => {
+			await logout();
+			const login = await getText('new-server-view-input');
+			equal(login, 'Ex. your-company.rocket.chat');
+		});
+	});
+});

appium/tests/specs/initial-app-sreen.e2e.js

@@ -0,0 +1,24 @@
+// const { setup } = require('../../../e2e/helpers/data_setup');
+// const { launchApp, setValue, getText, equal, setValueAndEnter } = require('../helpers');
+
+// describe('Verify initial app screen', () => {
+// 	// before(async () => {
+// 	// 	await setup();
+// 	// });
+
+// 	beforeEach(() => {
+// 		launchApp();
+// 	});
+
+// 	it('set workspace url', async () => {
+// 		await setValue('new-server-view-input', 'mobile');
+// 		const value = await getText('new-server-view-input');
+// 		equal(value, 'mobile');
+// 	});
+
+// 	it('set workspace url and login', async () => {
+// 		await setValueAndEnter('new-server-view-input', 'mobile');
+// 		const login = await getText('Login');
+// 		equal(login, 'Login');
+// 	});
+// });

appium/tsconfig.json

@@ -0,0 +1,13 @@
+{
+	"compilerOptions": {
+		"outDir": "./.tsbuild/",
+		"sourceMap": false,
+		"target": "es2019",
+		"module": "commonjs",
+		"removeComments": true,
+		"noImplicitAny": true,
+		"strictPropertyInitialization": true,
+		"strictNullChecks": true,
+		"types": ["node", "webdriverio/async", "@wdio/mocha-framework"]
+	}
+}

storybook/stories/__snapshots__/Avatar.storyshot

@@ -1,31 +1,31 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Avatar Avatar by path 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/diego.mello?format=png&size=56\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
+exports[`Storyshots Avatar Avatar by path 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\",\\"accessibilityLabel\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/diego.mello?format=png&size=56\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
 
-exports[`Storyshots Avatar Avatar by roomId 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/room/devWBbYr7inwupPqK?format=png&size=56\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
+exports[`Storyshots Avatar Avatar by roomId 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\",\\"accessibilityLabel\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/room/devWBbYr7inwupPqK?format=png&size=56\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
 
-exports[`Storyshots Avatar Avatar by text 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/Avatar?format=png&size=56\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
+exports[`Storyshots Avatar Avatar by text 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\",\\"accessibilityLabel\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/Avatar?format=png&size=56\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
 
-exports[`Storyshots Avatar Avatar by url 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://user-images.githubusercontent.com/29778115/89444446-14738480-d728-11ea-9412-75fd978d95fb.jpg\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
+exports[`Storyshots Avatar Avatar by url 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\",\\"accessibilityLabel\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://user-images.githubusercontent.com/29778115/89444446-14738480-d728-11ea-9412-75fd978d95fb.jpg\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
 
-exports[`Storyshots Avatar Channel 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/@general?format=png&size=56\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
+exports[`Storyshots Avatar Channel 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\",\\"accessibilityLabel\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/@general?format=png&size=56\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
 
-exports[`Storyshots Avatar Children 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/Avatar?format=png&size=56\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"theme\\":\\"light\\",\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#cbced1\\"},[{\\"width\\":24,\\"height\\":24,\\"textAlignVertical\\":\\"center\\"},[{\\"position\\":\\"absolute\\",\\"bottom\\":-2,\\"right\\":-2,\\"borderRadius\\":10},null]],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}"`;
+exports[`Storyshots Avatar Children 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\",\\"accessibilityLabel\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/Avatar?format=png&size=56\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"theme\\":\\"light\\",\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#cbced1\\"},[{\\"width\\":24,\\"height\\":24,\\"textAlignVertical\\":\\"center\\"},[{\\"position\\":\\"absolute\\",\\"bottom\\":-2,\\"right\\":-2,\\"borderRadius\\":10},null]],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}"`;
 
-exports[`Storyshots Avatar Custom borderRadius 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":28},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":28}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/Avatar?format=png&size=56\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
+exports[`Storyshots Avatar Custom borderRadius 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":28},null],\\"testID\\":\\"avatar\\",\\"accessibilityLabel\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":28}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/Avatar?format=png&size=56\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
 
-exports[`Storyshots Avatar Custom style 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},{\\"padding\\":16}],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/Avatar?format=png&size=56\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
+exports[`Storyshots Avatar Custom style 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},{\\"padding\\":16}],\\"testID\\":\\"avatar\\",\\"accessibilityLabel\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/Avatar?format=png&size=56\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
 
-exports[`Storyshots Avatar Direct 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/diego.mello?format=png&size=56\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
+exports[`Storyshots Avatar Direct 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\",\\"accessibilityLabel\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/diego.mello?format=png&size=56\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
 
-exports[`Storyshots Avatar Emoji 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},[{\\"width\\":30,\\"height\\":30},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/emoji-custom/troll.jpg\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"contain\\"},\\"children\\":null}]}]}"`;
+exports[`Storyshots Avatar Emoji 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\",\\"accessibilityLabel\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},[{\\"width\\":30,\\"height\\":30},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/emoji-custom/troll.jpg\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"contain\\"},\\"children\\":null}]}]}"`;
 
-exports[`Storyshots Avatar Static 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://user-images.githubusercontent.com/29778115/89444446-14738480-d728-11ea-9412-75fd978d95fb.jpg\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
+exports[`Storyshots Avatar Static 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\",\\"accessibilityLabel\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://user-images.githubusercontent.com/29778115/89444446-14738480-d728-11ea-9412-75fd978d95fb.jpg\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
 
-exports[`Storyshots Avatar Touchable 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/Avatar?format=png&size=56\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}]}"`;
+exports[`Storyshots Avatar Touchable 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\",\\"accessibilityLabel\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/Avatar?format=png&size=56\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}]}"`;
 
-exports[`Storyshots Avatar With ETag 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/djorkaeff.alexandre?format=png&size=56&etag=5ag8KffJcZj9m5rCv\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
+exports[`Storyshots Avatar With ETag 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\",\\"accessibilityLabel\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/djorkaeff.alexandre?format=png&size=56&etag=5ag8KffJcZj9m5rCv\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
 
-exports[`Storyshots Avatar Without ETag 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/djorkaeff.alexandre?format=png&size=56\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
+exports[`Storyshots Avatar Without ETag 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\",\\"accessibilityLabel\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/djorkaeff.alexandre?format=png&size=56\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
 
-exports[`Storyshots Avatar Wrong server 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://google.com/avatar/Avatar?format=png&size=56\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
+exports[`Storyshots Avatar Wrong server 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\",\\"accessibilityLabel\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://google.com/avatar/Avatar?format=png&size=56\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;

yarn.lock

@@ -6756,35 +6756,10 @@ can-use-dom@^0.1.0:
   resolved "https://registry.yarnpkg.com/can-use-dom/-/can-use-dom-0.1.0.tgz#22cc4a34a0abc43950f42c6411024a3f6366b45a"
   integrity sha1-IsxKNKCrxDlQ9CxkEQJKP2NmtFo=
 
-caniuse-lite@^1.0.30000989:
-  version "1.0.30001239"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001239.tgz#66e8669985bb2cb84ccb10f68c25ce6dd3e4d2b8"
-  integrity sha512-cyBkXJDMeI4wthy8xJ2FvDU6+0dtcZSJW3voUF8+e9f1bBeuvyZfc3PNbkOETyhbR+dGCPzn9E7MA3iwzusOhQ==
-
-caniuse-lite@^1.0.30001043:
-  version "1.0.30001062"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001062.tgz#d814b648338504b315222ace6f1a533d9a55e390"
-  integrity sha512-ei9ZqeOnN7edDrb24QfJ0OZicpEbsWxv7WusOiQGz/f2SfvBgHHbOEwBJ8HKGVSyx8Z6ndPjxzR6m0NQq+0bfw==
-
-caniuse-lite@^1.0.30001109:
-  version "1.0.30001237"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001237.tgz#4b7783661515b8e7151fc6376cfd97f0e427b9e5"
-  integrity sha512-pDHgRndit6p1NR2GhzMbQ6CkRrp4VKuSsqbcLeOQppYPKOYkKT/6ZvZDvKJUqcmtyWIAHuZq3SVS2vc1egCZzw==
-
-caniuse-lite@^1.0.30001219:
-  version "1.0.30001236"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001236.tgz#0a80de4cdf62e1770bb46a30d884fc8d633e3958"
-  integrity sha512-o0PRQSrSCGJKCPZcgMzl5fUaj5xHe8qA2m4QRvnyY4e1lITqoNkr7q/Oh1NcpGSy0Th97UZ35yoKcINPoq7YOQ==
-
-caniuse-lite@^1.0.30001264:
-  version "1.0.30001265"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001265.tgz#0613c9e6c922e422792e6fcefdf9a3afeee4f8c3"
-  integrity sha512-YzBnspggWV5hep1m9Z6sZVLOt7vrju8xWooFAgN6BA5qvy98qPAPb7vNUzypFaoh2pb3vlfzbDO8tB57UPGbtw==
-
-caniuse-lite@^1.0.30001317:
-  version "1.0.30001332"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001332.tgz#39476d3aa8d83ea76359c70302eafdd4a1d727dd"
-  integrity sha512-10T30NYOEQtN6C11YGg411yebhvpnC6Z102+B95eAsN0oB6KUs01ivE8u+G6FMIRtIrVlYXhL+LUwQ3/hXwDWw==
+caniuse-lite@^1.0.30000989, caniuse-lite@^1.0.30001043, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001219, caniuse-lite@^1.0.30001264, caniuse-lite@^1.0.30001317:
+  version "1.0.30001338"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001338.tgz"
+  integrity sha512-1gLHWyfVoRDsHieO+CaeYe7jSo/MT7D7lhaXUiwwbuR5BwQxORs0f1tAwUSQr3YbxRXJvxHM/PA5FfPQRnsPeQ==
 
 capture-exit@^2.0.0:
   version "2.0.0"