E2e appium/713 update account section (#6259)

* fix detox and appium test scripts * Fix detox and appium test cases * Update snapshots
MetaMask · Apr 25, 2023 · fd96eb5 · fd96eb5
1 parent 224aeaa
commit fd96eb5
Show file tree

Hide file tree

Showing 26 changed files with 185 additions and 233 deletions.
diff --git a/app/component-library/components/Pickers/PickerAccount/PickerAccount.tsx b/app/component-library/components/Pickers/PickerAccount/PickerAccount.tsx
@@ -2,7 +2,7 @@
 
 // Third party dependencies.
 import React from 'react';
-import { View } from 'react-native';
+import { Platform, View } from 'react-native';
 
 // External dependencies.
 import Avatar, { AvatarSize, AvatarVariants } from '../../Avatars/Avatar';
@@ -14,6 +14,8 @@ import { useStyles } from '../../../hooks';
 import PickerBase from '../PickerBase';
 import { PickerAccountProps } from './PickerAccount.types';
 import styleSheet from './PickerAccount.styles';
+import generateTestId from '../../../../../wdio/utils/generateTestId';
+import { WALLET_ACCOUNT_NAME_LABEL_TEXT } from '../../../../../wdio/screen-objects/testIDs/Screens/WalletView.testIds';
 
 const PickerAccount = ({
   style,
@@ -40,7 +42,12 @@ const PickerAccount = ({
         style={styles.accountAvatar}
       />
       <View>
-        <Text variant={TextVariant.HeadingSMRegular}>{accountName}</Text>
+        <Text
+          variant={TextVariant.HeadingSMRegular}
+          {...generateTestId(Platform, WALLET_ACCOUNT_NAME_LABEL_TEXT)}
+        >
+          {accountName}
+        </Text>
         {showAddress && (
           <Text variant={TextVariant.BodyMD} style={styles.accountAddressLabel}>
             {shortenedAddress}

diff --git a/...ponent-library/components/Pickers/PickerAccount/__snapshots__/PickerAccount.test.tsx.snap b/...ponent-library/components/Pickers/PickerAccount/__snapshots__/PickerAccount.test.tsx.snap
@@ -26,6 +26,7 @@ exports[`PickerAccount should render correctly 1`] = `
     />
     <View>
       <Text
+        testID="account-label"
         variant="sHeadingSMRegular"
       >
         Orangefox.eth

diff --git a/app/components/UI/OnboardingWizard/Coachmark/__snapshots__/index.test.tsx.snap b/app/components/UI/OnboardingWizard/Coachmark/__snapshots__/index.test.tsx.snap
@@ -65,6 +65,7 @@ exports[`Coachmark should render correctly 1`] = `
         iconName="Arrow2Left"
         onPress={[Function]}
         size="16"
+        testID="onboarding-wizard-back-button"
       />
       <Text
         style={
@@ -137,6 +138,7 @@ exports[`Coachmark should render correctly 1`] = `
             "opacity": 0.6,
           }
         }
+        testID="onboarding-wizard-got-it-button"
         type="inverse"
       >
         Got it!

diff --git a/app/components/UI/OnboardingWizard/Coachmark/index.js b/app/components/UI/OnboardingWizard/Coachmark/index.js
@@ -1,13 +1,13 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import { Animated, View, Text, StyleSheet } from 'react-native';
+import { Animated, Platform, StyleSheet, Text, View } from 'react-native';
 import {
-  fontStyles,
   colors as importedColors,
+  fontStyles,
 } from '../../../../styles/common';
 import StyledButton from '../../StyledButton';
 import { strings } from '../../../../../locales/i18n';
-import { ThemeContext, mockTheme } from '../../../../util/theme';
+import { mockTheme, ThemeContext } from '../../../../util/theme';
 import ButtonIcon from '../../../../component-library/components/Buttons/ButtonIcon/ButtonIcon';
 import {
   IconName,
@@ -20,6 +20,13 @@ import {
   ButtonWidthTypes,
 } from '../../../../component-library/components/Buttons/Button';
 import Button from '../../../../component-library/components/Buttons/Button/Button';
+import generateTestId from '../../../../../wdio/utils/generateTestId';
+import {
+  ONBOARDING_WIZARD_BACK_BUTTON,
+  ONBOARDING_WIZARD_NEXT_GOT_IT_BUTTON,
+  ONBOARDING_WIZARD_STEP_1_NO_THANKS_ID,
+  ONBOARDING_WIZARD_STEP_1_TAKE_THE_TOUR_ID,
+} from '../../../../../wdio/screen-objects/testIDs/Components/OnboardingWizard.testIds';
 
 const createStyles = (colors) =>
   StyleSheet.create({
@@ -321,6 +328,7 @@ export default class Coachmark extends PureComponent {
           containerStyle={[styles.progressButton, styles.rightProgessButton]}
           type={'inverse'}
           onPress={this.onNext}
+          testID={ONBOARDING_WIZARD_NEXT_GOT_IT_BUTTON}
         >
           {strings('onboarding_wizard.coachmark.progress_next')}
         </StyledButton>
@@ -342,20 +350,23 @@ export default class Coachmark extends PureComponent {
           size={ButtonSize.Sm}
           width={ButtonWidthTypes.Full}
           onPress={this.onBack}
-          testID={'onboarding-wizard-back-button'}
           label={strings('onboarding_wizard.coachmark.action_back')}
           style={styles.actionButtonPrimary}
           variant={ButtonVariants.Primary}
+          {...generateTestId(Platform, ONBOARDING_WIZARD_STEP_1_NO_THANKS_ID)}
         />
 
         <Button
           size={ButtonSize.Sm}
           width={ButtonWidthTypes.Full}
           onPress={this.onNext}
-          testID={'onboarding-wizard-next-button'}
           label={strings('onboarding_wizard.coachmark.action_next')}
           variant={ButtonVariants.Secondary}
           style={styles.actionButtonSecondary}
+          {...generateTestId(
+            Platform,
+            ONBOARDING_WIZARD_STEP_1_TAKE_THE_TOUR_ID,
+          )}
         />
       </View>
     );
@@ -391,6 +402,7 @@ export default class Coachmark extends PureComponent {
                 size={IconSize.Sm}
                 onPress={this.onBack}
                 iconColorOverride={colors.primary.inverse}
+                {...generateTestId(Platform, ONBOARDING_WIZARD_BACK_BUTTON)}
               />
             ) : (
               <View />

diff --git a/app/components/UI/OnboardingWizard/Step2/index.js b/app/components/UI/OnboardingWizard/Step2/index.js
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { View, Text, StyleSheet } from 'react-native';
+import { Platform, StyleSheet, Text, View } from 'react-native';
 import Coachmark from '../Coachmark';
 import setOnboardingWizardStep from '../../../../actions/wizard';
 import { strings } from '../../../../../locales/i18n';
@@ -11,7 +11,9 @@ import {
   ONBOARDING_WIZARD_STEP_DESCRIPTION,
 } from '../../../../core/Analytics';
 import AnalyticsV2 from '../../../../util/analyticsV2';
-import { ThemeContext, mockTheme } from '../../../../util/theme';
+import { mockTheme, ThemeContext } from '../../../../util/theme';
+import generateTestId from '../../../../../wdio/utils/generateTestId';
+import { ONBOARDING_WIZARD_SECOND_STEP_CONTENT_ID } from '../../../../../wdio/screen-objects/testIDs/Components/OnboardingWizard.testIds';
 
 const INDICATOR_HEIGHT = 10;
 const styles = StyleSheet.create({
@@ -113,7 +115,13 @@ class Step2 extends PureComponent {
 
     return (
       <View style={dynamicOnboardingStyles.contentContainer}>
-        <Text style={dynamicOnboardingStyles.content} testID={'step2-title'}>
+        <Text
+          style={dynamicOnboardingStyles.content}
+          {...generateTestId(
+            Platform,
+            ONBOARDING_WIZARD_SECOND_STEP_CONTENT_ID,
+          )}
+        >
           {strings('onboarding_wizard.step2.content1')}
         </Text>
       </View>

diff --git a/app/components/UI/OnboardingWizard/Step3/index.js b/app/components/UI/OnboardingWizard/Step3/index.js
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { Text, View, StyleSheet, Dimensions } from 'react-native';
+import { Dimensions, Platform, StyleSheet, Text, View } from 'react-native';
 import Coachmark from '../Coachmark';
 import setOnboardingWizardStep from '../../../../actions/wizard';
 import { colors as importedColors } from '../../../../styles/common';
@@ -12,7 +12,9 @@ import {
   ONBOARDING_WIZARD_STEP_DESCRIPTION,
 } from '../../../../core/Analytics';
 import AnalyticsV2 from '../../../../util/analyticsV2';
-import { ThemeContext, mockTheme } from '../../../../util/theme';
+import { mockTheme, ThemeContext } from '../../../../util/theme';
+import generateTestId from '../../../../../wdio/utils/generateTestId';
+import { ONBOARDING_WIZARD_THIRD_STEP_CONTENT_ID } from '../../../../../wdio/screen-objects/testIDs/Components/OnboardingWizard.testIds';
 
 const styles = StyleSheet.create({
   main: {
@@ -141,7 +143,10 @@ class Step3 extends PureComponent {
 
     return (
       <View style={dynamicOnboardingStyles.contentContainer}>
-        <Text style={dynamicOnboardingStyles.content} testID={'step3-title'}>
+        <Text
+          style={dynamicOnboardingStyles.content}
+          {...generateTestId(Platform, ONBOARDING_WIZARD_THIRD_STEP_CONTENT_ID)}
+        >
           {strings('onboarding_wizard.step3.content1')}
         </Text>
       </View>

diff --git a/app/components/UI/OnboardingWizard/Step4/index.js b/app/components/UI/OnboardingWizard/Step4/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { View, Text, StyleSheet } from 'react-native';
+import { Platform, StyleSheet, Text, View } from 'react-native';
 import Coachmark from '../Coachmark';
 import setOnboardingWizardStep from '../../../../actions/wizard';
 import { strings } from '../../../../../locales/i18n';
@@ -13,6 +13,8 @@ import {
 } from '../../../../core/Analytics';
 import AnalyticsV2 from '../../../../util/analyticsV2';
 import { useTheme } from '../../../../util/theme';
+import generateTestId from '../../../../../wdio/utils/generateTestId';
+import { ONBOARDING_WIZARD_FOURTH_STEP_CONTENT_ID } from '../../../../../wdio/screen-objects/testIDs/Components/OnboardingWizard.testIds';
 
 const styles = StyleSheet.create({
   main: {
@@ -75,7 +77,10 @@ const Step4 = (props) => {
    */
   const content = () => (
     <View style={dynamicOnboardingStyles.contentContainer}>
-      <Text style={dynamicOnboardingStyles.content} testID={'step4-title'}>
+      <Text
+        style={dynamicOnboardingStyles.content}
+        {...generateTestId(Platform, ONBOARDING_WIZARD_FOURTH_STEP_CONTENT_ID)}
+      >
         {strings('onboarding_wizard.step4.content1')}
       </Text>
     </View>

diff --git a/app/components/UI/OnboardingWizard/Step5/index.js b/app/components/UI/OnboardingWizard/Step5/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { View, Text, StyleSheet, Dimensions } from 'react-native';
+import { Dimensions, Platform, StyleSheet, Text, View } from 'react-native';
 import { colors as importedColors } from '../../../../styles/common';
 import Coachmark from '../Coachmark';
 import setOnboardingWizardStep from '../../../../actions/wizard';
@@ -14,6 +14,8 @@ import {
 import AnalyticsV2 from '../../../../util/analyticsV2';
 import { useTheme } from '../../../../util/theme';
 import { createBrowserNavDetails } from '../../../Views/Browser';
+import generateTestId from '../../../../../wdio/utils/generateTestId';
+import { ONBOARDING_WIZARD_FIFTH_STEP_CONTENT_ID } from '../../../../../wdio/screen-objects/testIDs/Components/OnboardingWizard.testIds';
 
 const WIDTH = Dimensions.get('window').width;
 const styles = StyleSheet.create({
@@ -78,7 +80,10 @@ const Step5 = (props) => {
    */
   const content = () => (
     <View style={dynamicOnboardingStyles.contentContainer}>
-      <Text style={dynamicOnboardingStyles.content} testID={'step5-title'}>
+      <Text
+        style={dynamicOnboardingStyles.content}
+        {...generateTestId(Platform, ONBOARDING_WIZARD_FIFTH_STEP_CONTENT_ID)}
+      >
         {strings('onboarding_wizard.step5.content1')}
       </Text>
     </View>

diff --git a/app/components/UI/OnboardingWizard/Step6/index.js b/app/components/UI/OnboardingWizard/Step6/index.js
@@ -1,7 +1,7 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { View, Text, StyleSheet } from 'react-native';
+import { Platform, StyleSheet, Text, View } from 'react-native';
 import Coachmark from '../Coachmark';
 import setOnboardingWizardStep from '../../../../actions/wizard';
 import { strings } from '../../../../../locales/i18n';
@@ -14,6 +14,8 @@ import {
 import AnalyticsV2 from '../../../../util/analyticsV2';
 import { useTheme } from '../../../../util/theme';
 import Routes from '../../../../constants/navigation/Routes';
+import generateTestId from '../../../../../wdio/utils/generateTestId';
+import { ONBOARDING_WIZARD_SIXTH_STEP_CONTENT_ID } from '../../../../../wdio/screen-objects/testIDs/Components/OnboardingWizard.testIds';
 
 const styles = StyleSheet.create({
   main: {
@@ -74,7 +76,10 @@ const Step6 = (props) => {
    */
   const content = () => (
     <View style={dynamicOnboardingStyles.contentContainer}>
-      <Text style={dynamicOnboardingStyles.content} testID={'step6-title'}>
+      <Text
+        style={dynamicOnboardingStyles.content}
+        {...generateTestId(Platform, ONBOARDING_WIZARD_SIXTH_STEP_CONTENT_ID)}
+      >
         {strings('onboarding_wizard.step6.content')}
       </Text>
     </View>

diff --git a/app/components/UI/WalletAccount/WalletAccount.tsx b/app/components/UI/WalletAccount/WalletAccount.tsx
@@ -22,14 +22,15 @@ import { useStyles } from '../../../component-library/hooks';
 import generateTestId from '../../../../wdio/utils/generateTestId';
 import AddressCopy from '../AddressCopy';
 import {
-  isDefaultAccountName,
   doENSReverseLookup,
+  isDefaultAccountName,
 } from '../../../util/ENSUtils';
 import { selectChainId } from '../../../selectors/networkController';
 
 // Internal dependencies
 import styleSheet from './WalletAccount.styles';
 import { WalletAccountProps } from './WalletAccount.types';
+import { WALLET_ACCOUNT_ICON } from '../../../../wdio/screen-objects/testIDs/Screens/WalletView.testIds';
 
 const WalletAccount = ({ style }: WalletAccountProps, ref: React.Ref<any>) => {
   const { styles } = useStyles(styleSheet, { style });
@@ -99,7 +100,7 @@ const WalletAccount = ({ style }: WalletAccountProps, ref: React.Ref<any>) => {
         showAddress={false}
         cellAccountContainerStyle={styles.account}
         style={styles.accountPicker}
-        {...generateTestId(Platform, 'account-picker')}
+        {...generateTestId(Platform, WALLET_ACCOUNT_ICON)}
       />
       <View style={styles.middleBorder} />
       <View style={styles.addressContainer} ref={accountActionsRef}>

diff --git a/app/components/UI/WalletAccount/__snapshots__/WalletAccount.test.tsx.snap b/app/components/UI/WalletAccount/__snapshots__/WalletAccount.test.tsx.snap
@@ -166,6 +166,7 @@ exports[`WalletAccount renders correctly 1`] = `
               "lineHeight": 24,
             }
           }
+          testID="account-label"
         >
           Account 1
         </Text>

diff --git a/e2e/pages/WalletView.js b/e2e/pages/WalletView.js
@@ -73,6 +73,7 @@ export default class WalletView {
   }
 
   static async tapImportTokensButton() {
+    await TestHelpers.delay(2000);
     await TestHelpers.tap(IMPORT_TOKEN_BUTTON_ID);
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -26,6 +26,7 @@ exports[`PickerAccount should render correctly 1`] = ` @@
         />
         <View>
           <Text
+            testID="account-label"
             variant="sHeadingSMRegular"
           >
             Orangefox.eth
@@ Expand Down @@