From b2ac24840781e08dd9d29b2858c9c7ba6cb3d403 Mon Sep 17 00:00:00 2001
From: anil_majji <majjianilkumar050@gmail.com>
Date: Mon, 11 Sep 2023 15:24:23 +0530
Subject: [PATCH 1/3] fix(INJI-340): Added testIDs for the VC Detailes

---
 components/QrCodeOverlay.tsx |  8 ++++++--
 components/VcDetails.tsx     | 18 +++++++++++++++++-
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/components/QrCodeOverlay.tsx b/components/QrCodeOverlay.tsx
index 7037586d0..5ca477e0a 100644
--- a/components/QrCodeOverlay.tsx
+++ b/components/QrCodeOverlay.tsx
@@ -36,7 +36,11 @@ export const QrCodeOverlay: React.FC<QrCodeOverlayProps> = (props) => {
         overlayStyle={{ padding: 1, borderRadius: 21 }}>
         <Column style={Theme.QrCodeStyles.expandedQrCode}>
           <Row pY={20} style={Theme.QrCodeStyles.QrCodeHeader}>
-            <Text align="center" style={Theme.TextStyles.header} weight="bold">
+            <Text
+              testID="qrCodeHeader"
+              align="center"
+              style={Theme.TextStyles.header}
+              weight="bold">
               {t('qrCodeHeader')}
             </Text>
             <Icon
@@ -46,7 +50,7 @@ export const QrCodeOverlay: React.FC<QrCodeOverlayProps> = (props) => {
               size={32}
             />
           </Row>
-          <Centered pY={30}>
+          <Centered testID="qrCodeDetailes" pY={30}>
             <QRCode
               size={300}
               value={props.qrCodeDetailes}
diff --git a/components/VcDetails.tsx b/components/VcDetails.tsx
index fa0ffdec7..83a32ead7 100644
--- a/components/VcDetails.tsx
+++ b/components/VcDetails.tsx
@@ -50,6 +50,7 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
           <Column align="space-evenly">
             <Column>
               <Text
+                testID="fullName"
                 weight="bold"
                 size="smaller"
                 color={Theme.Colors.DetailsLabel}>
@@ -68,6 +69,7 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
               <Column>
                 <Column>
                   <Text
+                    testID="idType"
                     weight="bold"
                     size="smaller"
                     color={Theme.Colors.DetailsLabel}>
@@ -83,6 +85,7 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
                 {uin ? (
                   <Column margin="20 0 0 0">
                     <Text
+                      testID="uin"
                       weight="bold"
                       size="smaller"
                       color={Theme.Colors.DetailsLabel}>
@@ -100,6 +103,7 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
                 {vid ? (
                   <Column margin="20 0 0 0">
                     <Text
+                      testID="vid"
                       weight="bold"
                       size="smaller"
                       color={Theme.Colors.DetailsLabel}>
@@ -115,6 +119,7 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
                 ) : null}
                 <Column margin="20 0 0 0">
                   <Text
+                    testID="dateOfBirth"
                     weight="bold"
                     size="smaller"
                     color={Theme.Colors.DetailsLabel}>
@@ -136,6 +141,7 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
               <Column margin="0 0 0 40">
                 <Column>
                   <Text
+                    testID="gender"
                     weight="bold"
                     size="smaller"
                     color={Theme.Colors.DetailsLabel}>
@@ -152,6 +158,7 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
                 </Column>
                 <Column margin="20 0 0 0">
                   <Text
+                    testID="generatedOn"
                     weight="bold"
                     size="smaller"
                     color={Theme.Colors.DetailsLabel}>
@@ -166,6 +173,7 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
                 </Column>
                 <Column margin="20 0 0 0">
                   <Text
+                    testID="status"
                     weight="bold"
                     size="smaller"
                     color={Theme.Colors.DetailsLabel}>
@@ -183,6 +191,7 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
                 </Column>
                 <Column margin="20 0 0 0">
                   <Text
+                    testID="phoneNumber"
                     weight="bold"
                     size="smaller"
                     color={Theme.Colors.DetailsLabel}>
@@ -205,6 +214,7 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
         <Column>
           <Column fill style={Theme.Styles.labelPart}>
             <Text
+              testID="email"
               weight="bold"
               size="smaller"
               color={Theme.Colors.DetailsLabel}>
@@ -230,6 +240,7 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
 
           <Column style={Theme.Styles.labelPart}>
             <Text
+              testID="address"
               weight="bold"
               size="smaller"
               color={Theme.Colors.DetailsLabel}>
@@ -250,6 +261,7 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
           {CREDENTIAL_REGISTRY_EDIT === 'true' && (
             <Column fill style={Theme.Styles.labelPart}>
               <Text
+                testID="credentialRegistry"
                 weight="bold"
                 size="smaller"
                 color={Theme.Colors.DetailsLabel}>
@@ -268,7 +280,7 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
       </ImageBackground>
 
       {props.vc?.reason?.length > 0 && (
-        <Text margin="24 24 16 24" weight="semibold">
+        <Text testID="reasonForSharing" margin="24 24 16 24" weight="semibold">
           {t('reasonForSharing')}
         </Text>
       )}
@@ -296,6 +308,7 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
                 type="material-community"
               />
               <Text
+                testID="offlineAuthDisabledHeader"
                 style={{ flex: 1 }}
                 weight="semibold"
                 size="small"
@@ -305,6 +318,7 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
               </Text>
             </Row>
             <Text
+              testID="offlineAuthDisabledMessage"
               style={{ flex: 1 }}
               weight="regular"
               size="small"
@@ -314,6 +328,7 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
             </Text>
 
             <Button
+              testID="enableVerification"
               title={t('enableVerification')}
               onPress={props.onBinding}
               type="radius"
@@ -329,6 +344,7 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
                 containerStyle={{ marginStart: 4, bottom: 1 }}
               />
               <Text
+                testID="profileAuthenticated"
                 numLines={1}
                 color={Theme.Colors.statusLabel}
                 weight="bold"

From c66308ba98848acd345b29f64ba2bc8d48904e9c Mon Sep 17 00:00:00 2001
From: anil_majji <majjianilkumar050@gmail.com>
Date: Tue, 12 Sep 2023 10:54:26 +0530
Subject: [PATCH 2/3] Added testIDProps, testId's in TextItem component & for
 labels in VcDetailes.

---
 components/VcDetails.tsx   | 13 +++++++++++++
 components/ui/TextItem.tsx |  3 +++
 2 files changed, 16 insertions(+)

diff --git a/components/VcDetails.tsx b/components/VcDetails.tsx
index 83a32ead7..4416912cd 100644
--- a/components/VcDetails.tsx
+++ b/components/VcDetails.tsx
@@ -57,6 +57,7 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
                 {t('fullName')}
               </Text>
               <Text
+                testID="name"
                 weight="semibold"
                 size="smaller"
                 color={Theme.Colors.Details}>
@@ -76,6 +77,7 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
                     {t('idType')}
                   </Text>
                   <Text
+                    testID="nationalCard"
                     weight="bold"
                     size="smaller"
                     color={Theme.Colors.Details}>
@@ -92,6 +94,7 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
                       {t('uin')}
                     </Text>
                     <Text
+                      testID="uinNumber"
                       weight="semibold"
                       size="smaller"
                       color={Theme.Colors.Details}>
@@ -110,6 +113,7 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
                       {t('vid')}
                     </Text>
                     <Text
+                      testID="vidNumber"
                       weight="semibold"
                       size="smaller"
                       color={Theme.Colors.Details}>
@@ -126,6 +130,7 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
                     {t('dateOfBirth')}
                   </Text>
                   <Text
+                    testID="birthDate"
                     weight="semibold"
                     size="smaller"
                     color={Theme.Colors.Details}>
@@ -148,6 +153,7 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
                     {t('gender')}
                   </Text>
                   <Text
+                    testID="gender"
                     weight="semibold"
                     size="smaller"
                     color={Theme.Colors.Details}>
@@ -165,6 +171,7 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
                     {t('generatedOn')}
                   </Text>
                   <Text
+                    testID="generatedDate"
                     weight="semibold"
                     size="smaller"
                     color={Theme.Colors.Details}>
@@ -181,6 +188,7 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
                   </Text>
                   <Row>
                     <Text
+                      testID="valid"
                       weight="semibold"
                       size="smaller"
                       color={Theme.Colors.Details}>
@@ -198,6 +206,7 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
                     {t('phoneNumber')}
                   </Text>
                   <Text
+                    testID="mobileNumber"
                     weight="semibold"
                     size="smaller"
                     color={Theme.Colors.Details}>
@@ -222,6 +231,7 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
             </Text>
             <Row>
               <Text
+                testID="emailID"
                 style={
                   props.vc?.verifiableCredential.credentialSubject.email
                     .length > 25
@@ -248,6 +258,7 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
             </Text>
             <Row>
               <Text
+                testID="personAddress"
                 style={{ flex: 1 }}
                 weight="semibold"
                 size="smaller"
@@ -268,6 +279,7 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
                 {t('credentialRegistry')}
               </Text>
               <Text
+                testID="credentialRegistry"
                 weight="semibold"
                 size="smaller"
                 color={Theme.Colors.Details}>
@@ -287,6 +299,7 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
 
       {props.vc?.reason?.map((reason, index) => (
         <TextItem
+          testID="reason"
           key={index}
           divider
           label={formatDistanceToNow(reason.timestamp, {
diff --git a/components/ui/TextItem.tsx b/components/ui/TextItem.tsx
index a10f3d2ee..0e3956e7a 100644
--- a/components/ui/TextItem.tsx
+++ b/components/ui/TextItem.tsx
@@ -1,10 +1,12 @@
 import React from 'react';
 import { Column, Text } from '.';
 import { Theme } from './styleUtils';
+import testIDProps from '../../shared/commonUtil';
 
 export const TextItem: React.FC<TextItemProps> = (props) => {
   return (
     <Column
+      {...testIDProps(props.testID)}
       backgroundColor={Theme.Colors.whiteBackgroundColor}
       margin={props.margin}
       pX={24}
@@ -35,6 +37,7 @@ export const TextItem: React.FC<TextItemProps> = (props) => {
 };
 
 interface TextItemProps {
+  testID?: string;
   text: string;
   label?: string;
   divider?: boolean;

From 99ea738e9718140dd1ef6166a3f384b29d7b6c58 Mon Sep 17 00:00:00 2001
From: anil_majji <majjianilkumar050@gmail.com>
Date: Tue, 12 Sep 2023 13:20:49 +0530
Subject: [PATCH 3/3] Changes the testID's to titles & values

---
 components/VcDetails.tsx | 27 +++++++++++++++------------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/components/VcDetails.tsx b/components/VcDetails.tsx
index 4416912cd..90cab10b8 100644
--- a/components/VcDetails.tsx
+++ b/components/VcDetails.tsx
@@ -50,14 +50,14 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
           <Column align="space-evenly">
             <Column>
               <Text
-                testID="fullName"
+                testID="fullNameTitle"
                 weight="bold"
                 size="smaller"
                 color={Theme.Colors.DetailsLabel}>
                 {t('fullName')}
               </Text>
               <Text
-                testID="name"
+                testID="fullNameValue"
                 weight="semibold"
                 size="smaller"
                 color={Theme.Colors.Details}>
@@ -130,7 +130,7 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
                     {t('dateOfBirth')}
                   </Text>
                   <Text
-                    testID="birthDate"
+                    testID="dateOfBirthValue"
                     weight="semibold"
                     size="smaller"
                     color={Theme.Colors.Details}>
@@ -153,7 +153,7 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
                     {t('gender')}
                   </Text>
                   <Text
-                    testID="gender"
+                    testID="genderValue"
                     weight="semibold"
                     size="smaller"
                     color={Theme.Colors.Details}>
@@ -164,14 +164,14 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
                 </Column>
                 <Column margin="20 0 0 0">
                   <Text
-                    testID="generatedOn"
+                    testID="generatedOnTitle"
                     weight="bold"
                     size="smaller"
                     color={Theme.Colors.DetailsLabel}>
                     {t('generatedOn')}
                   </Text>
                   <Text
-                    testID="generatedDate"
+                    testID="generatedOnValue"
                     weight="semibold"
                     size="smaller"
                     color={Theme.Colors.Details}>
@@ -206,7 +206,7 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
                     {t('phoneNumber')}
                   </Text>
                   <Text
-                    testID="mobileNumber"
+                    testID="phoneNumberValue"
                     weight="semibold"
                     size="smaller"
                     color={Theme.Colors.Details}>
@@ -223,7 +223,7 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
         <Column>
           <Column fill style={Theme.Styles.labelPart}>
             <Text
-              testID="email"
+              testID="emailId"
               weight="bold"
               size="smaller"
               color={Theme.Colors.DetailsLabel}>
@@ -231,7 +231,7 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
             </Text>
             <Row>
               <Text
-                testID="emailID"
+                testID="emailIdValue"
                 style={
                   props.vc?.verifiableCredential.credentialSubject.email
                     .length > 25
@@ -258,7 +258,7 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
             </Text>
             <Row>
               <Text
-                testID="personAddress"
+                testID="addressValue"
                 style={{ flex: 1 }}
                 weight="semibold"
                 size="smaller"
@@ -279,7 +279,7 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
                 {t('credentialRegistry')}
               </Text>
               <Text
-                testID="credentialRegistry"
+                testID="credentialRegistryValue"
                 weight="semibold"
                 size="smaller"
                 color={Theme.Colors.Details}>
@@ -292,7 +292,10 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
       </ImageBackground>
 
       {props.vc?.reason?.length > 0 && (
-        <Text testID="reasonForSharing" margin="24 24 16 24" weight="semibold">
+        <Text
+          testID="reasonForSharingTitle"
+          margin="24 24 16 24"
+          weight="semibold">
           {t('reasonForSharing')}
         </Text>
       )}