[e2e] Manual backup e2e test

e2e/8_manualBackup.spec.ts

@@ -0,0 +1,78 @@
+/* eslint-disable no-await-in-loop */
+import {
+  beforeAllcleanApp,
+  importWalletFlow,
+  afterAllcleanApp,
+  tap,
+  tapByText,
+  delayTime,
+  tapAtPoint,
+  checkIfExistsByText,
+  checkIfExists,
+  waitAndTap,
+  checkIfDoesntExist,
+} from './helpers';
+
+describe('Backups', () => {
+  beforeAll(async () => {
+    await beforeAllcleanApp({ hardhat: false });
+  });
+  afterAll(async () => {
+    await afterAllcleanApp({ hardhat: false });
+  });
+
+  it('Imports wallet', async () => {
+    await importWalletFlow();
+  });
+
+  it('Should go to settings', async () => {
+    await waitAndTap('settings-menu');
+    await tapByText('Settings');
+    await checkIfExists('settings-sheet');
+  });
+
+  it('Should go to backups', async () => {
+    await tap('backup-section');
+    await checkIfExistsByText('Wallets & Backup');
+  });
+
+  it('Should alert that iCloud isnt enabled', async () => {
+    await waitAndTap('backup-now-button');
+
+    // Alert
+    await checkIfExistsByText('iCloud Not Enabled');
+    await tapByText('No thanks');
+  });
+
+  it('Should go to specific wallets backup sheet and view seed phrase', async () => {
+    await delayTime('medium');
+    await waitAndTap('not-backed-up');
+    await delayTime('long');
+    await waitAndTap('back-up-manually');
+    await delayTime('medium');
+    await waitAndTap('show-secret-button');
+  });
+
+  it('Should check if seed phrase exists word by word and confirm backup', async () => {
+    await delayTime('medium');
+    const words = process.env.TEST_SEEDS ? process.env.TEST_SEEDS.split(' ') : [];
+    for (const word of words) {
+      await checkIfExistsByText(word.trim());
+    }
+    await delayTime('medium');
+    await waitAndTap('saved-these-words');
+  });
+
+  it('Should go back to the backup sheet and it should be updated', async () => {
+    await delayTime('medium');
+    await checkIfExistsByText('Wallets & Backup');
+    await checkIfDoesntExist('not-backed-up', 1_000);
+  });
+
+  it('Should go to specific wallets backup sheet and it should be backup up now', async () => {
+    await delayTime('medium');
+    await tap('back-ups-imported');
+    await delayTime('medium');
+    await checkIfExists('backed-up-manually');
+  });
+});

package.json

@@ -18,7 +18,7 @@
     "check-lockfile": "./scripts/check-lockfile.sh",
     "clean:android": "yarn uninstall:android && rm -rf android/build && yarn gradle clean && rm -rf ~/.gradle/caches",
     "clean:ios": "rm -rf ios/build && cd ios && bundle exec pod deintegrate",
-    "clean:packager": "watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf $TMPDIR/metro-* && rm -rf $TMPDIR/haste-map-*",
+    "clean:packager": "watchman watch-del-all",
     "clean:node": "rm -rf node_modules",
     "nuke": "./scripts/nuke.sh",
     "detox:android": "detox build -c android.emu.debug && detox test -c android.emu.debug --loglevel verbose",

src/components/asset-list/RecyclerAssetList2/index.tsx

