test: Refactor EditAccountNameView.js & EnableSecurityChecksView.js f…

…iles to follow page object model (#11983)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **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 remaining, this issue will focus
on working on three files to refactor, as well as their respective
testIDs.

Files inside the scope for this batch:

- EditAccountNameView.js
- EnableSecurityChecksView.js


## **Related issues**

Fixes:

## **Manual testing steps**

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

## **Screenshots/Recordings**

Regression test run:
https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/c4b665ed-bfea-45b9-9f91-fb2c49c9a2c9

### **Before**

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

### **After**

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

## **Pre-merge author checklist**

- [ ] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] 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.

## **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.

app/components/UI/EnableAutomaticSecurityChecksModal/EnableAutomaticSecurityChecksModal.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef } from 'react';
-import { View, Image, Platform } from 'react-native';
+import { View, Image } from 'react-native';
 import { createStyles } from './styles';
 import { strings } from '../../../../locales/i18n';
 import Text, {
@@ -23,12 +23,7 @@ import {
 import { MetaMetricsEvents } from '../../../core/Analytics';
 
 import { ScrollView } from 'react-native-gesture-handler';
-import {
-  ENABLE_AUTOMATIC_SECURITY_CHECK_CONTAINER_ID,
-  ENABLE_AUTOMATIC_SECURITY_CHECK_NO_THANKS_BUTTON_ID,
-} from '../../../../wdio/screen-objects/testIDs/Screens/EnableAutomaticSecurityChecksScreen.testIds';
-
-import generateTestId from '../../../../wdio/utils/generateTestId';
+import { EnableAutomaticSecurityChecksIDs } from '../../../../e2e/selectors/Modals/EnableAutomaticSecurityChecks.selectors';
 import generateDeviceAnalyticsMetaData from '../../../util/metrics';
 import { useMetrics } from '../../../components/hooks/useMetrics';
 
@@ -92,10 +87,7 @@ const EnableAutomaticSecurityChecksModal = () => {
       <ScrollView contentContainerStyle={styles.content}>
         <View
           style={styles.images}
-          {...generateTestId(
-            Platform,
-            ENABLE_AUTOMATIC_SECURITY_CHECK_CONTAINER_ID,
-          )}
+          testID={EnableAutomaticSecurityChecksIDs.CONTAINER}
         >
           <Image source={onboardingDeviceImage} />
         </View>
@@ -122,10 +114,7 @@ const EnableAutomaticSecurityChecksModal = () => {
           label={strings(
             'enable_automatic_security_check_modal.secondary_action',
           )}
-          {...generateTestId(
-            Platform,
-            ENABLE_AUTOMATIC_SECURITY_CHECK_NO_THANKS_BUTTON_ID,
-          )}
+          testID={EnableAutomaticSecurityChecksIDs.NO_THANKS_BUTTON}
           size={ButtonSize.Md}
           onPress={triggerCloseAndDisableAutomaticSecurityChecks}
         />

e2e/pages/EditAccountNameView.js

@@ -2,20 +2,18 @@ import Matchers from '../utils/Matchers';
 import Gestures from '../utils/Gestures';
 import EditAccountNameSelectorIDs from '../selectors/EditAccountName.selectors';
 
-export default class EditAccountNameView {
-  static async saveButton() {
-    return await Matchers.getElementByID(
-      EditAccountNameSelectorIDs.EDIT_ACCOUNT_NAME_SAVE,
-    );
+class EditAccountNameView {
+  get saveButton() {
+    return Matchers.getElementByID(EditAccountNameSelectorIDs.EDIT_ACCOUNT_NAME_SAVE);
   }
 
-  static async tapSave() {
-    await Gestures.waitAndTap(this.saveButton());
+  get accountNameInput() {
+    return Matchers.getElementByID(EditAccountNameSelectorIDs.ACCOUNT_NAME_INPUT);
   }
 
-  static async accountNameInput() {
-    return await Matchers.getElementByID(
-      EditAccountNameSelectorIDs.ACCOUNT_NAME_INPUT,
-    );
+  async tapSave() {
+    await Gestures.waitAndTap(this.saveButton);
   }
 }
+
+export default new EditAccountNameView();

e2e/pages/modals/EnableAutomaticSecurityChecksView.js

@@ -0,0 +1,19 @@
+import Matchers from '../../utils/Matchers';
+import Gestures from '../../utils/Gestures';
+import { EnableAutomaticSecurityChecksIDs } from '../../selectors/Modals/EnableAutomaticSecurityChecks.selectors';
+
+class EnableAutomaticSecurityChecksView {
+  get container() {
+    return Matchers.getElementByID(EnableAutomaticSecurityChecksIDs.CONTAINER);
+  }
+
+  get noThanksButton() {
+    return Matchers.getElementByID(EnableAutomaticSecurityChecksIDs.NO_THANKS_BUTTON);
+  }
+
+  async tapNoThanks() {
+    await Gestures.waitAndTap(this.noThanksButton);
+  }
+}
+
+export default new EnableAutomaticSecurityChecksView();

e2e/selectors/Modals/EnableAutomaticSecurityChecks.selectors.js

@@ -0,0 +1,4 @@
+export const EnableAutomaticSecurityChecksIDs = {
+  CONTAINER: 'enable-automatic-checks-screen-container-image',
+  NO_THANKS_BUTTON: 'no-thanks-button',
+};

e2e/specs/accounts/change-account-name.spec.js

@@ -45,7 +45,7 @@ describe(Regression('Change Account Name'), () => {
     // Open account actions and edit account name
     await WalletView.tapMainWalletAccountActions();
     await AccountActionsModal.tapEditAccount();
-    await Gestures.clearField(EditAccountNameView.accountNameInput());
+    await Gestures.clearField(EditAccountNameView.accountNameInput);
     await TestHelpers.typeTextAndHideKeyboard(
       EditAccountNameSelectorIDs.ACCOUNT_NAME_INPUT,
       NEW_ACCOUNT_NAME,

e2e/specs/onboarding/onboarding-wizard-opt-in.spec.js

@@ -8,7 +8,7 @@ import OnboardingCarouselView from '../../pages/Onboarding/OnboardingCarouselVie
 import MetaMetricsOptIn from '../../pages/Onboarding/MetaMetricsOptInView';
 import OnboardingSuccessView from '../../pages/Onboarding/OnboardingSuccessView';
 import WalletView from '../../pages/wallet/WalletView';
-import EnableAutomaticSecurityChecksView from '../../pages/EnableAutomaticSecurityChecksView';
+import EnableAutomaticSecurityChecksView from '../../pages/modals/EnableAutomaticSecurityChecksView';
 import SettingsView from '../../pages/Settings/SettingsView';
 import SecurityAndPrivacy from '../../pages/Settings/SecurityAndPrivacy/SecurityAndPrivacyView';
 import LoginView from '../../pages/LoginView';
@@ -58,7 +58,7 @@ describe(
 
     it('Should dismiss Automatic Security checks screen', async () => {
       await TestHelpers.delay(3500);
-      await EnableAutomaticSecurityChecksView.isVisible();
+      await Assertions.checkIfVisible(EnableAutomaticSecurityChecksView.container);
       await EnableAutomaticSecurityChecksView.tapNoThanks();
     });
 

e2e/specs/wallet/start-exploring.spec.js

@@ -7,7 +7,7 @@ import ProtectYourWalletView from '../../pages/Onboarding/ProtectYourWalletView'
 import CreatePasswordView from '../../pages/Onboarding/CreatePasswordView';
 import MetaMetricsOptIn from '../../pages/Onboarding/MetaMetricsOptInView';
 import OnboardingSuccessView from '../../pages/Onboarding/OnboardingSuccessView';
-import EnableAutomaticSecurityChecksView from '../../pages/EnableAutomaticSecurityChecksView';
+import EnableAutomaticSecurityChecksView from '../../pages/modals/EnableAutomaticSecurityChecksView';
 import Browser from '../../pages/Browser/BrowserView';
 import SkipAccountSecurityModal from '../../pages/modals/SkipAccountSecurityModal';
 import OnboardingWizardModal from '../../pages/modals/OnboardingWizardModal';
@@ -66,7 +66,7 @@ describe(SmokeCore('Start Exploring'), () => {
 
   it('Should dismiss Automatic Security checks screen', async () => {
     await TestHelpers.delay(3500);
-    await EnableAutomaticSecurityChecksView.isVisible();
+    await Assertions.checkIfVisible(EnableAutomaticSecurityChecksView.container);
     await EnableAutomaticSecurityChecksView.tapNoThanks();
   });
 

e2e/viewHelper.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import EnableAutomaticSecurityChecksView from './pages/EnableAutomaticSecurityChecksView';
+import EnableAutomaticSecurityChecksView from './pages/modals/EnableAutomaticSecurityChecksView';
 import EnableDeviceNotificationsAlert from './pages/EnableDeviceNotificationsAlert';
 import ImportWalletView from './pages/Onboarding/ImportWalletView';
 import MetaMetricsOptIn from './pages/Onboarding/MetaMetricsOptInView';
@@ -108,7 +108,7 @@ export const importWalletWithRecoveryPhrase = async () => {
   //'Should dismiss Enable device Notifications checks alert'
   await this.skipNotificationsDeviceSettings();
   // Should dismiss Automatic Security checks screen
-  await EnableAutomaticSecurityChecksView.isVisible();
+  await Assertions.checkIfVisible(EnableAutomaticSecurityChecksView.container);
   await EnableAutomaticSecurityChecksView.tapNoThanks();
   // should dismiss the onboarding wizard
   // dealing with flakiness on bitrise.
@@ -146,7 +146,7 @@ export const CreateNewWallet = async () => {
   //'Should dismiss Enable device Notifications checks alert'
   await this.skipNotificationsDeviceSettings();
   //'Should dismiss Automatic Security checks screen'
-  await EnableAutomaticSecurityChecksView.isVisible();
+  await Assertions.checkIfVisible(EnableAutomaticSecurityChecksView.container);
   await EnableAutomaticSecurityChecksView.tapNoThanks();
 
   // 'should dismiss the onboarding wizard'

wdio/screen-objects/EnableSecurityChecksScreen.js

@@ -1,19 +1,16 @@
 import Gestures from '../helpers/Gestures';
 import Selectors from '../helpers/Selectors';
-import {
-  ENABLE_AUTOMATIC_SECURITY_CHECK_NO_THANKS_BUTTON_ID,
-  ENABLE_AUTOMATIC_SECURITY_CHECK_CONTAINER_ID,
-} from './testIDs/Screens/EnableAutomaticSecurityChecksScreen.testIds';
+import { EnableAutomaticSecurityChecksIDs } from '../../e2e/selectors/Modals/EnableAutomaticSecurityChecks.selectors';
 
 class EnableAutomaticSecurityChecksScreen {
   get noThanksButton() {
     return Selectors.getXpathElementByResourceId(
-      ENABLE_AUTOMATIC_SECURITY_CHECK_NO_THANKS_BUTTON_ID,
+      EnableAutomaticSecurityChecksIDs.NO_THANKS_BUTTON,
     );
   }
   get enableAutomaticSecurityChecksScreen() {
     return Selectors.getElementByPlatform(
-      ENABLE_AUTOMATIC_SECURITY_CHECK_CONTAINER_ID,
+      EnableAutomaticSecurityChecksIDs.CONTAINER,
     );
   }