add test coverage

src/earn/components/DepositBalance.test.tsx

@@ -0,0 +1,77 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { DepositBalance } from './DepositBalance';
+import { useEarnContext } from './EarnProvider';
+import type { Address } from 'viem';
+
+vi.mock('./EarnProvider', () => ({
+  useEarnContext: vi.fn(),
+}));
+
+const baseContext = {
+  convertedBalance: '1000',
+  setDepositAmount: vi.fn(),
+  vaultAddress: '0x123' as Address,
+  depositAmount: '0',
+  depositedAmount: '0',
+  withdrawAmount: '0',
+  setWithdrawAmount: vi.fn(),
+};
+
+describe('DepositBalance', () => {
+  it('renders the converted balance and subtitle correctly', () => {
+    vi.mocked(useEarnContext).mockReturnValue(baseContext);
+
+    render(<DepositBalance className="test-class" />);
+
+    expect(screen.getByText('1000 USDC')).toBeInTheDocument();
+    expect(screen.getByText('Available to deposit')).toBeInTheDocument();
+  });
+
+  it('calls setDepositAmount with convertedBalance when the action button is clicked', () => {
+    const mockSetDepositAmount = vi.fn();
+    const mockContext = {
+      ...baseContext,
+      convertedBalance: '1000',
+      setDepositAmount: mockSetDepositAmount,
+    };
+
+    vi.mocked(useEarnContext).mockReturnValue(mockContext);
+
+    render(<DepositBalance className="test-class" />);
+
+    const actionButton = screen.getByText('Use max');
+    fireEvent.click(actionButton);
+
+    expect(mockSetDepositAmount).toHaveBeenCalledWith('1000');
+  });
+
+  it('does not render the action button when convertedBalance is null', () => {
+    const mockContext = {
+      ...baseContext,
+      convertedBalance: '',
+      setDepositAmount: vi.fn(),
+    };
+
+    vi.mocked(useEarnContext).mockReturnValue(mockContext);
+
+    render(<DepositBalance className="test-class" />);
+
+    expect(screen.queryByText('Use max')).not.toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    const mockContext = {
+      ...baseContext,
+      convertedBalance: '1000',
+      setDepositAmount: vi.fn(),
+    };
+
+    vi.mocked(useEarnContext).mockReturnValue(mockContext);
+
+    render(<DepositBalance className="custom-class" />);
+
+    const container = screen.getByTestId('ockEarnBalance');
+    expect(container).toHaveClass('custom-class');
+  });
+});

src/earn/components/EarnBalance.test.tsx

