LedgerHQ · mcayuelas-ledger · Jan 3, 2025 · Dec 31, 2024
diff --git a/.changeset/fresh-needles-push.md b/.changeset/fresh-needles-push.md
@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": minor
+---
+
+Introduce integration tests for Market Widget
@@ -0,0 +1,64 @@
+import React from "react";
+import { render, screen, waitFor } from "tests/testUtils";
+
+import { useMarketPerformanceWidget } from "../useMarketPerformanceWidget";
+import { Order } from "../types";
+import { MarketWidgetTest, FAKE_LIST } from "./shared";
+
+jest.mock("../useMarketPerformanceWidget");
+const mockedUseMarketPerformanceWidgetHook = useMarketPerformanceWidget as jest.Mock;
+
+jest.mock("@tanstack/react-query", () => {
+  return {
+    __esModule: true,
+    ...jest.requireActual("@tanstack/react-query"),
+  };
+});
+
+describe("MarketPerformance Widget", () => {
+  it("should display error screen when Component appears", async () => {
+    mockedUseMarketPerformanceWidgetHook.mockReturnValue({
+      list: [],
+      order: Order.asc,
+      setOrder: jest.fn(),
+      isLoading: false,
+      hasError: true,
+      range: "month",
+      top: 0,
+      enableNewFeature: true,
+    });
+
+    render(<MarketWidgetTest />, { initialRoute: `/` });
+
+    expect(screen.getByTestId("error-container")).toBeVisible();
+    expect(screen.getByText("1M trend")).toBeVisible();
+    expect(screen.getByText("Sorry, we’re unable to load the trend")).toBeVisible();
+  });
+  it("should display V2 screen when FF new Feature is ON and go to market detail page of selected currency when clicking on it", async () => {
+    mockedUseMarketPerformanceWidgetHook.mockReturnValue({
+      list: FAKE_LIST,
+      order: Order.asc,
+      setOrder: jest.fn(),
+      isLoading: false,
+      hasError: false,
+      range: "month",
+      top: 0,
+      enableNewFeature: true,
+    });
+
+    const { user } = render(<MarketWidgetTest />, { initialRoute: `/` });
+
+    expect(screen.getAllByTestId(/market-performance-widget-row/i).length).toEqual(
+      FAKE_LIST.length,
+    );
+
+    const btc = screen.getByTestId("market-performance-widget-row-1");
+    expect(btc).toBeVisible();
+    await user.click(btc);
+
+    await waitFor(() => expect(screen.getByTestId("market-coin-page-container")).toBeVisible());
+
+    expect(screen.getByText("Bitcoin")).toBeVisible();
+    expect(screen.getByText("BTC")).toBeVisible();
+  });
+});
@@ -0,0 +1,63 @@
+import React from "react";
+import { Switch, Route, withRouter } from "react-router";
+import MarketPerformanceWidget from "..";
+import { ABTestingVariants } from "@ledgerhq/types-live";
+import MarketCoin from "~/renderer/screens/market/MarketCoin";
+import { MarketItemPerformer } from "@ledgerhq/live-common/market/utils/types";
+
+export const FAKE_LIST: MarketItemPerformer[] = [
+  {
+    id: "bitcoin",
+    name: "Bitcoin",
+    ticker: "BTC",
+    priceChangePercentage1h: 0.5,
+    priceChangePercentage24h: 2.3,
+    priceChangePercentage7d: 5.1,
+    priceChangePercentage30d: 15.8,
+    priceChangePercentage1y: 120.7,
+    image: "https://path-to-bitcoin-image.com",
+    price: 35000,
+    ledgerIds: ["bitcoin"],
+  },
+  {
+    id: "ethereum",
+    name: "Ethereum",
+    ticker: "ETH",
+    priceChangePercentage1h: 0.3,
+    priceChangePercentage24h: 1.7,
+    priceChangePercentage7d: 3.9,
+    priceChangePercentage30d: 10.5,
+    priceChangePercentage1y: 85.3,
+    image: "https://path-to-ethereum-image.com",
+    price: 2500,
+    ledgerIds: ["ethereum"],
+  },
+  {
+    id: "ripple",
+    name: "Ripple",
+    ticker: "XRP",
+    priceChangePercentage1h: 0.1,
+    priceChangePercentage24h: 0.9,
+    priceChangePercentage7d: 2.8,
+    priceChangePercentage30d: 5.6,
+    priceChangePercentage1y: 50.2,
+    image: "https://path-to-ripple-image.com",
+    price: 1.2,
+    ledgerIds: ["ripple"],
+  },
+];
+
+const MarketWidgetNavigation = () => (
+  <Switch>
+    <Route
+      exact
+      path="/"
+      render={() => <MarketPerformanceWidget variant={ABTestingVariants.variantA} />}
+    />
+    <Route path="/market/:currencyId" render={() => <MarketCoin />} />
+  </Switch>
+);
+
+const MarketWidgetTestBase = () => <MarketWidgetNavigation />;
+
+export const MarketWidgetTest = withRouter(MarketWidgetTestBase);
@@ -1,12 +1,12 @@
 import React from "react";
 import { ABTestingVariants } from "@ledgerhq/types-live";
 import Card from "~/renderer/components/Box/Card";
-import { WidgetList } from "~/renderer/screens/dashboard/MarketPerformanceWidget/components/WidgetList";
 import { Props, PropsBody } from "../types";
 import { Flex, InfiniteLoader } from "@ledgerhq/react-ui";
 import { MarketPerformanceWidgetFooter } from "./Footer";
 import { MarketPerformanceWidgetHeader } from "./Header";
 import { Error } from "./Error";
