Detox: Add custom RPC network

app/components/UI/NetworkList/__snapshots__/index.test.js.snap

@@ -64,6 +64,7 @@ exports[`NetworkList should render correctly 1`] = `
             },
           ]
         }
+        testID="network-name"
       >
         <View
           style={
@@ -171,6 +172,7 @@ exports[`NetworkList should render correctly 1`] = `
             "textAlign": "left",
           }
         }
+        testID="other-network-name"
       >
         Other Networks
       </Text>

app/components/UI/NetworkList/index.js

@@ -224,6 +224,7 @@ export class NetworkList extends PureComponent {
 					style={[styles.network, styles.mainnet]}
 					key={`network-mainnet`}
 					onPress={() => this.onNetworkChange('mainnet')} // eslint-disable-line
+					testID={'network-name'}
 				>
 					<View style={styles.networkWrapper}>
 						<View style={[styles.selected, styles.mainnetSelected]}>{isMainnet}</View>
@@ -254,7 +255,9 @@ export class NetworkList extends PureComponent {
 			<ScrollView style={styles.networksWrapper}>
 				{this.renderMainnet()}
 				<View style={styles.otherNetworksHeader}>
-					<Text style={styles.otherNetworksText}>{strings('networks.other_networks')}</Text>
+					<Text style={styles.otherNetworksText} testID={'other-network-name'}>
+						{strings('networks.other_networks')}
+					</Text>
 				</View>
 				{this.renderOtherNetworks()}
 				{this.renderRpcNetworks()}

app/components/Views/Settings/NetworksSettings/NetworkSettings/__snapshots__/index.test.js.snap

@@ -9,6 +9,7 @@ exports[`NetworkSettings should render correctly 1`] = `
       "flexDirection": "column",
     }
   }
+  testID="new-rpc-screen"
 >
   <KeyboardAwareScrollViewMock
     enableAutomaticScroll={true}
@@ -93,6 +94,7 @@ exports[`NetworkSettings should render correctly 1`] = `
             Object {},
           ]
         }
+        testID="input-network-name"
         underlineColorAndroid="transparent"
       />
       <Text
@@ -131,6 +133,7 @@ exports[`NetworkSettings should render correctly 1`] = `
             Object {},
           ]
         }
+        testID="input-rpc-url"
         underlineColorAndroid="transparent"
       />
       <Text
@@ -207,6 +210,7 @@ exports[`NetworkSettings should render correctly 1`] = `
             Object {},
           ]
         }
+        testID="input-network-symbol"
         underlineColorAndroid="transparent"
       />
       <Text
@@ -278,6 +282,7 @@ exports[`NetworkSettings should render correctly 1`] = `
               "opacity": 0.6,
             }
           }
+          testID="network-add-button"
           type="confirm"
         >
           Add

app/components/Views/Settings/NetworksSettings/NetworkSettings/index.js

@@ -296,7 +296,7 @@ class NetworkSettings extends PureComponent {
 			enableAction
 		} = this.state;
 		return (
-			<SafeAreaView style={styles.wrapper}>
+			<SafeAreaView style={styles.wrapper} testID={'new-rpc-screen'}>
 				<KeyboardAwareScrollView style={styles.informationWrapper}>
 					<View style={styles.scrollWrapper}>
 						{addMode && <Text style={styles.title}>{strings('app_settings.new_RPC_URL')}</Text>}
@@ -313,6 +313,7 @@ class NetworkSettings extends PureComponent {
 							placeholder={strings('app_settings.network_name_placeholder')}
 							placeholderTextColor={colors.grey100}
 							onSubmitEditing={this.jumpToRpcURL}
+							testID={'input-network-name'}
 						/>
 
 						<Text style={styles.label}>{strings('app_settings.network_rpc_url_label')}</Text>
@@ -328,9 +329,10 @@ class NetworkSettings extends PureComponent {
 							placeholder={strings('app_settings.network_rpc_placeholder')}
 							placeholderTextColor={colors.grey100}
 							onSubmitEditing={this.jumpToChainId}
+							testID={'input-rpc-url'}
 						/>
 						{warningRpcUrl && (
-							<View style={styles.warningContainer}>
+							<View style={styles.warningContainer} testID={'rpc-url-warning'}>
 								<Text style={styles.warningText}>{warningRpcUrl}</Text>
 							</View>
 						)}
@@ -368,6 +370,7 @@ class NetworkSettings extends PureComponent {
 							placeholder={strings('app_settings.network_symbol_placeholder')}
 							placeholderTextColor={colors.grey100}
 							onSubmitEditing={this.jumpBlockExplorerURL}
+							testID={'input-network-symbol'}
 						/>
 
 						<Text style={styles.label}>{strings('app_settings.network_block_explorer_label')}</Text>
@@ -390,6 +393,7 @@ class NetworkSettings extends PureComponent {
 								<StyledButton
 									type="confirm"
 									onPress={this.addRpcUrl}
+									testID={'network-add-button'}
 									containerStyle={styles.syncConfirm}
 									disabled={!enableAction || this.disabledByRpcUrl() || this.disabledByChainId()}
 								>

app/components/Views/Settings/NetworksSettings/__snapshots__/index.test.js.snap

@@ -11,6 +11,7 @@ exports[`NetworksSettings should render correctly 1`] = `
       "paddingVertical": 12,
     }
   }
