QA - new: Test StakeCard and StakeDetail screens with data

packages/core-mobile/app/navigation/wallet/EarnScreenStack/EarnScreenStack.tsx

@@ -10,6 +10,7 @@ import { FeeUnavailableModal } from 'screens/earn/FeeUnavailableModal'
 import * as Navigation from 'utils/Navigation'
 import { noop } from '@avalabs/core-utils-sdk'
 import { FundsStuckModal } from 'screens/earn/FundsStuckModal'
+import { MainHeaderOptions } from 'navigation/NavUtils'
 import StakeSetupScreenStack, {
   StakeSetupStackParamList
 } from './StakeSetupScreenStack'
@@ -58,6 +59,7 @@ function EarnScreenStack(): JSX.Element {
       <EarnStack.Screen
         name={AppNavigation.Earn.StakeDetails}
         component={StakeDetails}
+        options={MainHeaderOptions()}
       />
       <EarnStack.Screen
         options={{

packages/core-mobile/app/screens/earn/StakeDetails.tsx

@@ -52,7 +52,7 @@ const StakeDetails = (): JSX.Element | null => {
       // eslint-disable-next-line react/no-unstable-nested-components
       headerRight: () => (
         <View style={styles.statusChip}>
-          <StatusChip status={status} />
+          <StatusChip testID={`${status}_status_chip`} status={status} />
         </View>
       )
     })
@@ -67,7 +67,9 @@ const StakeDetails = (): JSX.Element | null => {
       <View style={styles.header}>
         <StakeLogoBigSVG />
         <Space y={16} />
-        <AvaText.Heading4>Stake #{stakeTitle}</AvaText.Heading4>
+        <AvaText.Heading4 testID="stake_details_title">
+          Stake #{stakeTitle}
+        </AvaText.Heading4>
         <Space y={2} />
         <TokenAddress
           address={stake.nodeId ?? ''}

packages/core-mobile/app/screens/earn/components/StakeCard.tsx

@@ -71,13 +71,18 @@ export const StakeCard = (props: Props): JSX.Element => {
           fromUnixTime(props.endTimestamp || 0)
         )
         return (
-          <AvaText.Caption color={theme.colorText1}>
+          <AvaText.Caption testID="time_remaining" color={theme.colorText1}>
             {remainingTime} remaining
           </AvaText.Caption>
         )
       }
       case StakeStatus.Completed:
-        return <StatusChip status={StakeStatus.Completed} />
+        return (
+          <StatusChip
+            testID="Completed_status_chip"
+            status={StakeStatus.Completed}
+          />
+        )
     }
   }
 
