From e0fef203990fef4eb71f0c7dc261e1b42d8c3a4f Mon Sep 17 00:00:00 2001
From: Davide Segullo <davidesegullo@gmail.com>
Date: Thu, 8 Aug 2024 12:07:49 +0200
Subject: [PATCH] feat: add test id (#3704)

* feat: add test id

* feat: :sparkles: add swap input test id

* feat: :sparkles: add test id

* feat: :sparkles: add token-price test id

* feat: :sparkles: add token in/out test id
---
 packages/web/components/complex/asset-fieldset.tsx  | 5 ++++-
 packages/web/components/place-limit-tool/index.tsx  | 3 +++
 packages/web/components/swap-tool/alt.tsx           | 4 ++++
 packages/web/components/swap-tool/trade-details.tsx | 6 +++---
 4 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/web/components/complex/asset-fieldset.tsx b/packages/web/components/complex/asset-fieldset.tsx
index a7246ea884..0d9576d682 100644
--- a/packages/web/components/complex/asset-fieldset.tsx
+++ b/packages/web/components/complex/asset-fieldset.tsx
@@ -136,7 +136,7 @@ interface AssetFieldsetInputProps {
 const AssetFieldsetInput = forwardRef<
   HTMLInputElement,
   AssetFieldsetInputProps
->(({ inputPrefix, inputValue, onInputChange, outputValue }, ref) => {
+>(({ inputPrefix, inputValue, onInputChange, outputValue, ...rest }, ref) => {
   const { isMobile } = useWindowSize();
 
   const fontSize = calcFontSize((inputValue ?? "").length, isMobile);
@@ -157,6 +157,7 @@ const AssetFieldsetInput = forwardRef<
             placeholder="0"
             onChange={onInputChange}
             value={inputValue}
+            {...rest}
           />
         </div>
       )}
@@ -196,6 +197,7 @@ const AssetFieldsetTokenSelector = ({
   hasNextPageAssets,
   isFetchingNextPageAssets,
   page = "Swap Page",
+  ...rest
 }: TokenSelectProps) => {
   const { t } = useTranslation();
   const { logEvent } = useAmplitudeAnalytics();
@@ -237,6 +239,7 @@ const AssetFieldsetTokenSelector = ({
             openSelect();
           }
         }}
+        {...rest}
       >
         <div className="flex items-center gap-3">
           {selectedCoinImageUrl && (
diff --git a/packages/web/components/place-limit-tool/index.tsx b/packages/web/components/place-limit-tool/index.tsx
index 74b2a32188..543007f0d1 100644
--- a/packages/web/components/place-limit-tool/index.tsx
+++ b/packages/web/components/place-limit-tool/index.tsx
@@ -468,6 +468,7 @@ export const PlaceLimitTool: FunctionComponent<PlaceLimitToolProps> = observer(
                 ref={inputRef}
                 inputValue={inputValue}
                 onInputChange={(e) => setAmountSafe(focused, e.target.value)}
+                data-testid={`trade-input-${type}`}
               />
               <AssetFieldsetTokenSelector
                 page={page}
@@ -481,6 +482,7 @@ export const PlaceLimitTool: FunctionComponent<PlaceLimitToolProps> = observer(
                 isFetchingNextPageAssets={
                   swapState.marketState.isFetchingNextPageAssets
                 }
+                data-testid="token-in"
               />
             </div>
             <AssetFieldsetFooter>
@@ -567,6 +569,7 @@ export const PlaceLimitTool: FunctionComponent<PlaceLimitToolProps> = observer(
                 isLoading={isButtonLoading}
                 loadingText={<h6>{t("assets.transfer.loading")}</h6>}
                 onClick={() => setReviewOpen(true)}
+                data-testid={`trade-button-${tab}-${type}`}
               >
                 <h6>{buttonText}</h6>
               </Button>
diff --git a/packages/web/components/swap-tool/alt.tsx b/packages/web/components/swap-tool/alt.tsx
index 9bab54590b..b8b23109d7 100644
--- a/packages/web/components/swap-tool/alt.tsx
+++ b/packages/web/components/swap-tool/alt.tsx
@@ -360,6 +360,7 @@ export const AltSwapTool: FunctionComponent<SwapToolProps> = observer(
                         swapState.inAmountInput.setAmount(e.target.value);
                       }
                     }}
+                    data-testid="trade-input-swap"
                   />
                   <AssetFieldsetTokenSelector
                     selectedCoinDenom={swapState.fromAsset?.coinDenom}
@@ -369,6 +370,7 @@ export const AltSwapTool: FunctionComponent<SwapToolProps> = observer(
                       showTokenSelectRecommendedTokens &&
                       setOneTokenSelectOpen("from")
                     }
+                    data-testid="token-in"
                   />
                 </div>
                 <AssetFieldsetFooter>
@@ -457,6 +459,7 @@ export const AltSwapTool: FunctionComponent<SwapToolProps> = observer(
                       showTokenSelectRecommendedTokens &&
                       setOneTokenSelectOpen("to")
                     }
+                    data-testid="token-out"
                   />
                 </div>
                 <AssetFieldsetFooter>
@@ -550,6 +553,7 @@ export const AltSwapTool: FunctionComponent<SwapToolProps> = observer(
                   setShowSwapReviewModal(true);
                 }}
                 className="w-full"
+                data-testid="trade-button-swap"
               >
                 <h6>
                   {account?.walletStatus === WalletStatus.Connected ||
diff --git a/packages/web/components/swap-tool/trade-details.tsx b/packages/web/components/swap-tool/trade-details.tsx
index e444e583dc..337bfb23f7 100644
--- a/packages/web/components/swap-tool/trade-details.tsx
+++ b/packages/web/components/swap-tool/trade-details.tsx
@@ -365,7 +365,7 @@ export function ExpectedRate(
     inQuoteAssetPrice = new Dec(1).quo(inBaseOutQuoteSpotPrice);
 
     return (
-      <span>
+      <span data-testid="token-price">
         1 {baseAsset} ≈{" $"}
         {formatPretty(inQuoteAssetPrice, {
           ...getPriceExtendedFormatOptions(inQuoteAssetPrice),
@@ -379,7 +379,7 @@ export function ExpectedRate(
     inQuoteAssetPrice = inBaseOutQuoteSpotPrice;
 
     return (
-      <span>
+      <span data-testid="token-price">
         1 {baseAsset} ≈{" $"}
         {formatPretty(inQuoteAssetPrice, {
           ...getPriceExtendedFormatOptions(inQuoteAssetPrice),
@@ -430,7 +430,7 @@ export function ExpectedRate(
   }
 
   return (
-    <span>
+    <span data-testid="token-price">
       1 {baseAsset} ≈{" "}
       {formatPretty(inQuoteAssetPrice, {
         minimumSignificantDigits: 6,