PerpsMarketDetailsView.view.test.tsx

/**
 * Component view tests for PerpsMarketDetailsView.
 * State-driven via Redux (initialStatePerps); no hook/selector mocks.
 * Covers bug #25315: Close and Modify actions must be geo-restricted (show geo block sheet when isEligible false).
 * Run with: yarn test:view --testPathPattern="PerpsMarketDetailsView.view.test"
 */
import '../../../../../../tests/component-view/mocks';
import type { ComponentType } from 'react';
import {
  act,
  fireEvent,
  screen,
  waitFor,
  within,
} from '@testing-library/react-native';
import type { Position } from '@metamask/perps-controller';
import {
  MOCK_PERPS_MARKET_INSIGHTS_REPORT,
  OPEN_POSITION_STREAM_ITEM,
  setupPerpsMarketInsightsEngineMock,
} from '../../../../../../tests/component-view/fixtures/perpsMarketInsights';
import {
  createEthMarketForViews,
  createFundedAccountForViews,
  createLongPositionForViews,
} from '../../../../../../tests/component-view/fixtures/perpsViewFixtures';
import { renderPerpsMarketDetailsView } from '../../../../../../tests/component-view/renderers/perpsViewRenderer';
import { getModifyActionLabels } from '../../../../../../tests/component-view/helpers/perpsViewTestHelpers';
import Routes from '../../../../../constants/navigation/Routes';
import MarketInsightsView from '../../../MarketInsights/Views/MarketInsightsView/MarketInsightsView';
import { MarketInsightsSelectorsIDs } from '../../../MarketInsights/MarketInsights.testIds';
import { analytics } from '../../../../../util/analytics/analytics';
import {
  PerpsMarketDetailsViewSelectorsIDs,
  PerpsMarketHeaderSelectorsIDs,
  PerpsBottomSheetTooltipSelectorsIDs,
  PerpsPositionCardSelectorsIDs,
  PerpsTutorialSelectorsIDs,
  getPerpsCandlePeriodSelector,
  getPerpsCandlePeriodBottomSheetSelector,
} from '../../Perps.testIds';

const CANDLE_SELECTOR_BASE =
  `${PerpsMarketDetailsViewSelectorsIDs.CONTAINER}-candle-period-selector` as const;
const MORE_CANDLE_SHEET_BASE =
  `${PerpsMarketDetailsViewSelectorsIDs.CONTAINER}-more-candle-periods-bottom-sheet` as const;

function renderEligibleNoPositionPerpsDetails(
  params?: Partial<Parameters<typeof renderPerpsMarketDetailsView>[0]>,
) {
  renderPerpsMarketDetailsView({
    streamOverrides: { positions: [] },
    overrides: {
      engine: {
        backgroundState: {
          PerpsController: { isEligible: true },
        },
      },
    },
    ...params,
  });
}

