added more assertions and beefed up onboarding wizard tests (#1148)

MetaMask · Oct 22, 2019 · 8b61445 · 8b61445
1 parent 921efcd
commit 8b61445
Show file tree

Hide file tree

Showing 10 changed files with 139 additions and 58 deletions.
diff --git a/app/components/UI/OnboardingWizard/Step2/index.js b/app/components/UI/OnboardingWizard/Step2/index.js
@@ -72,7 +72,9 @@ class Step2 extends PureComponent {
 	 */
 	content = () => (
 		<View style={onboardingStyles.contentContainer}>
-			<Text style={onboardingStyles.content}>{strings('onboarding_wizard.step2.content1')}</Text>
+			<Text style={onboardingStyles.content} testID={'step2-title'}>
+				{strings('onboarding_wizard.step2.content1')}
+			</Text>
 			<Text style={onboardingStyles.content}>{strings('onboarding_wizard.step2.content2')}</Text>
 		</View>
 	);

diff --git a/app/components/UI/OnboardingWizard/Step3/index.js b/app/components/UI/OnboardingWizard/Step3/index.js
@@ -121,7 +121,9 @@ class Step3 extends PureComponent {
 	 */
 	content = () => (
 		<View style={onboardingStyles.contentContainer}>
-			<Text style={onboardingStyles.content}>{strings('onboarding_wizard.step3.content1')}</Text>
+			<Text style={onboardingStyles.content} testID={'step3-title'}>
+				{strings('onboarding_wizard.step3.content1')}
+			</Text>
 			<Text style={onboardingStyles.content}>
 				<Text style={fontStyles.bold}>{strings('onboarding_wizard.step3.content2')} </Text>
 				{strings('onboarding_wizard.step3.content3')}
@@ -136,7 +138,7 @@ class Step3 extends PureComponent {
 		if (!coachmarkTopReady || !viewTopReady) return null;
 		return (
 			<View style={[styles.main, { top: this.state.viewTop }]}>
-				<View style={styles.accountLabelContainer}>
+				<View style={styles.accountLabelContainer} testID={'account-label'}>
 					<AccountOverview account={account} currentCurrency={currentCurrency} onboardingWizard />
 				</View>
 				<View style={[styles.coachmarkContainer, { top: -this.state.coachmarkTop }]}>

diff --git a/app/components/UI/OnboardingWizard/Step4/index.js b/app/components/UI/OnboardingWizard/Step4/index.js
@@ -87,7 +87,7 @@ class Step4 extends PureComponent {
 	 */
 	content = () => (
 		<View style={onboardingStyles.contentContainer}>
-			<Text style={onboardingStyles.content}>
+			<Text style={onboardingStyles.content} testID={'step4-title'}>
 				<Text style={fontStyles.bold}>{strings('onboarding_wizard.step4.content1')} </Text>
 				{strings('onboarding_wizard.step4.content2')}
 			</Text>

diff --git a/app/components/UI/OnboardingWizard/Step5/index.js b/app/components/UI/OnboardingWizard/Step5/index.js
@@ -95,7 +95,9 @@ class Step5 extends PureComponent {
 	 */
 	content = () => (
 		<View style={onboardingStyles.contentContainer}>
-			<Text style={onboardingStyles.content}>{strings('onboarding_wizard.step5.content1')}</Text>
+			<Text style={onboardingStyles.content} testID={'step5-title'}>
+				{strings('onboarding_wizard.step5.content1')}
+			</Text>
 		</View>
 	);
 

diff --git a/app/components/UI/OnboardingWizard/Step6/index.js b/app/components/UI/OnboardingWizard/Step6/index.js
@@ -78,7 +78,9 @@ class Step6 extends PureComponent {
 	 */
 	content = () => (
 		<View style={onboardingStyles.contentContainer}>
-			<Text style={onboardingStyles.content}>{strings('onboarding_wizard.step6.content')}</Text>
+			<Text style={onboardingStyles.content} testID={'step6-title'}>
+				{strings('onboarding_wizard.step6.content')}
+			</Text>
 		</View>
 	);
 

diff --git a/app/components/Views/Onboarding/index.js b/app/components/Views/Onboarding/index.js
@@ -171,7 +171,9 @@ class Onboarding extends PureComponent {
 					<ScrollView style={baseStyles.flexGrow} contentContainerStyle={styles.scroll}>
 						<View style={styles.wrapper}>
 							<View style={styles.ctas}>
-								<Text style={styles.title}>{strings('onboarding.title')}</Text>
+								<Text style={styles.title} testID={'onboarding-screen-title'}>
+									{strings('onboarding.title')}
+								</Text>
 								<View style={styles.importWrapper}>
 									<Text style={styles.buttonDescription}>{strings('onboarding.sync_desc')}</Text>
 									<View style={styles.buttonWrapper}>

diff --git a/app/components/Views/OnboardingCarousel/__snapshots__/index.test.js.snap b/app/components/Views/OnboardingCarousel/__snapshots__/index.test.js.snap
@@ -71,6 +71,7 @@ exports[`OnboardingCarousel should render correctly 1`] = `
                     "textAlign": "center",
                   }
                 }
+                testID="carousel-screen-one"
               >
                 Welcome to MetaMask
               </Text>
@@ -119,6 +120,7 @@ exports[`OnboardingCarousel should render correctly 1`] = `
                     },
                   ]
                 }
+                testID="carousel-one-image"
               />
             </View>
           </View>
@@ -149,6 +151,7 @@ exports[`OnboardingCarousel should render correctly 1`] = `
                     "textAlign": "center",
                   }
                 }
+                testID="carousel-screen-two"
               >
                 Say hello to your wallet...
               </Text>
@@ -196,6 +199,7 @@ exports[`OnboardingCarousel should render correctly 1`] = `
                     },
                   ]
                 }
+                testID="carousel-two-image"
               />
             </View>
           </View>
@@ -226,6 +230,7 @@ exports[`OnboardingCarousel should render correctly 1`] = `
                     "textAlign": "center",
                   }
                 }
+                testID="carousel-screen-three"
               >
                 Explore decentralized apps
               </Text>
@@ -273,6 +278,7 @@ exports[`OnboardingCarousel should render correctly 1`] = `
                     },
                   ]
                 }
+                testID="carousel-three-image"
               />
             </View>
           </View>

diff --git a/app/components/Views/OnboardingCarousel/index.js b/app/components/Views/OnboardingCarousel/index.js
@@ -140,40 +140,49 @@ export default class OnboardingCarousel extends PureComponent {
 							>
 								<View key={'1'} style={baseStyles.flexGrow}>
 									<View style={styles.tab}>
-										<Text style={styles.title}>{strings('onboarding_carousel.title1')}</Text>
+										<Text style={styles.title} testID={'carousel-screen-one'}>
+											{strings('onboarding_carousel.title1')}
+										</Text>
 										<Text style={styles.subtitle}>{strings('onboarding_carousel.subtitle1')}</Text>
 									</View>
 									<View style={styles.carouselImageWrapper}>
 										<Image
 											source={onboarding_carousel_1}
 											style={[styles.carouselImage, styles.carouselImage1]}
 											resizeMethod={'auto'}
+											testID={'carousel-one-image'}
 										/>
 									</View>
 								</View>
 								<View key={'2'} style={baseStyles.flexGrow}>
 									<View style={styles.tab}>
-										<Text style={styles.title}>{strings('onboarding_carousel.title2')}</Text>
+										<Text style={styles.title} testID={'carousel-screen-two'}>
+											{strings('onboarding_carousel.title2')}
+										</Text>
 										<Text style={styles.subtitle}>{strings('onboarding_carousel.subtitle2')}</Text>
 									</View>
 									<View style={styles.carouselImageWrapper}>
 										<Image
 											source={onboarding_carousel_2}
 											style={[styles.carouselImage, styles.carouselImage2]}
 											resizeMethod={'auto'}
+											testID={'carousel-two-image'}
 										/>
 									</View>
 								</View>
 								<View key={'3'} style={baseStyles.flexGrow}>
 									<View style={styles.tab}>
-										<Text style={styles.title}>{strings('onboarding_carousel.title3')}</Text>
+										<Text style={styles.title} testID={'carousel-screen-three'}>
+											{strings('onboarding_carousel.title3')}
+										</Text>
 										<Text style={styles.subtitle}>{strings('onboarding_carousel.subtitle3')}</Text>
 									</View>
 									<View style={styles.carouselImageWrapper}>
 										<Image
 											source={onboarding_carousel_3}
 											style={[styles.carouselImage, styles.carouselImage3]}
 											resizeMethod={'auto'}
+											testID={'carousel-three-image'}
 										/>
 									</View>
 								</View>

diff --git a/e2e/dapp-initiated-txn.spec.js b/e2e/dapp-initiated-txn.spec.js
@@ -6,7 +6,7 @@ const Correct_Password = `12345678`;
 const Ropsten = 'Ropsten Test Network';
 const Ropsten_Faucet = 'https://faucet.metamask.io';
 const CryptoKitties_url = 'https://cryptokitties.co';
-// const ETH_Faucet = 'Test Ether Faucet';
+const ETH_Faucet = 'Test Ether Faucet';
 
 describe('Import seedphrase flow', () => {
 	beforeEach(() => {
@@ -102,51 +102,51 @@ describe('Import seedphrase flow', () => {
 		await TestHelpers.waitAndTap('go-back-button');
 	});
 
-	// it('should donate ETH on MM Ropsten', async () => {
-	// 	// Tap to donate 1 ETH
-	// 	await TestHelpers.tapAtPoint('browser-screen', { x: 76, y: 189 });
-	// 	// Check that account approval is displayed with correct dapp name
-	// 	await TestHelpers.checkIfHasText('dapp-name-title', ETH_Faucet);
-	// 	// Tap on CONNECT button
-	// 	await TestHelpers.tapByText('CONNECT');
-	// 	// Check that we are on the confirm transaction screen
-	// 	await TestHelpers.checkIfVisible('confirm-transaction-screen');
-	// 	// Tap Edit
-	// 	await TestHelpers.tapAtPoint('confirm-transaction-screen', { x: 30, y: -20 });
-	// 	// Input Amount
-	// 	await TestHelpers.replaceTextInField('amount-input', '0.000001');
-	// 	// Tap on NEXT button
-	// 	await TestHelpers.tapByText('NEXT');
-	// 	// Tap on CONFIRM button
-	// 	await TestHelpers.tapByText('CONFIRM');
-	// 	// Check that we are on the browser screen
-	// 	await TestHelpers.checkIfVisible('browser-screen');
-	// 	// Wait for enable notifications alert to show up
-	// 	await TestHelpers.delay(10000);
-	// 	// Dismiss alert
-	// 	await TestHelpers.tapAlertWithButton('No, thanks');
-	// 	// Open Drawer
-	// 	await TestHelpers.tapAtPoint('browser-screen', { x: 30, y: -5 });
-	// 	// Check that the drawer is visbile
-	// 	await TestHelpers.checkIfVisible('drawer-screen');
-	// 	// Tap on Wallet
-	// 	await TestHelpers.tapByText('Wallet');
-	// 	// Check that we are on the wallet screen
-	// 	await TestHelpers.checkIfVisible('wallet-screen');
-	// 	// Ensure ETH Value is correct
-	// 	await TestHelpers.checkIfElementHasString('balance', '1.9 ETH');
-	// });
+	it('should donate ETH on MM Ropsten', async () => {
+		// Tap to donate 1 ETH
+		await TestHelpers.tapAtPoint('browser-screen', { x: 76, y: 189 });
+		// Check that account approval is displayed with correct dapp name
+		await TestHelpers.checkIfHasText('dapp-name-title', ETH_Faucet);
+		// Tap on CONNECT button
+		await TestHelpers.tapByText('CONNECT');
+		// Check that we are on the confirm transaction screen
+		await TestHelpers.checkIfVisible('confirm-transaction-screen');
+		// Tap Edit
+		await TestHelpers.tapAtPoint('confirm-transaction-screen', { x: 30, y: -20 });
+		// Input Amount
+		await TestHelpers.replaceTextInField('amount-input', '0.000001');
+		// Tap on NEXT button
+		await TestHelpers.tapByText('NEXT');
+		// Tap on CONFIRM button
+		await TestHelpers.tapByText('CONFIRM');
+		// Check that we are on the browser screen
+		await TestHelpers.checkIfVisible('browser-screen');
+		// Wait for enable notifications alert to show up
+		await TestHelpers.delay(10000);
+		// Dismiss alert
+		await TestHelpers.tapAlertWithButton('No, thanks');
+		// Open Drawer
+		await TestHelpers.tapAtPoint('browser-screen', { x: 30, y: -5 });
+		// Check that the drawer is visbile
+		await TestHelpers.checkIfVisible('drawer-screen');
+		// Tap on Wallet
+		await TestHelpers.tapByText('Wallet');
+		// Check that we are on the wallet screen
+		await TestHelpers.checkIfVisible('wallet-screen');
+		// Ensure ETH Value is correct
+		await TestHelpers.checkIfElementHasString('balance', '1.9 ETH');
+	});
 
-	// it('should log out', async () => {
-	// 	// Open Drawer
-	// 	await TestHelpers.tapAtPoint('wallet-screen', { x: 30, y: -5 });
-	// 	// Check that the drawer is visbile
-	// 	await TestHelpers.checkIfVisible('drawer-screen');
-	// 	// Tap on Log Out
-	// 	await TestHelpers.tapByText('Log Out');
-	// 	// Tap YES
-	// 	await TestHelpers.tapAlertWithButton('YES');
-	// 	// Check that we are on the wallet screen
-	// 	await TestHelpers.checkIfVisible('login');
-	// });
+	it('should log out', async () => {
+		// Open Drawer
+		await TestHelpers.tapAtPoint('wallet-screen', { x: 30, y: -5 });
+		// Check that the drawer is visbile
+		await TestHelpers.checkIfVisible('drawer-screen');
+		// Tap on Log Out
+		await TestHelpers.tapByText('Log Out');
+		// Tap YES
+		await TestHelpers.tapAlertWithButton('YES');
+		// Check that we are on the wallet screen
+		await TestHelpers.checkIfVisible('login');
+	});
 });
diff --git a/e2e/start-exploring.spec.js b/e2e/start-exploring.spec.js
@@ -1,14 +1,34 @@
 'use strict';
 import TestHelpers from './helpers';
 
+const Account = 'Test Account One';
+
 describe('Start Exploring', () => {
-	it('onboarding show the onboarding screen', async () => {
+	it('should show the onboarding screen', async () => {
 		// Check that we are on the onboarding carousel screen
 		await TestHelpers.checkIfVisible('onboarding-carousel-screen');
+		// Check that title of screen 1 is correct
+		await TestHelpers.checkIfElementHasString('carousel-screen-one', 'Welcome to MetaMask');
+		// Check that right image is displayed
+		await TestHelpers.checkIfVisible('carousel-one-image');
+		// Swipe left
+		await TestHelpers.swipe('onboarding-carousel-screen', 'left');
+		// Check that title of screen 2 is correct
+		await TestHelpers.checkIfElementHasString('carousel-screen-two', 'Say hello to your wallet...');
+		// Check that right image is displayed
+		await TestHelpers.checkIfVisible('carousel-two-image');
+		// Swipe left
+		await TestHelpers.swipe('onboarding-carousel-screen', 'left');
+		// Check that title of screen 3 is correct
+		await TestHelpers.checkIfElementHasString('carousel-screen-three', 'Explore decentralized apps');
+		// Check that right image is displayed
+		await TestHelpers.checkIfVisible('carousel-three-image');
 		// Check that Get started CTA is visible & tap it
 		await TestHelpers.waitAndTap('onboarding-get-started-button');
 		// Check that we are on the onboarding screen
 		await TestHelpers.checkIfVisible('onboarding-screen');
+		// Check that the title is correct
+		await TestHelpers.checkIfElementHasString('onboarding-screen-title', 'Get started!');
 	});
 
 	it('should allow you to create a new wallet', async () => {
@@ -30,14 +50,50 @@ describe('Start Exploring', () => {
 	it('should go through the onboarding wizard flow', async () => {
 		// Check that Take the tour CTA is visible and tap it
 		await TestHelpers.waitAndTap('onboarding-wizard-next-button');
+		// Ensure step 2 is shown correctly
+		await TestHelpers.checkIfVisible('step2-title');
+		// Check that Got it! CTA is visible and tap it
+		await TestHelpers.tapByText('Got it!');
+		// Ensure step 3 is shown correctly
+		await TestHelpers.checkIfVisible('step3-title');
+		// Focus into account 1 name
+		await TestHelpers.tapAndLongPress('account-label');
+		// Clear text
+		await TestHelpers.clearField('account-label-text-input');
+		// Change account name
+		await TestHelpers.typeTextAndHideKeyboard('account-label-text-input', Account);
+		// Tap outside to implement name change
+		await TestHelpers.tapAtPoint('wallet-screen', { x: 350, y: 37 });
+		// Check that the account name edit stuck
+		await TestHelpers.checkIfElementHasString('account-label-text-input', Account);
 		// Check that Got it! CTA is visible and tap it
 		await TestHelpers.tapByText('Got it!');
+		// Ensure step 4 is shown correctly
+		await TestHelpers.checkIfVisible('step4-title');
+		// Tap on the menu navigation
+		await TestHelpers.tapAtPoint('wallet-screen', { x: 30, y: -5 });
+		// Ensure step 5 is shown correctly
+		await TestHelpers.checkIfVisible('step5-title');
+		// Tap on Back
+		await TestHelpers.tapByText('Back');
+		// Ensure step 4 is shown correctly
+		await TestHelpers.checkIfVisible('step4-title');
 		// Check that Got it! CTA is visible and tap it
 		await TestHelpers.tapByText('Got it!');
+		// Ensure step 5 is shown correctly
+		await TestHelpers.checkIfVisible('step5-title');
 		// Check that Got it! CTA is visible and tap it
 		await TestHelpers.tapByText('Got it!');
+		// Ensure step 6 is shown correctly
+		await TestHelpers.checkIfVisible('step6-title');
+		// Tap on Back
+		await TestHelpers.tapByText('Back');
+		// Ensure step 5 is shown correctly
+		await TestHelpers.checkIfVisible('step5-title');
 		// Check that Got it! CTA is visible and tap it
 		await TestHelpers.tapByText('Got it!');
+		// Ensure step 6 is shown correctly
+		await TestHelpers.checkIfVisible('step6-title');
 		// Check that Got it! CTA is visible and tap it
 		await TestHelpers.tapByText('Got it!');
 		// Check that we are on the Browser page