ProviderSelection.test.tsx

import React from 'react';
import { fireEvent, waitFor } from '@testing-library/react-native';
import ProviderSelection from './ProviderSelection';
import { renderScreen } from '../../../../../../util/test/renderWithProvider';
import { backgroundState } from '../../../../../../util/test/initial-root-state';
import type {
  Provider,
  Quote,
  QuotesResponse,
} from '@metamask/ramps-controller';
import {
  useRampsController,
  type UseRampsControllerResult,
} from '../../../hooks/useRampsController';

jest.mock('../../../hooks/useRampsController', () => ({
  useRampsController: jest.fn(),
}));

const mockUserRegion = {
  regionCode: 'us-ut',
  country: {
    isoCode: 'US',
    flag: '🇺🇸',
    name: 'United States',
    phone: { prefix: '+1', placeholder: '', template: '' },
    currency: 'USD',
    supported: { buy: true, sell: true },
  },
  state: null,
} as UseRampsControllerResult['userRegion'];

const mockSelectedToken = {
  assetId: 'eip155:1/slip44:60',
  chainId: 'eip155:1',
  symbol: 'ETH',
  name: 'Ether',
  decimals: 18,
  iconUrl: '',
  tokenSupported: true,
} as UseRampsControllerResult['selectedToken'];

const defaultMockController: UseRampsControllerResult = {
  userRegion: null,
  setUserRegion: jest.fn(),
  selectedProvider: null,
  setSelectedProvider: jest.fn(),
  providers: [],
  providersLoading: false,
  providersError: null,
  tokens: null,
  selectedToken: null,
  setSelectedToken: jest.fn(),
  tokensLoading: false,
  tokensError: null,
  countries: [],
  countriesLoading: false,
  countriesError: null,
  paymentMethods: [],
  selectedPaymentMethod: null,
  setSelectedPaymentMethod: jest.fn(),
  paymentMethodsLoading: false,
  paymentMethodsError: null,
  paymentMethodsFetching: false,
  paymentMethodsStatus: 'idle' as const,
  getQuotes: jest.fn(),
  getBuyWidgetData: jest.fn(),
  orders: [],
  getOrderById: jest.fn(),
  addOrder: jest.fn(),
  addPrecreatedOrder: jest.fn(),
  removeOrder: jest.fn(),
  refreshOrder: jest.fn(),
  getOrderFromCallback: jest.fn(),
};

const transakProvider: Provider = {
  id: '/providers/transak',
  name: 'Transak',
  environmentType: 'PRODUCTION',
  description: 'Test provider',
  hqAddress: 'Test Address',
  links: [],
  logos: {
    light: 'https://example.com/logo-light.png',
    dark: 'https://example.com/logo-dark.png',
    height: 24,
    width: 90,
  },
};

const mockProviders: Provider[] = [transakProvider];

function createMockQuote(
  providerId: string,
  providerName: string,
): Quote & { providerInfo?: { name: string } } {
  return {
    provider: providerId,
    quote: {
      amountIn: 100,
      amountOut: 0.05,
      paymentMethod: '/payments/debit-credit-card',
      amountOutInFiat: 98,
    },
    providerInfo: { name: providerName },
  };
}

const mockOnBack = jest.fn();

const moonpayProvider: Provider = {
  id: '/providers/moonpay',
  name: 'MoonPay',
  environmentType: 'PRODUCTION',
  description: 'MoonPay',
  hqAddress: 'MP',
  links: [],
  logos: {
    light: '',
    dark: '',
    height: 24,
    width: 90,
  },
};

interface RenderOptions {
  providers?: Provider[];
  selectedProvider?: Provider | null;
  quotes?: QuotesResponse | null;
  quotesLoading?: boolean;
  quotesError?: string | null;
  showQuotes?: boolean;
  ordersProviders?: string[];
}

