e2e receive funnel (#3151)

apps/wallet-mobile/src/SelectedWallet/WalletSelection/WalletSelectionScreen.tsx

@@ -170,6 +170,7 @@ const ShelleyButton = () => {
       }
       title={strings.addWalletButton}
       style={styles.topButton}
+      testID="addWalletMainnetButton"
     />
   )
 }

apps/wallet-mobile/src/features/Exchange/common/AmountCard/AmountCard.tsx

@@ -20,6 +20,7 @@ type AmountCardProps = {
   touched?: boolean
   amount: Balance.Amount
   wallet: YoroiWallet
+  testId?: string
 }
 
 export const AmountCard: React.FC<AmountCardProps> = ({
@@ -32,6 +33,7 @@ export const AmountCard: React.FC<AmountCardProps> = ({
   touched,
   amount,
   wallet,
+  testId,
 }: AmountCardProps) => {
   const [isFocused, setIsFocused] = React.useState(false)
 
@@ -76,6 +78,7 @@ export const AmountCard: React.FC<AmountCardProps> = ({
               selectTextOnFocus
               onFocus={() => setIsFocused(true)}
               onBlur={() => setIsFocused(false)}
+              testID={testId}
             />
           </Pressable>
 

apps/wallet-mobile/src/features/Receive/common/AddressDetailCard/AddressDetailCard.tsx

@@ -73,6 +73,7 @@ export const AddressDetailCard = ({title}: AddressDetailCardProps) => {
             content={item.address}
             onLongPress={() => copy(item.address)}
             isCopying={isCopying}
+            testId="receive:address-detail-card"
           />
         )
       case 'Details':

apps/wallet-mobile/src/features/Receive/common/ShareQRCodeCard/ShareQRCodeCard.tsx

@@ -18,9 +18,10 @@ type ShareQRCodeCardProps = {
   title: string
   isCopying?: boolean
   onLongPress: () => void
+  testId?: string
 }
 
-export const ShareQRCodeCard = ({content, title, isCopying, onLongPress}: ShareQRCodeCardProps) => {
+export const ShareQRCodeCard = ({content, title, isCopying, onLongPress, testId}: ShareQRCodeCardProps) => {
   const strings = useStrings()
   const {styles, colors, qrSize} = useStyles()
   const {track} = useMetrics()
@@ -70,9 +71,11 @@ export const ShareQRCodeCard = ({content, title, isCopying, onLongPress}: ShareQ
             colors={colors.bgCard}
           />
 
-          <Text style={styles.title}>{title}</Text>
+          <Text style={styles.title} testID={`${testId}-title`}>
+            {title}
+          </Text>
 
-          <View style={styles.qrCode}>
+          <View style={styles.qrCode} testID={`${testId}-qr`}>
             <QRCode value={content} size={qrSize} backgroundColor={colors.white} color={colors.black} />
           </View>
 

apps/wallet-mobile/src/features/Receive/common/SmallAddressCard/SmallAddressCard.tsx

@@ -15,9 +15,10 @@ export type SmallAddressCardProps = {
   loading?: boolean
   date?: string
   onPress?: () => void
+  testId?: string
 }
 
-export const SmallAddressCard = ({address, isUsed, date, onPress, loading}: SmallAddressCardProps) => {
+export const SmallAddressCard = ({address, isUsed, date, onPress, loading, testId}: SmallAddressCardProps) => {
   const strings = useStrings()
   const [isCopying, copy] = useCopy()
   const {styles, colors} = useStyles()
@@ -40,6 +41,7 @@ export const SmallAddressCard = ({address, isUsed, date, onPress, loading}: Smal
             activeOpacity={0.6}
             onLongPress={() => copy(address)}
             onPress={onPress}
+            testID={testId}
           >
             <LinearGradient
               style={[StyleSheet.absoluteFill, {opacity: 1}]}

apps/wallet-mobile/src/features/Receive/useCases/DescribeSelectedAddressScreen.tsx

@@ -69,6 +69,7 @@ export const DescribeSelectedAddressScreen = () => {
         }}
         onPress={navigate.specificAmount}
         disabled={!hasAddress}
+        testID="receive:request-specific-amount-link"
       />
 
       <Spacer height={6} />

apps/wallet-mobile/src/features/Receive/useCases/ListMultipleAddressesScreen.tsx

@@ -55,14 +55,15 @@ export const ListMultipleAddressesScreen = () => {
   }, [])
 
   const renderAddressInfo = React.useCallback(
-    ({item}: {item: AddressInfo}) => (
+    ({item, index}: {item: AddressInfo; index: number}) => (
       <SmallAddressCard
         address={item.address}
         isUsed={item.isUsed}
         onPress={() => {
           selectedAddressChanged(item.address)
           navigate.receiveDetails()
         }}
+        testId={`receive:small-address-card-${index + 1}`} // Add index + 1 to include count
         // date={}  // TODO define with project
       />
     ),
@@ -142,7 +143,13 @@ const Modal = () => {
       <Spacer fill height={24} />
 
       <View style={styles.buttonContainer}>
-        <Button shelleyTheme title={strings.ok} onPress={handleOnCloseModal} style={styles.button} />
+        <Button
+          shelleyTheme
+          title={strings.ok}
+          onPress={handleOnCloseModal}
+          style={styles.button}
+          testID="wallet:receive:oneTimeModal-ok-button"
+        />
       </View>
 
       <Spacer height={24} />

apps/wallet-mobile/src/features/Receive/useCases/RequestSpecificAmountScreen.tsx

@@ -75,6 +75,7 @@ export const RequestSpecificAmountScreen = () => {
                 keyboardType="numeric"
                 onChangeText={handleOnChangeAmount}
                 value={amount}
+                testID="receive:request-specific-amount-ada-input"
               />
 
               <View style={styles.textSection}>
@@ -92,6 +93,7 @@ export const RequestSpecificAmountScreen = () => {
               disabled={!hasAmount}
               title={strings.generateLink}
               style={styles.button}
+              testID="receive:request-specific-amount:generate-link-button"
             />
           </View>
         </KeyboardAvoidingView>
@@ -126,7 +128,7 @@ const Modal = ({amount, address}: {amount: string; address: string}) => {
     <View style={styles.root}>
       <RNScrollView>
         {hasAddress ? (
-          <ShareQRCodeCard title={title} content={content} onLongPress={handOnCopy} />
+          <ShareQRCodeCard title={title} content={content} onLongPress={handOnCopy} testId="receive:specific-amount" />
         ) : (
           <View style={styles.root}>
             <SkeletonAdressDetail />
@@ -145,6 +147,7 @@ const Modal = ({amount, address}: {amount: string; address: string}) => {
         isCopying={isCopying}
         copiedText={strings.copyLinkMsg}
         style={styles.button}
+        testID="receive:request-specific-amount:copy-link-button"
       />
 
       <Spacer height={16} />

apps/wallet-mobile/src/features/Swap/common/AmountCard/AmountCard.tsx

@@ -23,6 +23,7 @@ type Props = {
   inputRef?: React.RefObject<TextInput>
   inputEditable?: boolean
   error?: string
+  testId?: string
 }
 
 export const AmountCard = ({
@@ -36,6 +37,7 @@ export const AmountCard = ({
   inputRef,
   inputEditable = true,
   error,
+  testId,
 }: Props) => {
   const [isFocused, setIsFocused] = React.useState(false)
   const strings = useStrings()
@@ -61,7 +63,11 @@ export const AmountCard = ({
         {label != null && <Text style={[styles.label, !isEmptyString(error) && styles.labelError]}>{label}</Text>}
 
         <View style={styles.content}>
-          <Pressable style={styles.amountWrapper} onPress={() => (noTokenSelected ? navigateTo?.() : focusInput())}>
+          <Pressable
+            style={styles.amountWrapper}
+            onPress={() => (noTokenSelected ? navigateTo?.() : focusInput())}
+            testID={noTokenSelected ? `${testId}-token-input` : ''}
+          >
             <TextInput
               keyboardType="numeric"
               autoComplete="off"
@@ -78,6 +84,7 @@ export const AmountCard = ({
               selectTextOnFocus
               onFocus={() => setIsFocused(true)}
               onBlur={() => setIsFocused(false)}
+              testID={`${testId}-amount-input`}
               {...(noTokenSelected && {onPressIn: navigateTo})}
             />
           </Pressable>

apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/CreateOrder/EditBuyAmount/EditBuyAmount.tsx

@@ -32,6 +32,7 @@ export const EditBuyAmount = () => {
       touched={isBuyTouched}
       inputRef={buyInputRef}
       error={buyError}
+      testId="swap:buy-edit"
     />
   )
 }

apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/CreateOrder/EditSellAmount/EditSellAmount.tsx

@@ -32,6 +32,7 @@ export const EditSellAmount = () => {
       touched={isSellTouched}
       inputRef={sellInputRef}
       error={error}
+      testId="swap:sell-edit"
     />
   )
 }

e2e/wallet-mobile/general/constants.ts

@@ -22,8 +22,7 @@ export const ledger_Wallet_Name = 'Test Ledger'
 export const spending_Password = '1234567890'
 export const ada_Token = 'ADA'
 export const tada_Token = 'TADA'
-export const stake_Pool_Id =
- 'fe662c24cf56fb98626161f76d231ac50ab7b47dd83986a30c1d4796'
+export const stake_Pool_Id = 'fe662c24cf56fb98626161f76d231ac50ab7b47dd83986a30c1d4796'
 export const app_Id = 'com.emurgo.nightly'
 export const app_Id_Parent = 'com.emurgo.*'
 export const normal_15_Word_Wallet: RestoredWallet = {
@@ -79,7 +78,4 @@ export const normal_24_Word_Wallet: RestoredWallet = {
  ],
  type: WalletType.DaedalusWallet,
 }
-export const RESTORED_WALLETS: RestoredWallet[] = [
- normal_15_Word_Wallet,
- normal_24_Word_Wallet,
-]
+export const RESTORED_WALLETS: RestoredWallet[] = [normal_15_Word_Wallet, normal_24_Word_Wallet]

e2e/wallet-mobile/general/utils.ts

@@ -3,10 +3,7 @@ import fs from 'fs/promises'
 import {addAttach, addMsg} from 'jest-html-reporters/helper'
 import yargs from 'yargs/yargs'
 
-import {
- mnemonicBadgeByWord,
- mnemonicByIndexText,
-} from '../screens/createWalletFlow.screen'
+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'
@@ -31,18 +28,13 @@ export const getSeedPhrase = async (): Promise<Array<string>> => {
  return allWords
 }
 
-export const repeatSeedPhrase = async (
- phraseArray: string[],
-): Promise<void> => {
+export const repeatSeedPhrase = async (phraseArray: string[]): Promise<void> => {
  for (const phraseArrayWord of phraseArray) {
   await mnemonicBadgeByWord(phraseArrayWord).tap()
  }
 }
 
-export const enterRecoveryPhrase = async (
- phraseArray: string[],
- platform: string,
-): Promise<void> => {
+export const enterRecoveryPhrase = async (phraseArray: string[], platform: string): Promise<void> => {
  for (let wordIndex = 0; wordIndex < phraseArray.length; wordIndex++) {
   const wordElementInput = mnemonicByIndexInput(wordIndex, platform)
   await wordElementInput.typeText(`${phraseArray[wordIndex]}\n`)
@@ -52,7 +44,6 @@ export const enterRecoveryPhrase = async (
 export const prepareApp = async (pin: string): Promise<void> => {
  await expect(element(by.text('Select language'))).toBeVisible()
  await expect(initialScreen.dropDownLanguagePicker()).toBeVisible()
- await takeScreenshot('Initial screen for first time user')
  await initialScreen.checkboxSelect().tap({x: 5, y: 10})
  await initialScreen.buttonContinue().tap()
 
@@ -65,8 +56,7 @@ export const prepareApp = async (pin: string): Promise<void> => {
  await expect(myWalletsScreen.pageTitle()).toBeVisible()
 }
 
-export const delay = (milliseconds: number) =>
- new Promise((resolve) => setTimeout(resolve, milliseconds))
+export const delay = (milliseconds: number) => new Promise((resolve) => setTimeout(resolve, milliseconds))
 
 // deciding  from the args of the script (example  - e2e:test:android:nightly:release)
 // checking the e2e path (example -  $npm_package_e2ePath_android) and decide if the test platform is android or iOS based on the folder path

e2e/wallet-mobile/package.json

@@ -25,11 +25,12 @@
     "build": "yarn lint && yarn tsc"
   },
   "prettier": {
+    "printWidth": 120,
     "bracketSpacing": false,
     "quoteProps": "consistent",
     "semi": false,
     "singleQuote": true,
-    "tabWidth": 1,
+    "tabWidth": 2,
     "trailingComma": "all",
     "useTabs": false
   },

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

@@ -3,23 +3,13 @@ import {by, element} from 'detox'
 export const credentialsView = () => element(by.id('credentialsView'))
 export const walletNameInput = () => element(by.id('walletNameInput'))
 export const spendingPasswordInput = () => element(by.id('walletPasswordInput'))
-export const repeatSpendingPasswordInput = () =>
- element(by.id('walletRepeatPasswordInput'))
-export const credentialsFormContinueButton = () =>
- element(by.id('walletFormContinueButton'))
-export const mnemonicExplanationModal = () =>
- element(by.id('mnemonicExplanationModal'))
-export const mnemonicByIndexText = (index: number) =>
- element(by.id(`mnemonic-${index}`))
-export const mnemonicShowScreenConfirmButton = () =>
- element(by.id('mnemonicShowScreen::confirm'))
-export const mnemonicWarningModalCheckbox1 = () =>
- element(by.id('mnemonicBackupImportanceModal::checkBox1'))
-export const mnemonicWarningModalCheckbox2 = () =>
- element(by.id('mnemonicBackupImportanceModal::checkBox2'))
-export const mnemonicWarningModalConfirm = () =>
- element(by.id('mnemonicBackupImportanceModal::confirm'))
-export const mnemonicBadgeByWord = (word: string) =>
- element(by.id(`wordBadgeNonTapped-${word}`)).atIndex(0)
-export const mnemonicCheckScreenConfirmButton = () =>
- element(by.id('mnemonicCheckScreen::confirm'))
+export const repeatSpendingPasswordInput = () => element(by.id('walletRepeatPasswordInput'))
+export const credentialsFormContinueButton = () => element(by.id('walletFormContinueButton'))
+export const mnemonicExplanationModal = () => element(by.id('mnemonicExplanationModal'))
+export const mnemonicByIndexText = (index: number) => element(by.id(`mnemonic-${index}`))
+export const mnemonicShowScreenConfirmButton = () => element(by.id('mnemonicShowScreen::confirm'))
+export const mnemonicWarningModalCheckbox1 = () => element(by.id('mnemonicBackupImportanceModal::checkBox1'))
+export const mnemonicWarningModalCheckbox2 = () => element(by.id('mnemonicBackupImportanceModal::checkBox2'))
+export const mnemonicWarningModalConfirm = () => element(by.id('mnemonicBackupImportanceModal::confirm'))
+export const mnemonicBadgeByWord = (word: string) => element(by.id(`wordBadgeNonTapped-${word}`)).atIndex(0)
+export const mnemonicCheckScreenConfirmButton = () => element(by.id('mnemonicCheckScreen::confirm'))

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

@@ -3,5 +3,4 @@ import {by, element} from 'detox'
 export const buttonRestoreWallet1 = () => element(by.id('btnRestoreWallet1'))
 export const buttonRestoreWallet2 = () => element(by.id('btnRestoreWallet2'))
 export const buttonRestoreWallet3 = () => element(by.id('btnRestoreWallet3'))
-export const buttonResetAnalyticsConsent = () =>
- element(by.id('btnResetAnalyticsConsent'))
+export const buttonResetAnalyticsConsent = () => element(by.id('btnResetAnalyticsConsent'))

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

@@ -1,14 +1,11 @@
 import {by, element} from 'detox'
 
-export const dropDownLanguagePicker = () =>
- element(by.id('dropDownLanguagePicker'))
+export const dropDownLanguagePicker = () => element(by.id('dropDownLanguagePicker'))
 export const checkboxSelect = () => element(by.id('checkboxSelect'))
 export const linkToS = () => element(by.id('linkToS'))
 export const linkPrivacyPolicy = () => element(by.id('linkPrivacyPolicy'))
 export const buttonContinue = () => element(by.id('buttonContinue'))
-export const buttonSelectLanguageEnglish = () =>
- element(by.id('languageSelect_en-US'))
-export const buttonSelectLanguageItalian = () =>
- element(by.id('languageSelect_it-IT'))
+export const buttonSelectLanguageEnglish = () => element(by.id('languageSelect_en-US'))
+export const buttonSelectLanguageItalian = () => element(by.id('languageSelect_it-IT'))
 export const buttonBack = () => element(by.id('buttonBack'))
 export const buttonBack2 = () => element(by.id('buttonBack2'))

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

@@ -1,18 +1,14 @@
 import {by, element} from 'detox'
 
 export const pageTitle = () => element(by.text('My wallets'))
-export const addWalletButton = () =>
- element(by.id('addWalletOnHaskellShelleyButton'))
-export const addWalletByronButton = () =>
- element(by.id('addWalletOnByronButton'))
-export const addWalletTestnetButton = () =>
- element(by.id('addWalletPreprodShelleyButton'))
-export const walletByNameButton = (walletName: string) =>
- element(by.text(walletName))
+export const addWalletMainnetButton = () => element(by.id('addWalletMainnetButton'))
+export const addWalletButton = () => element(by.id('addWalletOnHaskellShelleyButton'))
+export const addWalletByronButton = () => element(by.id('addWalletOnByronButton'))
+export const addWalletTestnetButton = () => element(by.id('addWalletPreprodShelleyButton'))
+export const walletByNameButton = (walletName: string) => element(by.text(walletName))
 export const createWalletButton = () => element(by.id('createWalletButton'))
 export const restoreWalletButton = () => element(by.id('restoreWalletButton'))
-export const connectLedgerWalletButton = () =>
- element(by.id('createLedgerWalletButton'))
+export const connectLedgerWalletButton = () => element(by.id('createLedgerWalletButton'))
 export const buttonDeveloperOptions = () => element(by.id('btnDevOptions'))
 
 export const tabWallet = (walletName: string) => element(by.label(walletName))