[TESTS] Update and separate E2E tests

README.md

@@ -208,13 +208,15 @@ Readme will guide you on how to config.
 - Build your app
 
 ```bash
-$ detox build --configuration ios.sim.release
+$ npx detox build --configuration ios.sim.release
 ```
 
 - Run tests
 
 ```bash
-$ detox test --configuration ios.sim.release
+$ npx detox test ./e2e/tests/onboarding --configuration ios.sim.release
+$ npx detox test ./e2e/tests/room --configuration ios.sim.release
+$ npx detox test ./e2e/tests/assorted --configuration ios.sim.release
 ```
 
 ## Storybook

app/containers/FormContainer.js

@@ -23,15 +23,15 @@ export const FormContainerInner = ({ children }) => (
 	</View>
 );
 
-const FormContainer = ({ children, theme }) => (
+const FormContainer = ({ children, theme, testID }) => (
 	<KeyboardView
 		style={{ backgroundColor: themes[theme].backgroundColor }}
 		contentContainerStyle={sharedStyles.container}
 		keyboardVerticalOffset={128}
 	>
 		<StatusBar theme={theme} />
 		<ScrollView {...scrollPersistTaps} style={sharedStyles.container} contentContainerStyle={[sharedStyles.containerScrollView, styles.scrollView]}>
-			<SafeAreaView style={sharedStyles.container} forceInset={{ top: 'never' }}>
+			<SafeAreaView style={sharedStyles.container} forceInset={{ top: 'never' }} testID={testID}>
 				{children}
 				<AppVersion theme={theme} />
 			</SafeAreaView>
@@ -41,6 +41,7 @@ const FormContainer = ({ children, theme }) => (
 
 FormContainer.propTypes = {
 	theme: PropTypes.string,
+	testID: PropTypes.string,
 	children: PropTypes.element
 };
 

app/containers/TwoFactor/index.js

@@ -92,7 +92,7 @@ const TwoFactor = React.memo(({ theme, split }) => {
 			isVisible={visible}
 			hideModalContentWhileAnimating
 		>
-			<View style={styles.container}>
+			<View style={styles.container} testID='two-factor'>
 				<View style={[styles.content, split && [sharedStyles.modal, sharedStyles.modalFormSheet], { backgroundColor: themes[theme].backgroundColor }]}>
 					<Text style={[styles.title, { color }]}>{I18n.t(method?.title || 'Two_Factor_Authentication')}</Text>
 					{method?.text ? <Text style={[styles.subtitle, { color }]}>{I18n.t(method.text)}</Text> : null}
@@ -106,6 +106,7 @@ const TwoFactor = React.memo(({ theme, split }) => {
 						keyboardType={method?.keyboardType}
 						secureTextEntry={method?.secureTextEntry}
 						error={data.invalid && { error: 'totp-invalid', reason: I18n.t('Code_or_password_invalid') }}
+						testID='two-factor-input'
 					/>
 					{isEmail && <Text style={[styles.sendEmail, { color }]} onPress={sendEmail}>{I18n.t('Send_me_the_code_again')}</Text>}
 					<View style={styles.buttonContainer}>
@@ -123,6 +124,7 @@ const TwoFactor = React.memo(({ theme, split }) => {
 							style={styles.button}
 							onPress={onSubmit}
 							theme={theme}
+							testID='two-factor-send'
 						/>
 					</View>
 				</View>

app/sagas/messages.js

@@ -27,10 +27,12 @@ const handleReplyBroadcast = function* handleReplyBroadcast({ message }) {
 				rid: subscriptions[0].rid, name: username, fname: name, message
 			});
 		} else {
-			const room = yield RocketChat.createDirectMessage(username);
-			yield goRoom({
-				rid: room.rid, name: username, fname: name, message
-			});
+			const result = yield RocketChat.createDirectMessage(username);
+			if (result?.success) {
+				yield goRoom({
+					rid: result?.room.rid, t: 'd', name: username, fname: name, message
+				});
+			}
 		}
 	} catch (e) {
 		log(e);

app/views/ForgotPasswordView.js

@@ -85,7 +85,7 @@ class ForgotPasswordView extends React.Component {
 		const { theme } = this.props;
 
 		return (
-			<FormContainer theme={theme}>
+			<FormContainer theme={theme} testID='forgot-password-view'>
 				<FormContainerInner>
 					<Text style={[sharedStyles.loginTitle, sharedStyles.textBold, { color: themes[theme].titleText }]}>{I18n.t('Forgot_password')}</Text>
 					<TextInput

app/views/LoginView.js

@@ -201,7 +201,7 @@ class LoginView extends React.Component {
 	render() {
 		const { Accounts_ShowFormLogin, theme } = this.props;
 		return (
-			<FormContainer theme={theme}>
+			<FormContainer theme={theme} testID='login-view'>
 				<FormContainerInner>
 					<LoginServices separator={Accounts_ShowFormLogin} />
 					{this.renderUserForm()}

app/views/NewServerView.js

@@ -69,7 +69,7 @@ class NewServerView extends React.Component {
 		const previousServer = navigation.getParam('previousServer', null);
 		const close = navigation.getParam('close', () => {});
 		return {
-			headerLeft: previousServer ? <CloseModalButton navigation={navigation} onPress={close} /> : undefined,
+			headerLeft: previousServer ? <CloseModalButton navigation={navigation} onPress={close} testID='new-server-view-close' /> : undefined,
 			title: I18n.t('Workspaces'),
 			...themedHeader(screenProps.theme)
 		};
@@ -297,7 +297,7 @@ class NewServerView extends React.Component {
 		const { connecting, theme } = this.props;
 		const { text, connectingOpen } = this.state;
 		return (
-			<FormContainer theme={theme}>
+			<FormContainer theme={theme} testID='new-server-view'>
 				<FormContainerInner>
 					<Text style={[styles.title, { color: themes[theme].titleText }]}>{I18n.t('Join_your_workspace')}</Text>
 					<TextInput
@@ -321,8 +321,8 @@ class NewServerView extends React.Component {
 						disabled={!text || connecting}
 						loading={!connectingOpen && connecting}
 						style={styles.connectButton}
-						testID='new-server-view-button'
 						theme={theme}
+						testID='new-server-view-button'
 					/>
 					<OrSeparator theme={theme} />
 					<Text style={[styles.description, { color: themes[theme].auxiliaryText }]}>{I18n.t('Onboarding_join_open_description')}</Text>
@@ -334,6 +334,7 @@ class NewServerView extends React.Component {
 						disabled={connecting}
 						loading={connectingOpen && connecting}
 						theme={theme}
+						testID='new-server-view-open'
 					/>
 				</FormContainerInner>
 				{ isIOS ? this.renderCertificatePicker() : null }

app/views/OnboardingView/index.js

@@ -68,7 +68,7 @@ class OnboardingView extends React.Component {
 	render() {
 		const { theme } = this.props;
 		return (
-			<FormContainer theme={theme}>
+			<FormContainer theme={theme} testID='onboarding-view'>
 				<FormContainerInner>
 					<Image style={styles.onboarding} source={{ uri: 'logo' }} fadeDuration={0} />
 					<Text style={[styles.title, { color: themes[theme].titleText }]}>{I18n.t('Onboarding_title')}</Text>
@@ -80,13 +80,15 @@ class OnboardingView extends React.Component {
 							type='primary'
 							onPress={this.connectServer}
 							theme={theme}
+							testID='join-workspace'
 						/>
 						<Button
 							title={I18n.t('Create_a_new_workspace')}
 							type='secondary'
 							backgroundColor={themes[theme].chatComponentBackground}
 							onPress={this.createWorkspace}
 							theme={theme}
+							testID='create-workspace-button'
 						/>
 					</View>
 				</FormContainerInner>

app/views/RegisterView.js

@@ -58,7 +58,7 @@ class RegisterView extends React.Component {
 		return {
 			...themedHeader(screenProps.theme),
 			title,
-			headerRight: <LegalButton navigation={navigation} />
+			headerRight: <LegalButton navigation={navigation} testID='register-view-more' />
 		};
 	}
 
@@ -230,7 +230,7 @@ class RegisterView extends React.Component {
 		const { saving } = this.state;
 		const { theme, showLoginButton } = this.props;
 		return (
-			<FormContainer theme={theme}>
+			<FormContainer theme={theme} testID='register-view'>
 				<FormContainerInner>
 					<LoginServices />
 					<Text style={[styles.title, sharedStyles.textBold, { color: themes[theme].titleText }]}>{I18n.t('Sign_Up')}</Text>

app/views/RoomInfoView/Channel.js

@@ -12,21 +12,25 @@ const Channel = ({ room, theme }) => {
 				label={I18n.t('Description')}
 				content={description || `__${ I18n.t('No_label_provided', { label: 'description' }) }__`}
 				theme={theme}
+				testID='room-info-view-description'
 			/>
 			<Item
 				label={I18n.t('Topic')}
 				content={topic || `__${ I18n.t('No_label_provided', { label: 'topic' }) }__`}
 				theme={theme}
+				testID='room-info-view-topic'
 			/>
 			<Item
 				label={I18n.t('Announcement')}
 				content={announcement || `__${ I18n.t('No_label_provided', { label: 'announcement' }) }__`}
 				theme={theme}
+				testID='room-info-view-announcement'
 			/>
 			<Item
 				label={I18n.t('Broadcast_Channel')}
 				content={room.broadcast && I18n.t('Broadcast_channel_Description')}
 				theme={theme}
+				testID='room-info-view-broadcast'
 			/>
 		</>
 	);

app/views/RoomInfoView/Item.js

@@ -6,9 +6,11 @@ import styles from './styles';
 import Markdown from '../../containers/markdown';
 import { themes } from '../../constants/colors';
 
-const Item = ({ label, content, theme }) => (
+const Item = ({
+	label, content, theme, testID
+}) => (
 	content ? (
-		<View style={styles.item}>
+		<View style={styles.item} testID={testID}>
 			<Text accessibilityLabel={label} style={[styles.itemLabel, { color: themes[theme].titleText }]}>{label}</Text>
 			<Markdown
 				style={[styles.itemContent, { color: themes[theme].auxiliaryText }]}
@@ -21,7 +23,8 @@ const Item = ({ label, content, theme }) => (
 Item.propTypes = {
 	label: PropTypes.string,
 	content: PropTypes.string,
-	theme: PropTypes.string
+	theme: PropTypes.string,
+	testID: PropTypes.string
 };
 
 export default Item;

app/views/SidebarView/index.js

@@ -224,7 +224,12 @@ class Sidebar extends Component {
 							<View style={styles.headerUsername}>
 								<Text numberOfLines={1} style={[styles.username, { color: themes[theme].titleText }]}>{useRealName ? user.name : user.username}</Text>
 							</View>
-							<Text style={[styles.currentServerText, { color: themes[theme].titleText }]} numberOfLines={1}>{Site_Name}</Text>
+							<Text
+								style={[styles.currentServerText, { color: themes[theme].titleText }]}
+								numberOfLines={1}
+								accessibilityLabel={`Connected to ${ baseUrl }`}
+							>{Site_Name}
+							</Text>
 						</View>
 					</View>
 

app/views/WorkspaceView/index.js

@@ -46,7 +46,7 @@ class WorkspaceView extends React.Component {
 			theme, Site_Name, Site_Url, Assets_favicon_512, server, registrationEnabled, registrationText, showLoginButton
 		} = this.props;
 		return (
-			<FormContainer theme={theme}>
+			<FormContainer theme={theme} testID='workspace-view'>
 				<FormContainerInner>
 					<View style={styles.alignItemsCenter}>
 						<ServerAvatar theme={theme} url={server} image={Assets_favicon_512 && Assets_favicon_512.defaultUrl} />
@@ -60,6 +60,7 @@ class WorkspaceView extends React.Component {
 								type='primary'
 								onPress={this.login}
 								theme={theme}
+								testID='workspace-view-login'
 							/>
 						) : null}
 					{
@@ -70,6 +71,7 @@ class WorkspaceView extends React.Component {
 								backgroundColor={themes[theme].chatComponentBackground}
 								onPress={this.register}
 								theme={theme}
+								testID='workspace-view-register'
 							/>
 						) : (
 							<Text style={[styles.registrationText, { color: themes[theme].auxiliaryText }]}>{registrationText}</Text>