describe('PerpsMarketDetailsView', () => {
  it('renders error state when route does not provide market params', async () => {
    renderPerpsMarketDetailsView({ initialParams: {} });

    expect(
      await screen.findByTestId(PerpsMarketDetailsViewSelectorsIDs.ERROR),
    ).toBeOnTheScreen();
    expect(
      screen.queryByTestId(PerpsMarketDetailsViewSelectorsIDs.CONTAINER),
    ).not.toBeOnTheScreen();
  });

  it('renders long and short actions when there is no open position', async () => {
    renderEligibleNoPositionPerpsDetails();

    expect(
      await screen.findByTestId(PerpsMarketDetailsViewSelectorsIDs.LONG_BUTTON),
    ).toBeOnTheScreen();
    expect(
      await screen.findByTestId(
        PerpsMarketDetailsViewSelectorsIDs.SHORT_BUTTON,
      ),
    ).toBeOnTheScreen();
  });

  it('shows geo block bottom sheet when Long is pressed (geo-restricted user)', async () => {
    renderPerpsMarketDetailsView({
      streamOverrides: { positions: [] },
      overrides: {
        engine: {
          backgroundState: {
            PerpsController: { isEligible: false },
          },
        },
      },
    });

    const longButton = await screen.findByTestId(
      PerpsMarketDetailsViewSelectorsIDs.LONG_BUTTON,
    );
    fireEvent.press(longButton);

    expect(
      screen.getByTestId(
        PerpsMarketDetailsViewSelectorsIDs.GEO_BLOCK_BOTTOM_SHEET_TOOLTIP,
      ),
    ).toBeOnTheScreen();
  });

  it('opens market-hours tooltip when info button is pressed for stock markets', async () => {
    renderPerpsMarketDetailsView({
      initialParams: {
        market: {
          symbol: 'AAPL',
          name: 'Apple',
          maxLeverage: '10x',
          marketType: 'stock',
          price: '$200',
          change24h: '$0',
          change24hPercent: '0%',
          volume: '$1M',
        },
      },
      streamOverrides: { positions: [] },
    });

    const infoButton = await screen.findByTestId(
      PerpsMarketDetailsViewSelectorsIDs.MARKET_HOURS_INFO_BUTTON,
    );

    fireEvent.press(infoButton);

    expect(
      await screen.findByTestId(
        PerpsMarketDetailsViewSelectorsIDs.MARKET_HOURS_BOTTOM_SHEET_TOOLTIP,
      ),
    ).toBeOnTheScreen();
  });

  it('opens modify action sheet when Modify is pressed (eligible user)', async () => {
    renderPerpsMarketDetailsView({
      overrides: {
        engine: {
          backgroundState: {
            PerpsController: { isEligible: true },
          },
        },
      },
    });

    const modifyButton = await screen.findByTestId(
      PerpsMarketDetailsViewSelectorsIDs.MODIFY_BUTTON,
    );
    fireEvent.press(modifyButton);

    const labels = getModifyActionLabels();
    expect(await screen.findByText(labels.addPosition)).toBeOnTheScreen();
    expect(
      screen.queryByTestId(
        PerpsMarketDetailsViewSelectorsIDs.GEO_BLOCK_BOTTOM_SHEET_TOOLTIP,
      ),
    ).not.toBeOnTheScreen();
  });

  it('keeps a long position open above liquidation, then removes close actions after liquidation', async () => {
    const { stream } = renderPerpsMarketDetailsView({
      overrides: {
        engine: {
          backgroundState: {
            PerpsController: {
              isEligible: true,
              isFirstTimeUser: { mainnet: false, testnet: false },
            },
          },
        },
      },
      initialParams: { market: createEthMarketForViews() },
      streamOverrides: {
        account: createFundedAccountForViews('10000'),
        positions: [createLongPositionForViews()],
        orders: [],
        marketData: [createEthMarketForViews()],
      },
    });

    expect(
      await screen.findByTestId(
        PerpsMarketDetailsViewSelectorsIDs.CLOSE_BUTTON,
        {},
        { timeout: 5000 },
      ),
    ).toBeOnTheScreen();

    act(() => {
      stream.emitPositions([
        {
          ...createLongPositionForViews(),
          unrealizedPnl: '-100',
          returnOnEquity: '-0.12',
        },
      ]);
    });

    expect(
      await screen.findByTestId(
        PerpsMarketDetailsViewSelectorsIDs.CLOSE_BUTTON,
        {},
        { timeout: 5000 },
      ),
    ).toBeOnTheScreen();

    act(() => {
      stream.emitPositions([]);
    });

    await waitFor(() => {
      expect(
        screen.queryByTestId(PerpsMarketDetailsViewSelectorsIDs.CLOSE_BUTTON),
      ).not.toBeOnTheScreen();
    });
  });

  it('removes close actions after a stop-loss-triggered close stream update', async () => {
    const stopLossPosition: Position = {
      ...createLongPositionForViews(),
      stopLossPrice: '2300',
      stopLossCount: 1,
    };
    const { stream } = renderPerpsMarketDetailsView({
      overrides: {
        engine: {
          backgroundState: {
            PerpsController: {
              isEligible: true,
              isFirstTimeUser: { mainnet: false, testnet: false },
            },
          },
        },
      },
      initialParams: { market: createEthMarketForViews() },
      streamOverrides: {
        account: createFundedAccountForViews('10000'),
        positions: [stopLossPosition],
        orders: [],
        marketData: [createEthMarketForViews()],
      },
    });

    expect(
      await screen.findByTestId(
        PerpsMarketDetailsViewSelectorsIDs.CLOSE_BUTTON,
        {},
        { timeout: 5000 },
      ),
    ).toBeOnTheScreen();

    act(() => {
      stream.emitPositions([]);
    });

    await waitFor(() => {
      expect(
        screen.queryByTestId(PerpsMarketDetailsViewSelectorsIDs.CLOSE_BUTTON),
      ).not.toBeOnTheScreen();
    });
  });

  it('shows the reduced live position after a partial close stream update', async () => {
    const position = createLongPositionForViews();
    const partiallyClosedPosition: Position = {
      ...position,
      size: '0.4',
      marginUsed: '333.33',
      unrealizedPnl: '120',
      returnOnEquity: '0.36',
      positionValue: '1000',
    };
    const { stream } = renderPerpsMarketDetailsView({
      overrides: {
        engine: {
          backgroundState: {
            PerpsController: {
              isEligible: true,
              isFirstTimeUser: { mainnet: false, testnet: false },
            },
          },
        },
      },
      initialParams: { market: createEthMarketForViews() },
      streamOverrides: {
        account: createFundedAccountForViews('10000'),
        positions: [position],
        orders: [],
        marketData: [createEthMarketForViews()],
      },
    });

    expect(
      await screen.findByTestId(
        PerpsPositionCardSelectorsIDs.SIZE_VALUE,
        {},
        { timeout: 5000 },
      ),
    ).toHaveTextContent(/1\s+ETH/u);

    act(() => {
      stream.emitPositions([partiallyClosedPosition]);
    });

    await waitFor(() => {
      expect(
        screen.getByTestId(PerpsPositionCardSelectorsIDs.SIZE_VALUE),
      ).toHaveTextContent(/0\.4\s+ETH/u);
    });
    expect(
      screen.getByTestId(PerpsMarketDetailsViewSelectorsIDs.CLOSE_BUTTON),
    ).toBeOnTheScreen();
  });

  it('removes close actions after a take-profit-triggered close stream update', async () => {
    const takeProfitPosition: Position = {
      ...createLongPositionForViews(),
      takeProfitPrice: '2800',
      takeProfitCount: 1,
    };
    const { stream } = renderPerpsMarketDetailsView({
      overrides: {
        engine: {
          backgroundState: {
            PerpsController: {
              isEligible: true,
              isFirstTimeUser: { mainnet: false, testnet: false },
            },
          },
        },
      },
      initialParams: { market: createEthMarketForViews() },
      streamOverrides: {
        account: createFundedAccountForViews('10000'),
        positions: [takeProfitPosition],
        orders: [],
        marketData: [createEthMarketForViews()],
      },
    });

    expect(
      await screen.findByTestId(
        PerpsMarketDetailsViewSelectorsIDs.CLOSE_BUTTON,
        {},
        { timeout: 5000 },
      ),
    ).toBeOnTheScreen();

    act(() => {
      stream.emitPrices({
        ETH: {
          symbol: 'ETH',
          price: '2800',
          markPrice: '2800',
          timestamp: Date.now(),
          isTradable: true,
        },
      });
      stream.emitPositions([]);
    });

    await waitFor(() => {
      expect(
        screen.queryByTestId(PerpsMarketDetailsViewSelectorsIDs.CLOSE_BUTTON),
      ).not.toBeOnTheScreen();
    });
  });

  describe('Bug 25315: Geo-restriction for Close and Modify actions', () => {
    it('shows geo block bottom sheet when Close is pressed (geo-restricted user)', async () => {
      renderPerpsMarketDetailsView();

      const closeButton = await screen.findByTestId(
        PerpsMarketDetailsViewSelectorsIDs.CLOSE_BUTTON,
      );
      fireEvent.press(closeButton);

      expect(
        screen.getByTestId(
          PerpsMarketDetailsViewSelectorsIDs.GEO_BLOCK_BOTTOM_SHEET_TOOLTIP,
        ),
      ).toBeOnTheScreen();
    });

    it('shows geo block bottom sheet when Modify is pressed (geo-restricted user)', async () => {
      renderPerpsMarketDetailsView();

      const modifyButton = await screen.findByTestId(
        PerpsMarketDetailsViewSelectorsIDs.MODIFY_BUTTON,
      );
      fireEvent.press(modifyButton);

      expect(
        screen.getByTestId(
          PerpsMarketDetailsViewSelectorsIDs.GEO_BLOCK_BOTTOM_SHEET_TOOLTIP,
        ),
      ).toBeOnTheScreen();
    });
  });

  describe('Sheet close and UI interactions', () => {
    it('opens geo block sheet and Got it dismisses it', async () => {
      renderPerpsMarketDetailsView({
        streamOverrides: { positions: [] },
        overrides: {
          engine: {
            backgroundState: {
              PerpsController: { isEligible: false },
            },
          },
        },
      });

      const longButton = await screen.findByTestId(
        PerpsMarketDetailsViewSelectorsIDs.LONG_BUTTON,
      );
      fireEvent.press(longButton);

      const gotIt = await screen.findByTestId(
        PerpsBottomSheetTooltipSelectorsIDs.GOT_IT_BUTTON,
      );
      fireEvent.press(gotIt);
      // Sheet may stay mounted (visibility/animation); we only assert open + press.
    });

    it('opens market hours sheet and Got it dismisses it', async () => {
      renderPerpsMarketDetailsView({
        initialParams: {
          market: {
            symbol: 'AAPL',
            name: 'Apple',
            maxLeverage: '10x',
            marketType: 'stock',
            price: '$200',
            change24h: '$0',
            change24hPercent: '0%',
            volume: '$1M',
          },
        },
        streamOverrides: { positions: [] },
      });

      const infoButton = await screen.findByTestId(
        PerpsMarketDetailsViewSelectorsIDs.MARKET_HOURS_INFO_BUTTON,
      );
      fireEvent.press(infoButton);

      const gotIt = await screen.findByTestId(
        PerpsBottomSheetTooltipSelectorsIDs.GOT_IT_BUTTON,
      );
      fireEvent.press(gotIt);
      // Sheet may stay mounted (visibility/animation); we only assert open + press.
    });

    it('opens statistics tooltip and Got it dismisses it', async () => {
      renderEligibleNoPositionPerpsDetails();

      const openInterestIcon = await screen.findByTestId(
        PerpsMarketDetailsViewSelectorsIDs.OPEN_INTEREST_INFO_ICON,
      );
      fireEvent.press(openInterestIcon);

      expect(
        await screen.findByTestId(
          PerpsMarketDetailsViewSelectorsIDs.BOTTOM_SHEET_TOOLTIP,
        ),
      ).toBeOnTheScreen();

      const gotIt = screen.getByTestId(
        PerpsBottomSheetTooltipSelectorsIDs.GOT_IT_BUTTON,
      );
      fireEvent.press(gotIt);
      // Sheet may stay mounted (visibility/animation); we only assert open + press.
    });
  });

  describe('Header and chart actions', () => {
    it('renders back button and fullscreen chart button', async () => {
      renderEligibleNoPositionPerpsDetails();

      expect(
        await screen.findByTestId(PerpsMarketHeaderSelectorsIDs.BACK_BUTTON),
      ).toBeOnTheScreen();
      expect(
        screen.getByTestId(
          PerpsMarketDetailsViewSelectorsIDs.FULLSCREEN_CHART_BUTTON,
        ),
      ).toBeOnTheScreen();
    });

    it('renders header with full asset name and market pair subtitle', async () => {
      renderEligibleNoPositionPerpsDetails();

      expect(
        await screen.findByTestId(PerpsMarketDetailsViewSelectorsIDs.HEADER),
      ).toBeOnTheScreen();
      expect(screen.getByText('Ethereum')).toBeOnTheScreen();
      expect(screen.getByText('ETH-USD perp')).toBeOnTheScreen();
    });

    it('renders live price, 24h change, and fullscreen button inside the market summary row', async () => {
      renderEligibleNoPositionPerpsDetails();

      const marketSummary = await screen.findByTestId(
        PerpsMarketDetailsViewSelectorsIDs.MARKET_SUMMARY,
      );

      expect(
        within(marketSummary).getByTestId(PerpsMarketHeaderSelectorsIDs.PRICE),
      ).toBeOnTheScreen();
      expect(
        within(marketSummary).getByTestId(
          PerpsMarketHeaderSelectorsIDs.PRICE_CHANGE,
        ),
      ).toBeOnTheScreen();
      expect(
        within(marketSummary).getByTestId(
          PerpsMarketDetailsViewSelectorsIDs.FULLSCREEN_CHART_BUTTON,
        ),
      ).toBeOnTheScreen();
    });

    it('renders the market summary price when the market has no maxLeverage', async () => {
      renderPerpsMarketDetailsView({
        initialParams: {
          market: {
            symbol: 'ETH',
            name: 'Ethereum',
            price: '$2,000',
            change24h: '$0',
            change24hPercent: '0%',
            volume: '$1M',
            openInterest: '$500K',
          },
        },
        streamOverrides: {
          positions: [],
          marketData: [
            {
              symbol: 'BTC',
              name: 'Bitcoin',
              maxLeverage: '50x',
              volume: '$1M',
              openInterest: '$500K',
            },
          ],
        },
        overrides: {
          engine: {
            backgroundState: {
              PerpsController: { isEligible: true },
            },
          },
        },
      });

      expect(
        await screen.findByTestId(PerpsMarketDetailsViewSelectorsIDs.HEADER),
      ).toBeOnTheScreen();
      const marketSummary = await screen.findByTestId(
        PerpsMarketDetailsViewSelectorsIDs.MARKET_SUMMARY,
      );
      expect(
        within(marketSummary).getByTestId(PerpsMarketHeaderSelectorsIDs.PRICE),
      ).toBeOnTheScreen();
      expect(
        within(marketSummary).getByTestId(
          PerpsMarketHeaderSelectorsIDs.PRICE_CHANGE,
        ),
      ).toBeOnTheScreen();
    });

    it('opens fullscreen chart modal and close button is pressable', async () => {
      renderEligibleNoPositionPerpsDetails();

      const fullscreenButton = await screen.findByTestId(
        PerpsMarketDetailsViewSelectorsIDs.FULLSCREEN_CHART_BUTTON,
      );
      fireEvent.press(fullscreenButton);

      const closeButton = await screen.findByTestId(
        'perps-chart-fullscreen-close-button',
      );
      expect(closeButton).toBeOnTheScreen();
      fireEvent.press(closeButton);
      // Modal may stay in tree during close animation; we only assert open + press.
    });

    it('changes candle period when period button is pressed', async () => {
      const { store } = renderPerpsMarketDetailsView({
        streamOverrides: { positions: [] },
        overrides: {
          engine: {
            backgroundState: {
              PerpsController: { isEligible: true },
            },
          },
        },
      });

      const period3mButton = await screen.findByTestId(
        getPerpsCandlePeriodSelector.periodButton(CANDLE_SELECTOR_BASE, '3m'),
      );
      expect(period3mButton).toBeOnTheScreen();

      fireEvent.press(period3mButton);

      expect(
        store.getState().settings.perpsChartPreferences.preferredCandlePeriod,
      ).toBe('3m');
    });

    it('opens more candle periods bottom sheet and selects a period', async () => {
      const { store } = renderPerpsMarketDetailsView({
        streamOverrides: { positions: [] },
        overrides: {
          engine: {
            backgroundState: {
              PerpsController: { isEligible: true },
            },
          },
        },
      });

      const moreButton = await screen.findByTestId(
        getPerpsCandlePeriodSelector.moreButton(CANDLE_SELECTOR_BASE),
      );
      fireEvent.press(moreButton);

      const period1mInSheet = await screen.findByTestId(
        getPerpsCandlePeriodBottomSheetSelector.periodButton(
          MORE_CANDLE_SHEET_BASE,
          '1m',
        ),
      );
      fireEvent.press(period1mInSheet);

      expect(
        store.getState().settings.perpsChartPreferences.preferredCandlePeriod,
      ).toBe('1m');
      expect(
        screen.queryByTestId(
          getPerpsCandlePeriodBottomSheetSelector.periodButton(
            MORE_CANDLE_SHEET_BASE,
            '1m',
          ),
        ),
      ).not.toBeOnTheScreen();
    });
  });

  describe('Position card and navigation', () => {
    it('renders position card with share button when position exists', async () => {
      renderPerpsMarketDetailsView({
        overrides: {
          engine: {
            backgroundState: {
              PerpsController: { isEligible: true },
            },
          },
        },
      });

      expect(
        await screen.findByTestId(PerpsPositionCardSelectorsIDs.CARD),
      ).toBeOnTheScreen();
      expect(
        screen.getByTestId(PerpsPositionCardSelectorsIDs.SHARE_BUTTON),
      ).toBeOnTheScreen();
    });

    it('renders tutorial card', async () => {
      renderPerpsMarketDetailsView({
        streamOverrides: { positions: [] },
        overrides: {
          engine: {
            backgroundState: {
              PerpsController: { isEligible: true },
            },
          },
        },
      });

      const tutorialCard = await screen.findByTestId(
        PerpsTutorialSelectorsIDs.TUTORIAL_CARD,
      );
      expect(tutorialCard).toBeOnTheScreen();
      // Not pressing to avoid unhandled NAVIGATE(PerpsTutorial) in test navigator.
    });

    const renderPerpsInsightsJourney = ({
      hasPosition,
      insightsFlagEnabled = true,
      report = MOCK_PERPS_MARKET_INSIGHTS_REPORT,
    }: {
      hasPosition: boolean;
      insightsFlagEnabled?: boolean;
      report?: typeof MOCK_PERPS_MARKET_INSIGHTS_REPORT | null;
    }) => {
      setupPerpsMarketInsightsEngineMock(report);
      renderPerpsMarketDetailsView({
        streamOverrides: {
          positions: hasPosition ? [OPEN_POSITION_STREAM_ITEM] : [],
        },
        overrides: {
          engine: {
            backgroundState: {
              PerpsController: { isEligible: true },
              RemoteFeatureFlagController: {
                remoteFeatureFlags: {
                  aiSocialMarketInsightsPerpsEnabled: {
                    enabled: insightsFlagEnabled,
                    featureVersion: '1',
                    minimumVersion: '0.0.0',
                  },
                },
              },
            },
          },
        },
        extraRoutes: [
          {
            name: Routes.MARKET_INSIGHTS.VIEW,
            Component: MarketInsightsView as unknown as ComponentType<unknown>,
            mount: 'root',
          },
          { name: Routes.BRIDGE.ROOT, mount: 'root' },
          { name: Routes.RAMP.TOKEN_SELECTION, mount: 'root' },
        ],
      });
    };

    it('opens market insights from Perps and hides Long/Short when position is open', async () => {
      renderPerpsInsightsJourney({ hasPosition: true });

      const entryCard = await screen.findByTestId(
        MarketInsightsSelectorsIDs.ENTRY_CARD,
      );
      fireEvent.press(entryCard);

      expect(
        await screen.findByTestId(MarketInsightsSelectorsIDs.VIEW_CONTAINER),
      ).toBeOnTheScreen();
      expect(
        await screen.findByText(
          'Ethereum shows strong momentum amid institutional demand',
        ),
      ).toBeOnTheScreen();
      expect(
        await screen.findByText(MOCK_PERPS_MARKET_INSIGHTS_REPORT.summary),
      ).toBeOnTheScreen();
      expect(
        await screen.findByText('Institutional Adoption'),
      ).toBeOnTheScreen();
      expect(await screen.findByText('DeFi Activity Surge')).toBeOnTheScreen();
      expect(
        screen.queryByTestId(MarketInsightsSelectorsIDs.LONG_BUTTON),
      ).not.toBeOnTheScreen();
      expect(
        screen.queryByTestId(MarketInsightsSelectorsIDs.SHORT_BUTTON),
      ).not.toBeOnTheScreen();
    });

    it('shows Long/Short in market insights when there is no position', async () => {
      renderPerpsInsightsJourney({ hasPosition: false });

      fireEvent.press(
        await screen.findByTestId(MarketInsightsSelectorsIDs.ENTRY_CARD),
      );

      expect(
        await screen.findByTestId(MarketInsightsSelectorsIDs.LONG_BUTTON),
      ).toBeOnTheScreen();
      expect(
        await screen.findByTestId(MarketInsightsSelectorsIDs.SHORT_BUTTON),
      ).toBeOnTheScreen();
    });

    it('does not render perps market insights card when feature flag is disabled', async () => {
      renderPerpsInsightsJourney({
        hasPosition: true,
        insightsFlagEnabled: false,
      });

      await waitFor(() => {
        expect(
          screen.queryByTestId(MarketInsightsSelectorsIDs.ENTRY_CARD),
        ).not.toBeOnTheScreen();
      });
    });

    it('shows sources bottom sheet when tapping a trend item from Perps insights', async () => {
      renderPerpsInsightsJourney({ hasPosition: true });

      fireEvent.press(
        await screen.findByTestId(MarketInsightsSelectorsIDs.ENTRY_CARD),
      );

      const trendItem = await screen.findByTestId(
        `${MarketInsightsSelectorsIDs.TREND_ITEM}-0`,
      );
      fireEvent.press(trendItem);

      expect(
        await screen.findByText('Spot Ethereum ETFs See Record Weekly Inflows'),
      ).toBeOnTheScreen();
    });

    it('tracks thumbs up interaction from Perps insights', async () => {
      const trackEventSpy = jest.spyOn(analytics, 'trackEvent');
      try {
        renderPerpsInsightsJourney({ hasPosition: true });

        fireEvent.press(
          await screen.findByTestId(MarketInsightsSelectorsIDs.ENTRY_CARD),
        );
        const thumbsUp = await screen.findByTestId(
          MarketInsightsSelectorsIDs.THUMBS_UP_BUTTON,
        );

        trackEventSpy.mockClear();
        fireEvent.press(thumbsUp);

        await waitFor(() => {
          expect(trackEventSpy).toHaveBeenCalledWith(
            expect.objectContaining({
              name: 'Market Insights Interaction',
              properties: expect.objectContaining({
                interaction_type: 'thumbs_up',
              }),
            }),
          );
        });
      } finally {
        trackEventSpy.mockRestore();
      }
    });

    it('shows feedback bottom sheet on thumbs down from Perps insights', async () => {
      renderPerpsInsightsJourney({ hasPosition: true });

      fireEvent.press(
        await screen.findByTestId(MarketInsightsSelectorsIDs.ENTRY_CARD),
      );
      fireEvent.press(
        await screen.findByTestId(
          MarketInsightsSelectorsIDs.THUMBS_DOWN_BUTTON,
        ),
      );

      expect(
        await screen.findByTestId(
          MarketInsightsSelectorsIDs.FEEDBACK_BOTTOM_SHEET,
        ),
      ).toBeOnTheScreen();
    });
  });
});