test: add BalanceCard component coverage

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

package.json

@@ -20,6 +20,7 @@
   },
   "devDependencies": {
     "@types/node": "^20.12.7",
+    "@types/jest": "^29.5.14",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.1",
     "autoprefixer": "^10.4.19",

src/components/BalanceCard.test.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { BalanceCard } from './BalanceCard';
+import { useVault } from '@/hooks/useVault';
+
+jest.mock('@/hooks/useVault', () => ({
+  useVault: jest.fn(),
+}));
+
+const mockUseVault = useVault as jest.Mock;
+
+const defaultVaultState = {
+  balance: 15000000000n,
+  totalShares: 100000n,
+  isLoading: false,
+  isRefreshing: false,
+  error: null,
+  deposit: jest.fn(),
+  withdraw: jest.fn(),
+  claimRewards: jest.fn(),
+  refresh: jest.fn(),
+};
+
+const renderBalanceCard = (overrides = {}) => {
+  const state = {
+    ...defaultVaultState,
+    refresh: jest.fn(),
+    claimRewards: jest.fn(),
+    ...overrides,
+  };
+
+  mockUseVault.mockReturnValue(state);
+  render(<BalanceCard />);
+
+  return state;
+};
+
+describe('BalanceCard', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders the current balance and pending rewards', () => {
+    renderBalanceCard();
+
+    expect(screen.getByText('Vault Balance')).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: '1500 XLM' })).toBeInTheDocument();
+    expect(screen.getByText('Pending Rewards: 12.5 XLM')).toBeInTheDocument();
+  });
+
+  it('shows a loading placeholder and disables actions while loading', () => {
+    renderBalanceCard({ isLoading: true });
+
+    expect(screen.getByRole('heading', { name: '...' })).toBeInTheDocument();
+
+    const [refreshButton, claimButton] = screen.getAllByRole('button');
+    expect(refreshButton).toBeDisabled();
+    expect(claimButton).toBeDisabled();
+  });
+
+  it('renders zero balance clearly', () => {
+    renderBalanceCard({ balance: 0n });
+
+    expect(screen.getByRole('heading', { name: '0 XLM' })).toBeInTheDocument();
+  });
+
+  it('formats atomic Stellar units as XLM', () => {
+    renderBalanceCard({ balance: 123456789n });
+
+    expect(screen.getByRole('heading', { name: '12.3456789 XLM' })).toBeInTheDocument();
+  });
+
+  it('calls vault actions from the refresh and claim buttons', () => {
+    const refresh = jest.fn();
+    const claimRewards = jest.fn();
+
+    renderBalanceCard({ refresh, claimRewards });
+
+    const [refreshButton, claimButton] = screen.getAllByRole('button');
+    fireEvent.click(refreshButton);
+    fireEvent.click(claimButton);
+
+    expect(refresh).toHaveBeenCalledTimes(1);
+    expect(claimRewards).toHaveBeenCalledTimes(1);
+  });
+});

src/components/TransactionHistory.test.tsx

@@ -21,7 +21,9 @@ describe('TransactionHistory', () => {
     // So it should show 1 successful deposit.
     const transactions = screen.getAllByRole('link');
     expect(transactions.length).toBe(1);
-    expect(screen.getByText('500.00 XLM')).toBeInTheDocument();
+    expect(
+      screen.getByText((_, element) => element?.textContent === '+500.00 XLM')
+    ).toBeInTheDocument();
   });
 
   it('filters by failed transactions', () => {

src/components/TransactionHistory.tsx

@@ -159,7 +159,7 @@ export const TransactionHistory: React.FC = () => {
             </div>
             <p className="text-sm text-slate-600 font-bold">No transactions found</p>
             <p className="text-xs text-slate-400 mt-1.5 max-w-[180px]">
-              We couldn't find any activities matching your current filters.
+              We couldn&apos;t find any activities matching your current filters.
             </p>
           </div>
         )}
@@ -172,4 +172,3 @@ export const TransactionHistory: React.FC = () => {
     </div>
   );
 };
-

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es2020",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
@@ -18,6 +18,7 @@
     "paths": {
       "@/*": ["src/*"]
     },
+    "types": ["jest", "@testing-library/jest-dom"],
     "plugins": [
       {
         "name": "next"