Skip to content

Commit

Permalink
feat(INJI-340): add testID for VC Detailes (#809)
Browse files Browse the repository at this point in the history 
* fix(INJI-340): Added testIDs for the VC Detailes

* Added testIDProps, testId's in TextItem component & for labels in VcDetailes.

* Changes the testID's to titles & values
  • Loading branch information
@Anil-kumar-Majji
Anil-kumar-Majji authored Sep 12, 2023
1 parent fe3f8a5 commit 977e5ae
Show file tree
Hide file tree
Showing 3 changed files with 42 additions and 3 deletions.
8 changes: 6 additions & 2 deletions components/QrCodeOverlay.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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}
Expand Down
34 changes: 33 additions & 1 deletion components/VcDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,12 +50,14 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
<Column align="space-evenly">
<Column>
<Text
testID="fullNameTitle"
weight="bold"
size="smaller"
color={Theme.Colors.DetailsLabel}>
{t('fullName')}
</Text>
<Text
testID="fullNameValue"
weight="semibold"
size="smaller"
color={Theme.Colors.Details}>
Expand All @@ -68,12 +70,14 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
<Column>
<Column>
<Text
testID="idType"
weight="bold"
size="smaller"
color={Theme.Colors.DetailsLabel}>
{t('idType')}
</Text>
<Text
testID="nationalCard"
weight="bold"
size="smaller"
color={Theme.Colors.Details}>
Expand All @@ -83,12 +87,14 @@ 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}>
{t('uin')}
</Text>
<Text
testID="uinNumber"
weight="semibold"
size="smaller"
color={Theme.Colors.Details}>
Expand All @@ -100,12 +106,14 @@ 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}>
{t('vid')}
</Text>
<Text
testID="vidNumber"
weight="semibold"
size="smaller"
color={Theme.Colors.Details}>
Expand All @@ -115,12 +123,14 @@ 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}>
{t('dateOfBirth')}
</Text>
<Text
testID="dateOfBirthValue"
weight="semibold"
size="smaller"
color={Theme.Colors.Details}>
Expand All @@ -136,12 +146,14 @@ 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}>
{t('gender')}
</Text>
<Text
testID="genderValue"
weight="semibold"
size="smaller"
color={Theme.Colors.Details}>
Expand All @@ -152,12 +164,14 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
</Column>
<Column margin="20 0 0 0">
<Text
testID="generatedOnTitle"
weight="bold"
size="smaller"
color={Theme.Colors.DetailsLabel}>
{t('generatedOn')}
</Text>
<Text
testID="generatedOnValue"
weight="semibold"
size="smaller"
color={Theme.Colors.Details}>
Expand All @@ -166,13 +180,15 @@ 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}>
{t('status')}
</Text>
<Row>
<Text
testID="valid"
weight="semibold"
size="smaller"
color={Theme.Colors.Details}>
Expand All @@ -183,12 +199,14 @@ 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}>
{t('phoneNumber')}
</Text>
<Text
testID="phoneNumberValue"
weight="semibold"
size="smaller"
color={Theme.Colors.Details}>
Expand All @@ -205,13 +223,15 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
<Column>
<Column fill style={Theme.Styles.labelPart}>
<Text
testID="emailId"
weight="bold"
size="smaller"
color={Theme.Colors.DetailsLabel}>
{t('email')}
</Text>
<Row>
<Text
testID="emailIdValue"
style={
props.vc?.verifiableCredential.credentialSubject.email
.length > 25
Expand All @@ -230,13 +250,15 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {

<Column style={Theme.Styles.labelPart}>
<Text
testID="address"
weight="bold"
size="smaller"
color={Theme.Colors.DetailsLabel}>
{t('address')}
</Text>
<Row>
<Text
testID="addressValue"
style={{ flex: 1 }}
weight="semibold"
size="smaller"
Expand All @@ -250,12 +272,14 @@ 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}>
{t('credentialRegistry')}
</Text>
<Text
testID="credentialRegistryValue"
weight="semibold"
size="smaller"
color={Theme.Colors.Details}>
Expand All @@ -268,13 +292,17 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
</ImageBackground>

{props.vc?.reason?.length > 0 && (
<Text margin="24 24 16 24" weight="semibold">
<Text
testID="reasonForSharingTitle"
margin="24 24 16 24"
weight="semibold">
{t('reasonForSharing')}
</Text>
)}

{props.vc?.reason?.map((reason, index) => (
<TextItem
testID="reason"
key={index}
divider
label={formatDistanceToNow(reason.timestamp, {
Expand All @@ -296,6 +324,7 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
type="material-community"
/>
<Text
testID="offlineAuthDisabledHeader"
style={{ flex: 1 }}
weight="semibold"
size="small"
Expand All @@ -305,6 +334,7 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
</Text>
</Row>
<Text
testID="offlineAuthDisabledMessage"
style={{ flex: 1 }}
weight="regular"
size="small"
Expand All @@ -314,6 +344,7 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
</Text>

<Button
testID="enableVerification"
title={t('enableVerification')}
onPress={props.onBinding}
type="radius"
Expand All @@ -329,6 +360,7 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
containerStyle={{ marginStart: 4, bottom: 1 }}
/>
<Text
testID="profileAuthenticated"
numLines={1}
color={Theme.Colors.statusLabel}
weight="bold"
Expand Down
3 changes: 3 additions & 0 deletions components/ui/TextItem.tsx
View file
Original file line number Diff line number Diff line change
@@ -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}
Expand Down Expand Up @@ -35,6 +37,7 @@ export const TextItem: React.FC<TextItemProps> = (props) => {
};

interface TextItemProps {
testID?: string;
text: string;
label?: string;
divider?: boolean;
Expand Down

0 comments on commit 977e5ae

Please sign in to comment.