+  testID="networks-screen"
 >
   <ScrollViewMock>
     <View>
@@ -345,6 +346,7 @@ exports[`NetworksSettings should render correctly 1`] = `
         "opacity": 0.6,
       }
     }
+    testID="add-network-button"
     type="confirm"
   >
     Add Network

app/components/Views/Settings/NetworksSettings/index.js

@@ -190,14 +190,19 @@ class NetworksSettings extends PureComponent {
 
 	render() {
 		return (
-			<View style={styles.wrapper}>
+			<View style={styles.wrapper} testID={'networks-screen'}>
 				<ScrollView style={styles.networksWrapper}>
 					{this.renderMainnet()}
 					<Text style={styles.sectionLabel}>{strings('app_settings.network_other_networks')}</Text>
 					{this.renderOtherNetworks()}
 					{this.renderRpcNetworksView()}
 				</ScrollView>
-				<StyledButton type="confirm" onPress={this.onAddNetwork} containerStyle={styles.syncConfirm}>
+				<StyledButton
+					type="confirm"
+					onPress={this.onAddNetwork}
+					containerStyle={styles.syncConfirm}
+					testID={'add-network-button'}
+				>
 					{strings('app_settings.network_add_network')}
 				</StyledButton>
 				<ActionSheet

e2e/add-custom-rpc.spec.js

@@ -0,0 +1,91 @@
+'use strict';
+import TestHelpers from './helpers';
+
+const RINKEBY = 'Rinkeby Test Network';
+const XDAI_URL = 'https://dai.poa.network/';
+
+describe('Custom RPC Tests', () => {
+	beforeEach(() => {
+		jest.setTimeout(170000);
+	});
+
+	it('should create new wallet and dismiss tutorial', async () => {
+		// Check that we are on the onboarding carousel screen
+		await TestHelpers.checkIfVisible('onboarding-carousel-screen');
+		// 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 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 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');
+		// 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');
+	});
+
+	it('should go to settings then networks', 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 settings
+		await TestHelpers.tap('settings-button');
+		// Tap on the "Networks" option
+		await TestHelpers.tapByText('Networks');
+		// Check that we are on the networks screen
+		await TestHelpers.checkIfVisible('networks-screen');
+	});
+
+	it('should add xDai network', async () => {
+		// Tap on Add Network button
+		await TestHelpers.tap('add-network-button');
+		// Check that we are on the add new rpc network screen
+		await TestHelpers.checkIfVisible('new-rpc-screen');
+		// Input Network Name
+		await TestHelpers.typeTextAndHideKeyboard('input-network-name', 'xDai');
+		// Input incorrect RPC URL
+		await TestHelpers.typeTextAndHideKeyboard('input-rpc-url', 'abc');
+		// Check that warning is displayed
+		await TestHelpers.checkIfVisible('rpc-url-warning');
+		// Clear RPC URL field
+		await TestHelpers.clearField('input-rpc-url');
+		// Input correct RPC URL for Ganache network
+		await TestHelpers.typeTextAndHideKeyboard('input-rpc-url', XDAI_URL);
+		// Focus outside of text input field
+		await TestHelpers.tapAtPoint('new-rpc-screen', { x: 280, y: 30 });
+		// Input Symbol
+		await TestHelpers.typeTextAndHideKeyboard('input-network-symbol', 'xDAI');
+		// Focus outside of text input field
+		await TestHelpers.tapAtPoint('new-rpc-screen', { x: 280, y: 30 });
+		// Tap on Add button
+		await TestHelpers.waitAndTap('network-add-button');
+		// Check that we are on the wallet screen
+		await TestHelpers.checkIfVisible('wallet-screen');
+		// Check that we are on correct network
+		await TestHelpers.checkIfElementHasString('network-name', 'xDai');
+	});
+
+	it('should validate that xDai is added to network list then switch networks', async () => {
+		// Tap to prompt network list
+		await TestHelpers.tapAtPoint('wallet-screen', { x: 200, y: -5 });
+		// Check that networks list is visible
+		await TestHelpers.checkIfVisible('networks-list');
+		// Swipe down on networks list
+		await TestHelpers.swipe('networks-list', 'up');
+		// Check that our network is added
+		await TestHelpers.checkIfElementHasString('other-network-name', 'xDai');
+		// Change to Rinkeby Network
+		await TestHelpers.tapByText(RINKEBY);
+		// Check that we are on correct network
+		await TestHelpers.checkIfElementHasString('network-name', RINKEBY);
+	});
+});