From daf6e15f0303b5820886dd44db5c67a968d3ae57 Mon Sep 17 00:00:00 2001 From: Matej Lubej Date: Mon, 10 Jun 2024 07:26:45 +0200 Subject: [PATCH] Add unit tests --- .../__snapshots__/index.test.tsx.snap | 3 - .../__tests__/index.test.tsx | 130 +++++++++++++++++- .../Features/TransactionHistory/index.tsx | 12 +- 3 files changed, 132 insertions(+), 13 deletions(-) delete mode 100644 src/app/pages/AccountPage/Features/TransactionHistory/__tests__/__snapshots__/index.test.tsx.snap diff --git a/src/app/pages/AccountPage/Features/TransactionHistory/__tests__/__snapshots__/index.test.tsx.snap b/src/app/pages/AccountPage/Features/TransactionHistory/__tests__/__snapshots__/index.test.tsx.snap deleted file mode 100644 index 252c97822b..0000000000 --- a/src/app/pages/AccountPage/Features/TransactionHistory/__tests__/__snapshots__/index.test.tsx.snap +++ /dev/null @@ -1,3 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` should match snapshot 1`] = `
`; diff --git a/src/app/pages/AccountPage/Features/TransactionHistory/__tests__/index.test.tsx b/src/app/pages/AccountPage/Features/TransactionHistory/__tests__/index.test.tsx index 5787a519dc..2b4d321304 100644 --- a/src/app/pages/AccountPage/Features/TransactionHistory/__tests__/index.test.tsx +++ b/src/app/pages/AccountPage/Features/TransactionHistory/__tests__/index.test.tsx @@ -1,11 +1,133 @@ import * as React from 'react' -import { render } from '@testing-library/react' +import { render, screen, waitFor } from '@testing-library/react' import { TransactionHistory } from '..' +import { configureAppStore } from '../../../../../../store/configureStore' +import { Provider, useDispatch } from 'react-redux' +import { DeepPartialRootState, RootState } from '../../../../../../types/RootState' +import { Transaction, TransactionType } from 'app/state/transaction/types' + +jest.mock('react-redux', () => ({ + ...jest.requireActual('react-redux'), + useDispatch: jest.fn(), +})) + +const renderCmp = (store: ReturnType) => + render( + + + , + ) + +const getPendingTx = (hash: string): Transaction => ({ + hash, + type: TransactionType.StakingTransfer, + from: 'oasis1qz0k5q8vjqvu4s4nwxyj406ylnflkc4vrcjghuwk', + amount: 1n.toString(), + to: 'oasis1qz0k5q8vjqvu4s4nwxyj406ylnflkc4vrcjghuww', + status: undefined, + fee: undefined, + level: undefined, + round: undefined, + runtimeId: undefined, + runtimeName: undefined, + timestamp: undefined, + nonce: undefined, +}) + +const getTx = (hash: string, nonce: bigint): Transaction => ({ + ...getPendingTx(hash), + status: true, + nonce: nonce.toString() +}) + +const getState = (partialState: { accountNonce?: bigint, pendingLocalTxs?: Transaction[], accountTxs?: Transaction[] } = {}) => { + const accountNonce = partialState.accountNonce === undefined ? 0n : partialState.accountNonce + const pendingLocalTransactions = partialState.pendingLocalTxs === undefined ? [] : partialState.pendingLocalTxs + const accountTxs = partialState.accountTxs === undefined ? [] : partialState.accountTxs + + const state: DeepPartialRootState = { + account: { + loading: false, + address: 'oasis1qz0k5q8vjqvu4s4nwxyj406ylnflkc4vrcjghuwk', + available: 100000000000n.toString(), + delegations: null, + debonding: null, + total: null, + transactions: [...accountTxs], + accountError: undefined, + transactionsError: undefined, + pendingTransactions: { + local: [...pendingLocalTransactions], + testnet: [], + mainnet: [], + }, + nonce: (accountNonce).toString(), + }, + staking: { + delegations: [], + debondingDelegations: [], + }, + wallet: { + selectedWallet: 'oasis1qz0k5q8vjqvu4s4nwxyj406ylnflkc4vrcjghuwk', + wallets: { + oasis1qz0k5q8vjqvu4s4nwxyj406ylnflkc4vrcjghuwk: { + address: 'oasis1qz0k5q8vjqvu4s4nwxyj406ylnflkc4vrcjghuwk', + }, + }, + }, + } + return configureAppStore(state as Partial) +} describe('', () => { - it.skip('should match snapshot', () => { - const component = render() - expect(component.container.firstChild).toMatchSnapshot() + beforeEach(() => { + // Ignore dispatches to fetch account from AccountPage + jest.mocked(useDispatch).mockImplementation(() => jest.fn()) + }) + + it('should not display any pending or completed txs', async () => { + renderCmp(getState()) + + await waitFor(() => expect(() => screen.getByTestId('pending-txs-container')).toThrow()); + await waitFor(() => expect(() => screen.getByTestId('completed-txs-container')).toThrow()); + + expect(await screen.queryByText('account.summary.someTxsInPendingState')).not.toBeInTheDocument() + expect(await screen.findByText('account.summary.noTransactionFound')).toBeInTheDocument() + }) + + it('should display pending txs alert and no transactions', async () => { + renderCmp(getState({ accountNonce: 1n })) + + await waitFor(() => expect(() => screen.getByTestId('pending-txs-container')).toThrow()); + await waitFor(() => expect(() => screen.getByTestId('completed-txs-container')).toThrow()); + + expect(await screen.findByText('account.summary.someTxsInPendingState')).toBeInTheDocument() + expect(await screen.findByText('account.summary.noTransactionFound')).toBeInTheDocument() + expect(await screen.findByRole('link')).toHaveAttribute( + 'href', + 'http://localhost:9001/data/accounts/detail/oasis1qz0k5q8vjqvu4s4nwxyj406ylnflkc4vrcjghuwk', + ) + }) + + it('should display pending txs alert with single pending tx and no completed transactions', async () => { + renderCmp(getState({ accountNonce: 0n, pendingLocalTxs: [getPendingTx('txHash1')] })) + + expect((await screen.getByTestId('pending-txs-container')).childElementCount).toBe(1) + await waitFor(() => expect(() => screen.getByTestId('completed-txs-container')).toThrow()); + + expect(await screen.findByText('account.summary.someTxsInPendingState')).toBeInTheDocument() + expect(await screen.findByText('account.summary.noTransactionFound')).toBeInTheDocument() + expect(await screen.findByText('txHash1')).toBeInTheDocument() + }) + + it('should display single pending and completed tx', async () => { + renderCmp(getState({ accountNonce: 2n, accountTxs: [getTx('txHash1', 0n)], pendingLocalTxs: [getPendingTx('txHash2')] })) + + expect((await screen.getByTestId('pending-txs-container')).childElementCount).toBe(1) + expect((await screen.getByTestId('completed-txs-container')).childElementCount).toBe(1) + + expect(await screen.findByText('txHash1')).toBeInTheDocument() + expect(await screen.findByText('txHash2')).toBeInTheDocument() }) }) diff --git a/src/app/pages/AccountPage/Features/TransactionHistory/index.tsx b/src/app/pages/AccountPage/Features/TransactionHistory/index.tsx index 7cdcbf4006..031325805c 100644 --- a/src/app/pages/AccountPage/Features/TransactionHistory/index.tsx +++ b/src/app/pages/AccountPage/Features/TransactionHistory/index.tsx @@ -86,17 +86,17 @@ export function TransactionHistory() { } /> - - {!!pendingTransactionComponents.length && <>{pendingTransactionComponents}} - + {!!pendingTransactionComponents.length && ( + {pendingTransactionComponents} + )} {t('account.summary.activity', 'Activity')} )} - {allTransactions.length ? ( - transactionComponents - ) : ( + {allTransactions.length ? ( + {transactionComponents} + ) : (