Skip to content

Commit

Permalink
test: 1452 refactor modal pages batch 2 (#8257)
Browse files Browse the repository at this point in the history
## **Description**
We are aiming to refactor the page objects in the modal folder so that
they strictly follow the page object model pattern. This would aide in
providing more readable and help standardize the way we create our
tests. Because of the amount of files inside of the modal folder, the
scope was divided into a batch of 4.

## **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 15, 2024
1 parent bad7725 commit 1bec601
Show file tree
Hide file tree
Showing 25 changed files with 183 additions and 146 deletions.
17 changes: 10 additions & 7 deletions app/components/Base/DetailsModal.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,7 @@ import Ionicons from 'react-native-vector-icons/Ionicons';
import { fontStyles } from '../../styles/common';
import Text from './Text';
import { useTheme } from '../../util/theme';
import {
DETAILS_MODAL_TITLE,
DETAILS_MODAL_CLOSE_ICON,
} from '../../../wdio/screen-objects/testIDs/Components/DetailsModal.js';
import { TransactionDetailsModalSelectorsIDs } from '../../../e2e/selectors/Modals/TransactionDetailsModal.selectors';

const createStyles = (colors) =>
StyleSheet.create({
Expand Down Expand Up @@ -85,7 +82,7 @@ const DetailsModalTitle = ({ style, ...props }) => {

return (
<Text
testID={DETAILS_MODAL_TITLE}
testID={TransactionDetailsModalSelectorsIDs.TITLE}
style={[styles.title, style]}
{...props}
/>
Expand All @@ -99,7 +96,7 @@ const DetailsModalCloseIcon = ({ style, ...props }) => {
<TouchableOpacity
style={[styles.closeIcon, style]}
{...props}
testID={DETAILS_MODAL_CLOSE_ICON}
testID={TransactionDetailsModalSelectorsIDs.CLOSE_ICON}
>
<Ionicons color={colors.text.default} name={'ios-close'} size={38} />
</TouchableOpacity>
Expand All @@ -109,7 +106,13 @@ const DetailsModalBody = ({ style, ...props }) => {
const { colors } = useTheme();
const styles = createStyles(colors);

return <View style={[styles.body, style]} {...props} />;
return (
<View
testID={TransactionDetailsModalSelectorsIDs.BODY}
style={[styles.body, style]}
{...props}
/>
);
};
const DetailsModalSection = ({ style, borderBottom, ...props }) => {
const { colors } = useTheme();
Expand Down
4 changes: 2 additions & 2 deletions app/components/Base/StatusText.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { StyleSheet } from 'react-native';
import { FIAT_ORDER_STATES } from '../../constants/on-ramp';
import { strings } from '../../../locales/i18n';
import { useTheme } from '../../util/theme';
import { DETAILS_MODAL_TITLE } from '../../../wdio/screen-objects/testIDs/Components/DetailsModal.js';
import { CommonSelectorsIDs } from '../../../e2e/selectors/Common.selectors';

const styles = StyleSheet.create({
status: {
Expand All @@ -17,7 +17,7 @@ const styles = StyleSheet.create({

export const ConfirmedText = (props) => (
<Text
testID={DETAILS_MODAL_TITLE}
testID={CommonSelectorsIDs.STATUS_CONFIRMED}
bold
green
style={styles.status}
Expand Down
10 changes: 4 additions & 6 deletions app/components/UI/NetworkModal/NetworkAdded/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,8 @@ import StyledButton from '../../StyledButton';
import { strings } from '../../../../../locales/i18n';
import Text from '../../../Base/Text';
import { useTheme } from '../../../../util/theme';
import {
NEW_NETWORK_ADDED_SWITCH_TO_NETWORK_BUTTON,
NEW_NETWORK_ADDED_CLOSE_BUTTON,
} from '../../../../../wdio/screen-objects/testIDs/Screens/NetworksScreen.testids';
import { NetworkAddedModalSelectorsIDs } from '../../../../../e2e/selectors/Modals/NetworkAddedModal.selectors';

const createStyles = (colors: any) =>
StyleSheet.create({
buttonView: {
Expand Down Expand Up @@ -54,7 +52,7 @@ const NetworkAdded = (props: NetworkAddedProps) => {
<View style={styles.buttonView}>
<StyledButton
type={'cancel'}
testID={NEW_NETWORK_ADDED_CLOSE_BUTTON}
testID={NetworkAddedModalSelectorsIDs.CLOSE_NETWORK_BUTTON}
onPress={closeModal}
containerStyle={[styles.button, styles.cancel]}
>
Expand All @@ -63,7 +61,7 @@ const NetworkAdded = (props: NetworkAddedProps) => {
<StyledButton
type={'confirm'}
onPress={switchNetwork}
testID={NEW_NETWORK_ADDED_SWITCH_TO_NETWORK_BUTTON}
testID={NetworkAddedModalSelectorsIDs.SWITCH_NETWORK_BUTTON}
containerStyle={[styles.button, styles.confirm]}
>
{strings('networks.switch_network')}
Expand Down
13 changes: 4 additions & 9 deletions app/components/UI/Tabs/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import {
ScrollView,
TouchableOpacity,
StyleSheet,
Platform,
} from 'react-native';
import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
import PropTypes from 'prop-types';
Expand All @@ -19,7 +18,6 @@ import { MetaMetricsEvents } from '../../../core/Analytics';
import AnalyticsV2 from '../../../util/analyticsV2';

import { ThemeContext, mockTheme } from '../../../util/theme';
import generateTestId from '../../../../wdio/utils/generateTestId';
import {
MULTI_TAB_ADD_BUTTON,
MULTI_TAB_CLOSE_ALL_BUTTON,
Expand Down Expand Up @@ -231,10 +229,7 @@ export default class Tabs extends PureComponent {

return (
<View style={styles.noTabs}>
<Text
style={styles.noTabsTitle}
{...generateTestId(Platform, MULTI_TAB_NO_TABS_MESSAGE)}
>
<Text style={styles.noTabsTitle} testID={MULTI_TAB_NO_TABS_MESSAGE}>
{strings('browser.no_tabs_title')}
</Text>
<Text style={styles.noTabsDesc}>{strings('browser.no_tabs_desc')}</Text>
Expand Down Expand Up @@ -287,7 +282,7 @@ export default class Tabs extends PureComponent {
<TouchableOpacity
style={[styles.tabAction, styles.tabActionleft]}
onPress={closeAllTabs}
{...generateTestId(Platform, MULTI_TAB_CLOSE_ALL_BUTTON)}
testID={MULTI_TAB_CLOSE_ALL_BUTTON}
>
<Text
style={[
Expand All @@ -302,7 +297,7 @@ export default class Tabs extends PureComponent {
<TouchableOpacity
style={styles.newTabIconButton}
onPress={this.onNewTabPress}
{...generateTestId(Platform, MULTI_TAB_ADD_BUTTON)}
testID={MULTI_TAB_ADD_BUTTON}
>
<MaterialCommunityIcon
name="plus"
Expand All @@ -315,7 +310,7 @@ export default class Tabs extends PureComponent {
<TouchableOpacity
style={[styles.tabAction, styles.tabActionRight]}
onPress={closeTabsView}
{...generateTestId(Platform, MULTI_TAB_DONE_BUTTON)}
testID={MULTI_TAB_DONE_BUTTON}
>
<Text
style={[
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -140,10 +140,7 @@ const AccountPermissionsConnected = ({
return (
<>
<SheetHeader title={strings('accounts.connected_accounts_title')} />
<View
style={styles.body}
testID={ConnectedAccountsSelectorsIDs.CONTAINER}
>
<View style={styles.body}>
<TagUrl
imageSource={favicon}
label={urlWithProtocol}
Expand Down
1 change: 0 additions & 1 deletion e2e/pages/CommonView.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ class CommonView {
get errorMessage() {
return Matchers.getElementByID(CommonSelectorsIDs.ERROR_MESSAGE);
}

async tapBackButton() {
await Gestures.waitAndTap(this.backButton);
}
Expand Down
10 changes: 5 additions & 5 deletions e2e/pages/modals/ConnectedAccountsModal.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,6 @@ import Matchers from '../../utils/Matchers';
import Gestures from '../../utils/Gestures';

class ConnectedAccountsModal {
get container() {
return Matchers.getElementByID(ConnectedAccountsSelectorsIDs.CONTAINER);
}

get permissionsButton() {
return Matchers.getElementByText(
ConnectedAccountModalSelectorsText.PERMISSION_LINK,
Expand All @@ -34,6 +30,10 @@ class ConnectedAccountsModal {
);
}

get title() {
return Matchers.getElementByText(ConnectedAccountModalSelectorsText.TITLE);
}

async tapPermissionsButton() {
await Gestures.waitAndTap(this.permissionsButton);
}
Expand All @@ -50,7 +50,7 @@ class ConnectedAccountsModal {
// }

async scrollToBottomOfModal() {
await Gestures.swipe(this.container, 'down', 'fast');
await Gestures.swipe(this.title, 'down', 'fast');
}

async tapConnectMoreAccountsButton() {
Expand Down
44 changes: 23 additions & 21 deletions e2e/pages/modals/DeleteWalletModal.js
Original file line number Diff line number Diff line change
@@ -1,38 +1,40 @@
import TestHelpers from '../../helpers';
import {
DeleteWalletModalSelectorsIDs,
DeleteWalletModalSelectorsText,
} from '../../selectors/Modals/DeleteWalletModal.selectors';
import { CommonSelectorsText } from '../../selectors/Common.selectors';
import Matchers from '../../utils/Matchers';
import Gestures from '../../utils/Gestures';

export default class DeleteWalletModal {
static async tapIUnderstandButton() {
await TestHelpers.delay(2000);
await TestHelpers.tapByText(
class DeleteWalletModal {
get container() {
return Matchers.getElementByID(DeleteWalletModalSelectorsIDs.CONTAINER);
}

get understandButton() {
return Matchers.getElementByText(
DeleteWalletModalSelectorsText.UNDERSTAND_BUTTON,
);
}

static async tapCancelButton() {
await TestHelpers.tapByText(CommonSelectorsText.CANCEL_BUTTON);
get deleteWalletButton() {
return Matchers.getElementByText(DeleteWalletModalSelectorsText.DELETE_MY);
}
static async tapDeleteMyWalletButton() {
await TestHelpers.tapByText(DeleteWalletModalSelectorsText.DELETE_MY);

get deleteInput() {
return Matchers.getElementByID(DeleteWalletModalSelectorsIDs.INPUT);
}
static async typeDeleteInInputBox() {
await TestHelpers.typeTextAndHideKeyboard(
DeleteWalletModalSelectorsIDs.INPUT,
'delete',
);

async tapIUnderstandButton() {
await Gestures.waitAndTap(this.understandButton);
}

static async isVisible() {
await TestHelpers.checkIfVisible(DeleteWalletModalSelectorsIDs.CONTAINER);
async tapDeleteMyWalletButton() {
await Gestures.waitAndTap(this.deleteWalletButton);
}

static async isNotVisible() {
await TestHelpers.checkIfNotVisible(
DeleteWalletModalSelectorsIDs.CONTAINER,
);
async typeDeleteInInputBox() {
await Gestures.typeTextAndHideKeyboard(this.deleteInput, 'delete');
}
}

export default new DeleteWalletModal();
49 changes: 30 additions & 19 deletions e2e/pages/modals/DetailsModal.js
Original file line number Diff line number Diff line change
@@ -1,32 +1,43 @@
import TestHelpers from '../../helpers';
import {
DETAILS_MODAL_TITLE,
DETAILS_MODAL_STATUS_CONFIRMED,
DETAILS_MODAL_CLOSE_ICON,
} from '../../../wdio/screen-objects/testIDs/Components/DetailsModal.js';
import { TransactionDetailsModalSelectorsText } from '../../selectors/Modals/TransactionDetailsModal.selectors';
TransactionDetailsModalSelectorsText,
TransactionDetailsModalSelectorsIDs,
} from '../../selectors/Modals/TransactionDetailsModal.selectors';
import Matchers from '../../utils/Matchers';
import Gestures from '../../utils/Gestures';
import { CommonSelectorsIDs } from '../../selectors/Common.selectors';

export default class DetailsModal {
static async isTitleVisible(sourceToken, destinationToken) {
let title = TransactionDetailsModalSelectorsText.TITLE;
title = title.replace('{{sourceToken}}', sourceToken);
title = title.replace('{{destinationToken}}', destinationToken);
await TestHelpers.checkIfElementHasString(DETAILS_MODAL_TITLE, title);
class DetailsModal {
get title() {
return Matchers.getElementByID(TransactionDetailsModalSelectorsIDs.TITLE);
}

get closeIcon() {
return Matchers.getElementByID(
TransactionDetailsModalSelectorsIDs.CLOSE_ICON,
);
}

static async isStatusCorrect(status) {
await TestHelpers.checkIfElementHasString(
DETAILS_MODAL_STATUS_CONFIRMED,
status,
get statusConfirmed() {
return Matchers.getElementIDWithAncestor(
CommonSelectorsIDs.STATUS_CONFIRMED,
TransactionDetailsModalSelectorsIDs.BODY,
);
}

static async tapOnCloseIcon() {
generateExpectedTitle(sourceToken, destinationToken) {
let title = TransactionDetailsModalSelectorsText.TITLE;
title = title.replace('{{sourceToken}}', sourceToken);
title = title.replace('{{destinationToken}}', destinationToken);
return title;
}

async tapOnCloseIcon() {
try {
await TestHelpers.waitAndTap(DETAILS_MODAL_CLOSE_ICON);
await TestHelpers.delay(1000);
await Gestures.waitAndTap(this.closeIcon);
} catch {
//
}
}
}

export default new DetailsModal();
55 changes: 31 additions & 24 deletions e2e/pages/modals/NetworkAddedModal.js
Original file line number Diff line number Diff line change
@@ -1,37 +1,44 @@
import TestHelpers from '../../helpers';
import {
NetworkAddedModalSelectorsIDs,
NetworkAddedModalSelectorsText,
} from '../../selectors/Modals/NetworkAddedModal.selectors';
import Matchers from '../../utils/Matchers';
import Gestures from '../../utils/Gestures';

export default class NetworkAddedModal {
static async tapSwitchToNetwork() {
await TestHelpers.tap(NetworkAddedModalSelectorsIDs.SWITCH_NETWORK_BUTTON);
class NetworkAddedModal {
get switchNetwork() {
return Matchers.getElementByText(
NetworkAddedModalSelectorsText.SWITCH_NETWORK,
);
}
static async tapCloseButton() {
await TestHelpers.tap(NetworkAddedModalSelectorsIDs.CLOSE_NETWORK_BUTTON);

get switchNetworkButton() {
return device.getPlatform() === 'android'
? Matchers.getElementByLabel(
NetworkAddedModalSelectorsIDs.SWITCH_NETWORK_BUTTON,
)
: Matchers.getElementByID(
NetworkAddedModalSelectorsIDs.SWITCH_NETWORK_BUTTON,
);
}

static async isVisible() {
await TestHelpers.checkIfElementWithTextIsVisible(
NetworkAddedModalSelectorsText.SWITCH_NETWORK,
);
get closeNetworkButton() {
return device.getPlatform() === 'android'
? Matchers.getElementByLabel(
NetworkAddedModalSelectorsIDs.CLOSE_NETWORK_BUTTON,
)
: Matchers.getElementByID(
NetworkAddedModalSelectorsIDs.CLOSE_NETWORK_BUTTON,
);
}
static async isNotVisible() {
await TestHelpers.checkIfElementWithTextIsVisible(
NetworkAddedModalSelectorsText.SWITCH_NETWORK,
);

async tapSwitchToNetwork() {
await Gestures.waitAndTap(this.switchNetworkButton);
}

static async tapSwitchToNetworkButton() {
if (device.getPlatform() === 'android') {
await TestHelpers.waitAndTapByLabel(
NetworkAddedModalSelectorsIDs.SWITCH_NETWORK_BUTTON,
);
} else {
await TestHelpers.tap(
NetworkAddedModalSelectorsIDs.SWITCH_NETWORK_BUTTON,
);
}
async tapCloseButton() {
await Gestures.waitAndTap(this.closeNetworkButton);
}
}

export default new NetworkAddedModal();
Loading

0 comments on commit 1bec601

Please sign in to comment.