e2e(revamp UI): tests for create and restore funnels

apps/wallet-mobile/src/components/Button/Button.tsx

@@ -19,6 +19,7 @@ export type ButtonProps = TouchableOpacityProps & {
   textStyles?: TextStyle
   isCopying?: boolean
   copiedText?: string
+  testId?: string
 }
 
 export const Button = (props: ButtonProps) => {
@@ -38,13 +39,20 @@ export const Button = (props: ButtonProps) => {
     textStyles,
     isCopying,
     copiedText,
+    testId,
     ...rest
   } = props
 
   const {styles} = useStyles()
 
   return (
-    <TouchableOpacity onPress={onPress} style={[block && styles.block, containerStyle]} activeOpacity={0.5} {...rest}>
+    <TouchableOpacity
+      onPress={onPress}
+      style={[block && styles.block, containerStyle]}
+      activeOpacity={0.5}
+      testID={testId}
+      {...rest}
+    >
       {isCopying && (
         <Animated.View layout={Layout} entering={FadeInDown} exiting={FadeOutDown} style={styles.isCopying}>
           <Text style={styles.copiedText}>{copiedText}</Text>

apps/wallet-mobile/src/features/SetupWallet/common/ButtonCard/ButtonCard.tsx

@@ -10,16 +10,18 @@ type ButtonCardProps = {
   subTitle?: string
   icon?: React.ReactNode
   onPress: () => void
+  testId?: string
 }
 
-export const ButtonCard = ({title, subTitle, icon = null, onPress}: ButtonCardProps) => {
+export const ButtonCard = ({title, subTitle, icon = null, onPress, testId}: ButtonCardProps) => {
   const {styles, colors} = useStyles()
 
   return (
     <TouchableOpacity
       activeOpacity={0.5}
       style={[styles.container, icon !== null && styles.justifySpaceBetween]}
       onPress={onPress}
+      testID={testId}
     >
       <LinearGradient
         style={[StyleSheet.absoluteFill, {opacity: 1}]}

apps/wallet-mobile/src/features/SetupWallet/common/CardAboutPhrase/CardAboutPhrase.tsx

@@ -13,6 +13,7 @@ type CardAboutPhraseProps = {
   includeSpacing?: boolean
   checksumImage?: string
   checksumLine?: number
+  testId?: string
 }
 
 export const CardAboutPhrase = ({
@@ -22,6 +23,7 @@ export const CardAboutPhrase = ({
   includeSpacing,
   checksumImage,
   checksumLine,
+  testId,
 }: CardAboutPhraseProps) => {
   const {styles, colors} = useStyles(includeSpacing, showBackgroundColor)
 
@@ -38,7 +40,9 @@ export const CardAboutPhrase = ({
 
       {title !== undefined && (
         <>
-          <Text style={styles.title}>{title}</Text>
+          <Text style={styles.title} testID={testId}>
+            {title}
+          </Text>
 
           <Space height="sm" />
         </>

apps/wallet-mobile/src/features/SetupWallet/useCases/ChooseMnemonicType/ChooseMnemonicTypeScreen.tsx

@@ -51,6 +51,7 @@ export const ChooseMnemonicTypeScreen = () => {
           title={strings.choose15WordsMnemonicTitle}
           icon={<Mnemonic15Words style={styles.icon} />}
           onPress={handle15Words}
+          testId="mnemonic-15-word"
         />
 
         <Space height="lg" />
@@ -59,6 +60,7 @@ export const ChooseMnemonicTypeScreen = () => {
           title={strings.choose24WordsMnemonicTitle}
           icon={<Mnemonic24Words style={styles.icon} />}
           onPress={handle24Words}
+          testId="mnemonic-24-word"
         />
 
         <Space height="lg" />

apps/wallet-mobile/src/features/SetupWallet/useCases/ChooseNetwork/ChooseNetworkScreen.tsx

@@ -49,6 +49,7 @@ export const ChooseNetworkScreen = () => {
             title={strings.cardanoMainnet}
             subTitle={strings.cardanoMainnetDescription}
             onPress={handleMainnet}
+            testId="setup-network-select-mainnet-button"
           />
 
           <Space height="lg" />
@@ -57,6 +58,7 @@ export const ChooseNetworkScreen = () => {
             title={strings.cardanoTestnet}
             subTitle={strings.cardanoTestnetDescription}
             onPress={handleTestnet}
+            testId="setup-network-select-testnet-button"
           />
 
           <Space height="lg" />
@@ -65,6 +67,7 @@ export const ChooseNetworkScreen = () => {
             title={strings.cardanoSanchonet}
             subTitle={strings.cardanoSanchonetDescription}
             onPress={handleSanchonet}
+            testId="setup-network-select-sanchonet-button"
           />
 
           <Space height="lg" />

apps/wallet-mobile/src/features/SetupWallet/useCases/ChooseSetupType/ChooseSetupTypeScreen.tsx

@@ -99,6 +99,7 @@ export const ChooseSetupTypeScreen = () => {
             title={strings.createWalletButtonCard}
             icon={<CreateWallet style={styles.icon} />}
             onPress={handleCreate}
+            testId="setup-create-new-wallet-button"
           />
 
           <Space height="lg" />
@@ -107,6 +108,7 @@ export const ChooseSetupTypeScreen = () => {
             title={strings.restoreWalletButtonCard}
             icon={<RestoreWallet style={styles.icon} />}
             onPress={handleRestore}
+            testId="setup-restore-wallet-button"
           />
 
           <Space height="lg" />
@@ -115,6 +117,7 @@ export const ChooseSetupTypeScreen = () => {
             title={strings.connectWalletButtonCard}
             icon={<HardwareWallet style={styles.icon} />}
             onPress={handleHw}
+            testId="setup-connect-HW-wallet-button"
           />
 
           <Space height="lg" />

apps/wallet-mobile/src/features/SetupWallet/useCases/CreateWallet/AboutRecoveryPhraseScreen.tsx

@@ -68,6 +68,7 @@ export const AboutRecoveryPhraseScreen = () => {
           title={strings.next}
           style={styles.button}
           onPress={() => navigation.navigate('setup-wallet-recovery-phrase-mnemonic')}
+          testID="setup-step1-next-button"
         />
       </Actions>
     </SafeAreaView>

apps/wallet-mobile/src/features/SetupWallet/useCases/CreateWallet/RecoveryPhraseScreen.tsx

@@ -71,6 +71,7 @@ export const RecoveryPhraseScreen = () => {
             closeModal()
             showCreateWalletInfoModalChanged(false)
           }}
+          testId="setup-step2-continue-button"
         />
 
         <Space height="_2xl" />
@@ -106,7 +107,7 @@ export const RecoveryPhraseScreen = () => {
         <Text style={styles.title}>
           {strings.recoveryPhraseTitle(bold)}
 
-          <Info onPress={handleOnShowModal} />
+          <Info onPress={handleOnShowModal} testId="step2-info-icon" />
         </Text>
 
         <View style={styles.mnemonicWords}>
@@ -134,7 +135,12 @@ export const RecoveryPhraseScreen = () => {
           ))}
         </View>
 
-        <TouchableOpacity activeOpacity={0.5} style={styles.blurButton} onPress={() => setIsBlur(!isBlur)}>
+        <TouchableOpacity
+          activeOpacity={0.5}
+          style={styles.blurButton}
+          onPress={() => setIsBlur(!isBlur)}
+          testID="step2-show_hide-recovery-phrase-button"
+        >
           {isBlur ? <EyeOpenIllustration /> : <EyeClosedIllustration />}
 
           <Text style={styles.blurTextButton}>
@@ -153,18 +159,19 @@ export const RecoveryPhraseScreen = () => {
           mnemonicChanged(mnemonic)
           navigation.navigate('setup-wallet-verify-recovery-phrase-mnemonic')
         }}
+        testId="setup-step2-next-button"
       />
 
       <Space height="lg" />
     </SafeAreaView>
   )
 }
 
-const Info = ({onPress}: {onPress: () => void}) => {
+const Info = ({onPress, testId}: {onPress: () => void; testId?: string}) => {
   const {styles} = useStyles()
   return (
     <TouchableOpacity style={styles.info} onPress={onPress}>
-      <View style={styles.infoIcon}>
+      <View style={styles.infoIcon} testID={testId}>
         <InfoIcon size={24} />
       </View>
     </TouchableOpacity>

apps/wallet-mobile/src/features/SetupWallet/useCases/CreateWallet/VerifyRecoveryPhraseScreen.tsx

@@ -122,6 +122,7 @@ export const VerifyRecoveryPhraseScreen = () => {
             publicKeyHexChanged(accountPubKeyHex)
             navigation.navigate('setup-wallet-details-form')
           }}
+          testId="setup-next-button"
         />
 
         <Space height="sm" />

apps/wallet-mobile/src/features/SetupWallet/useCases/CreateWallet/WalletDetailsScreen.tsx

@@ -186,6 +186,7 @@ export const WalletDetailsScreen = () => {
             closeModal()
             showRestoreWalletInfoModalChanged(false)
           }}
+          testId="setup-modal-continue-button"
         />
 
         <Space height="lg" />
@@ -347,6 +348,7 @@ export const WalletDetailsScreen = () => {
             style={styles.button}
             onPress={() => handleCreateWallet()}
             disabled={isLoading || Object.keys(passwordErrors).length > 0 || Object.keys(nameErrors).length > 0}
+            testID="walletFormContinueButton"
           />
 
           <Space height="sm" />

apps/wallet-mobile/src/features/SetupWallet/useCases/RestoreWallet/MnemonicInput/MnemonicInput.tsx

@@ -89,6 +89,7 @@ export const MnemonicInput = ({
             mnenonicRefs.forEach((ref) => ref.current?.selectWord(''))
             mnenonicRefs[0].current?.focus()
           }}
+          testId="clearAll-button"
         />
       )}
 
@@ -97,11 +98,11 @@ export const MnemonicInput = ({
   )
 }
 
-const ClearAllButton = ({onPress}: {onPress: () => void}) => {
+const ClearAllButton = ({onPress, testId}: {onPress: () => void; testId?: string}) => {
   const {styles} = useStyles()
   const strings = useStrings()
   return (
-    <View style={styles.textView}>
+    <View style={styles.textView} testID={testId}>
       <TouchableOpacity activeOpacity={0.5} onPress={onPress}>
         <Text style={styles.clearAll}>{strings.clearAll}</Text>
       </TouchableOpacity>

apps/wallet-mobile/src/features/SetupWallet/useCases/RestoreWallet/RestoreWalletDetailsScreen.tsx

@@ -285,7 +285,9 @@ export const RestoreWalletDetailsScreen = () => {
 
             <Space width="sm" />
 
-            <Text style={styles.plateNumber}>{plate.accountPlate.TextPart}</Text>
+            <Text style={styles.plateNumber} testID="wallet-plate-number">
+              {plate.accountPlate.TextPart}
+            </Text>
 
             <Space width="sm" />
 
@@ -307,6 +309,7 @@ export const RestoreWalletDetailsScreen = () => {
                 addressMode,
               })
             }
+            testId="setup-restore-step2-next-button"
             disabled={isLoading || Object.keys(passwordErrors).length > 0 || Object.keys(nameErrors).length > 0}
           />
         </View>

apps/wallet-mobile/src/features/SetupWallet/useCases/RestoreWallet/RestoreWalletScreen.tsx

@@ -212,7 +212,7 @@ const NextButton = ({onPress}: {onPress: () => void}) => {
 
   return (
     <View style={styles.padding}>
-      <Button title={strings.next} style={styles.button} onPress={onPress} />
+      <Button title={strings.next} style={styles.button} onPress={onPress} testID="setup-restore-step1-next-button" />
     </View>
   )
 }

e2e/wallet-mobile/general/utils.ts

@@ -5,7 +5,6 @@ import yargs from 'yargs/yargs'
 
 import {mnemonicBadgeByWord, mnemonicByIndexText} from '../screens/createWalletFlow.screen'
 import * as initialScreen from '../screens/initialScreen.screen'
-import * as myWalletsScreen from '../screens/myWallets.screen'
 import {pinKeyButton} from '../screens/pinCode.screen'
 import {mnemonicByIndexInput} from '../screens/restoreWalletFlow.screen'
 import * as userInsightScreen from '../screens/shareUserInsights.screen'
@@ -53,7 +52,6 @@ export const prepareApp = async (pin: string): Promise<void> => {
  await expect(pinKeyButton('1')).toBeVisible()
  await enterPIN(pin)
  await enterPIN(pin)
- await expect(myWalletsScreen.pageTitle()).toBeVisible()
 }
 
 export const delay = (milliseconds: number) => new Promise((resolve) => setTimeout(resolve, milliseconds))

e2e/wallet-mobile/screens/chooseMnemonicType.screen.ts

@@ -0,0 +1,4 @@
+import {by, element} from 'detox'
+
+export const mnemonic15WordTypeCard = () => element(by.id('mnemonic-15-word'))
+export const mnemonic24wordTypeCard = () => element(by.id('mnemonic-24-word'))

e2e/wallet-mobile/screens/chooseNetworkType.screen.ts

@@ -0,0 +1,7 @@
+import {by, element} from 'detox'
+
+export const networkMainnetButton = () => element(by.id('setup-network-select-mainnet-button'))
+export const networkTestnetButton = () => element(by.id('setup-network-select-testnet-button'))
+export const networkSanchonetButton = () => element(by.id('setup-network-select-sanchonet-button'))
+export const pageTitleCreateFlow = () => element(by.text('Create wallet'))
+export const pageTitleRestoreFlow = () => element(by.text('Restore wallet'))

e2e/wallet-mobile/screens/chooseSetupType.screen.ts

@@ -0,0 +1,6 @@
+import {by, element} from 'detox'
+
+export const createNewWalletButton = () => element(by.id('setup-create-new-wallet-button'))
+export const restoreWalletButton = () => element(by.id('setup-restore-wallet-button'))
+export const connectHwWalletButton = () => element(by.id('setup-connect-HW-wallet-button'))
+export const pageTitle = () => element(by.text('Add new wallet'))

e2e/wallet-mobile/screens/createWalletSteps.screen.ts

@@ -0,0 +1,48 @@
+import {by, element} from 'detox'
+
+export const step1Title = () => element(by.text('About recovery phrase'))
+export const step1TextToValidate = () =>
+ element(by.text('You are the only person who knows and stores your Recovery phrase'))
+export const step1NextButton = () => element(by.id('setup-step1-next-button'))
+export const step2TextToValidate1 = () => element(by.text('How to save your recovery phrase?'))
+export const step2TextToValidate2 = () =>
+ element(by.text('DO NOT share the recovery phrase as this will allow anyone to access your assets and wallet.'))
+export const step2ContinueButton = () => element(by.id('setup-step2-continue-button'))
+export const step2InfoIcon = () => element(by.id('step2-info-icon'))
+export const step2ShowRecoveryPhraseButton = () => element(by.id('step2-show_hide-recovery-phrase-button'))
+export const step2NextButton = () => element(by.id('setup-step2-next-button'))
+
+export const mnemonicByIndexText = (index: number) => element(by.id(`mnemonic-${index}`))
+
+export const mnemonicBadgeByWord = (word: string) => element(by.id(`wordBadgeNonTapped-${word}`)).atIndex(0)
+
+export const getSeedPhrase = async (): Promise<Array<string>> => {
+ const allWords: Array<string | any> = []
+ for (let i = 0; i < 15; i++) {
+  const elementAttrs = await mnemonicByIndexText(i).getAttributes()
+  if (!('elements' in elementAttrs)) {
+   allWords.push(elementAttrs.label?.split('. ')[1])
+  }
+ }
+ return allWords
+}
+
+export const step3NextButton = () => element(by.id('setup-next-button'))
+
+export const repeatSeedPhrase = async (phraseArray: string[]): Promise<void> => {
+ for (const phraseArrayWord of phraseArray) {
+  await mnemonicBadgeByWord(phraseArrayWord).tap()
+ }
+}
+export const step3RecoveryPhraseValidatedText = () => element(by.text('The recovery phrase is verified'))
+
+export const step4Title1OnModal = () => element(by.text('What is wallet name'))
+export const step4Title2OnModal = () => element(by.text('What is password'))
+export const step4ModalContinueButton = () => element(by.id('setup-modal-continue-button'))
+
+export const step4WalletNameInput = () => element(by.id('walletNameInput'))
+export const step4SpendingPasswordInput = () => element(by.id('walletPasswordInput'))
+export const step4RepeatSpendingPasswordInput = () => element(by.id('walletRepeatPasswordInput'))
+export const step4NextButton = () => element(by.id('walletFormContinueButton'))
+
+export const praparingYourWalletMessage = () => element(by.text('Preparing your wallet...'))