fix: market screenshot e2e test

LedgerHQ · Oct 22, 2024 · 91d338b · 91d338b
1 parent fe4a15b
commit 91d338b
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 14 deletions.
diff --git a/apps/ledger-live-desktop/src/renderer/screens/market/MarketCoin/components/MarketInfo.tsx b/apps/ledger-live-desktop/src/renderer/screens/market/MarketCoin/components/MarketInfo.tsx
@@ -135,10 +135,10 @@ function MarketInfo({
         <Line>
           <Label>{t("market.marketList.price")}</Label>
           <ColumnRight>
-            <LoadingLabel loading={loading}>
+            <LoadingLabel loading={loading} data-testid="market-price-stats-price">
               {counterValueFormatter({ value: price, currency: counterCurrency, locale })}
             </LoadingLabel>
-            <LoadingLabel loading={loading}>
+            <LoadingLabel loading={loading} data-testid="market-price-stats-variation">
               {currentPriceChangePercentage ? (
                 <FormattedVal
                   isPercent
@@ -155,13 +155,13 @@ function MarketInfo({
         </Line>
         <Line>
           <Label>{t("market.detailsPage.tradingVolume")}</Label>
-          <LoadingLabel loading={loading}>
+          <LoadingLabel loading={loading} data-testid="market-price-stats-trading-volume">
             {counterValueFormatter({ value: totalVolume, currency: counterCurrency, locale })}
           </LoadingLabel>
         </Line>
         <Line>
           <Label>{t("market.detailsPage.24hLowHight")}</Label>
-          <LoadingLabel loading={loading}>
+          <LoadingLabel loading={loading} data-testid="market-price-stats-low-hight">
             {counterValueFormatter({ value: low24h, currency: counterCurrency, locale })}
             {" / "}
             {counterValueFormatter({ value: high24h, currency: counterCurrency, locale })}
@@ -170,21 +170,29 @@ function MarketInfo({
         <Line>
           <Label>{t("market.detailsPage.allTimeHigh")}</Label>
           <ColumnRight>
-            <LoadingLabel loading={loading}>
+            <LoadingLabel loading={loading} data-testid="market-price-stats-ath">
               {counterValueFormatter({ value: ath, currency: counterCurrency, locale })}
             </LoadingLabel>
-            <LoadingLabel color="neutral.c80" loading={loading}>
+            <LoadingLabel
+              color="neutral.c80"
+              loading={loading}
+              data-testid="market-price-stats-ath-date"
+            >
               {athText || "-"}
             </LoadingLabel>
           </ColumnRight>
         </Line>
         <Line>
           <Label>{t("market.detailsPage.allTimeLow")}</Label>
           <ColumnRight>
-            <LoadingLabel loading={loading}>
+            <LoadingLabel loading={loading} data-testid="market-price-stats-atl">
               {counterValueFormatter({ value: atl, currency: counterCurrency, locale })}
             </LoadingLabel>
-            <LoadingLabel color="neutral.c80" loading={loading}>
+            <LoadingLabel
+              color="neutral.c80"
+              loading={loading}
+              data-testid="market-price-stats-atl-date"
+            >
               {atlText || "-"}
             </LoadingLabel>
           </ColumnRight>
@@ -195,7 +203,7 @@ function MarketInfo({
           <Title>{t("market.marketList.marketCap")}</Title>
           <Line>
             <Label>{t("market.marketList.marketCap")}</Label>
-            <LoadingLabel loading={loading}>
+            <LoadingLabel loading={loading} data-testid="market-cap">
               {counterValueFormatter({
                 value: marketcap,
                 currency: counterCurrency,
@@ -206,7 +214,7 @@ function MarketInfo({
           </Line>
           <Line>
             <Label>{t("market.detailsPage.marketCapRank")}</Label>
-            <LoadingLabel loading={loading}>
+            <LoadingLabel loading={loading} data-testid="market-cap-rank">
               {marketcapRank !== undefined
                 ? `#${counterValueFormatter({
                     value: marketcapRank,
@@ -217,7 +225,7 @@ function MarketInfo({
           </Line>
           <Line>
             <Label>{t("market.detailsPage.marketCapDominance")}</Label>
-            <LoadingLabel loading={loading}>
+            <LoadingLabel loading={loading} data-testid="market-cap-dominance">
               {marketCapChangePercentage24h ? (
                 <FormattedVal
                   isPercent
@@ -236,7 +244,7 @@ function MarketInfo({
           <Title>{t("market.detailsPage.supply")}</Title>
           <Line>
             <Label>{t("market.detailsPage.circulatingSupply")}</Label>
-            <LoadingLabel loading={loading}>
+            <LoadingLabel loading={loading} data-testid="market-circulating-supply">
               {counterValueFormatter({
                 value: circulatingSupply,
                 locale,
@@ -246,7 +254,7 @@ function MarketInfo({
           </Line>
           <Line>
             <Label>{t("market.detailsPage.totalSupply")}</Label>
-            <LoadingLabel loading={loading}>
+            <LoadingLabel loading={loading} data-testid="market-total-supply">
               {counterValueFormatter({
                 value: totalSupply,
                 locale,
@@ -256,7 +264,7 @@ function MarketInfo({
           </Line>
           <Line>
             <Label>{t("market.detailsPage.maxSupply")}</Label>
-            <LoadingLabel loading={loading}>
+            <LoadingLabel loading={loading} data-testid="market-max-supply">
               {counterValueFormatter({
                 value: maxSupply,
                 locale,

diff --git a/apps/ledger-live-desktop/tests/specs/market/market.spec.ts b/apps/ledger-live-desktop/tests/specs/market/market.spec.ts
@@ -179,6 +179,9 @@ test("Market", async ({ page }) => {
         page.getByTestId("chart-container"),
         page.getByTestId("market-price-delta"),
         page.getByTestId("market-price"),
+        page.getByTestId("market-price-stats-price"),
+        page.getByTestId("market-price-stats-variation"),
+        page.getByTestId("market-cap"),
       ],
     });
   });