Skip to content

Commit

Permalink
test: improve history box (#107)
Browse files Browse the repository at this point in the history
  • Loading branch information
@fmorency
fmorency authored Dec 3, 2024
1 parent ef7e6ef commit 3dcd8df
Show file tree
Hide file tree
Showing 3 changed files with 126 additions and 24 deletions.
46 changes: 25 additions & 21 deletions components/bank/components/__tests__/historyBox.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => ({
Expand All @@ -22,7 +25,7 @@ mock.module('@/hooks', () => ({
}),
useGetFilteredTxAndSuccessfulProposals: () => ({
sendTxs: mockTransactions,
totalPages: 1,
totalPages: 2,
isLoading: false,
isError: false,
}),
Expand All @@ -36,17 +39,19 @@ describe('HistoryBox', () => {

test('renders correctly', () => {
renderWithChainProvider(<HistoryBox isLoading={false} address="address1" />);
expect(screen.getByText('Transaction History')).toBeTruthy();
expect(screen.getByText('Transaction History')).toBeInTheDocument();
});

test('displays transactions', () => {
renderWithChainProvider(<HistoryBox isLoading={false} address="address1" />);
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', () => {
Expand All @@ -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(<HistoryBox isLoading={false} address="address1" />);

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(<HistoryBox isLoading={false} address="address1" />);

const sentText = screen.getByText('Sent');
const receivedText = screen.getByText('Received');

expect(sentText).toBeTruthy();
expect(receivedText).toBeTruthy();
test('displays loading state', () => {
renderWithChainProvider(<HistoryBox isLoading={true} address="address1" />);
expect(screen.getByLabelText('skeleton')).toBeInTheDocument();
});
});
2 changes: 1 addition & 1 deletion components/bank/components/historyBox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -218,7 +218,7 @@ export function HistoryBox({

{isLoading ? (
<div className="flex-1 overflow-hidden h-full">
<div className="space-y-4">
<div aria-label="skeleton" className="space-y-4">
{[...Array(3)].map((_, groupIndex) => (
<div key={groupIndex}>
<div className="skeleton h-4 w-24 mb-2"></div>
Expand Down
102 changes: 100 additions & 2 deletions tests/mock.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -195,6 +195,7 @@ export const defaultChain: Chain = {
};

export const mockTransactions: TransactionGroup[] = [
// Send
{
tx_hash: 'hash1',
block_number: 1,
Expand All @@ -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,
Expand All @@ -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' }],
},
},
];
Expand Down

0 comments on commit 3dcd8df

Please sign in to comment.