test(desktop): improve market mvvm test coverage with msw

Author: mcayuelas-ledger

.changeset/wise-rivers-change.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": minor
+---
+
+improve market coverage on mvvm

apps/ledger-live-desktop/src/mvvm/features/Market/components/RowItem/__tests__/RowItemView.test.tsx

@@ -0,0 +1,221 @@
+import React from "react";
+import { render, screen, fireEvent } from "tests/testSetup";
+import { RowItemView } from "../RowItemView";
+import { MOCK_MARKET_CURRENCY_DATA } from "@ledgerhq/live-common/market/utils/fixtures";
+import { RowItemViewProps } from "../types";
+
+const mockCurrency = MOCK_MARKET_CURRENCY_DATA[0];
+
+function createDefaultProps(overrides: Partial<RowItemViewProps> = {}): RowItemViewProps {
+  return {
+    style: {},
+    currency: mockCurrency,
+    counterCurrency: "usd",
+    locale: "en",
+    isStarred: false,
+    hasActions: false,
+    currentPriceChangePercentage: 2.5,
+    earnStakeLabelCoin: "Earn",
+    availableOnBuy: false,
+    availableOnSwap: false,
+    availableOnStake: false,
+    buyLabel: "Buy",
+    swapLabel: "Swap",
+    onCurrencyClick: jest.fn(),
+    onStarClick: jest.fn(),
+    onBuy: jest.fn(),
+    onSwap: jest.fn(),
+    onStake: jest.fn(),
+    ...overrides,
+  };
+}
+
+describe("RowItemView", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should render currency name and ticker", () => {
+    render(<RowItemView {...createDefaultProps()} />);
+
+    expect(screen.getByText("Bitcoin")).toBeVisible();
+    expect(screen.getByText("BTC")).toBeVisible();
+  });
+
+  it("should render marketcap rank", () => {
+    render(<RowItemView {...createDefaultProps()} />);
+
+    expect(screen.getByText("1")).toBeVisible();
+  });
+
+  it("should render row when marketcapRank is present", () => {
+    render(<RowItemView {...createDefaultProps()} />);
+
+    const row = screen.getByTestId("market-BTC-row");
+    expect(row).toBeVisible();
+  });
+
+  it("should render CryptoIcon when ledgerIds has entries", () => {
+    render(<RowItemView {...createDefaultProps()} />);
+
+    expect(screen.queryByAltText("currency logo")).toBeNull();
+  });
+
+  it("should render img fallback when ledgerIds is empty", () => {
+    const currency = { ...mockCurrency, ledgerIds: [] };
+    render(<RowItemView {...createDefaultProps({ currency })} />);
+
+    expect(screen.getByAltText("currency logo")).toBeVisible();
+  });
+
+  it("should show Buy/Swap/Stake buttons when hasActions and all available", () => {
+    render(
+      <RowItemView
+        {...createDefaultProps({
+          hasActions: true,
+          availableOnBuy: true,
+          availableOnSwap: true,
+          availableOnStake: true,
+        })}
+      />,
+    );
+
+    expect(screen.getByTestId("market-BTC-buy-button")).toBeVisible();
+    expect(screen.getByTestId("market-BTC-swap-button")).toBeVisible();
+    expect(screen.getByTestId("market-BTC-stake-button")).toBeVisible();
+  });
+
+  it("should hide action buttons when hasActions is false", () => {
+    render(<RowItemView {...createDefaultProps({ hasActions: false })} />);
+
+    expect(screen.queryByTestId("market-BTC-buy-button")).toBeNull();
+    expect(screen.queryByTestId("market-BTC-swap-button")).toBeNull();
+    expect(screen.queryByTestId("market-BTC-stake-button")).toBeNull();
+  });
+
+  it("should show only Buy button when only availableOnBuy is true", () => {
+    render(
+      <RowItemView
+        {...createDefaultProps({
+          hasActions: true,
+          availableOnBuy: true,
+          availableOnSwap: false,
+          availableOnStake: false,
+        })}
+      />,
+    );
+
+    expect(screen.getByTestId("market-BTC-buy-button")).toBeVisible();
+    expect(screen.queryByTestId("market-BTC-swap-button")).toBeNull();
+    expect(screen.queryByTestId("market-BTC-stake-button")).toBeNull();
+  });
+
+  it("should render '-' when currentPriceChangePercentage is undefined", () => {
+    render(<RowItemView {...createDefaultProps({ currentPriceChangePercentage: undefined })} />);
+
+    const priceChangeCell = screen.getByTestId("market-price-change");
+    expect(priceChangeCell).toHaveTextContent("-");
+  });
+
+  it("should render FormattedVal when currentPriceChangePercentage is defined", () => {
+    render(<RowItemView {...createDefaultProps({ currentPriceChangePercentage: 5.5 })} />);
+
+    const priceChangeCell = screen.getByTestId("market-price-change");
+    expect(priceChangeCell).not.toHaveTextContent("-");
+  });
+
+  it("should render star button when isStarred is true", () => {
+    render(<RowItemView {...createDefaultProps({ isStarred: true })} />);
+
+    expect(screen.getByTestId("market-BTC-star-button")).toBeVisible();
+  });
+
+  it("should render star button when isStarred is false", () => {
+    render(<RowItemView {...createDefaultProps({ isStarred: false })} />);
+
+    expect(screen.getByTestId("market-BTC-star-button")).toBeVisible();
+  });
+
+  it("should call onCurrencyClick on row click", () => {
+    const onCurrencyClick = jest.fn();
+    render(<RowItemView {...createDefaultProps({ onCurrencyClick })} />);
+
+    fireEvent.click(screen.getByTestId("market-BTC-row"));
+    expect(onCurrencyClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("should call onStarClick on star button click", () => {
+    const onStarClick = jest.fn();
+    render(<RowItemView {...createDefaultProps({ onStarClick })} />);
+
+    fireEvent.click(screen.getByTestId("market-BTC-star-button"));
+    expect(onStarClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("should call onBuy when Buy button is clicked", () => {
+    const onBuy = jest.fn();
+    render(
+      <RowItemView
+        {...createDefaultProps({
+          hasActions: true,
+          availableOnBuy: true,
+          onBuy,
+        })}
+      />,
+    );
+
+    fireEvent.click(screen.getByTestId("market-BTC-buy-button"));
+    expect(onBuy).toHaveBeenCalledTimes(1);
+  });
+
+  it("should call onSwap when Swap button is clicked", () => {
+    const onSwap = jest.fn();
+    render(
+      <RowItemView
+        {...createDefaultProps({
+          hasActions: true,
+          availableOnSwap: true,
+          onSwap,
+        })}
+      />,
+    );
+
+    fireEvent.click(screen.getByTestId("market-BTC-swap-button"));
+    expect(onSwap).toHaveBeenCalledTimes(1);
+  });
+
+  it("should call onStake when Stake button is clicked", () => {
+    const onStake = jest.fn();
+    render(
+      <RowItemView
+        {...createDefaultProps({
+          hasActions: true,
+          availableOnStake: true,
+          onStake,
+        })}
+      />,
+    );
+
+    fireEvent.click(screen.getByTestId("market-BTC-stake-button"));
+    expect(onStake).toHaveBeenCalledTimes(1);
+  });
+
+  it("should render sparkline chart when sparklineIn7d exists", () => {
+    const currency = {
+      ...mockCurrency,
+      sparklineIn7d: { path: "M0 0L1 1", viewBox: "0 0 100 50", isPositive: true },
+    };
+    render(<RowItemView {...createDefaultProps({ currency })} />);
+
+    const graphCell = screen.getByTestId("market-small-graph");
+    expect(graphCell.querySelector("svg")).toBeVisible();
+  });
+
+  it("should not render sparkline chart when sparklineIn7d is undefined", () => {
+    const currency = { ...mockCurrency, sparklineIn7d: undefined };
+    render(<RowItemView {...createDefaultProps({ currency })} />);
+
+    const graphCell = screen.getByTestId("market-small-graph");
+    expect(graphCell.querySelector("svg")).toBeNull();
+  });
+});