diff --git a/components/bank/components/__tests__/tokenList.test.tsx b/components/bank/components/__tests__/tokenList.test.tsx index 9e33b14b..c1ec4324 100644 --- a/components/bank/components/__tests__/tokenList.test.tsx +++ b/components/bank/components/__tests__/tokenList.test.tsx @@ -1,9 +1,18 @@ -import { test, expect, afterEach, describe } from 'bun:test'; +import { test, expect, afterEach, describe, mock, jest } from 'bun:test'; import React from 'react'; import matchers from '@testing-library/jest-dom/matchers'; -import { fireEvent, render, screen, cleanup, within, waitFor } from '@testing-library/react'; +import { fireEvent, screen, cleanup, within, waitFor } from '@testing-library/react'; import TokenList from '@/components/bank/components/tokenList'; import { CombinedBalanceInfo } from '@/utils/types'; +import { renderWithChainProvider } from '@/tests/render'; + +// Mock next/router +mock.module('next/router', () => ({ + useRouter: jest.fn().mockReturnValue({ + query: {}, + push: jest.fn(), + }), +})); const mockBalances: CombinedBalanceInfo[] = [ { @@ -52,22 +61,22 @@ describe('TokenList', () => { }); test('renders correctly', () => { - render(); + renderWithChainProvider(); expect(screen.getByText('Your Assets')).toBeInTheDocument(); }); test('displays loading skeleton when isLoading is true', () => { - render(); + renderWithChainProvider(); expect(screen.getByLabelText('skeleton-loader')).toBeInTheDocument(); }); test('displays empty state when there are no balances', () => { - render(); + renderWithChainProvider(); expect(screen.getByText('No tokens found!')).toBeInTheDocument(); }); test('filters balances based on search term', () => { - render(); + renderWithChainProvider(); const searchInput = screen.getByPlaceholderText('Search for a token...'); fireEvent.change(searchInput, { target: { value: 'Token 1' } }); @@ -76,9 +85,9 @@ describe('TokenList', () => { }); test('opens modal with correct denomination information', async () => { - render(); + renderWithChainProvider(); const token1Container = screen.getByLabelText('utoken1'); - const button = within(token1Container).getByRole('button'); + const button = within(token1Container).getByLabelText('info-utoken1'); fireEvent.click(button); await waitFor(() => { @@ -90,13 +99,13 @@ describe('TokenList', () => { }); test('displays correct balance for each token', () => { - render(); - expect(screen.getByText('0.001 TOKEN 1')).toBeInTheDocument(); - expect(screen.getByText('0.002 TOKEN 2')).toBeInTheDocument(); + renderWithChainProvider(); + expect(screen.getByText('0.001')).toBeInTheDocument(); + expect(screen.getByText('0.002')).toBeInTheDocument(); }); test('displays correct base denomination for each token', () => { - render(); + renderWithChainProvider(); expect(screen.getByText('utoken1')).toBeInTheDocument(); expect(screen.getByText('utoken2')).toBeInTheDocument(); }); diff --git a/components/bank/components/tokenList.tsx b/components/bank/components/tokenList.tsx index 1be86418..86107519 100644 --- a/components/bank/components/tokenList.tsx +++ b/components/bank/components/tokenList.tsx @@ -125,7 +125,7 @@ export default function TokenList({
{isLoading ? ( -
+
{[...Array(pageSize)].map((_, i) => (