New user and tutorial e2e tests (#937)

* new user and tutorial e2e tests

* update snapshots

* removed unused tests & added tutorial flow from webpage

* add tapAtPoint to the helpers

app/components/UI/OnboardingWizard/Coachmark/index.js

@@ -266,10 +266,20 @@ export default class Coachmark extends PureComponent {
 	 */
 	renderActionButtons = () => (
 		<View style={styles.actions}>
-			<StyledButton containerStyle={styles.actionButton} type={'transparent'} onPress={this.onBack}>
+			<StyledButton
+				containerStyle={styles.actionButton}
+				type={'transparent'}
+				onPress={this.onBack}
+				testID={'onboarding-wizard-back-button'}
+			>
 				{strings('onboarding_wizard.coachmark.action_back')}
 			</StyledButton>
-			<StyledButton containerStyle={styles.actionButton} type={'normal'} onPress={this.onNext}>
+			<StyledButton
+				containerStyle={styles.actionButton}
+				type={'normal'}
+				onPress={this.onNext}
+				testID={'onboarding-wizard-next-button'}
+			>
 				{strings('onboarding_wizard.coachmark.action_next')}
 			</StyledButton>
 		</View>

app/components/UI/OnboardingWizard/Step1/index.js

@@ -64,7 +64,7 @@ class Step1 extends PureComponent {
 
 	render() {
 		return (
-			<View style={styles.main}>
+			<View style={styles.main} testID={'onboarding-wizard-step1-view'}>
 				<View style={styles.coachmarkContainer}>
 					<Coachmark
 						title={strings('onboarding_wizard.step1.title')}

app/components/UI/OptinMetrics/index.js

@@ -223,7 +223,7 @@ class OptinMetrics extends PureComponent {
 
 	render() {
 		return (
-			<SafeAreaView style={styles.root}>
+			<SafeAreaView style={styles.root} testID={'metaMetrics-OptIn'}>
 				<ScrollView style={styles.root}>
 					<View style={styles.wrapper}>
 						<Text style={styles.title}>{strings('privacy_policy.description_title')}</Text>
@@ -238,13 +238,15 @@ class OptinMetrics extends PureComponent {
 							containerStyle={[styles.button, styles.cancel]}
 							type={'cancel'}
 							onPress={this.onCancel}
+							testID={'cancel-button'}
 						>
 							{strings('privacy_policy.decline')}
 						</StyledButton>
 						<StyledButton
 							containerStyle={[styles.button, styles.confirm]}
 							type={'confirm'}
 							onPress={this.onConfirm}
+							testID={'agree-button'}
 						>
 							{strings('privacy_policy.agree')}
 						</StyledButton>

app/components/Views/Browser/index.js

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
-import { Dimensions, Platform } from 'react-native';
+import { View, Dimensions, Platform } from 'react-native';
 import PropTypes from 'prop-types';
 import { createNewTab, closeAllTabs, closeTab, setActiveTab, updateTab } from '../../../actions/browser';
 import Tabs from '../../UI/Tabs';
@@ -9,6 +9,7 @@ import { captureScreen } from 'react-native-view-shot';
 import Logger from '../../../util/Logger';
 import BrowserTab from '../BrowserTab';
 import AppConstants from '../../../core/AppConstants';
+import { baseStyles } from '../../../styles/common';
 
 const margin = 16;
 const THUMB_WIDTH = Dimensions.get('window').width / 2 - margin * 2;
@@ -259,10 +260,10 @@ class Browser extends PureComponent {
 
 	render() {
 		return (
-			<React.Fragment>
+			<View style={baseStyles.flexGrow} testID={'browser-screen'}>
 				{this.renderBrowserTabs()}
 				{this.renderTabsView()}
-			</React.Fragment>
+			</View>
 		);
 	}
 }

app/components/Views/BrowserTab/index.js

@@ -1695,6 +1695,7 @@ export class BrowserTab extends PureComponent {
 							userAgent={this.getUserAgent()}
 							sendCookies
 							javascriptEnabled
+							testID={'browser-webview'}
 						/>
 					)}
 				</View>

app/components/Views/CreateWallet/index.js

@@ -161,7 +161,7 @@ class CreateWallet extends PureComponent {
 
 	render() {
 		return (
-			<ScrollView style={styles.flex} contentContainerStyle={styles.flex} testID={'onboarding-screen'}>
+			<ScrollView style={styles.flex} contentContainerStyle={styles.flex} testID={'create-wallet-screen'}>
 				<View style={styles.wrapper}>
 					<View style={styles.content}>
 						<View style={styles.foxWrapper}>

app/components/Views/Onboarding/index.js

@@ -169,13 +169,9 @@ class Onboarding extends PureComponent {
 
 	render() {
 		return (
-			<View style={baseStyles.flexGrow}>
+			<View style={baseStyles.flexGrow} testID={'home-screen'}>
 				<OnboardingScreenWithBg screen={'b'}>
-					<ScrollView
-						style={baseStyles.flexGrow}
-						contentContainerStyle={styles.scroll}
-						testID={'onboarding-screen'}
-					>
+					<ScrollView style={baseStyles.flexGrow} contentContainerStyle={styles.scroll}>
 						<View style={styles.wrapper}>
 							<View style={styles.content}>
 								<View style={styles.foxWrapper}>
@@ -202,7 +198,7 @@ class Onboarding extends PureComponent {
 											<StyledButton
 												type={'blue'}
 												onPress={this.onPressCreate}
-												testID={'onboarding-new-button'}
+												testID={'start-exploring-button'}
 											>
 												{strings('onboarding.start_exploring_now')}
 											</StyledButton>

app/components/Views/Wallet/index.js

@@ -239,10 +239,9 @@ class Wallet extends PureComponent {
 	};
 
 	render = () => (
-		<View style={baseStyles.flexGrow}>
+		<View style={baseStyles.flexGrow} testID={'wallet-screen'}>
 			<ScrollView
 				style={styles.wrapper}
-				testID={'wallet-screen'}
 				refreshControl={<RefreshControl refreshing={this.state.refreshing} onRefresh={this.onRefresh} />}
 			>
 				{this.props.selectedAddress ? this.renderContent() : this.renderLoader()}

e2e/helpers.js

@@ -2,7 +2,7 @@ export default class TestHelpers {
 	static async waitAndTap(elementId) {
 		await waitFor(element(by.id(elementId)))
 			.toBeVisible()
-			.withTimeout(3000);
+			.withTimeout(5000);
 
 		return element(by.id(elementId)).tap();
 	}
@@ -17,6 +17,10 @@ export default class TestHelpers {
 			.tap();
 	}
 
+	static tapAtPoint(elementId, point) {
+		return element(by.id(elementId)).tapAtPoint(point);
+	}
+
 	static async typeText(elementId, text) {
 		if (device.getPlatform() === 'android') {
 			await TestHelpers.waitAndTap(elementId);
@@ -60,12 +64,26 @@ export default class TestHelpers {
 		await element(by.id(elementId)).swipe(direction);
 	}
 
+	static async scrollTo(scrollviewId, edge) {
+		await element(by.id(scrollviewId)).scrollTo(edge);
+	}
+
 	static checkIfVisible(elementId) {
 		return waitFor(element(by.id(elementId)))
 			.toBeVisible()
 			.withTimeout(10000);
 	}
 
+	static checkIfNotVisible(elementId) {
+		return waitFor(element(by.id(elementId)))
+			.toBeNotVisible()
+			.withTimeout(10000);
+	}
+
+	static checkIfExists(elementId) {
+		return expect(element(by.id(elementId))).toExist();
+	}
+
 	static checkIfHasText(elementId, text) {
 		return expect(element(by.id(elementId))).toHaveText(text);
 	}

e2e/metametrics-opt-out.spec.js

@@ -0,0 +1,19 @@
+'use strict';
+import TestHelpers from './helpers';
+
+describe('MetaMetrics opt-out', () => {
+	it('should be able to opt-out of MetaMetrics', async () => {
+		// Check that we are on the home screen
+		await TestHelpers.checkIfVisible('home-screen');
+		// Check that Start Exploring CTA is visible & tap it
+		await TestHelpers.waitAndTap('start-exploring-button');
+		// Check that we are on the MetaMetrics optIn screen
+		await TestHelpers.checkIfVisible('metaMetrics-OptIn');
+		// Check that "No thanks" CTA is visible and tap it
+		await TestHelpers.waitAndTap('cancel-button');
+		// Check that we are on the wallet screen
+		await TestHelpers.checkIfExists('wallet-screen');
+		// Check that the onboarding wizard is present
+		await TestHelpers.checkIfVisible('onboarding-wizard-step1-view');
+	});
+});

e2e/onboarding-wizard-opt-out.spec.js

@@ -0,0 +1,48 @@
+'use strict';
+import TestHelpers from './helpers';
+
+describe('Onboarding wizard opt-out', () => {
+	it('should be able to opt-out of the onboarding-wizard', async () => {
+		// Check that we are on the home screen
+		await TestHelpers.checkIfVisible('home-screen');
+		// Check that Start Exploring CTA is visible & tap it
+		await TestHelpers.waitAndTap('start-exploring-button');
+		// Check that we are on the MetaMetrics optIn screen
+		await TestHelpers.checkIfVisible('metaMetrics-OptIn');
+		// Check that "No thanks" CTA is visible and tap it
+		await TestHelpers.waitAndTap('cancel-button');
+		// Check that we are on the wallet screen
+		await TestHelpers.checkIfExists('wallet-screen');
+		// Check that the onboarding wizard is present
+		await TestHelpers.checkIfVisible('onboarding-wizard-step1-view');
+		// Check that No thanks CTA is visible and tap it
+		await TestHelpers.waitAndTap('onboarding-wizard-back-button');
+		// Check that the onboarding wizard is gone
+		await TestHelpers.checkIfNotVisible('onboarding-wizard-step1-view');
+		// Relaunch the app
+		await device.reloadReactNative();
+		// Check that we are on the Browser page
+		await TestHelpers.checkIfVisible('browser-screen');
+		// Check that the wizard is not visible anymore
+		await TestHelpers.checkIfNotVisible('onboarding-wizard-step1-view');
+	});
+
+	it('should tap on take a tour on browser then skip tutorial', async () => {
+		// Check that we are on the Browser page
+		await TestHelpers.checkIfVisible('browser-screen');
+		// Scroll to bottom of browser view
+		await TestHelpers.swipe('browser-screen', 'up');
+		// Tap on the Take a tour box
+		await TestHelpers.tapAtPoint('browser-screen', { x: 215, y: 555 });
+		// Check that we are on the wallet screen
+		await TestHelpers.checkIfExists('wallet-screen');
+		// Check that the onboarding wizard is present
+		await TestHelpers.checkIfVisible('onboarding-wizard-step1-view');
+		// Check that Take the tour CTA is visible and tap it
+		await TestHelpers.waitAndTap('onboarding-wizard-next-button');
+		// Tap on Skip Tutorial
+		await TestHelpers.tapByText('Skip Tutorial');
+		// Check that the wizard is not visible anymore
+		await TestHelpers.checkIfNotVisible('onboarding-wizard-step1-view');
+	});
+});

e2e/start-exploring.spec.js

@@ -0,0 +1,42 @@
+'use strict';
+import TestHelpers from './helpers';
+
+describe('Start Exploring', () => {
+	it('should show the home screen', async () => {
+		// Check that we are on the home screen
+		await TestHelpers.checkIfVisible('home-screen');
+	});
+
+	it('should allow you to create a new wallet', async () => {
+		// Check that Start Exploring CTA is visible & tap it
+		await TestHelpers.waitAndTap('start-exploring-button');
+		// Check that we are on the metametrics optIn screen
+		await TestHelpers.checkIfVisible('metaMetrics-OptIn');
+	});
+
+	it('should tap I Agree and land on the wallet view with tutorial open', async () => {
+		// Check that I Agree CTA is visible and tap it
+		await TestHelpers.waitAndTap('agree-button');
+		// Check that we are on the wallet screen
+		await TestHelpers.checkIfExists('wallet-screen');
+		// Check that the onboarding wizard is present
+		await TestHelpers.checkIfVisible('onboarding-wizard-step1-view');
+	});
+
+	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');
+		// Check that Got it! CTA is visible and tap it
+		await TestHelpers.tapByText('Got it!');
+		// Check that Got it! CTA is visible and tap it
+		await TestHelpers.tapByText('Got it!');
+		// Check that Got it! CTA is visible and tap it
+		await TestHelpers.tapByText('Got it!');
+		// Check that Got it! CTA is visible and tap it
+		await TestHelpers.tapByText('Got it!');
+		// Check that Got it! CTA is visible and tap it
+		await TestHelpers.tapByText('Got it!');
+		// Check that we are on the Browser page
+		await TestHelpers.checkIfVisible('browser-screen');
+	});
+});