fix(INJI-337)testID for home screen and settings screen (mosip#805)

* fix(INJI-337)testID for home screen and settings screen * fix(INJI-337)testID for home screen and settings screen * feat(INJI-337): refactor testID for home screen and settings screen * feat(INJI-337): refactor testID for home screen and settings screen * feat(INJI-337): refactor testID for home screen and settings screen
tw-mosip · Sep 15, 2023 · b739c35 · b739c35
1 parent f5ef8af
commit b739c35
Show file tree

Hide file tree

Showing 8 changed files with 71 additions and 9 deletions.
diff --git a/components/HelpScreen.tsx b/components/HelpScreen.tsx
@@ -23,6 +23,7 @@ export const HelpScreen: React.FC<HelpScreenProps & MainRouteProps> = (
         {props.triggerComponent}
       </Pressable>
       <Modal
+        testID="helpScreen"
         isVisible={showHelpPage}
         headerTitle={t('header')}
         headerElevation={2}
@@ -75,5 +76,6 @@ export const HelpScreen: React.FC<HelpScreenProps & MainRouteProps> = (
 };
 
 interface HelpScreenProps {
+  testID?: string;
   triggerComponent: React.ReactElement;
 }
diff --git a/components/LanguageSelector.tsx b/components/LanguageSelector.tsx
@@ -35,6 +35,7 @@ export const LanguageSelector: React.FC<LanguageSelectorProps> = (props) => {
   return (
     <View>
       <Picker
+        testID="language"
         items={languages}
         selectedValue={i18n.language}
         onValueChange={changeLanguage}

diff --git a/components/ui/Modal.tsx b/components/ui/Modal.tsx
@@ -5,12 +5,14 @@ import { Column, Row, Text } from '.';
 import { useSendVcScreen } from '../../screens/Scan/SendVcScreenController';
 import { DeviceInfoList } from '../DeviceInfoList';
 import { ElevationLevel, Theme } from './styleUtils';
+import testIDProps from '../../shared/commonUtil';
 
 export const Modal: React.FC<ModalProps> = (props) => {
   const controller = useSendVcScreen();
 
   return (
     <RNModal
+      {...testIDProps(props.testID)}
       animationType="slide"
       style={Theme.ModalStyles.modal}
       visible={props.isVisible}
@@ -35,6 +37,7 @@ export const Modal: React.FC<ModalProps> = (props) => {
             ) : null}
             {props.arrowLeft ? (
               <Icon
+                {...testIDProps('arrowLeft')}
                 name="arrow-left"
                 type="material-community"
                 onPress={props.onDismiss}
@@ -47,7 +50,7 @@ export const Modal: React.FC<ModalProps> = (props) => {
               align={props.headerLeft ? 'flex-start' : 'center'}
               margin={'16 0 0 0'}>
               <Column>
-                <Text style={Theme.TextStyles.header}>
+                <Text testID={props.testID} style={Theme.TextStyles.header}>
                   {props.headerTitle || props.headerLeft}
                 </Text>
                 {!props.requester ? (
@@ -73,6 +76,7 @@ export const Modal: React.FC<ModalProps> = (props) => {
             </Row>
             {props.headerRight || props.arrowLeft || (
               <Icon
+                {...testIDProps('close')}
                 name="close"
                 onPress={props.onDismiss}
                 color={Theme.Colors.Details}
@@ -88,6 +92,7 @@ export const Modal: React.FC<ModalProps> = (props) => {
 };
 
 export interface ModalProps {
+  testID?: string;
   isVisible: boolean;
   requester?: boolean;
   onDismiss?: () => void;

diff --git a/screens/Home/MyVcsTab.tsx b/screens/Home/MyVcsTab.tsx
@@ -172,6 +172,7 @@ export const MyVcsTab: React.FC<HomeScreenTabProps> = (props) => {
                 <View style={Theme.Styles.homeScreenInnerContainer}>
                   <Image source={Theme.DigitalIdentityLogo} />
                   <Text
+                    testID="bringYourDigitalID"
                     align="center"
                     weight="bold"
                     margin="33 0 6 0"

diff --git a/screens/MainLayout.tsx b/screens/MainLayout.tsx
@@ -15,6 +15,7 @@ import { HelpScreen } from '../components/HelpScreen';
 
 import { GlobalContext } from '../shared/GlobalContext';
 import { ScanEvents } from '../machines/bleShare/scan/scanMachine';
+import testIDProps from '../shared/commonUtil';
 const { Navigator, Screen } = createBottomTabNavigator();
 
 export const MainLayout: React.FC<RootRouteProps & RequestRouteProps> = (
@@ -25,6 +26,36 @@ export const MainLayout: React.FC<RootRouteProps & RequestRouteProps> = (
   const scanService = appService.children.get('scan');
 
   const options: BottomTabNavigationOptions = {
+    headerRight: () => (
+      <Row align="space-between">
+        <HelpScreen
+          triggerComponent={
+            <Image
+              {...testIDProps('help')}
+              source={require('../assets/help-icon.png')}
+              style={{ width: 36, height: 36 }}
+            />
+          }
+          navigation={undefined}
+          route={undefined}
+        />
+
+        <SettingScreen
+          triggerComponent={
+            <Icon
+              {...testIDProps('settings')}
+              name="settings"
+              type="simple-line-icon"
+              size={21}
+              style={Theme.Styles.IconContainer}
+              color={Theme.Colors.Icon}
+            />
+          }
+          navigation={props.navigation}
+          route={undefined}
+        />
+      </Row>
+    ),
     headerTitleStyle: {
       fontFamily: 'Inter_600SemiBold',
       fontSize: 30,
@@ -67,6 +98,7 @@ export const MainLayout: React.FC<RootRouteProps & RequestRouteProps> = (
             title: t(route.name),
             tabBarIcon: ({ focused }) => (
               <Icon
+                {...testIDProps(route.name)}
                 name={route.icon}
                 color={focused ? Theme.Colors.Icon : Theme.Colors.GrayIcon}
                 style={focused ? Theme.Styles.bottomTabIconStyle : null}

diff --git a/screens/Settings/AboutInji.tsx b/screens/Settings/AboutInji.tsx
@@ -44,7 +44,7 @@ export const AboutInji: React.FC<AboutInjiProps> = ({ appId }) => {
         onPress={() => {
           setShowAboutInji(!showAboutInji);
         }}>
-        <ListItem topDivider bottomDivider>
+        <ListItem testID="aboutInji" topDivider bottomDivider>
           <Icon
             type={'feather'}
             name={'file'}

diff --git a/screens/Settings/ReceivedCards.tsx b/screens/Settings/ReceivedCards.tsx
@@ -18,7 +18,9 @@ export const ReceivedCards: React.FC = () => {
   return (
     <React.Fragment>
       <Pressable onPress={controller.TOGGLE_RECEIVED_CARDS}>
-        <Column style={Theme.Styles.receiveCardsContainer}>
+        <Column
+          testID="receivedCards"
+          style={Theme.Styles.receiveCardsContainer}>
           <Image
             source={Theme.ReceivedCardsIcon}
             style={{ marginLeft: 10, marginRight: 9 }}
@@ -61,10 +63,17 @@ export const ReceivedCards: React.FC = () => {
                   size={40}
                   name="sentiment-dissatisfied"
                 />
-                <Text align="center" weight="semibold" margin="0 0 4 0">
+                <Text
+                  testID="noReceivedVcsTitle"
+                  align="center"
+                  weight="semibold"
+                  margin="0 0 4 0">
                   {t('noReceivedVcsTitle')}
                 </Text>
-                <Text align="center" color={Theme.Colors.textLabel}>
+                <Text
+                  testID="noReceivedVcsText"
+                  align="center"
+                  color={Theme.Colors.textLabel}>
                   {t('noReceivedVcsText')}
                 </Text>
               </Centered>

diff --git a/screens/Settings/SettingScreen.tsx b/screens/Settings/SettingScreen.tsx
@@ -15,14 +15,15 @@ import { AboutInji } from './AboutInji';
 import { EditableListItem } from '../../components/EditableListItem';
 import { RequestRouteProps, RootRouteProps } from '../../routes';
 import { ReceivedCards } from './ReceivedCards';
+import testIDProps from '../../shared/commonUtil';
 
 const LanguageSetting: React.FC = () => {
   const { t } = useTranslation('SettingScreen');
 
   return (
     <LanguageSelector
       triggerComponent={
-        <ListItem>
+        <ListItem testID="language">
           <Icon
             name="globe"
             size={22}
@@ -59,6 +60,7 @@ export const SettingScreen: React.FC<
         {props.triggerComponent}
       </Pressable>
       <Modal
+        testID="settingsScreen"
         isVisible={controller.isVisible}
         arrowLeft={<Icon name={''} />}
         headerTitle={t('header')}
@@ -69,6 +71,7 @@ export const SettingScreen: React.FC<
             style={{ display: Platform.OS !== 'ios' ? 'flex' : 'none' }}
             backgroundColor={Theme.Colors.lightGreyBackgroundColor}>
             <Text
+              testID="injiAsVerifierApp"
               weight="semibold"
               margin="10"
               color={Theme.Colors.aboutVersion}>
@@ -78,7 +81,9 @@ export const SettingScreen: React.FC<
               align="space-evenly"
               backgroundColor={Theme.Colors.whiteBackgroundColor}>
               <Pressable onPress={controller.RECEIVE_CARD}>
-                <Column style={Theme.Styles.receiveCardsContainer}>
+                <Column
+                  testID="receiveCard"
+                  style={Theme.Styles.receiveCardsContainer}>
                   <Image
                     source={Theme.ReceiveCardIcon}
                     style={{ alignSelf: 'center' }}
@@ -88,6 +93,7 @@ export const SettingScreen: React.FC<
                   </Text>
                 </Column>
               </Pressable>
+
               <ReceivedCards />
             </Row>
 
@@ -107,7 +113,10 @@ export const SettingScreen: React.FC<
 
             <LanguageSetting />
 
-            <ListItem topDivider disabled={!controller.canUseBiometrics}>
+            <ListItem
+              {...testIDProps('bioUnlock')}
+              topDivider
+              disabled={!controller.canUseBiometrics}>
               <Icon
                 type={'MaterialCommunityIcons'}
                 name={'fingerprint'}
@@ -154,6 +163,7 @@ export const SettingScreen: React.FC<
             )}
 
             <ListItem
+              {...testIDProps('injiTourGuide')}
               topDivider
               bottomDivider
               onPress={() => controller.INJI_TOUR_GUIDE()}>
@@ -173,7 +183,7 @@ export const SettingScreen: React.FC<
               </ListItem.Content>
             </ListItem>
 
-            <ListItem onPress={controller.LOGOUT}>
+            <ListItem {...testIDProps('logout')} onPress={controller.LOGOUT}>
               <Icon
                 name="logout"
                 type="fontawesome"
@@ -189,6 +199,7 @@ export const SettingScreen: React.FC<
                 </ListItem.Title>
               </ListItem.Content>
             </ListItem>
+
             {controller.backendInfo.application.name !== '' ? (
               <View>
                 <Text
@@ -216,5 +227,6 @@ export const SettingScreen: React.FC<
 };
 
 interface SettingProps {
+  testID?: string;
   triggerComponent: React.ReactElement;
 }