@@ -260,7 +260,7 @@ function NavbarOverlay({ accentColor, position }: { accentColor?: string; positi
               </AndroidContextMenu>
             ) : (
               <ContextMenuButton menuConfig={menuConfig} onPressMenuItem={handlePressMenuItem}>
-                <Navbar.Item>
+                <Navbar.Item testID={'settings-menu'}>
                   <Navbar.TextIcon color={accentColor as string} icon="􀍠" />
                 </Navbar.Item>
               </ContextMenuButton>

src/components/backup/BackupChooseProviderStep.tsx

@@ -101,7 +101,7 @@ export default function BackupSheetSectionNoProvider() {
   };
 
   return (
-    <Inset horizontal={'24px'} vertical={'44px'}>
+    <Inset horizontal={'24px'} vertical={'44px'} testId={'backup-reminder-sheet'}>
       <Inset bottom={'44px'} horizontal={'24px'}>
         <Text align="center" size="26pt" weight="bold" color="label">
           {lang.t(lang.l.back_up.cloud.how_would_you_like_to_backup)}

src/components/backup/BackupSheet.tsx

@@ -44,7 +44,7 @@ export default function BackupSheet() {
       <BackgroundProvider color="surfaceSecondary">
         {({ backgroundColor }) => (
           <SimpleSheet
-            testID="backup-sheet"
+            testID={'backup-sheet'}
             backgroundColor={backgroundColor as string}
             customHeight={getHeightForStep(step)}
             scrollEnabled={false}

src/components/secret-display/SecretDisplaySection.tsx

@@ -221,7 +221,13 @@ export function SecretDisplaySection({ onSecretLoaded, onWalletTypeIdentified }:
           </Inset>
 
           {isBackingUp && (
-            <Box position="absolute" bottom={{ custom: 20 }} alignItems="center" style={{ paddingHorizontal: 24 }}>
+            <Box
+              position="absolute"
+              testID={'saved-these-words'}
+              bottom={{ custom: 20 }}
+              alignItems="center"
+              style={{ paddingHorizontal: 24 }}
+            >
               <SheetActionButton label={btnText} color="blue" weight="bold" onPress={handleConfirmSaved} />
             </Box>
           )}

src/design-system/components/Inset/Inset.tsx

@@ -12,12 +12,13 @@ export type InsetProps = {
   bottom?: Space;
   left?: Space;
   right?: Space;
+  testId?: string;
 };
 
 /**
  * @description Renders a container with padding.
  */
-export function Inset({ space: spaceProp, horizontal, vertical, top, bottom, left, right, children }: InsetProps) {
+export function Inset({ space: spaceProp, horizontal, vertical, top, bottom, left, right, children, testId }: InsetProps) {
   const margin = resolveToken(space, spaceProp);
   const marginBottom = resolveToken(space, bottom);
   const marginHorizontal = resolveToken(space, horizontal);
@@ -39,5 +40,9 @@ export function Inset({ space: spaceProp, horizontal, vertical, top, bottom, lef
     [margin, marginBottom, marginHorizontal, marginLeft, marginRight, marginTop, marginVertical]
   );
 
-  return <Box style={style}>{children}</Box>;
+  return (
+    <Box style={style} testID={testId}>
+      {children}
+    </Box>
+  );
 }

src/screens/SettingsSheet/components/Backups/BackUpMenuButton.tsx

@@ -84,6 +84,7 @@ export const BackUpMenuItem = ({
       >
         {({ onNewEmoji }: { onNewEmoji: () => void }) => (
           <MenuItem
+            testID={'backup-now-button'}
             hasSfSymbol
             leftComponent={
               loading === 'loading' ? (

src/screens/SettingsSheet/components/Backups/SecretWarning.tsx

@@ -133,7 +133,13 @@ const SecretWarningPage = () => {
         </Stack>
       </Inset>
 
-      <Box position="absolute" bottom={{ custom: IS_ANDROID ? 40 : 20 }} alignItems="center" style={{ paddingHorizontal: 24 }}>
+      <Box
+        testID={'show-secret-button'}
+        position="absolute"
+        bottom={{ custom: IS_ANDROID ? 40 : 20 }}
+        alignItems="center"
+        style={{ paddingHorizontal: 24 }}
+      >
         <SheetActionButton
           label={i18n.t(i18n.l.back_up.warning.button, {
             typeName: secretText,

src/screens/SettingsSheet/components/Backups/ViewWalletBackup.tsx

@@ -457,6 +457,7 @@ const ViewWalletBackup = () => {
                 onPress={onManualBackup}
                 size={52}
                 titleComponent={<MenuItem.Title isLink text={i18n.t(i18n.l.back_up.manual.backup_manually)} />}
+                testID={'back-up-manually'}
               />
               <BackUpMenuItem
                 icon="􀊯"
@@ -491,6 +492,7 @@ const ViewWalletBackup = () => {
                       : i18n.t(i18n.l.wallet.back_ups.backed_up_manually)
                   }
                   weight="heavy"
+                  testID={'backed-up-manually'}
                 />
               }
               labelComponent={
@@ -535,6 +537,7 @@ const ViewWalletBackup = () => {
             .map((account: RainbowAccount) => (
               <ContextMenuWrapper account={account} menuConfig={menuConfig} onPressMenuItem={onPressMenuItem} key={account.address}>
                 <MenuItem
+                  testID={'wallet-backup-button'}
                   size={60}
                   disabled
                   leftComponent={<WalletAvatar account={account} />}

src/screens/SettingsSheet/components/Backups/WalletsAndBackup.tsx

@@ -320,7 +320,13 @@ export const WalletsAndBackup = () => {
                             </Text>
                           }
                         >
-                          {!backedUp && <MenuItem.Label color={'#FF584D'} text={i18n.t(i18n.l.back_up.needs_backup.not_backed_up)} />}
+                          {!backedUp && (
+                            <MenuItem.Label
+                              testID={'not-backed-up'}
+                              color={'#FF584D'}
+                              text={i18n.t(i18n.l.back_up.needs_backup.not_backed_up)}
+                            />
+                          )}
                           {imported && <MenuItem.Label text={i18n.t(i18n.l.wallet.back_ups.imported)} />}
                           <MenuItem.Label
                             text={
@@ -593,7 +599,7 @@ export const WalletsAndBackup = () => {
                         }
                       >
                         {!backedUp && <MenuItem.Label color={'#FF584D'} text={i18n.t(i18n.l.back_up.needs_backup.not_backed_up)} />}
-                        {imported && <MenuItem.Label text={i18n.t(i18n.l.wallet.back_ups.imported)} />}
+                        {imported && <MenuItem.Label testID={'back-ups-imported'} text={i18n.t(i18n.l.wallet.back_ups.imported)} />}
                         <MenuItem.Label
                           text={
                             numAccounts > 1

src/screens/SettingsSheet/components/Menu.tsx

@@ -5,13 +5,14 @@ interface MenuProps {
   children: React.ReactNode;
   header?: string;
   description?: string | React.ReactNode;
+  testId?: string;
 }
 
-const Menu = ({ children, description, header }: MenuProps) => {
+const Menu = ({ children, description, header, testId }: MenuProps) => {
   return (
     <>
       {!!header && (
-        <Box paddingBottom="12px" paddingHorizontal={{ custom: 16 }}>
+        <Box paddingBottom="12px" paddingHorizontal={{ custom: 16 }} testID={testId}>
           <Text color="secondary60 (Deprecated)" size="16px / 22px (Deprecated)" weight="bold">
             {header}
           </Text>

src/screens/SettingsSheet/components/MenuHeader.tsx

@@ -116,10 +116,11 @@ interface TitleProps {
   weight?: 'regular' | 'medium' | 'semibold' | 'bold' | 'heavy';
   disabled?: boolean;
   isLink?: boolean;
+  testID?: string;
 }
 
-const Title = ({ text, weight = 'semibold' }: TitleProps) => (
-  <Text color={'primary (Deprecated)'} size="18px / 27px (Deprecated)" weight={weight} numberOfLines={1}>
+const Title = ({ text, weight = 'semibold', testID }: TitleProps) => (
+  <Text testID={testID} color={'primary (Deprecated)'} size="18px / 27px (Deprecated)" weight={weight} numberOfLines={1}>
     {text}
   </Text>
 );
@@ -128,14 +129,15 @@ interface LabelProps {
   text: string;
   linkText?: string;
   onPress?: () => void;
+  testID?: string;
 }
 
-const Label = ({ text, linkText, onPress }: LabelProps) => {
+const Label = ({ text, linkText, onPress, testID }: LabelProps) => {
   return (
     <Text color={'secondary60 (Deprecated)'} size="14px / 19px (Deprecated)" align="center" weight="medium">
       {text}
       {linkText && onPress && (
-        <Text onPress={onPress} color="blue" size="14px / 19px (Deprecated)" weight="medium">
+        <Text testID={testID} onPress={onPress} color="blue" size="14px / 19px (Deprecated)" weight="medium">
           {' '}
           {linkText}
         </Text>

src/screens/SettingsSheet/components/MenuItem.tsx

@@ -136,15 +136,17 @@ interface LabelProps {
   text: string;
   warn?: boolean;
   color?: string;
+  testID?: string;
 }
 
-const Label = ({ text, warn, color }: LabelProps) => {
+const Label = ({ text, warn, color, testID }: LabelProps) => {
   const { colors } = useTheme();
   return (
     <Text
       color={color ? { custom: color } : warn ? { custom: colors.orangeLight } : 'secondary60 (Deprecated)'}
       size="14px / 19px (Deprecated)"
       weight="medium"
+      testID={testID}
     >
       {text}
     </Text>

src/screens/SettingsSheet/components/SettingsSection.tsx

@@ -181,7 +181,7 @@ const SettingsSection = ({
               </Box>
             }
             size={60}
-            testID="backup-section"
+            testID={'backup-section'}
             titleComponent={<MenuItem.Title text={lang.t(lang.l.settings.backup)} />}
           />
         )}