function renderWithProvider(
  providers: Provider[] = mockProviders,
  selectedProvider: Provider | null = mockProviders[0],
  options: RenderOptions = {},
) {
  const {
    quotes = null,
    quotesLoading = false,
    quotesError = null,
    showQuotes,
    ordersProviders,
  } = options;

  jest.mocked(useRampsController).mockReturnValue({
    ...defaultMockController,
    providers,
    selectedProvider,
  });
  return renderScreen(
    () => (
      <ProviderSelection
        quotes={quotes}
        quotesLoading={quotesLoading}
        quotesError={quotesError}
        onProviderSelect={jest.fn()}
        onBack={mockOnBack}
        {...(showQuotes !== undefined && { showQuotes })}
        {...(ordersProviders !== undefined && { ordersProviders })}
      />
    ),
    {
      name: 'ProviderSelection',
    },
    {
      state: {
        engine: {
          backgroundState,
        },
      },
    },
  );
}

describe('ProviderSelection', () => {
  beforeEach(() => {
    jest.clearAllMocks();
    jest.mocked(useRampsController).mockReturnValue({
      ...defaultMockController,
    });
  });

  it('renders provider list when no quotes are available', () => {
    const { getByText } = renderWithProvider();
    expect(getByText('Transak')).toBeOnTheScreen();
  });

  it('renders loading state when quotes are loading', () => {
    jest.mocked(useRampsController).mockReturnValue({
      ...defaultMockController,
      userRegion: mockUserRegion,
      selectedToken: mockSelectedToken,
      providers: mockProviders,
      selectedProvider: mockProviders[0],
    });
    const { queryByText } = renderWithProvider(
      mockProviders,
      mockProviders[0],
      {
        quotesLoading: true,
      },
    );
    expect(queryByText('Transak')).not.toBeOnTheScreen();
  });

  it('renders skeleton loading state when quotes are loading', () => {
    jest.mocked(useRampsController).mockReturnValue({
      ...defaultMockController,
      userRegion: mockUserRegion,
      selectedToken: mockSelectedToken,
      providers: mockProviders,
      selectedProvider: mockProviders[0],
    });
    const { queryByText } = renderWithProvider(
      mockProviders,
      mockProviders[0],
      {
        quotesLoading: true,
      },
    );
    expect(queryByText('Transak')).not.toBeOnTheScreen();
  });

  it('shows error message when quotes fail to load', async () => {
    jest.mocked(useRampsController).mockReturnValue({
      ...defaultMockController,
      userRegion: mockUserRegion,
      selectedToken: mockSelectedToken,
      providers: mockProviders,
      selectedProvider: mockProviders[0],
    });
    const { getByText } = renderWithProvider(mockProviders, mockProviders[0], {
      quotesError: 'Failed to load quotes',
    });

    await waitFor(() => {
      expect(getByText('Failed to load quotes')).toBeOnTheScreen();
    });
  });

  it('calls onBack when back button is pressed', () => {
    const { getByTestId } = renderWithProvider();
    fireEvent.press(getByTestId('button-icon'));
    expect(mockOnBack).toHaveBeenCalled();
  });

  it('renders providers directly when quotes load but none are available', async () => {
    jest.mocked(useRampsController).mockReturnValue({
      ...defaultMockController,
      userRegion: mockUserRegion,
      selectedToken: mockSelectedToken,
      providers: mockProviders,
      selectedProvider: mockProviders[0],
    });
    const { getByText } = renderWithProvider(mockProviders, mockProviders[0], {
      showQuotes: true,
      quotes: {
        success: [],
        sorted: [],
        error: [],
        customActions: [],
      },
    });

    await waitFor(() => {
      expect(getByText('Transak')).toBeOnTheScreen();
    });
  });

  it('filters out custom-action quotes when displaying provider quote', async () => {
    const transakQuote = createMockQuote('/providers/transak', 'Transak');
    const customActionQuote = {
      ...transakQuote,
      quote: { ...transakQuote.quote, isCustomAction: true },
    };

    jest.mocked(useRampsController).mockReturnValue({
      ...defaultMockController,
      userRegion: mockUserRegion,
      selectedToken: mockSelectedToken,
      providers: mockProviders,
      selectedProvider: mockProviders[0],
    });

    const { getByText } = renderWithProvider(mockProviders, mockProviders[0], {
      quotes: {
        success: [customActionQuote, transakQuote],
        sorted: [],
        error: [],
        customActions: [],
      },
    });

    await waitFor(() => {
      expect(getByText('Transak')).toBeOnTheScreen();
    });
  });

  it('filters out quotes for providers not in the providers array', async () => {
    const transakQuote = createMockQuote('/providers/transak', 'Transak');
    const stripeQuote = createMockQuote('/providers/stripe', 'Stripe');

    jest.mocked(useRampsController).mockReturnValue({
      ...defaultMockController,
      userRegion: mockUserRegion,
      selectedToken: mockSelectedToken,
      providers: [transakProvider],
      selectedProvider: null,
    });

    const { getByText, queryByText } = renderWithProvider(
      [transakProvider],
      null,
      {
        quotes: {
          success: [transakQuote, stripeQuote],
          sorted: [],
          error: [],
          customActions: [],
        },
      },
    );

    await waitFor(() => {
      expect(getByText('Transak')).toBeTruthy();
    });
    expect(queryByText('Stripe')).not.toBeOnTheScreen();
  });

  it('renders empty state when there are no providers', () => {
    const { getByText } = renderWithProvider([], null, {
      showQuotes: true,
      quotes: {
        success: [],
        sorted: [],
        error: [],
        customActions: [],
      },
    });

    expect(getByText('No providers available.')).toBeOnTheScreen();
  });

  it('renders Other options separator between quoted and non-quoted providers', async () => {
    jest.mocked(useRampsController).mockReturnValue({
      ...defaultMockController,
      userRegion: mockUserRegion,
      selectedToken: mockSelectedToken,
      providers: [transakProvider, moonpayProvider],
      selectedProvider: transakProvider,
    });

    const transakQuote = createMockQuote('/providers/transak', 'Transak');

    const { getByText } = renderWithProvider(
      [transakProvider, moonpayProvider],
      transakProvider,
      {
        quotes: {
          success: [transakQuote],
          sorted: [{ sortBy: 'reliability', ids: ['/providers/transak'] }],
          error: [],
          customActions: [],
        },
      },
    );

    await waitFor(() => {
      expect(getByText('Other options')).toBeOnTheScreen();
    });
    expect(getByText('MoonPay')).toBeOnTheScreen();
  });

  it('shows Best rate tag when quote metadata has isBestRate', async () => {
    jest.mocked(useRampsController).mockReturnValue({
      ...defaultMockController,
      userRegion: mockUserRegion,
      selectedToken: mockSelectedToken,
      providers: mockProviders,
      selectedProvider: null,
    });

    const bestRateQuote = {
      ...createMockQuote('/providers/transak', 'Transak'),
      metadata: { tags: { isBestRate: true } },
    };

    const { getByText } = renderWithProvider(mockProviders, null, {
      quotes: {
        success: [bestRateQuote],
        sorted: [],
        error: [],
        customActions: [],
      },
    });

    await waitFor(() => {
      expect(getByText('Best rate')).toBeOnTheScreen();
    });
  });

  it('separates providers by supportedCryptoCurrencies when quotes are not available', () => {
    const musdAssetId = 'eip155:1/erc20:0xmusd';
    if (!mockSelectedToken) {
      throw new Error('Expected mockSelectedToken to be defined');
    }
    const supportedProvider: Provider = {
      ...transakProvider,
      id: '/providers/supported',
      name: 'SupportedProvider',
      supportedCryptoCurrencies: {
        [musdAssetId]: true,
      },
    };
    const unsupportedProvider: Provider = {
      ...transakProvider,
      id: '/providers/unsupported',
      name: 'UnsupportedProvider',
      supportedCryptoCurrencies: {
        'eip155:1/slip44:60': true,
      },
    };

    const allProviders = [supportedProvider, unsupportedProvider];

    jest.mocked(useRampsController).mockReturnValue({
      ...defaultMockController,
      userRegion: mockUserRegion,
      selectedToken: {
        ...mockSelectedToken,
        assetId: musdAssetId,
      },
      providers: allProviders,
      selectedProvider: null,
    });

    const { getByText } = renderScreen(
      () => (
        <ProviderSelection
          quotes={null}
          quotesLoading={false}
          quotesError={null}
          showQuotes={false}
          onProviderSelect={jest.fn()}
          onBack={mockOnBack}
        />
      ),
      { name: 'ProviderSelection' },
      { state: { engine: { backgroundState } } },
    );

    expect(getByText('SupportedProvider')).toBeOnTheScreen();
    expect(getByText('UnsupportedProvider')).toBeOnTheScreen();
    expect(getByText('Other options')).toBeOnTheScreen();
  });

  it('shows Previously used tag when provider is in ordersProviders', async () => {
    jest.mocked(useRampsController).mockReturnValue({
      ...defaultMockController,
      userRegion: mockUserRegion,
      selectedToken: mockSelectedToken,
      providers: mockProviders,
      selectedProvider: null,
    });

    const { getByText } = renderWithProvider(mockProviders, null, {
      ordersProviders: ['/providers/transak'],
      quotes: {
        success: [createMockQuote('/providers/transak', 'Transak')],
        sorted: [],
        error: [],
        customActions: [],
      },
    });

    await waitFor(() => {
      expect(getByText('Previously used')).toBeOnTheScreen();
    });
  });

  it('shows Previously used tag when a canonical provider id matches a legacy prefixed order id', async () => {
    const canonicalTransak: Provider = { ...transakProvider, id: 'transak' };

    const { getByText } = renderWithProvider([canonicalTransak], null, {
      ordersProviders: ['/providers/transak'],
      quotes: {
        success: [createMockQuote('transak', 'Transak')],
        sorted: [],
        error: [],
        customActions: [],
      },
    });

    await waitFor(() => {
      expect(getByText('Previously used')).toBeOnTheScreen();
    });
  });

  it('shows Previously used tag when a legacy prefixed provider id matches a canonical order id', async () => {
    const { getByText } = renderWithProvider(mockProviders, null, {
      ordersProviders: ['transak'],
      quotes: {
        success: [createMockQuote('/providers/transak', 'Transak')],
        sorted: [],
        error: [],
        customActions: [],
      },
    });

    await waitFor(() => {
      expect(getByText('Previously used')).toBeOnTheScreen();
    });
  });

  it('does not show Previously used tag when a similar id does not canonically match', async () => {
    const canonicalTransakNative: Provider = {
      ...transakProvider,
      id: 'transak-native',
    };

    const { queryByText } = renderWithProvider([canonicalTransakNative], null, {
      ordersProviders: ['/providers/transak'],
      quotes: {
        success: [createMockQuote('transak-native', 'Transak')],
        sorted: [],
        error: [],
        customActions: [],
      },
    });

    await waitFor(() => {
      expect(queryByText('Transak')).toBeOnTheScreen();
    });
    expect(queryByText('Previously used')).toBeNull();
  });

  it('shows provider error subtitle and prevents selection when provider has no matched quote', async () => {
    const onProviderSelect = jest.fn();
    jest.mocked(useRampsController).mockReturnValue({
      ...defaultMockController,
      userRegion: mockUserRegion,
      selectedToken: mockSelectedToken,
      providers: [transakProvider, moonpayProvider],
      selectedProvider: null,
    });

    const { getByText } = renderScreen(
      () => (
        <ProviderSelection
          quotes={{
            success: [createMockQuote('/providers/transak', 'Transak')],
            sorted: [],
            error: [
              {
                provider: '/providers/moonpay',
                error: 'Minimum purchase is 25 USD',
              },
            ],
            customActions: [],
          }}
          quotesLoading={false}
          quotesError={null}
          onProviderSelect={onProviderSelect}
          onBack={mockOnBack}
        />
      ),
      { name: 'ProviderSelection' },
      { state: { engine: { backgroundState } } },
    );

    await waitFor(() => {
      expect(getByText('Minimum purchase is 25 USD')).toBeOnTheScreen();
    });

    fireEvent.press(getByText('MoonPay'));
    expect(onProviderSelect).not.toHaveBeenCalled();
  });

  it('hides the provider tag when the provider is unavailable', async () => {
    jest.mocked(useRampsController).mockReturnValue({
      ...defaultMockController,
      userRegion: mockUserRegion,
      selectedToken: mockSelectedToken,
      providers: [transakProvider, moonpayProvider],
      selectedProvider: null,
    });

    const { queryByText } = renderScreen(
      () => (
        <ProviderSelection
          quotes={{
            success: [createMockQuote('/providers/transak', 'Transak')],
            sorted: [],
            error: [
              {
                provider: '/providers/moonpay',
                error: 'Minimum purchase is 10 EUR',
              },
            ],
            customActions: [],
          }}
          quotesLoading={false}
          quotesError={null}
          ordersProviders={['/providers/moonpay']}
          onProviderSelect={jest.fn()}
          onBack={mockOnBack}
        />
      ),
      { name: 'ProviderSelection' },
      { state: { engine: { backgroundState } } },
    );

    expect(queryByText('Previously used')).toBeNull();
    expect(queryByText('Minimum purchase is 10 EUR')).toBeOnTheScreen();
  });

  it('shows a generic message instead of a non-limit provider error', async () => {
    jest.mocked(useRampsController).mockReturnValue({
      ...defaultMockController,
      userRegion: mockUserRegion,
      selectedToken: mockSelectedToken,
      providers: [transakProvider, moonpayProvider],
      selectedProvider: null,
    });

    const { getByText, queryByText } = renderScreen(
      () => (
        <ProviderSelection
          quotes={{
            success: [createMockQuote('/providers/transak', 'Transak')],
            sorted: [],
            error: [
              {
                provider: '/providers/moonpay',
                error: '[object Object]',
              },
            ],
            customActions: [],
          }}
          quotesLoading={false}
          quotesError={null}
          onProviderSelect={jest.fn()}
          onBack={mockOnBack}
        />
      ),
      { name: 'ProviderSelection' },
      { state: { engine: { backgroundState } } },
    );

    await waitFor(() => {
      expect(getByText('Quote unavailable.')).toBeOnTheScreen();
    });
    expect(queryByText('[object Object]')).toBeNull();
  });

  it('keeps provider selectable when it has a matched quote even if an error entry exists', async () => {
    const onProviderSelect = jest.fn();
    jest.mocked(useRampsController).mockReturnValue({
      ...defaultMockController,
      userRegion: mockUserRegion,
      selectedToken: mockSelectedToken,
      providers: [transakProvider],
      selectedProvider: null,
    });

    const { getByText, queryByText } = renderScreen(
      () => (
        <ProviderSelection
          quotes={{
            success: [createMockQuote('/providers/transak', 'Transak')],
            sorted: [],
            error: [
              {
                provider: '/providers/transak',
                error: 'Stale error from a previous payment method',
              },
            ],
            customActions: [],
          }}
          quotesLoading={false}
          quotesError={null}
          onProviderSelect={onProviderSelect}
          onBack={mockOnBack}
        />
      ),
      { name: 'ProviderSelection' },
      { state: { engine: { backgroundState } } },
    );

    expect(
      queryByText('Stale error from a previous payment method'),
    ).toBeNull();
    fireEvent.press(getByText('Transak'));
    expect(onProviderSelect).toHaveBeenCalledWith(transakProvider);
  });
});