[INJIMOB-691] add testID

Signed-off-by: KiruthikaJeyashankar <81218987+KiruthikaJeyashankar@users.noreply.github.com>

components/AccountInformation.tsx

@@ -4,6 +4,7 @@ import {Column, Row, Text} from './ui';
 import {Theme} from './ui/styleUtils';
 import {ProfileInfo} from '../shared/googleCloudUtils';
 import {useTranslation} from 'react-i18next';
+import testIDProps from '../shared/commonUtil';
 
 export const AccountInformation: React.FC<ProfileInfo> = ({email, picture}) => {
   const {t} = useTranslation('AccountSelection');
@@ -11,6 +12,7 @@ export const AccountInformation: React.FC<ProfileInfo> = ({email, picture}) => {
     <Row style={{marginBottom: 21, columnGap: 11}}>
       <Column align="center">
         <Image
+          {...testIDProps('associatedAccountPicture')}
           style={{height: 40, width: 40, borderRadius: 45}}
           source={{
             uri: picture,
@@ -19,12 +21,16 @@ export const AccountInformation: React.FC<ProfileInfo> = ({email, picture}) => {
       </Column>
       <Column>
         <Row>
-          <Text style={{color: Theme.Colors.helpText, fontSize: 12}}>
+          <Text
+            testID="associatedAccount"
+            style={{color: Theme.Colors.helpText, fontSize: 12}}>
             {t('associatedAccount')}
           </Text>
         </Row>
         <Row>
-          <Text style={{fontSize: 13, fontFamily: 'Helvetica Neue'}}>
+          <Text
+            testID="associatedAccountEmail"
+            style={{fontSize: 13, fontFamily: 'Helvetica Neue'}}>
             {email}
           </Text>
         </Row>

components/BackupAndRestoreAllScreenBanner.tsx

@@ -9,15 +9,15 @@ export const BackupAndRestoreAllScreenBanner: React.FC = () => {
   const {t} = useTranslation('BackupAndRestoreBanner');
 
   function backupFailure() {
-    const translationPath = t(
+    const translation = t(
       `backupFailure.${backUpController.backupErrorReason}`,
     );
 
     return (
       <BannerNotification
-        message={translationPath}
+        message={translation}
         onClosePress={backUpController.DISMISS}
-        testId={'dataBackupFailure'}
+        testId={`backupFailure-${backUpController.backupErrorReason}`}
         customStyle={Theme.Styles.dataBackupFailure}
       />
     );

components/BannerNotification.tsx

@@ -18,7 +18,7 @@ export const BannerNotification: React.FC<BannerNotificationProps> = props => {
           {props.message}
         </Text>
         <Icon
-          testID="close"
+          {...testIDProps('close')}
           name="close"
           onPress={props.onClosePress}
           color={Theme.Colors.whiteText}

components/SectionLayout.tsx

@@ -2,14 +2,17 @@ import React from 'react';
 import {View} from 'react-native';
 import {Column, Row, Text} from './ui';
 import {Theme} from './ui/styleUtils';
+import testIDProps from '../shared/commonUtil';
 
 export const SectionLayout: React.FC<SectionLayoutProps> = ({
   headerIcon,
   headerText,
   children,
+  testId,
 }) => {
   return (
     <View
+      {...testIDProps(testId)}
       style={{
         marginLeft: 18,
         marginRight: 18,
@@ -34,7 +37,8 @@ export const SectionLayout: React.FC<SectionLayoutProps> = ({
             fontSize: 14,
             letterSpacing: 0,
             lineHeight: 17,
-          }}>
+          }}
+          testID={`${testId}Header`}>
           {headerText}
         </Text>
       </Row>
@@ -55,4 +59,5 @@ export type SectionLayoutProps = {
   headerIcon: React.ReactNode;
   headerText: string;
   children: React.ReactNode;
+  testId: string;
 };

components/ui/Error.tsx

@@ -34,7 +34,7 @@ export const Error: React.FC<ErrorProps> = props => {
             {props.message}
           </Text>
           {props.helpText && (
-            <Text style={Theme.ErrorStyles.message} testID="errorMessage">
+            <Text style={Theme.ErrorStyles.message} testID="errorHelpText">
               {props.helpText}
             </Text>
           )}

components/ui/Timestamp.tsx

@@ -23,18 +23,19 @@ export const Timestamp: React.FC<TimestampProps> = props => {
     const day = date.getDate();
     const month = months[date.getMonth()];
     const year = date.getFullYear();
-    const hours = date.getHours();
-    const minutes = date.getMinutes();
+    const formattedHours = (date.getHours() % 12 || 12)
+      .toString()
+      .padStart(2, '0');
+    const formattedMinutes = date.getMinutes().toString().padStart(2, '0');
+    const period = date.getHours() >= 12 ? 'PM' : 'AM';
 
-    const period = hours >= 12 ? 'PM' : 'AM';
-    const formattedHours = hours % 12 || 12;
-
-    return `${day} ${month} ${year}, ${formattedHours}:${minutes} ${period}`;
+    return `${day} ${month} ${year}, ${formattedHours}:${formattedMinutes} ${period}`;
   }
 
   return (
     <View>
       <Text
+        testID={`${props.testId}Time`}
         size="regular"
         style={{
           fontFamily: 'Inter_500Medium',
@@ -50,5 +51,6 @@ export const Timestamp: React.FC<TimestampProps> = props => {
 };
 
 interface TimestampProps {
-  time: Date;
+  time: number;
+  testId: string;
 }

components/ui/svg.tsx

@@ -279,7 +279,13 @@ export class SvgImage {
   }
 
   static GoogleDriveIcon(width, height) {
-    return <GoogleDriveIcon width={width} height={height} />;
+    return (
+      <GoogleDriveIcon
+        width={width}
+        height={height}
+        {...testIDProps('googleDriveIcon')}
+      />
+    );
   }
 }
 

screens/Settings/DataBackupAndRestore.tsx

@@ -11,6 +11,7 @@ import {SvgImage} from '../../components/ui/svg';
 import {AccountSelectionConfirmation} from '../backupAndRestore/AccountSelectionConfirmation';
 import {useBackupAndRestore} from '../backupAndRestore/BackupAndRestoreController';
 import BackupAndRestoreScreen from '../backupAndRestore/BackupAndRestoreScreen';
+import testIDProps from '../../shared/commonUtil';
 
 export const DataBackupAndRestore: React.FC = ({} = () => {
   const controller = useBackupAndRestore();
@@ -25,12 +26,14 @@ export const DataBackupAndRestore: React.FC = ({} = () => {
             <ListItem.Title style={{paddingTop: 3}}>
               <Row>
                 <Text
+                  testID="dataBackupAndRestore"
                   weight="semibold"
                   color={Theme.Colors.settingsLabel}
                   style={{paddingRight: 10}}>
                   {t('dataBackupAndRestore')}
                 </Text>
                 <Text
+                  testID="newLabel"
                   style={Theme.BackupStyles.newStyles}
                   color={Theme.Colors.whiteText}>
                   {t('new')}
@@ -41,6 +44,7 @@ export const DataBackupAndRestore: React.FC = ({} = () => {
           <Icon
             name="chevron-right"
             size={21}
+            {...testIDProps('rightArrowIcon')}
             color={Theme.Colors.chevronRightColor}
             style={{marginRight: 15}}
           />

screens/backupAndRestore/AccountSelectionConfirmation.tsx

@@ -30,12 +30,14 @@ export const AccountSelectionConfirmation: React.FC<
         <Column>
           <Text
             size="large"
-            style={Theme.BackupAndRestoreStyles.backupProcessInfo}>
+            style={Theme.BackupAndRestoreStyles.backupProcessInfo}
+            testID="backupProcessInfo">
             {t('backupProcessInfo')}
           </Text>
           <Text
             size="regular"
             color={Theme.Colors.GrayText}
+            testID="cloudInfo"
             style={Theme.BackupAndRestoreStyles.cloudInfo}>
             {t('cloudInfo')}
           </Text>
@@ -47,15 +49,27 @@ export const AccountSelectionConfirmation: React.FC<
           style={{paddingHorizontal: 120, paddingVertical: 50}}>
           <Row>
             {SvgImage.GoogleDriveIcon(45, 45)}
-            <Text style={Theme.BackupAndRestoreStyles.cloudLabel}>
+            <Text
+              style={Theme.BackupAndRestoreStyles.cloudLabel}
+              testID="googleDriveTitle">
               {t('googleDriveTitle')}
             </Text>
           </Row>
         </HorizontallyCentered>
 
         <Column fill align="flex-end" crossAlign="center">
-          <Button type="gradient" title={'Proceed'} onPress={props.onProceed} />
-          <Button type="clear" title={t('goBack')} onPress={props.goBack} />
+          <Button
+            type="gradient"
+            testID="proceed"
+            title={t('proceed')}
+            onPress={props.onProceed}
+          />
+          <Button
+            type="clear"
+            testID="goBack"
+            title={t('goBack')}
+            onPress={props.goBack}
+          />
         </Column>
       </Column>
     </Modal>

screens/backupAndRestore/BackupAndRestoreScreen.tsx

@@ -36,9 +36,11 @@ const BackupAndRestoreScreen: React.FC<BackupAndRestoreProps> = props => {
           {backupController.lastBackupDetails && (
             <Column margin={'0 0 0 9'} align="center">
               <Timestamp
+                testId="lastBackup"
                 time={backupController.lastBackupDetails.backupCreationTime}
               />
               <Text
+                testID="lastBackupSize"
                 style={{
                   fontFamily: 'helvetica-neue-regular',
                   fontWeight: 'normal',
@@ -57,6 +59,7 @@ const BackupAndRestoreScreen: React.FC<BackupAndRestoreProps> = props => {
 
   const LastBackupSection = (
     <SectionLayout
+      testId="LastBackupSection"
       headerText={
         backupController.isBackupInProgress
           ? t('backupProgressState')
@@ -66,13 +69,17 @@ const BackupAndRestoreScreen: React.FC<BackupAndRestoreProps> = props => {
       <Row>
         <View style={{marginBottom: 19}}>
           {backupController.isBackupInProgress ? (
-            <Text style={Theme.BackupAndRestoreStyles.backupProgressText}>
+            <Text
+              testID="backupInProgress"
+              style={Theme.BackupAndRestoreStyles.backupProgressText}>
               {t('backupInProgress')}
             </Text>
           ) : backupController.lastBackupDetails ? (
             LastBackupDetails()
           ) : (
-            <Text style={Theme.BackupAndRestoreStyles.backupProgressText}>
+            <Text
+              testID="noBackup"
+              style={Theme.BackupAndRestoreStyles.backupProgressText}>
               {t('noBackup')}
             </Text>
           )}
@@ -96,10 +103,13 @@ const BackupAndRestoreScreen: React.FC<BackupAndRestoreProps> = props => {
 
   const AccountSection = (
     <SectionLayout
+      testId="AccountSection"
       headerText={t('driveSettings')}
       headerIcon={SvgImage.GoogleDriveIcon(28, 25)}>
       <View style={{marginBottom: 19}}>
-        <Text style={Theme.BackupAndRestoreStyles.backupProgressText}>
+        <Text
+          testID="storageInfo"
+          style={Theme.BackupAndRestoreStyles.backupProgressText}>
           {t('storage')}
         </Text>
       </View>
@@ -112,11 +122,18 @@ const BackupAndRestoreScreen: React.FC<BackupAndRestoreProps> = props => {
 
   const RestoreSection = (
     <SectionLayout
+      testId="restoreSection"
       headerText={t('restore')}
       headerIcon={SvgImage.RestoreIcon()}>
       <Row>
         <View style={{marginBottom: 19}}>
-          <Text style={Theme.BackupAndRestoreStyles.backupProgressText}>
+          <Text
+            style={Theme.BackupAndRestoreStyles.backupProgressText}
+            testID={
+              restoreController.isBackUpRestoring
+                ? 'restoreInProgress'
+                : 'restoreInfo'
+            }>
             {restoreController.isBackUpRestoring
               ? t('restoreInProgress')
               : t('restoreInfo')}
@@ -128,7 +145,7 @@ const BackupAndRestoreScreen: React.FC<BackupAndRestoreProps> = props => {
           Loading
         ) : (
           <Button
-            testID="backup"
+            testID="restore"
             type="outline"
             title={t('restore')}
             onPress={restoreController.BACKUP_RESTORE}
@@ -143,6 +160,7 @@ const BackupAndRestoreScreen: React.FC<BackupAndRestoreProps> = props => {
     <Modal
       isVisible
       headerTitle={t('title')}
+      testID="backupAndRestore"
       headerElevation={2}
       arrowLeft={true}
       onDismiss={props.onBackPress}>

shared/constants.ts

@@ -35,6 +35,8 @@ export const ACTIVITY_LOG_STORE_KEY = 'activityLog';
 
 export const SETTINGS_STORE_KEY = 'settings';
 
+export const LAST_BACKUP_DETAILS = 'lastBackupDetails';
+
 export const APP_ID_LENGTH = 12;
 
 // Numbers and Upper case Alphabets without confusing characters like 0, 1, 2, I, O, Z

types/backup-and-restore/backup.d.ts

@@ -1,4 +1,4 @@
-export interface BackupFileMeta {
-  backupCreationTime: Date;
+export interface BackupDetails {
+  backupCreationTime: number;
   backupFileSize: string;
 }