@@ -0,0 +1,80 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { EarnBalance } from './EarnBalance';
+
+describe('EarnBalance', () => {
+  it('renders the title and subtitle correctly', () => {
+    render(
+      <EarnBalance
+        title="Test Title"
+        subtitle="Test Subtitle"
+        showAction={false}
+        onActionPress={() => {}}
+      />,
+    );
+
+    expect(screen.getByText('Test Title')).toBeInTheDocument();
+    expect(screen.getByText('Test Subtitle')).toBeInTheDocument();
+  });
+
+  it('renders the action button when showAction is true', () => {
+    render(
+      <EarnBalance
+        title="Test Title"
+        subtitle="Test Subtitle"
+        showAction={true}
+        onActionPress={() => {}}
+      />,
+    );
+
+    expect(screen.getByText('Use max')).toBeInTheDocument();
+  });
+
+  it('does not render the action button when showAction is false', () => {
+    render(
+      <EarnBalance
+        title="Test Title"
+        subtitle="Test Subtitle"
+        showAction={false}
+        onActionPress={() => {}}
+      />,
+    );
+
+    expect(screen.queryByText('Use max')).not.toBeInTheDocument();
+  });
+
+  it('calls onActionPress when the action button is clicked', () => {
+    const mockOnActionPress = vi.fn();
+
+    render(
+      <EarnBalance
+        title="Test Title"
+        subtitle="Test Subtitle"
+        showAction={true}
+        onActionPress={mockOnActionPress}
+      />,
+    );
+
+    const actionButton = screen.getByText('Use max');
+    fireEvent.click(actionButton);
+
+    expect(mockOnActionPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('applies custom className', () => {
+    const customClass = 'custom-class';
+
+    render(
+      <EarnBalance
+        title="Test Title"
+        subtitle="Test Subtitle"
+        className={customClass}
+        showAction={false}
+        onActionPress={() => {}}
+      />,
+    );
+
+    const container = screen.getByTestId('ockEarnBalance');
+    expect(container).toHaveClass(customClass);
+  });
+});

src/earn/components/EarnBalance.tsx

@@ -16,6 +16,7 @@ export function EarnBalance({
         'flex p-3 px-4 items-center gap-4 justify-between',
         className,
       )}
+      data-testid="ockEarnBalance"
     >
       <div className={cn('flex flex-col', color.foreground)}>
         <div className={text.headline}>{title}</div>

src/earn/components/EarnProvider.test.tsx

@@ -1,8 +1,31 @@
 import { renderHook } from '@testing-library/react';
-import { describe, expect, it } from 'vitest';
+import { useGetTokenBalance } from '@/wallet/hooks/useGetTokenBalance';
+import { type Mock, beforeEach, describe, expect, it, vi } from 'vitest';
+import { useAccount } from 'wagmi';
 import { EarnProvider, useEarnContext } from './EarnProvider';
 
+vi.mock('@/wallet/hooks/useGetTokenBalance', () => ({
+  useGetTokenBalance: vi.fn(),
+}));
+
+vi.mock('wagmi', async (importOriginal) => {
+  return {
+    ...(await importOriginal<typeof import('wagmi')>()),
+    useAccount: vi.fn(),
+  };
+});
+
 describe('EarnProvider', () => {
+  beforeEach(() => {
+    (useAccount as Mock).mockReturnValue({
+      address: '0x123',
+    });
+    (useGetTokenBalance as Mock).mockReturnValue({
+      convertedBalance: '0.0',
+      error: null,
+    });
+  });
+
   const wrapper = ({ children }: { children: React.ReactNode }) => (
     <EarnProvider vaultAddress="0x123">{children}</EarnProvider>
   );

src/earn/components/WithdrawBalance.test.tsx

@@ -0,0 +1,77 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { WithdrawBalance } from './WithdrawBalance';
+import { useEarnContext } from './EarnProvider';
+import type { Address } from 'viem';
+
+vi.mock('./EarnProvider', () => ({
+  useEarnContext: vi.fn(),
+}));
+
+const baseContext = {
+  convertedBalance: '0',
+  setDepositAmount: vi.fn(),
+  vaultAddress: '0x123' as Address,
+  depositAmount: '0',
+  depositedAmount: '1000',
+  withdrawAmount: '0',
+  setWithdrawAmount: vi.fn(),
+};
+
+describe('WithdrawBalance', () => {
+  it('renders the converted balance and subtitle correctly', () => {
+    vi.mocked(useEarnContext).mockReturnValue(baseContext);
+
+    render(<WithdrawBalance className="test-class" />);
+
+    expect(screen.getByText('1000 USDC')).toBeInTheDocument();
+    expect(screen.getByText('Available to withdraw')).toBeInTheDocument();
+  });
+
+  it('calls setWithdrawAmount with convertedBalance when the action button is clicked', () => {
+    const mocksetWithdrawAmount = vi.fn();
+    const mockContext = {
+      ...baseContext,
+      depositedAmount: '1000',
+      setWithdrawAmount: mocksetWithdrawAmount,
+    };
+
+    vi.mocked(useEarnContext).mockReturnValue(mockContext);
+
+    render(<WithdrawBalance className="test-class" />);
+
+    const actionButton = screen.getByText('Use max');
+    fireEvent.click(actionButton);
+
+    expect(mocksetWithdrawAmount).toHaveBeenCalledWith('1000');
+  });
+
+  it('does not render the action button when convertedBalance is null', () => {
+    const mockContext = {
+      ...baseContext,
+      depositedAmount: '',
+      setWithdrawAmount: vi.fn(),
+    };
+
+    vi.mocked(useEarnContext).mockReturnValue(mockContext);
+
+    render(<WithdrawBalance className="test-class" />);
+
+    expect(screen.queryByText('Use max')).not.toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    const mockContext = {
+      ...baseContext,
+      depositedAmount: '1000',
+      setWithdrawAmount: vi.fn(),
+    };
+
+    vi.mocked(useEarnContext).mockReturnValue(mockContext);
+
+    render(<WithdrawBalance className="custom-class" />);
+
+    const container = screen.getByTestId('ockEarnBalance');
+    expect(container).toHaveClass('custom-class');
+  });
+});