Skip to content

Commit

Permalink
fix: Fix add custom rpc detox test script (#8615)
Browse files Browse the repository at this point in the history
## **Description**

Currently, the tabs Popular and Custom Network in the Add Network screen
are creating issues for the detox tests. Detox is not capable to Match
the element with the current implementation. Also, we have found that
using the byLabel Matcher also do not work as well. This issue affects
both ios and android.

## **Related issues**

Fixes:

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've clearly explained what problem this PR is solving and how it
is solved.
- [ ] I've linked related issues
- [ ] I've included manual testing steps
- [ ] I've included screenshots/recordings if applicable
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.
- [ ] I’ve properly set the pull request status:
  - [ ] In case it's not yet "ready for review", I've set it to "draft".
- [ ] In case it's "ready for review", I've changed it from "draft" to
"non-draft".

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
  • Loading branch information
SamuelSalas authored Feb 17, 2024
1 parent a20df64 commit c88a502
Show file tree
Hide file tree
Showing 8 changed files with 136 additions and 134 deletions.
11 changes: 4 additions & 7 deletions app/components/UI/Navbar/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,7 @@ import PickerNetwork from '../../../component-library/components/Pickers/PickerN
import BrowserUrlBar from '../BrowserUrlBar';
import generateTestId from '../../../../wdio/utils/generateTestId';
import { NAVBAR_NETWORK_BUTTON } from '../../../../wdio/screen-objects/testIDs/Screens/WalletView.testIds';
import {
NAV_ANDROID_BACK_BUTTON,
NETWORK_BACK_ARROW_BUTTON_ID,
NETWORK_SCREEN_CLOSE_ICON,
} from '../../../../wdio/screen-objects/testIDs/Screens/NetworksScreen.testids';
import { NAV_ANDROID_BACK_BUTTON } from '../../../../wdio/screen-objects/testIDs/Screens/NetworksScreen.testids';
import { SEND_CANCEL_BUTTON } from '../../../../wdio/screen-objects/testIDs/Screens/SendScreen.testIds';
import { ASSET_BACK_BUTTON } from '../../../../wdio/screen-objects/testIDs/Screens/TokenOverviewScreen.testIds';
import { REQUEST_SEARCH_RESULTS_BACK_BUTTON } from '../../../../wdio/screen-objects/testIDs/Screens/RequestToken.testIds';
Expand All @@ -54,6 +50,7 @@ import {
} from '../../../component-library/components/Texts/Text';
import { CommonSelectorsIDs } from '../../../../e2e/selectors/Common.selectors';
import { WalletViewSelectorsIDs } from '../../../../e2e/selectors/WalletView.selectors';
import { NetworksViewSelectorsIDs } from '../../../../e2e/selectors/Settings/NetworksView.selectors';

const trackEvent = (event) => {
InteractionManager.runAfterInteractions(() => {
Expand Down Expand Up @@ -216,7 +213,7 @@ export function getNavigationOptionsTitle(
iconName={IconName.Close}
onPress={navigationPop}
style={innerStyles.accessories}
{...generateTestId(Platform, NETWORK_SCREEN_CLOSE_ICON)}
testID={NetworksViewSelectorsIDs.CLOSE_ICON}
/>
) : null,
headerLeft: () =>
Expand All @@ -226,7 +223,7 @@ export function getNavigationOptionsTitle(
iconName={IconName.ArrowLeft}
onPress={navigationPop}
style={innerStyles.accessories}
{...generateTestId(Platform, NETWORK_BACK_ARROW_BUTTON_ID)}
testID={NetworksViewSelectorsIDs.BACK_ARROW_BUTTON}
/>
),
headerTintColor: themeColors.primary.default,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import {
TextInput,
SafeAreaView,
Linking,
Platform,
} from 'react-native';
import { connect } from 'react-redux';
import {
Expand Down Expand Up @@ -54,18 +53,6 @@ import hideKeyFromUrl from '../../../../../util/hideKeyFromUrl';
import { themeAppearanceLight } from '../../../../../constants/storage';
import { scale, moderateScale } from 'react-native-size-matters';
import CustomNetwork from './CustomNetworkView/CustomNetwork';
import generateTestId from '../../../../../../wdio/utils/generateTestId';
import {
INPUT_CHAIN_ID_FIELD,
INPUT_RPC_URL_FIELD,
INPUT_NETWORK_NAME,
NETWORKS_SYMBOL_INPUT_FIELD,
BLOCK_EXPLORER_FIELD,
REMOVE_NETWORK_BUTTON,
CUSTOM_NETWORKS_TAB_ID,
POPULAR_NETWORKS_TAB_ID,
RPC_WARNING_BANNER_ID,
} from '../../../../../../wdio/screen-objects/testIDs/Screens/NetworksScreen.testids';
import Button, {
ButtonVariants,
ButtonSize,
Expand Down Expand Up @@ -933,7 +920,7 @@ class NetworkSettings extends PureComponent {
placeholder={strings('app_settings.network_name_placeholder')}
placeholderTextColor={colors.text.muted}
onSubmitEditing={this.jumpToRpcURL}
{...generateTestId(Platform, INPUT_NETWORK_NAME)}
testID={NetworksViewSelectorsIDs.NETWORK_NAME_INPUT}
keyboardAppearance={themeAppearance}
/>
<Text style={styles.label}>
Expand All @@ -951,13 +938,13 @@ class NetworkSettings extends PureComponent {
placeholder={strings('app_settings.network_rpc_placeholder')}
placeholderTextColor={colors.text.muted}
onSubmitEditing={this.jumpToChainId}
{...generateTestId(Platform, INPUT_RPC_URL_FIELD)}
testID={NetworksViewSelectorsIDs.RPC_URL_INPUT}
keyboardAppearance={themeAppearance}
/>
{warningRpcUrl && (
<View
style={styles.warningContainer}
testID={RPC_WARNING_BANNER_ID}
testID={NetworksViewSelectorsIDs.RPC_WARNING_BANNER}
>
<Text style={styles.warningText}>{warningRpcUrl}</Text>
</View>
Expand All @@ -979,7 +966,7 @@ class NetworkSettings extends PureComponent {
placeholderTextColor={colors.text.muted}
onSubmitEditing={this.jumpToSymbol}
keyboardType={'numbers-and-punctuation'}
{...generateTestId(Platform, INPUT_CHAIN_ID_FIELD)}
testID={NetworksViewSelectorsIDs.CHAIN_INPUT}
keyboardAppearance={themeAppearance}
/>
{warningChainId ? (
Expand All @@ -1003,7 +990,7 @@ class NetworkSettings extends PureComponent {
placeholder={strings('app_settings.network_symbol_label')}
placeholderTextColor={colors.text.muted}
onSubmitEditing={this.jumpBlockExplorerURL}
{...generateTestId(Platform, NETWORKS_SYMBOL_INPUT_FIELD)}
testID={NetworksViewSelectorsIDs.NETWORKS_SYMBOL_INPUT}
keyboardAppearance={themeAppearance}
/>

Expand All @@ -1027,7 +1014,7 @@ class NetworkSettings extends PureComponent {
placeholder={strings(
'app_settings.network_block_explorer_placeholder',
)}
{...generateTestId(Platform, BLOCK_EXPLORER_FIELD)}
testID={NetworksViewSelectorsIDs.BLOCK_EXPLORER_INPUT}
placeholderTextColor={colors.text.muted}
onSubmitEditing={this.toggleNetworkDetailsModal}
keyboardAppearance={themeAppearance}
Expand All @@ -1053,7 +1040,7 @@ class NetworkSettings extends PureComponent {
variant={ButtonVariants.Secondary}
isDanger
onPress={this.removeRpcUrl}
testID={REMOVE_NETWORK_BUTTON}
testID={NetworksViewSelectorsIDs.REMOVE_NETWORK_BUTTON}
style={{ ...styles.button, ...styles.cancel }}
label={strings('app_settings.delete')}
/>
Expand Down Expand Up @@ -1164,7 +1151,7 @@ class NetworkSettings extends PureComponent {
tabLabel={strings('app_settings.popular')}
key={AppConstants.ADD_CUSTOM_NETWORK_POPULAR_TAB_ID}
style={styles.networksWrapper}
testID={POPULAR_NETWORKS_TAB_ID}
testID={NetworksViewSelectorsIDs.POPULAR_NETWORKS_CONTAINER}
>
<CustomNetwork
isNetworkModalVisible={this.state.showPopularNetworkModal}
Expand All @@ -1181,7 +1168,7 @@ class NetworkSettings extends PureComponent {
<View
tabLabel={strings('app_settings.custom_network_name')}
key={AppConstants.ADD_CUSTOM_NETWORK_CUSTOM_TAB_ID}
testID={CUSTOM_NETWORKS_TAB_ID}
testID={NetworksViewSelectorsIDs.CUSTOM_NETWORKS_CONTAINER}
>
{this.customNetwork()}
</View>
Expand Down
14 changes: 7 additions & 7 deletions app/components/Views/Settings/NetworksSettings/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,7 @@ import { LINEA_MAINNET, MAINNET, RPC } from '../../../../constants/network';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import { mockTheme, ThemeContext } from '../../../../util/theme';
import ImageIcons from '../../../UI/ImageIcon';
import {
ADD_NETWORK_BUTTON,
NETWORK_SCREEN_ID,
CUSTOM_NETWORK_NAME_NETWORK_LIST,
} from '../../../../../wdio/screen-objects/testIDs/Screens/NetworksScreen.testids';
import { ADD_NETWORK_BUTTON } from '../../../../../wdio/screen-objects/testIDs/Screens/NetworksScreen.testids';
import { compareSanitizedUrl } from '../../../../util/sanitizeUrl';
import {
selectNetworkConfigurations,
Expand All @@ -43,6 +39,7 @@ import {
} from '../../../../component-library/components/Avatars/Avatar';
import AvatarNetwork from '../../../../component-library/components/Avatars/Avatar/variants/AvatarNetwork';
import Routes from '../../../../constants/navigation/Routes';
import { NetworksViewSelectorsIDs } from '../../../../../e2e/selectors/Settings/NetworksView.selectors';

const createStyles = (colors) =>
StyleSheet.create({
Expand Down Expand Up @@ -312,7 +309,7 @@ class NetworksSettings extends PureComponent {

if (Object.keys(networkConfigurations).length > 0) {
return (
<View testID={CUSTOM_NETWORK_NAME_NETWORK_LIST}>
<View testID={NetworksViewSelectorsIDs.CUSTOM_NETWORK_LIST}>
<Text style={styles.sectionLabel}>
{strings('app_settings.custom_network_name')}
</Text>
Expand Down Expand Up @@ -454,7 +451,10 @@ class NetworksSettings extends PureComponent {
const styles = createStyles(colors);

return (
<View style={styles.wrapper} testID={NETWORK_SCREEN_ID}>
<View
style={styles.wrapper}
testID={NetworksViewSelectorsIDs.NETWORK_CONTAINER}
>
<View style={styles.inputWrapper}>
<Icon name="ios-search" size={20} color={colors.icon.default} />
<TextInput
Expand Down
156 changes: 93 additions & 63 deletions e2e/pages/Settings/NetworksView.js
Original file line number Diff line number Diff line change
@@ -1,97 +1,127 @@
import TestHelpers from '../../helpers';
import {
INPUT_NETWORK_NAME,
INPUT_RPC_URL_FIELD,
INPUT_CHAIN_ID_FIELD,
NETWORKS_SYMBOL_INPUT_FIELD,
RPC_WARNING_BANNER_ID,
NETWORK_SCREEN_ID,
CUSTOM_NETWORK_NAME_NETWORK_LIST,
} from '../../../wdio/screen-objects/testIDs/Screens/NetworksScreen.testids';
import {
NetworksViewSelectorsIDs,
NetworkViewSelectorsText,
} from '../../selectors/Settings/NetworksView.selectors';
import Matchers from '../../utils/Matchers';
import Gestures from '../../utils/Gestures';

class NetworkView {
get networkContainer() {
return Matchers.getElementByID(NetworksViewSelectorsIDs.NETWORK_CONTAINER);
}

get rpcContainer() {
return Matchers.getElementByID(NetworksViewSelectorsIDs.RPC_CONTAINER);
}

export default class NetworkView {
static async tapAddNetworkButton() {
if (device.getPlatform() === 'ios') {
await TestHelpers.tap(NetworksViewSelectorsIDs.ADD_NETWORKS_BUTTON);
} else {
await TestHelpers.waitAndTapByLabel(
NetworksViewSelectorsIDs.ADD_NETWORKS_BUTTON,
);
}
get addNetworkButton() {
return device.getPlatform() === 'ios'
? Matchers.getElementByID(NetworksViewSelectorsIDs.ADD_NETWORKS_BUTTON)
: Matchers.getElementByLabel(
NetworksViewSelectorsIDs.ADD_NETWORKS_BUTTON,
);
}

static async switchToCustomNetworks() {
await TestHelpers.waitAndTapText(
get customNetworkTab() {
return Matchers.getElementByText(
NetworkViewSelectorsText.CUSTOM_NETWORK_TAB,
);
}

static async tapPopularNetworkByName(networkName) {
await TestHelpers.tapByText(networkName);
}
static async typeInNetworkName(networkName) {
await TestHelpers.typeTextAndHideKeyboard(INPUT_NETWORK_NAME, networkName);
get networkNameInput() {
return Matchers.getElementByID(NetworksViewSelectorsIDs.NETWORK_NAME_INPUT);
}
static async typeInRpcUrl(rPCUrl) {
await TestHelpers.typeTextAndHideKeyboard(INPUT_RPC_URL_FIELD, rPCUrl);

get rpcURLInput() {
return Matchers.getElementByID(NetworksViewSelectorsIDs.RPC_URL_INPUT);
}
static async typeInChainId(chainID) {
await TestHelpers.typeTextAndHideKeyboard(INPUT_CHAIN_ID_FIELD, chainID);

get chainIDInput() {
return Matchers.getElementByID(NetworksViewSelectorsIDs.CHAIN_INPUT);
}
static async typeInNetworkSymbol(networkSymbol) {
await TestHelpers.typeTextAndHideKeyboard(
NETWORKS_SYMBOL_INPUT_FIELD,
networkSymbol,

get networkSymbolInput() {
return Matchers.getElementByID(
NetworksViewSelectorsIDs.NETWORKS_SYMBOL_INPUT,
);
}

static async clearRpcInputBox() {
await TestHelpers.clearField(INPUT_RPC_URL_FIELD);
get rpcAddButton() {
return device.getPlatform() === 'android'
? Matchers.getElementByLabel(
NetworksViewSelectorsIDs.ADD_CUSTOM_NETWORK_BUTTON,
)
: Matchers.getElementByID(
NetworksViewSelectorsIDs.ADD_CUSTOM_NETWORK_BUTTON,
);
}

static async tapRpcNetworkAddButton() {
if (device.getPlatform() === 'android') {
await TestHelpers.waitAndTapByLabel(
NetworksViewSelectorsIDs.ADD_CUSTOM_NETWORK_BUTTON,
); // make me better
} else {
await TestHelpers.waitAndTap(
NetworksViewSelectorsIDs.ADD_CUSTOM_NETWORK_BUTTON,
);
}
get blockExplorer() {
return Matchers.getElementByLabel(NetworkViewSelectorsText.BLOCK_EXPLORER);
}

static async swipeToRPCTitleAndDismissKeyboard() {
// Because in bitrise the keyboard is blocking the "Add" CTA
await TestHelpers.waitAndTapByLabel(
NetworkViewSelectorsText.BLOCK_EXPLORER,
get rpcWarningBanner() {
return Matchers.getElementByID(NetworksViewSelectorsIDs.RPC_WARNING_BANNER);
}

get customNetworkList() {
return Matchers.getElementByID(
NetworksViewSelectorsIDs.CUSTOM_NETWORK_LIST,
);
await TestHelpers.delay(3000);
}

static async removeNetwork() {
await TestHelpers.tapAndLongPressAtIndex(
CUSTOM_NETWORK_NAME_NETWORK_LIST,
0,
get removeNetwork() {
return Matchers.getElementByText(NetworkViewSelectorsText.REMOVE_NETWORK);
}

async tapAddNetworkButton() {
await Gestures.waitAndTap(this.addNetworkButton);
}

async switchToCustomNetworks() {
await Gestures.waitAndTap(this.customNetworkTab);
}

async tapPopularNetworkByName(networkName) {
const element = Matchers.getElementByText(networkName);
await TestHelpers.tapByText(element);
}
async typeInNetworkName(networkName) {
await Gestures.typeTextAndHideKeyboard(this.networkNameInput, networkName);
}
async typeInRpcUrl(rPCUrl) {
await Gestures.typeTextAndHideKeyboard(this.rpcURLInput, rPCUrl);
}
async typeInChainId(chainID) {
await Gestures.typeTextAndHideKeyboard(this.chainIDInput, chainID);
}

async typeInNetworkSymbol(networkSymbol) {
await Gestures.typeTextAndHideKeyboard(
this.networkSymbolInput,
networkSymbol,
);
//Remove xDAI and verify removed on wallet view
//Tap remove
await TestHelpers.tapByText(NetworkViewSelectorsText.REMOVE_NETWORK);
}

static async isNetworkViewVisible() {
await TestHelpers.checkIfVisible(NETWORK_SCREEN_ID);
async clearRpcInputBox() {
await Gestures.clearField(this.rpcURLInput);
}

static async isRpcViewVisible() {
await TestHelpers.checkIfVisible(NetworksViewSelectorsIDs.CONTAINER);
async tapRpcNetworkAddButton() {
await Gestures.waitAndTap(this.rpcAddButton);
}

static async isRPCWarningVisble() {
await TestHelpers.checkIfVisible(RPC_WARNING_BANNER_ID);
async swipeToRPCTitleAndDismissKeyboard() {
// Because in bitrise the keyboard is blocking the "Add" CTA
await Gestures.waitAndTap(this.blockExplorer);
}

async tapRemoveNetwork(networkName) {
const network = Matchers.getElementByText(networkName);
await Gestures.tapAndLongPress(network);
await Gestures.waitAndTap(this.removeNetwork);
}
}

export default new NetworkView();
Loading

0 comments on commit c88a502

Please sign in to comment.