Add e2e coverage for invalid browser url & changing password (#4129)

* delete wallet + invalid browser url * increase timeout for browser test * Update e2e/specs/delete-wallet.spec.js Co-authored-by: Gustavo Antunes <gantunes@uc.cl> * Update e2e/pages/Drawer/Browser.js Co-authored-by: Gustavo Antunes <gantunes@uc.cl> * Update e2e/pages/Drawer/Browser.js Co-authored-by: Gustavo Antunes <gantunes@uc.cl> * renaming test id's * lint doing lint tings * fix import * add path to test id's Co-authored-by: Gustavo Antunes <gantunes@uc.cl>
MetaMask · Apr 27, 2022 · 38b1ca5 · 38b1ca5
1 parent 1d14435
commit 38b1ca5
Show file tree

Hide file tree

Showing 15 changed files with 252 additions and 41 deletions.
diff --git a/app/components/UI/Navbar/index.js b/app/components/UI/Navbar/index.js
@@ -20,6 +20,7 @@ import { importAccountFromPrivateKey } from '../../../util/address';
 import Device from '../../../util/device';
 import { isGatewayUrl } from '../../../lib/ens-ipfs/resolver';
 import { getHost } from '../../../util/browser';
+import { BACK_ARROW_BUTTON_ID } from '../../../constants/test-ids';
 
 const { HOMEPAGE_URL } = AppConstants;
 
@@ -179,7 +180,7 @@ export function getNavigationOptionsTitle(title, navigation, isFullScreenModal,
 			) : null,
 		headerLeft: () =>
 			isFullScreenModal ? null : (
-				<TouchableOpacity onPress={navigationPop} style={styles.backButton} testID={'title-back-arrow-button'}>
+				<TouchableOpacity onPress={navigationPop} style={styles.backButton} testID={BACK_ARROW_BUTTON_ID}>
 					<IonicIcon
 						name={Device.isAndroid() ? 'md-arrow-back' : 'ios-arrow-back'}
 						size={Device.isAndroid() ? 24 : 28}

diff --git a/app/components/Views/ChoosePassword/index.js b/app/components/Views/ChoosePassword/index.js
@@ -46,6 +46,14 @@ import AnalyticsV2 from '../../../util/analyticsV2';
 import { ThemeContext, mockTheme } from '../../../util/theme';
 import AnimatedFox from 'react-native-animated-fox';
 
+import {
+	CREATE_PASSWORD_CONTAINER_ID,
+	CREATE_PASSWORD_INPUT_BOX_ID,
+	CONFIRM_PASSWORD_INPUT_BOX_ID,
+	IOS_I_UNDERSTAND_BUTTON_ID,
+	ANDROID_I_UNDERSTAND_BUTTON_ID,
+} from '../../../constants/test-ids';
+
 const createStyles = (colors) =>
 	StyleSheet.create({
 		mainWrapper: {
@@ -623,7 +631,7 @@ class ChoosePassword extends PureComponent {
 							contentContainerStyle={styles.keyboardScrollableWrapper}
 							resetScrollToCoords={{ x: 0, y: 0 }}
 						>
-							<View testID={'create-password-screen'}>
+							<View testID={CREATE_PASSWORD_CONTAINER_ID}>
 								<View style={styles.content}>
 									<Text style={styles.title}>{strings('choose_password.title')}</Text>
 									<View style={styles.text}>
@@ -642,7 +650,7 @@ class ChoosePassword extends PureComponent {
 										secureTextEntry={secureTextEntry}
 										placeholder=""
 										placeholderTextColor={colors.text.muted}
-										testID="input-password"
+										testID={CREATE_PASSWORD_INPUT_BOX_ID}
 										onSubmitEditing={this.jumpToConfirmPassword}
 										returnKeyType="next"
 										autoCapitalize="none"
@@ -668,7 +676,7 @@ class ChoosePassword extends PureComponent {
 										secureTextEntry={secureTextEntry}
 										placeholder={''}
 										placeholderTextColor={colors.text.muted}
-										testID={'input-password-confirm'}
+										testID={CONFIRM_PASSWORD_INPUT_BOX_ID}
 										onSubmitEditing={this.onPressCreate}
 										returnKeyType={'done'}
 										autoCapitalize="none"
@@ -691,9 +699,13 @@ class ChoosePassword extends PureComponent {
 										style={styles.checkbox}
 										tintColors={{ true: colors.primary.default, false: colors.border.default }}
 										boxType="square"
-										testID={'password-understand-box'}
+										testID={IOS_I_UNDERSTAND_BUTTON_ID}
 									/>
-									<Text style={styles.label} onPress={this.setSelection} testID={'i-understand-text'}>
+									<Text
+										style={styles.label}
+										onPress={this.setSelection}
+										testID={ANDROID_I_UNDERSTAND_BUTTON_ID}
+									>
 										{strings('choose_password.i_understand')}{' '}
 										<Text onPress={this.learnMore} style={styles.learnMore}>
 											{strings('choose_password.learn_more')}

diff --git a/app/components/Views/ImportFromSeed/index.js b/app/components/Views/ImportFromSeed/index.js
@@ -52,6 +52,12 @@ import AnalyticsV2 from '../../../util/analyticsV2';
 import DefaultPreference from 'react-native-default-preference';
 import Clipboard from '@react-native-clipboard/clipboard';
 import { ThemeContext, mockTheme } from '../../../util/theme';
+import {
+	CREATE_PASSWORD_INPUT_BOX_ID,
+	CONFIRM_PASSWORD_INPUT_BOX_ID,
+	IMPORT_PASSWORD_CONTAINER_ID,
+	SECRET_RECOVERY_PHRASE_INPUT_BOX_ID,
+} from '../../../constants/test-ids';
 
 const MINIMUM_SUPPORTED_CLIPBOARD_VERSION = 9;
 
@@ -512,7 +518,7 @@ class ImportFromSeed extends PureComponent {
 		return (
 			<SafeAreaView style={styles.mainWrapper}>
 				<KeyboardAwareScrollView style={styles.wrapper} resetScrollToCoords={{ x: 0, y: 0 }}>
-					<View testID={'import-from-seed-screen'}>
+					<View testID={IMPORT_PASSWORD_CONTAINER_ID}>
 						<Text style={styles.title}>{strings('import_from_seed.title')}</Text>
 						<View style={styles.fieldRow}>
 							<View style={styles.fieldCol}>
@@ -533,7 +539,7 @@ class ImportFromSeed extends PureComponent {
 								inputContainerStyle={styles.padding}
 								placeholder={strings('import_from_seed.seed_phrase_placeholder')}
 								placeholderTextColor={colors.text.muted}
-								testID="input-seed-phrase"
+								testID={SECRET_RECOVERY_PHRASE_INPUT_BOX_ID}
 								returnKeyType="next"
 								autoCapitalize="none"
 								secureTextEntry={hideSeedPhraseInput}
@@ -554,7 +560,7 @@ class ImportFromSeed extends PureComponent {
 								placeholder={strings('import_from_seed.seed_phrase_placeholder')}
 								placeholderTextColor={colors.text.muted}
 								onChangeText={this.onSeedWordsChange}
-								testID="input-seed-phrase"
+								testID={SECRET_RECOVERY_PHRASE_INPUT_BOX_ID}
 								blurOnSubmit
 								onSubmitEditing={this.jumpToPassword}
 								returnKeyType="next"
@@ -590,7 +596,7 @@ class ImportFromSeed extends PureComponent {
 								// ref={this.passwordInput}
 								placeholder={strings('import_from_seed.new_password')}
 								placeholderTextColor={colors.text.muted}
-								testID={'input-password-field'}
+								testID={CREATE_PASSWORD_INPUT_BOX_ID}
 								returnKeyType={'next'}
 								autoCapitalize="none"
 								secureTextEntry={secureTextEntry}
@@ -619,7 +625,7 @@ class ImportFromSeed extends PureComponent {
 								style={styles.input}
 								containerStyle={inputWidth}
 								// ref={this.confirmPasswordInput}
-								testID={'input-password-field-confirm'}
+								testID={CONFIRM_PASSWORD_INPUT_BOX_ID}
 								onChangeText={this.onPasswordConfirmChange}
 								returnKeyType={'next'}
 								autoCapitalize="none"

diff --git a/app/components/Views/ManualBackupStep1/index.js b/app/components/Views/ManualBackupStep1/index.js
@@ -31,6 +31,9 @@ import {
 	CONFIRM_PASSWORD,
 	WRONG_PASSWORD_ERROR,
 } from '../../../constants/onboarding';
+
+import { CONFIRM_CHANGE_PASSWORD_INPUT_BOX_ID } from '../../../constants/test-ids';
+
 import AnalyticsV2 from '../../../util/analyticsV2';
 import { ThemeContext, mockTheme } from '../../../util/theme';
 
@@ -399,7 +402,7 @@ class ManualBackupStep1 extends PureComponent {
 								onChangeText={this.onPasswordChange}
 								secureTextEntry
 								onSubmitEditing={this.tryUnlock}
-								testID={'private-credential-password-text-input'}
+								testID={CONFIRM_CHANGE_PASSWORD_INPUT_BOX_ID}
 								keyboardAppearance={themeAppearance}
 							/>
 							{warningIncorrectPassword && (

diff --git a/app/components/Views/ResetPassword/index.js b/app/components/Views/ResetPassword/index.js
@@ -39,6 +39,14 @@ import NotificationManager from '../../../core/NotificationManager';
 import { syncPrefs } from '../../../util/sync';
 import { ThemeContext, mockTheme } from '../../../util/theme';
 import AnimatedFox from 'react-native-animated-fox';
+import {
+	CREATE_PASSWORD_CONTAINER_ID,
+	CREATE_PASSWORD_INPUT_BOX_ID,
+	CONFIRM_PASSWORD_INPUT_BOX_ID,
+	IOS_I_UNDERSTAND_BUTTON_ID,
+	ANDROID_I_UNDERSTAND_BUTTON_ID,
+	CONFIRM_CHANGE_PASSWORD_INPUT_BOX_ID,
+} from '../../../constants/test-ids';
 
 const createStyles = (colors) =>
 	StyleSheet.create({
@@ -628,7 +636,7 @@ class ResetPassword extends PureComponent {
 								onChangeText={this.onPasswordChange}
 								secureTextEntry
 								onSubmitEditing={this.tryUnlock}
-								testID={'private-credential-password-text-input'}
+								testID={CONFIRM_CHANGE_PASSWORD_INPUT_BOX_ID}
 								keyboardAppearance={themeAppearance}
 							/>
 							{warningIncorrectPassword && (
@@ -694,7 +702,7 @@ class ResetPassword extends PureComponent {
 							contentContainerStyle={styles.keyboardScrollableWrapper}
 							resetScrollToCoords={{ x: 0, y: 0 }}
 						>
-							<View testID={'create-password-screen'}>
+							<View testID={CREATE_PASSWORD_CONTAINER_ID}>
 								<View style={styles.content}>
 									<Text style={styles.title}>{strings('reset_password.title')}</Text>
 									<View style={styles.text}>
@@ -713,7 +721,7 @@ class ResetPassword extends PureComponent {
 										secureTextEntry={secureTextEntry}
 										placeholder=""
 										placeholderTextColor={colors.text.muted}
-										testID="input-password"
+										testID={CREATE_PASSWORD_INPUT_BOX_ID}
 										onSubmitEditing={this.jumpToConfirmPassword}
 										returnKeyType="next"
 										autoCapitalize="none"
@@ -739,7 +747,8 @@ class ResetPassword extends PureComponent {
 										secureTextEntry={secureTextEntry}
 										placeholder={''}
 										placeholderTextColor={colors.text.muted}
-										testID={'input-password-confirm'}
+										testID={CONFIRM_PASSWORD_INPUT_BOX_ID}
+										zasdfasfasf
 										onSubmitEditing={this.onPressCreate}
 										returnKeyType={'done'}
 										autoCapitalize="none"
@@ -762,9 +771,13 @@ class ResetPassword extends PureComponent {
 										style={styles.checkbox}
 										tintColors={{ true: colors.primary.default, false: colors.border.default }}
 										boxType="square"
-										testID={'password-understand-box'}
+										testID={IOS_I_UNDERSTAND_BUTTON_ID}
 									/>
-									<Text style={styles.label} onPress={this.setSelection} testID={'i-understand-text'}>
+									<Text
+										style={styles.label}
+										onPress={this.setSelection}
+										testID={ANDROID_I_UNDERSTAND_BUTTON_ID}
+									>
 										{strings('reset_password.i_understand')}{' '}
 										<Text onPress={this.learnMore} style={styles.learnMore}>
 											{strings('reset_password.learn_more')}

diff --git a/app/components/Views/Settings/SecuritySettings/index.js b/app/components/Views/Settings/SecuritySettings/index.js
@@ -49,6 +49,11 @@ import HintModal from '../../../UI/HintModal';
 import AnalyticsV2, { trackErrorAsAnalytics } from '../../../../util/analyticsV2';
 import SeedPhraseVideo from '../../../UI/SeedPhraseVideo';
 import { useAppThemeFromContext, mockTheme, ThemeContext } from '../../../../util/theme';
+import {
+	CHANGE_PASSWORD_TITLE_ID,
+	CHANGE_PASSWORD_BUTTON_ID,
+	REVEAL_SECRET_RECOVERY_PHRASE_BUTTON_ID,
+} from '../../../../constants/test-ids';
 
 const isIos = Device.isIos();
 const LEARN_MORE_URL =
@@ -667,7 +672,7 @@ class Settings extends PureComponent {
 						type="normal"
 						onPress={this.goToRevealPrivateCredential}
 						containerStyle={styles.confirm}
-						testID={'reveal-seed-button'}
+						testID={REVEAL_SECRET_RECOVERY_PHRASE_BUTTON_ID}
 					>
 						{strings('reveal_credential.seed_phrase_title')}
 					</StyledButton>
@@ -679,10 +684,15 @@ class Settings extends PureComponent {
 	renderPasswordSection = () => {
 		const { styles } = this.getStyles();
 		return (
-			<View style={styles.setting} testID={'change-password-section'}>
+			<View style={styles.setting} testID={CHANGE_PASSWORD_TITLE_ID}>
 				<Text style={styles.title}>{strings('password_reset.password_title')}</Text>
 				<Text style={styles.desc}>{strings('password_reset.password_desc')}</Text>
-				<StyledButton type="normal" onPress={this.resetPassword} containerStyle={styles.confirm}>
+				<StyledButton
+					type="normal"
+					onPress={this.resetPassword}
+					containerStyle={styles.confirm}
+					testID={CHANGE_PASSWORD_BUTTON_ID}
+				>
 					{strings('password_reset.change_password')}
 				</StyledButton>
 			</View>

diff --git a/app/constants/test-ids.js b/app/constants/test-ids.js
@@ -20,3 +20,22 @@ export const NETWORK_SCROLL_ID = 'other-networks-scroll';
 export const NETWORK_EDUCATION_MODAL_CONTAINER_ID = 'network-education-modal';
 export const NETWORK_EDUCATION_MODAL_CLOSE_BUTTON_ID = 'network-education-modal-close-button';
 export const NETWORK_EDUCATION_MODAL_NETWORK_NAME_ID = 'network-education-modal-network-name';
+
+export const CREATE_PASSWORD_CONTAINER_ID = 'create-password-screen';
+export const CREATE_PASSWORD_INPUT_BOX_ID = 'create-password-first-input-field';
+export const CONFIRM_PASSWORD_INPUT_BOX_ID = 'create-password-second-input-field';
+
+export const CHANGE_PASSWORD_TITLE_ID = 'change-password-section';
+export const CHANGE_PASSWORD_BUTTON_ID = 'change-password-button-id';
+export const CONFIRM_CHANGE_PASSWORD_INPUT_BOX_ID = 'private-credential-password-input-field';
+
+export const REVEAL_SECRET_RECOVERY_PHRASE_BUTTON_ID = 'reveal-seed-button';
+
+export const SUBMIT_BUTTON_ID = 'submit-button';
+export const BACK_ARROW_BUTTON_ID = 'burger-menu-title-back-arrow-button';
+
+export const IOS_I_UNDERSTAND_BUTTON_ID = 'password-understand-box';
+export const ANDROID_I_UNDERSTAND_BUTTON_ID = 'i-understand-text';
+
+export const IMPORT_PASSWORD_CONTAINER_ID = 'import-from-seed-screen';
+export const SECRET_RECOVERY_PHRASE_INPUT_BOX_ID = 'input-seed-phrase';
diff --git a/e2e/pages/Drawer/Browser.js b/e2e/pages/Drawer/Browser.js
@@ -1,4 +1,5 @@
 import TestHelpers from '../../helpers';
+import { strings } from '../../../locales/i18n';
 
 export const BROWSER_SCREEN_ID = 'browser-screen';
 
@@ -11,6 +12,8 @@ const HOME_BUTTON_ID = 'home-button';
 const GO_BACK_BUTTON_ID = 'go-back-button';
 const OPTIONS_BUTTON_ID = 'options-button';
 const URL_INPUT_BOX_ID = 'url-input';
+const RETURN_HOME_TEXT = strings('webview_error.return_home');
+const BACK_TO_SAFETY_TEXT = strings('phishing.back_to_safety');
 
 export class Browser {
 	static async tapBrowser() {
@@ -42,9 +45,11 @@ export class Browser {
 	}
 
 	static async tapBackToSafetyButton() {
-		await TestHelpers.tapByText('Back to safety');
+		await TestHelpers.tapByText(BACK_TO_SAFETY_TEXT);
+	}
+	static async tapReturnHomeButton() {
+		await TestHelpers.tapByText(RETURN_HOME_TEXT);
 	}
-
 	static async tapBrowserBackButton() {
 		// This action is android specific
 		await TestHelpers.tap(GO_BACK_BUTTON_ID);

diff --git a/e2e/pages/Drawer/Settings/Contacts/AddContactView.js b/e2e/pages/Drawer/Settings/Contacts/AddContactView.js
@@ -1,10 +1,11 @@
 import TestHelpers from '../../../../helpers';
 
+import { BACK_ARROW_BUTTON_ID } from '../../../../../app/constants/test-ids';
+
 const ADD_CONTACT_BUTTON_ID = 'contact-add-contact-button';
 const ADD_CONTACT_CONTAINER_ID = 'add-contact-screen';
 const ADD_CONTACTS_VIEW_CONTACT_INPUT_BOX_ID = 'contact-name-input';
 const ADD_CONTACTS_VIEW_ADDRESS_INPUT_BOX_ID = 'contact-address-input';
-const BACK_ARROW_BUTTON_ID = 'title-back-arrow-button';
 const ERROR_MESSAGE_LABEL_ID = 'error-message-warning';
 const MEMO_INPUT_BOX_ID = 'contact-memo-input';
 

diff --git a/e2e/pages/Drawer/Settings/SecurityAndPrivacy/ChangePasswordView.js b/e2e/pages/Drawer/Settings/SecurityAndPrivacy/ChangePasswordView.js
@@ -0,0 +1,53 @@
+import TestHelpers from '../../../../helpers';
+import {
+	CONFIRM_CHANGE_PASSWORD_INPUT_BOX_ID,
+	CONFIRM_PASSWORD_INPUT_BOX_ID,
+	CREATE_PASSWORD_INPUT_BOX_ID,
+	SUBMIT_BUTTON_ID,
+	IOS_I_UNDERSTAND_BUTTON_ID,
+	ANDROID_I_UNDERSTAND_BUTTON_ID,
+} from '../../../../../app/constants/test-ids';
+
+import { strings } from '../../../../../locales/i18n';
+
+const CHANGE_PASSWORD_TEXT = strings('manual_backup_step_1.confirm_password');
+
+export default class ChangePasswordView {
+	static async typeInConfirmPasswordInputBox(PASSWORD) {
+		await TestHelpers.typeTextAndHideKeyboard(CONFIRM_CHANGE_PASSWORD_INPUT_BOX_ID, PASSWORD);
+	}
+
+	static async tapConfirmButton() {
+		await TestHelpers.tapByText('CONFIRM');
+	}
+
+	static async enterPassword(PASSWORD) {
+		await TestHelpers.typeTextAndHideKeyboard(CREATE_PASSWORD_INPUT_BOX_ID, PASSWORD);
+	}
+
+	static async reEnterPassword(PASSWORD) {
+		await TestHelpers.typeTextAndHideKeyboard(CONFIRM_PASSWORD_INPUT_BOX_ID, PASSWORD);
+	}
+
+	static async tapIUnderstandCheckBox() {
+		if (device.getPlatform() === 'ios') {
+			await TestHelpers.tap(IOS_I_UNDERSTAND_BUTTON_ID);
+		} else {
+			// Tap by the I understand text
+			await TestHelpers.delay(1000);
+			await TestHelpers.tap(ANDROID_I_UNDERSTAND_BUTTON_ID);
+		}
+	}
+
+	static async tapResetPasswordButton() {
+		await TestHelpers.waitAndTap(SUBMIT_BUTTON_ID);
+	}
+
+	static async isVisible() {
+		await TestHelpers.checkIfElementWithTextIsVisible(CHANGE_PASSWORD_TEXT);
+	}
+
+	static async isNotVisible() {
+		await TestHelpers.checkIfElementWithTextIsNotVisible(CHANGE_PASSWORD_TEXT);
+	}
+}