+import { WidgetList } from "./WidgetList";
 
 const BodyByMode: Record<ABTestingVariants, React.ComponentType<PropsBody>> = {
   [ABTestingVariants.variantA]: WidgetList,

@@ -13,7 +13,13 @@ type Props = {
 export function Error({ title, description, top, range }: Props) {
   const { t } = useTranslation();
   return (
-    <Flex flexDirection="column" alignItems="center" justifyContent="center" flex={1}>
+    <Flex
+      flexDirection="column"
+      alignItems="center"
+      justifyContent="center"
+      flex={1}
+      data-testid="error-container"
+    >
       <Flex
         borderRadius={50}
         width={"60px"}

@@ -8,9 +8,9 @@ import { fontSizes } from "@ledgerhq/react-ui/styles/theme";
 import { counterValueCurrencySelector, localeSelector } from "~/renderer/reducers/settings";
 import { useSelector } from "react-redux";
 import counterValueFormatter from "@ledgerhq/live-common/market/utils/countervalueFormatter";
-import { getChangePercentage } from "~/renderer/screens/dashboard/MarketPerformanceWidget/utils";
 import { useHistory } from "react-router-dom";
 import { track } from "~/renderer/analytics/segment";
+import { getChangePercentage } from "../utils";
 
 export function WidgetList({ data, order, range, top, enableNewFeature }: PropsBody) {
   const noData = data.length === 0;
@@ -57,6 +57,7 @@ function WidgetRow({ data, index, range, enableNewFeature }: PropsBodyElem) {
       py="6px"
       onClick={enableNewFeature ? onCurrencyClick : undefined}
       featureFlagEnabled={enableNewFeature}
+      data-testid={`market-performance-widget-row-${index}`}
     >
       <Flex alignItems="center" flex={1}>
         <Text color="neutral.c80" variant="h5Inter" mr={2}>

@@ -1,7 +1,7 @@
 import { MarketItemPerformer } from "@ledgerhq/live-common/market/utils/types";
 import { PortfolioRange } from "@ledgerhq/types-live";
 
-import { CurrencyCheck, Order } from "~/renderer/screens/dashboard/MarketPerformanceWidget/types";
+import { CurrencyCheck, Order } from "LLD/features/MarketPerformanceWidget/types";
 
 export function getSlicedList(list: MarketItemPerformer[], order: Order, range: PortfolioRange) {
   return list.filter(elem =>

@@ -28,7 +28,7 @@ import PostOnboardingHubBanner from "~/renderer/components/PostOnboardingHub/Pos
 import FeaturedButtons from "~/renderer/screens/dashboard/FeaturedButtons";
 import { ABTestingVariants, AccountLike, Operation } from "@ledgerhq/types-live";
 import ActionContentCards from "~/renderer/screens/dashboard/ActionContentCards";
-import MarketPerformanceWidget from "~/renderer/screens/dashboard/MarketPerformanceWidget";
+import MarketPerformanceWidget from "LLD/features/MarketPerformanceWidget";
 import { useMarketPerformanceFeatureFlag } from "~/renderer/actions/marketperformance";
 import { Grid } from "@ledgerhq/react-ui";
 import AnalyticsOptInPrompt from "LLD/features/AnalyticsOptInPrompt/screens";

@@ -0,0 +1,7 @@
+import mockedResponseBTC from "./mockedResponseBTC.json";
+import mocketMarketList from "./mocketMarketList.json";
+
+export const MarketMockedResponse = {
+  bitcoinDetail: mockedResponseBTC,
+  marketList: mocketMarketList,
+};
@@ -0,0 +1,39 @@
+[
+  {
+    "id": "bitcoin",
+    "ledgerIds": ["bitcoin"],
+    "ticker": "btc",
+    "name": "Bitcoin",
+    "image": "https://proxycgassets.api.live.ledger.com/coins/images/1/large/bitcoin.png",
+    "marketCap": 1853659311759,
+    "marketCapRank": 1,
+    "fullyDilutedValuation": 1965637466124,
+    "totalVolume": 59569647143,
+    "high24h": 94838,
+    "low24h": 91375,
+    "price": 93552,
+    "priceChange24h": -257.298216683208,
+    "priceChangePercentage1h": -0.40255063060877444,
+    "priceChangePercentage24h": -0.27427661250417024,
+    "priceChangePercentage7d": -0.30984911905827317,
+    "priceChangePercentage30d": -3.4861595535989562,
+    "priceChangePercentage1y": 118.89147816670156,
+    "marketCapChange24h": -5358207120.227051,
+    "marketCapChangePercentage24h": -0.28823,
+    "circulatingSupply": 19803675,
+    "totalSupply": 21000000,
+    "maxSupply": 21000000,
+    "allTimeHigh": 108135,
+    "allTimeLow": 67.81,
+    "allTimeHighDate": "2024-12-17T15:02:41.429Z",
+    "allTimeLowDate": "2013-07-06T00:00:00Z",
+    "sparkline": [
+      93904.34, 94180.71, 98540.01, 97744.89, 98500.26, 98166.15, 97972.34, 98116.91, 98322.234,
+      99144.055, 98949.445, 98104.914, 95759.02, 95344.336, 96462.66, 95555.76, 95792.29, 96178.805,
+      96120.68, 96461.414, 94017.74, 94505.445, 94248.84, 94372.445, 94337.37, 94463.18, 94745.09,
+      94916.77, 94998.1, 94953.984, 94968.695, 94749.555, 93732.33, 93678.82, 93392.77, 93073.18,
+      93686.19, 93614.766, 91960.47, 94197.09, 92369.18, 92286.9
+    ],
+    "updatedAt": "2024-12-31T10:19:36.410Z"
+  }
+]