@@ -117,7 +122,7 @@ export const StakeCard = (props: Props): JSX.Element => {
                 Staked Amount
               </AvaText.Body2>
               <View style={{ alignItems: 'flex-end' }}>
-                <AvaText.Heading6>
+                <AvaText.Heading6 testID="staked_amount">
                   {stakeAmountInAvax?.toDisplay() ?? '-'} AVAX
                 </AvaText.Heading6>
                 <AvaText.Overline>{stakeAmountInCurrency}</AvaText.Overline>
@@ -132,7 +137,9 @@ export const StakeCard = (props: Props): JSX.Element => {
                 Estimated Rewards
               </Tooltip>
               <View style={{ alignItems: 'flex-end' }}>
-                <AvaText.Heading6 color={theme.colorBgGreen}>
+                <AvaText.Heading6
+                  testID="estimated_rewards"
+                  color={theme.colorBgGreen}>
                   {estimatedRewardInAvax?.toDisplay() ?? '-'} AVAX
                 </AvaText.Heading6>
                 <AvaText.Overline>{estimatedRewardInCurrency}</AvaText.Overline>
@@ -168,7 +175,7 @@ export const StakeCard = (props: Props): JSX.Element => {
                 Amount Staked
               </AvaText.Body2>
               <View style={{ alignItems: 'flex-end' }}>
-                <AvaText.Heading6>
+                <AvaText.Heading6 testID="staked_amount">
                   {stakeAmountInAvax?.toDisplay() ?? '-'} AVAX
                 </AvaText.Heading6>
                 <AvaText.Overline>{stakeAmountInCurrency}</AvaText.Overline>
@@ -185,7 +192,9 @@ export const StakeCard = (props: Props): JSX.Element => {
                 Earned Rewards
               </AvaText.Body2>
               <View style={{ alignItems: 'flex-end' }}>
-                <AvaText.Heading6 color={theme.colorBgGreen}>
+                <AvaText.Heading6
+                  testID="earned_rewards"
+                  color={theme.colorBgGreen}>
                   {rewardAmountInAvax?.toDisplay() ?? '-'} AVAX
                 </AvaText.Heading6>
                 <AvaText.Overline>{rewardAmountInCurrency}</AvaText.Overline>
@@ -201,7 +210,7 @@ export const StakeCard = (props: Props): JSX.Element => {
                 textStyle={{ lineHeight: 20 }}>
                 End Date
               </AvaText.Body2>
-              <AvaText.Heading6>{endDate}</AvaText.Heading6>
+              <AvaText.Heading6 testID="end_date">{endDate}</AvaText.Heading6>
             </Row>
           </>
         )
@@ -220,7 +229,9 @@ export const StakeCard = (props: Props): JSX.Element => {
           <Row style={{ alignItems: 'center' }}>
             <StakeLogoSmallSVG />
             <Space x={16} />
-            <AvaText.Heading6>{'Stake #' + title}</AvaText.Heading6>
+            <AvaText.Heading6 testID="stake_card_title">
+              {'Stake #' + title}
+            </AvaText.Heading6>
           </Row>
           {renderStatus()}
         </Row>

packages/core-mobile/app/screens/earn/components/StatusChip.tsx

@@ -9,22 +9,24 @@ import { StakeStatus } from 'types/earn'
 
 type Props = {
   status: StakeStatus
+  testID?: string
 }
 
-export const StatusChip = ({ status }: Props) => {
+export const StatusChip: React.FC<Props> = ({ status, testID }) => {
   const { theme } = useApplicationContext()
 
-  const renderLabel = (label: string) => (
+  const renderLabel = (label: string): JSX.Element => (
     <>
       <Space x={5} />
       <AvaText.ButtonMedium
+        testID={testID}
         textStyle={{ lineHeight: 20, color: theme.neutralSuccessLight }}>
         {label}
       </AvaText.ButtonMedium>
     </>
   )
 
-  const renderContent = () => {
+  const renderContent = (): JSX.Element => {
     if (status === StakeStatus.Completed)
       return (
         <>

packages/core-mobile/e2e/helpers/assertions.ts

@@ -50,9 +50,10 @@ const count = async (item: Detox.NativeMatcher, value: number) => {
 
 const hasPartialText = async (
   item: Detox.NativeMatcher,
-  expectedText: string
+  expectedText: string,
+  index = 0
 ) => {
-  const attri = await element(item).getAttributes()
+  const attri = await element(item).atIndex(index).getAttributes()
   if (!('elements' in attri)) {
     assert(
       attri.text?.toString().includes(expectedText),

packages/core-mobile/e2e/locators/Stake/stakeScreen.loc.ts

@@ -50,5 +50,16 @@ export default {
   twentyFivePercentText: '25%',
   fiftyPercentText: '50%',
   maxText: 'Max',
-  stakeClaimButton: 'stake_claim_btn'
+  stakeClaimButton: 'stake_claim_btn',
+  stakeCardTitle: 'stake_card_title',
+  stakeDetailsTitle: 'stake_details_title',
+  completedStatusChip: 'Completed_status_chip',
+  activeStatusChip: 'Ongoing_status_chip',
+  timeRemaining: 'Time Remaining',
+  transactionIdText: 'Transaction ID',
+  estimatedRewardsId: 'estimated_rewards',
+  timeRemainingId: 'time_remaining',
+  stakedAmountId: 'staked_amount',
+  endDateId: 'end_date',
+  earnedRewardsId: 'earned_rewards'
 }

packages/core-mobile/e2e/pages/Stake/stake.page.ts

@@ -3,6 +3,13 @@ import Assert from '../../helpers/assertions'
 import Actions from '../../helpers/actions'
 import { Platform } from '../../helpers/constants'
 
+type StakeCard = {
+  title: string
+  rewards: string
+  amount: string
+  time: string
+}
+
 class StakePage {
   get activeTab() {
     return by.text(stakeScreenLoc.activeTab)
@@ -152,6 +159,10 @@ class StakePage {
     return by.text(stakeScreenLoc.newStakeTimeRemaining)
   }
 
+  get timeRemaining() {
+    return by.text(stakeScreenLoc.timeRemaining)
+  }
+
   get nextButton() {
     return by.id(stakeScreenLoc.nextButton)
   }
@@ -208,6 +219,46 @@ class StakePage {
     return by.text(stakeScreenLoc.maxText)
   }
 
+  get stakeCardTitle() {
+    return by.id(stakeScreenLoc.stakeCardTitle)
+  }
+
+  get stakeDetailsTitle() {
+    return by.id(stakeScreenLoc.stakeDetailsTitle)
+  }
+
+  get completedStatusChip() {
+    return by.id(stakeScreenLoc.completedStatusChip)
+  }
+
+  get activeStatusChip() {
+    return by.id(stakeScreenLoc.activeStatusChip)
+  }
+
+  get transactionIdText() {
+    return by.text(stakeScreenLoc.transactionIdText)
+  }
+
+  get estimatedRewardsId() {
+    return by.id(stakeScreenLoc.estimatedRewardsId)
+  }
+
+  get timeRemainingId() {
+    return by.id(stakeScreenLoc.timeRemainingId)
+  }
+
+  get stakedAmountId() {
+    return by.id(stakeScreenLoc.stakedAmountId)
+  }
+
+  get endDateId() {
+    return by.id(stakeScreenLoc.endDateId)
+  }
+
+  get earnedRewardsId() {
+    return by.id(stakeScreenLoc.earnedRewardsId)
+  }
+
   async tapActiveTab() {
     await Actions.tap(this.activeTab)
   }
@@ -333,27 +384,95 @@ class StakePage {
     return availableBalance
   }
 
+  async tapStakeCard() {
+    await Actions.tapElementAtIndex(this.stakeCardTitle, 0)
+  }
+
   async verifyHistoryTabItems() {
+    await Actions.waitForElement(this.stakeCardTitle, 10000)
     await Assert.isVisible(this.amountStakedText)
     await Assert.isVisible(this.earnedRewardsText)
     await Assert.isVisible(this.endDateText)
-    await Assert.isVisible(this.firstStakeText)
-    //Add more items with testID's (date, amount, rewards, icons)
+    await Assert.isVisible(this.completedStatusChip)
+    await Assert.hasPartialText(this.stakeCardTitle, 'Stake #')
+    await Assert.isVisible(this.endDateId)
+    await Assert.isVisible(this.earnedRewardsId)
+    await Assert.isVisible(this.stakedAmountId)
+  }
+
+  async verifyActiveStakeDetails(stakeCardInfo: StakeCard) {
+    // Verify the stake detail static text
+    await Actions.waitForElement(this.stakeDetailsTitle, 10000)
+    await Assert.isVisible(this.stakedAmountText)
+    await Assert.isVisible(this.estimatedRewardsText)
+    await Assert.isVisible(this.estimatedRewardsTooltip)
+    await Assert.isVisible(this.activeStatusChip)
+    // Verify the active stake detail data
+    const { title, rewards, amount, time } = stakeCardInfo
+    await Assert.isVisible(by.text(title))
+    await Assert.isVisible(by.text(rewards))
+    await Assert.isVisible(by.text(amount))
+    await Assert.isVisible(by.text(time))
+  }
+
+  async verifyCompletedStakeDetails(stakeCardInfo: StakeCard) {
+    // Verify the stake detail static text
+    await Actions.waitForElement(this.stakeDetailsTitle, 10000)
+    await Assert.isVisible(this.stakedAmountText)
+    await Assert.isVisible(this.earnedRewardsText)
+    await Assert.isVisible(this.transactionIdText)
+    await Assert.isVisible(this.endDateText)
+    await Assert.isVisible(this.completedStatusChip)
+
+    // Verify the completed stake detail data
+    const { title, rewards, amount, time } = stakeCardInfo
+    await Assert.isVisible(by.text(title))
+    await Assert.isVisible(by.text(rewards))
+    await Assert.isVisible(by.text(amount))
+    await Assert.isVisible(by.text(time))
   }
 
   async verifyActiveTabItems() {
+    await Actions.waitForElement(this.stakeCardTitle, 10000)
     await Assert.isVisible(this.stakedAmountText)
     await Assert.isVisible(this.estimatedRewardsText)
     await Assert.isVisible(this.estimatedRewardsTooltip)
-    await Assert.isVisible(this.firstStakeText)
-    //Add more items with testID's (date, amount, rewards)
+    await Assert.hasPartialText(this.stakeCardTitle, 'Stake #')
+    await Assert.isNotVisible(this.completedStatusChip)
+    await Assert.isNotVisible(this.activeStatusChip)
+    await Assert.isVisible(this.timeRemainingId)
+    await Assert.isVisible(this.estimatedRewardsId)
+    await Assert.isVisible(this.stakedAmountId)
   }
 
   async verifyNoActiveStakesScreenItems() {
     await Assert.isVisible(this.noActiveStakesTitle)
     await Assert.isVisible(this.noActiveStakesDescription)
     await Assert.isVisible(this.earnSvg)
   }
+
+  async getStakeCardInfo(isActive = true): Promise<StakeCard> {
+    const rewardsId = isActive ? this.estimatedRewardsId : this.earnedRewardsId
+    const title = await Actions.getElementText(this.stakeCardTitle)
+    const timeId = isActive ? this.timeRemainingId : this.endDateId
+    const rewards = await Actions.getElementText(rewardsId)
+    const stakedAmount = await Actions.getElementText(this.stakedAmountId)
+    let time = await Actions.getElementText(timeId)
+    if (isActive) {
+      // We need to adjust the text a little bit
+      time = time?.replace(' remaining', '') // remove `remaining` from `1 day remaining`
+      time = time?.replace(/\b\w/g, char => char.toUpperCase()) // make it TitleCase `2 months 1 day` -> `2 Months 1 Day`
+    }
+    console.log(
+      `Title: ${title}, Time: ${time}, Rewards: ${rewards}, Staked Amount: ${stakedAmount}`
+    )
+    return {
+      title: title ?? '',
+      rewards: rewards ?? '',
+      amount: stakedAmount ?? '',
+      time: time ?? ''
+    }
+  }
 }
 
 export default new StakePage()