Merge pull request #1065 from multiversx/mm-fix-data-testids

Fixed data-testids
multiversx · Mar 8, 2024 · b6a6b76 · b6a6b76
2 parents 28813d4 + 9059a82
commit b6a6b76
Show file tree

Hide file tree

Showing 6 changed files with 3,221 additions and 2,798 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@multiversx/sdk-dapp",
-  "version": "2.28.8-alpha.2",
+  "version": "2.28.8-alpha.3",
   "description": "A library to hold the main logic for a dapp on the MultiversX blockchain",
   "author": "MultiversX",
   "license": "GPL-3.0-or-later",

diff --git a/src/UI/Balance/Balance.tsx b/src/UI/Balance/Balance.tsx
@@ -35,33 +35,68 @@ export const BalanceComponent = ({
       ? `$${mainBalance}`
       : mainBalance;
 
+  const getBalancePayload = () => {
+    const balancePayload: Record<string, string> = {};
+
+    if (addEqualSign && displayAsUsd) {
+      Object.assign(balancePayload, { approximation: '≈' });
+    }
+
+    if (processedMainBalance) {
+      Object.assign(balancePayload, { processedMainBalance });
+    }
+
+    if (decimalBalance) {
+      Object.assign(balancePayload, { decimalBalance: `.${decimalBalance}` });
+    }
+
+    if (!displayAsUsd && showTokenLabel) {
+      Object.assign(balancePayload, { tokenLabel: ` ${tokenLabel}` });
+    }
+
+    return balancePayload;
+  };
+
+  const balancePayload = getBalancePayload();
+  const dataBalanceValue = Object.values(balancePayload).reduce(
+    (totalBalanceValue, currentBalanceValue) =>
+      totalBalanceValue.concat(currentBalanceValue),
+    ''
+  );
+
   return (
     <div
       className={classNames(styles?.balance, className)}
       data-testid={dataTestId}
+      data-value={dataBalanceValue}
     >
       {egldIcon && !displayAsUsd && (
         <MultiversXSymbol className={styles?.balanceSymbol} />
       )}
 
-      {addEqualSign && displayAsUsd && (
-        <span className={styles?.balanceApproximation}>≈</span>
+      {balancePayload.approximation && (
+        <span className={styles?.balanceApproximation}>
+          {balancePayload.approximation}
+        </span>
       )}
 
-      <span className={styles?.balanceMain}>{processedMainBalance}</span>
+      {balancePayload.processedMainBalance && (
+        <span className={styles?.balanceMain}>{processedMainBalance}</span>
+      )}
 
-      {decimalBalance && (
-        <span className={styles?.balanceDecimals}>.{decimalBalance}</span>
+      {balancePayload.decimalBalance && (
+        <span className={styles?.balanceDecimals}>
+          {balancePayload.decimalBalance}
+        </span>
       )}
 
-      {!displayAsUsd && showTokenLabel && (
+      {balancePayload.tokenLabel && (
         <sup
           className={classNames(styles?.balanceSuffix, {
             [styles?.balanceSuffixSup]: showTokenLabelSup
           })}
         >
-          {' '}
-          {tokenLabel}
+          {balancePayload.tokenLabel}
         </sup>
       )}
     </div>

diff --git a/...nsactionsModals/SignWithDeviceModal/components/components/ConfirmAmount/ConfirmAmount.tsx b/...nsactionsModals/SignWithDeviceModal/components/components/ConfirmAmount/ConfirmAmount.tsx
@@ -36,8 +36,13 @@ const ConfirmAmountComponent = ({
     tokenId: tokenIdForTokenDetails
   });
 
-  const { type, esdtPrice, isLoading: isTokenDetailsLoading } = tokenDetails;
   const { price: egldPrice } = useGetEgldPrice();
+  const {
+    type,
+    esdtPrice,
+    isLoading: isTokenDetailsLoading,
+    identifier
+  } = tokenDetails;
 
   const isEgld = !tokenId;
   const tokenPrice = isEgld ? egldPrice : esdtPrice;
@@ -51,7 +56,11 @@ const ConfirmAmountComponent = ({
         {isTokenDetailsLoading ? (
           <LoadingDots />
         ) : (
-          <ConfirmAmountLabel amount={amount} type={type} />
+          <ConfirmAmountLabel
+            amount={amount}
+            type={type}
+            identifier={identifier}
+          />
         )}
       </div>
 

diff --git a/.../components/components/ConfirmAmount/components/ConfirmAmountLabel/ConfirmAmountLabel.tsx b/.../components/components/ConfirmAmount/components/ConfirmAmountLabel/ConfirmAmountLabel.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import BigNumber from 'bignumber.js';
 
+import { DataTestIdsEnum } from 'constants/index';
 import { withStyles } from 'hocs/withStyles';
 import { NftEnumType } from 'types/tokens.types';
 
@@ -9,17 +10,20 @@ import { WithStylesImportType } from '../../../../../../../../hocs/useStyles';
 interface ConfirmAmountLabelPropsType extends WithStylesImportType {
   type?: NftEnumType;
   amount: string;
+  identifier?: string;
 }
 
 const ConfirmAmountLabelComponent = ({
   amount,
   styles,
-  type
+  type,
+  identifier
 }: ConfirmAmountLabelPropsType) => {
   const amountBigNumber = new BigNumber(amount);
   const isAmountZero = amountBigNumber.isZero();
   const sftLabel = amountBigNumber.isEqualTo(1) ? 'SFT' : 'SFTs';
   const amountToLocaleString = amountBigNumber.toNumber().toLocaleString('en');
+  const dataValue = `${amountToLocaleString} ${identifier}`;
 
   if (isAmountZero) {
     return <div className={styles?.confirmAmountLabel}>You are using</div>;
@@ -35,7 +39,11 @@ const ConfirmAmountLabelComponent = ({
     return (
       <div className={styles?.confirmAmountLabel}>
         <span className={styles?.confirmAmountLabelText}>You are sending</span>
-        <span className={styles?.confirmAmountLabelValue}>
+        <span
+          className={styles?.confirmAmountLabelValue}
+          data-testid={DataTestIdsEnum.confirmAmount}
+          data-value={dataValue}
+        >
           {amountToLocaleString} {sftLabel}
         </span>
       </div>

diff --git a/...omponents/components/ConfirmAmount/components/ConfirmAmountNftSft/ConfirmAmountNftSft.tsx b/...omponents/components/ConfirmAmount/components/ConfirmAmountNftSft/ConfirmAmountNftSft.tsx
@@ -28,7 +28,7 @@ const ConfirmAmountNftSftComponent = ({
   tokenDetails
 }: ConfirmAmountNftSftPropsType) => {
   const { network } = useGetNetworkConfig();
-  const { identifier, tokenAvatar, ticker, name } = tokenDetails;
+  const { identifier, tokenAvatar, name } = tokenDetails;
 
   const isSft = NftEnumType.SemiFungibleESDT === type;
   const mirroredSftAvatarsCount = 4;
@@ -95,7 +95,7 @@ const ConfirmAmountNftSftComponent = ({
             className={styles?.confirmAmountNftSftTicker}
             data-testid={DataTestIdsEnum.nftIdentifier}
           >
-            {ticker}
+            {identifier}
           </div>
         </div>
       </div>