diff --git a/components/bank/components/__tests__/historyBox.test.tsx b/components/bank/components/__tests__/historyBox.test.tsx index 32683f2d..df847b69 100644 --- a/components/bank/components/__tests__/historyBox.test.tsx +++ b/components/bank/components/__tests__/historyBox.test.tsx @@ -3,6 +3,9 @@ import { screen, cleanup, fireEvent } from '@testing-library/react'; import { HistoryBox } from '../historyBox'; import { renderWithChainProvider } from '@/tests/render'; import { mockTransactions } from '@/tests/mock'; +import matchers from '@testing-library/jest-dom/matchers'; + +expect.extend(matchers); // Mock the hooks mock.module('@/hooks', () => ({ @@ -22,7 +25,7 @@ mock.module('@/hooks', () => ({ }), useGetFilteredTxAndSuccessfulProposals: () => ({ sendTxs: mockTransactions, - totalPages: 1, + totalPages: 2, isLoading: false, isError: false, }), @@ -36,17 +39,19 @@ describe('HistoryBox', () => { test('renders correctly', () => { renderWithChainProvider(); - expect(screen.getByText('Transaction History')).toBeTruthy(); + expect(screen.getByText('Transaction History')).toBeInTheDocument(); }); test('displays transactions', () => { renderWithChainProvider(); + expect(screen.getByText('Sent')).toBeInTheDocument(); + expect(screen.getByText('Received')).toBeInTheDocument(); - const sentText = screen.getByText('Sent'); - const receivedText = screen.getByText('Received'); + const minted = screen.getAllByText('Minted'); + const burned = screen.getAllByText('Burned'); - expect(sentText).toBeTruthy(); - expect(receivedText).toBeTruthy(); + expect(minted.length).toBe(6); + expect(burned.length).toBe(2); }); test('opens modal when clicking on a transaction', () => { @@ -56,27 +61,26 @@ describe('HistoryBox', () => { if (transactionElement) { fireEvent.click(transactionElement); - expect(screen.getByLabelText('tx_info_modal')).toBeTruthy(); + expect(screen.getByLabelText('tx_info_modal')).toBeInTheDocument(); } }); test('formats amount correctly', () => { renderWithChainProvider(); - - const sentAmount = screen.queryByText('-1 TOKEN'); - const receivedAmount = screen.queryByText('+2 TOKEN'); - - expect(sentAmount).toBeTruthy(); - expect(receivedAmount).toBeTruthy(); + expect(screen.queryByText('-1.00QT TOKEN')).toBeInTheDocument(); // Send + expect(screen.queryByText('+2.00Q TOKEN')).toBeInTheDocument(); // Receive + expect(screen.queryByText('+3.00T TOKEN')).toBeInTheDocument(); // Mint + expect(screen.queryByText('-1.20B TOKEN')).toBeInTheDocument(); // Burn + expect(screen.queryByText('+5.00M TOKEN')).toBeInTheDocument(); // Payout + expect(screen.queryByText('-2.1 TOKEN')).toBeInTheDocument(); // Burn held balance + expect(screen.queryByText('+2.3 TOKEN')).toBeInTheDocument(); // Payout + expect(screen.queryByText('+2.4 TOKEN')).toBeInTheDocument(); // Payout + expect(screen.queryByText('+2.5 TOKEN')).toBeInTheDocument(); // Payout + expect(screen.queryByText('+2.6 TOKEN')).toBeInTheDocument(); // Payout }); - test('displays both sent and received transactions', () => { - renderWithChainProvider(); - - const sentText = screen.getByText('Sent'); - const receivedText = screen.getByText('Received'); - - expect(sentText).toBeTruthy(); - expect(receivedText).toBeTruthy(); + test('displays loading state', () => { + renderWithChainProvider(); + expect(screen.getByLabelText('skeleton')).toBeInTheDocument(); }); }); diff --git a/components/bank/components/historyBox.tsx b/components/bank/components/historyBox.tsx index 42f0dae7..2bd17ba7 100644 --- a/components/bank/components/historyBox.tsx +++ b/components/bank/components/historyBox.tsx @@ -218,7 +218,7 @@ export function HistoryBox({ {isLoading ? (
-
+
{[...Array(3)].map((_, groupIndex) => (
diff --git a/tests/mock.ts b/tests/mock.ts index 509d54cc..4cde6284 100644 --- a/tests/mock.ts +++ b/tests/mock.ts @@ -195,6 +195,7 @@ export const defaultChain: Chain = { }; export const mockTransactions: TransactionGroup[] = [ + // Send { tx_hash: 'hash1', block_number: 1, @@ -203,9 +204,10 @@ export const mockTransactions: TransactionGroup[] = [ tx_type: HistoryTxType.SEND, from_address: 'address1', to_address: 'address2', - amount: [{ amount: '1000000', denom: 'utoken' }], + amount: [{ amount: '1000000000000000000000000', denom: 'utoken' }], }, }, + // Receive { tx_hash: 'hash2', block_number: 2, @@ -214,7 +216,103 @@ export const mockTransactions: TransactionGroup[] = [ tx_type: HistoryTxType.SEND, from_address: 'address2', to_address: 'address1', - amount: [{ amount: '2000000', denom: 'utoken' }], + amount: [{ amount: '2000000000000000000000', denom: 'utoken' }], + }, + }, + // Minted + { + tx_hash: 'hash3', + block_number: 3, + formatted_date: '2023-05-03T12:00:00Z', + data: { + tx_type: HistoryTxType.MINT, + from_address: 'address1', + to_address: 'address2', + amount: [{ amount: '3000000000000000000', denom: 'utoken' }], + }, + }, + // Burned + { + tx_hash: 'hash4', + block_number: 4, + formatted_date: '2023-05-04T12:00:00Z', + data: { + tx_type: HistoryTxType.BURN, + from_address: 'address2', + to_address: 'address1', + amount: [{ amount: '1200000000000000', denom: 'utoken' }], + }, + }, + // Minted + { + tx_hash: 'hash5', + block_number: 5, + formatted_date: '2023-05-05T12:00:00Z', + data: { + tx_type: HistoryTxType.PAYOUT, + from_address: 'address1', + to_address: 'address2', + amount: [{ amount: '5000000000000', denom: 'utoken' }], + }, + }, + // Burned + { + tx_hash: 'hash6', + block_number: 6, + formatted_date: '2023-05-06T12:00:00Z', + data: { + tx_type: HistoryTxType.BURN_HELD_BALANCE, + from_address: 'address2', + to_address: 'address1', + amount: [{ amount: '2100000', denom: 'utoken' }], + }, + }, + // Minted + { + tx_hash: 'hash7', + block_number: 7, + formatted_date: '2023-05-07T12:00:00Z', + data: { + tx_type: HistoryTxType.PAYOUT, + from_address: 'address2', + to_address: 'address1', + amount: [{ amount: '2300000', denom: 'utoken' }], + }, + }, + // Minted + { + tx_hash: 'hash8', + block_number: 8, + formatted_date: '2023-05-08T12:00:00Z', + data: { + tx_type: HistoryTxType.PAYOUT, + from_address: 'address2', + to_address: 'address1', + amount: [{ amount: '2400000', denom: 'utoken' }], + }, + }, + // Minted + { + tx_hash: 'hash9', + block_number: 9, + formatted_date: '2023-05-09T12:00:00Z', + data: { + tx_type: HistoryTxType.PAYOUT, + from_address: 'address2', + to_address: 'address1', + amount: [{ amount: '2500000', denom: 'utoken' }], + }, + }, + // Minted + { + tx_hash: 'hash10', + block_number: 10, + formatted_date: '2023-05-10T12:00:00Z', + data: { + tx_type: HistoryTxType.PAYOUT, + from_address: 'address2', + to_address: 'address1', + amount: [{ amount: '2600000', denom: 'utoken' }], }, }, ];