add test coverage

src/buy/components/BuyOnrampItem.test.tsx

@@ -0,0 +1,87 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { beforeEach, describe, expect, it, Mock, vi } from 'vitest';
+import { BuyOnrampItem } from './BuyOnrampItem';
+import { useBuyContext } from './BuyProvider';
+
+vi.mock('./BuyProvider', () => ({
+  useBuyContext: vi.fn(),
+}));
+
+vi.mock('../../internal/svg', () => ({
+  appleSvg: <svg data-testid="appleSvg" />,
+  cardSvg: <svg data-testid="cardSvg" />,
+  coinbaseLogoSvg: <svg data-testid="coinbaseLogoSvg" />,
+}));
+
+describe('BuyOnrampItem', () => {
+  const mockSetIsDropdownOpen = vi.fn();
+  const mockOnClick = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    (useBuyContext as Mock).mockReturnValue({
+      setIsDropdownOpen: mockSetIsDropdownOpen,
+    });
+  });
+
+  it('renders correctly with provided props', () => {
+    render(
+      <BuyOnrampItem
+        name="Apple Pay"
+        description="Fast and secure payments."
+        onClick={mockOnClick}
+        icon="applePay"
+      />,
+    );
+
+    expect(screen.getByRole('button')).toBeInTheDocument();
+    expect(screen.getByText('Apple Pay')).toBeInTheDocument();
+    expect(screen.getByText('Fast and secure payments.')).toBeInTheDocument();
+    expect(screen.getByTestId('appleSvg')).toBeInTheDocument();
+  });
+
+  it('handles icon rendering based on the icon prop', () => {
+    render(
+      <BuyOnrampItem
+        name="Credit Card"
+        description="Use your card to pay."
+        onClick={mockOnClick}
+        icon="creditCard"
+      />,
+    );
+
+    expect(screen.getByTestId('cardSvg')).toBeInTheDocument();
+  });
+
+  it('triggers onClick and closes dropdown on button click', () => {
+    render(
+      <BuyOnrampItem
+        name="Coinbase Pay"
+        description="Pay using your Coinbase account."
+        onClick={mockOnClick}
+        icon="coinbasePay"
+      />,
+    );
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    expect(mockSetIsDropdownOpen).toHaveBeenCalledWith(false);
+    expect(mockOnClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('applies correct styling and attributes to the button', () => {
+    render(
+      <BuyOnrampItem
+        name="Apple Pay"
+        description="Fast and secure payments."
+        onClick={mockOnClick}
+        icon="applePay"
+      />,
+    );
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveClass('flex items-center gap-2 rounded-lg p-2');
+    expect(button).toHaveAttribute('type', 'button');
+  });
+});

src/buy/components/BuyTokenItem.test.tsx

@@ -0,0 +1,110 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { beforeEach, describe, expect, it, Mock, vi } from 'vitest';
+import { BuyTokenItem } from './BuyTokenItem';
+import { useBuyContext } from './BuyProvider';
+import { getRoundedAmount } from '../../core/utils/getRoundedAmount';
+import { ethToken } from '../../token/constants';
+
+vi.mock('./BuyProvider', () => ({
+  useBuyContext: vi.fn(),
+}));
+
+vi.mock('../../core/utils/getRoundedAmount', () => ({
+  getRoundedAmount: vi.fn((value) => value),
+}));
+
+const ethSwapUnit = {
+  token: ethToken,
+  amount: '10.5',
+  balance: '20',
+  amountUSD: '10.5',
+  loading: false,
+  setAmount: vi.fn(),
+  setAmountUSD: vi.fn(),
+  setLoading: vi.fn(),
+};
+
+describe('BuyTokenItem', () => {
+  const mockHandleSubmit = vi.fn();
+  const mockSetIsDropdownOpen = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    (useBuyContext as Mock).mockReturnValue({
+      handleSubmit: mockHandleSubmit,
+      setIsDropdownOpen: mockSetIsDropdownOpen,
+    });
+  });
+
+  it('renders null when swapUnit is undefined or has no token', () => {
+    const { container } = render(<BuyTokenItem swapUnit={undefined} />);
+    expect(container.firstChild).toBeNull();
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+
+  it('renders correctly with valid swapUnit', () => {
+    render(<BuyTokenItem swapUnit={ethSwapUnit} />);
+
+    expect(screen.getByRole('button')).toBeInTheDocument();
+    expect(screen.getByText('10.5 ETH')).toBeInTheDocument();
+    expect(screen.getByText('Balance: 20')).toBeInTheDocument();
+    const button = screen.getByRole('button');
+    expect(button).toHaveClass('hover:bg-[var(--ock-bg-inverse)]', {
+      exact: false,
+    });
+  });
+
+  it('disables button and applies muted styling when balance is insufficient', () => {
+    const swapUnit = {
+      token: ethToken,
+      amount: '10.5',
+      balance: '5',
+      amountUSD: '10.5',
+      loading: false,
+      setAmount: vi.fn(),
+      setAmountUSD: vi.fn(),
+      setLoading: vi.fn(),
+    };
+
+    render(<BuyTokenItem swapUnit={swapUnit} />);
+
+    const button = screen.getByRole('button');
+    expect(button).toBeDisabled();
+    expect(button).not.toHaveClass('hover:bg-[var(--ock-bg-inverse)]', {
+      exact: false,
+    });
+    expect(screen.getByText('Balance: 5')).toHaveClass('text-xs');
+  });
+
+  it('triggers handleSubmit and closes dropdown on click', () => {
+    render(<BuyTokenItem swapUnit={ethSwapUnit} />);
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    expect(mockSetIsDropdownOpen).toHaveBeenCalledWith(false);
+    expect(mockHandleSubmit).toHaveBeenCalledWith(ethSwapUnit);
+  });
+
+  it('formats amount and balance using getRoundedAmount', () => {
+    const swapUnit = {
+      token: ethToken,
+      amount: '10.5678',
+      balance: '20.1234',
+      amountUSD: '10.5',
+      loading: false,
+      setAmount: vi.fn(),
+      setAmountUSD: vi.fn(),
+      setLoading: vi.fn(),
+    };
+
+    (getRoundedAmount as Mock).mockImplementation((value) => value.slice(0, 4));
+
+    render(<BuyTokenItem swapUnit={swapUnit} />);
+
+    expect(getRoundedAmount).toHaveBeenCalledWith('10.5678', 10);
+    expect(getRoundedAmount).toHaveBeenCalledWith('20.1234', 10);
+    expect(screen.getByText('10.5 ETH')).toBeInTheDocument();
+    expect(screen.getByText('Balance: 20.1')).toBeInTheDocument();
+  });
+});