feat: add test id (#3704)

* feat: add test id * feat: ✨ add swap input test id * feat: ✨ add test id * feat: ✨ add token-price test id * feat: ✨ add token in/out test id
osmosis-labs · Aug 8, 2024 · e0fef20 · e0fef20
1 parent e66d5e7
commit e0fef20
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,