diff --git a/libs/accounts/src/lib/accounts-table.spec.tsx b/libs/accounts/src/lib/accounts-table.spec.tsx index 3b4155c74..e3da431f1 100644 --- a/libs/accounts/src/lib/accounts-table.spec.tsx +++ b/libs/accounts/src/lib/accounts-table.spec.tsx @@ -1,10 +1,23 @@ -import { act, render, screen } from '@testing-library/react'; +import { act, render, screen, within } from '@testing-library/react'; import * as Types from '@vegaprotocol/types'; import type { AccountFields } from './accounts-data-provider'; import { getAccountData } from './accounts-data-provider'; import { AccountTable } from './accounts-table'; import userEvent from '@testing-library/user-event'; - +const asset1 = { + __typename: 'Asset', + id: 'asset-1', + symbol: 'tBTC', + decimals: 5, + name: 'T BTC', +}; +const asset2 = { + __typename: 'Asset', + id: 'asset-2', + symbol: 'aBTC', + decimals: 5, + name: 'A BTC', +}; const singleRow = { __typename: 'AccountBalance', type: Types.AccountType.ACCOUNT_TYPE_MARGIN, @@ -13,12 +26,7 @@ const singleRow = { __typename: 'Market', id: '10cd0a793ad2887b340940337fa6d97a212e0e517fe8e9eab2b5ef3a38633f35', }, - asset: { - __typename: 'Asset', - id: '5cfa87844724df6069b94e4c8a6f03af21907d7bc251593d08e4251043ee9f7c', - symbol: 'tBTC', - decimals: 5, - }, + asset: asset1, available: '125600000', used: '125600000', total: '251200000', @@ -33,12 +41,7 @@ const secondRow = { __typename: 'Market', id: '10cd0a793ad2887b340940337fa6d97a212e0e517fe8e9eab2b5ef3a38633f35', }, - asset: { - __typename: 'Asset', - id: '5cfa87844724df6069b94e4c8a6f03af21907d7bc251593d08e4251043ee9f7c', - symbol: 'aBTC', - decimals: 5, - }, + asset: asset2, available: '125600001', used: '125600001', total: '251200002', @@ -134,7 +137,7 @@ describe('AccountsTable', () => { it('should sort assets', async () => { // 7001-COLL-010 - const { container } = render( + render( null} @@ -142,13 +145,13 @@ describe('AccountsTable', () => { /> ); - const headerCell = screen.getByText('Asset'); - await userEvent.click(headerCell); - const rows = container.querySelectorAll( - '.ag-center-cols-container .ag-row' - ); - expect(rows[0].textContent).toContain('aBTC'); - expect(rows[1].textContent).toContain('tBTC'); + const headerCell = screen + .getAllByRole('columnheader') + .find((h) => h?.getAttribute('col-id') === 'asset.symbol') as HTMLElement; + + await userEvent.click(within(headerCell).getByText(/asset/i)); + + expect(headerCell).toHaveAttribute('aria-sort', 'ascending'); }); it('should apply correct formatting in view as user mode', async () => { @@ -176,12 +179,7 @@ describe('AccountsTable', () => { rowData={singleRowData} onClickAsset={() => null} isReadOnly={false} - pinnedAsset={{ - decimals: 5, - id: '5cfa87844724df6069b94e4c8a6f03af21907d7bc251593d08e4251043ee9f7c', - symbol: 'tBTC', - name: 'tBTC', - }} + pinnedAsset={asset1} /> ); await screen.findAllByRole('rowgroup'); @@ -213,23 +211,13 @@ describe('AccountsTable', () => { const result = getAccountData([singleRow]); const expected = [ { - asset: { - __typename: 'Asset', - decimals: 5, - id: '5cfa87844724df6069b94e4c8a6f03af21907d7bc251593d08e4251043ee9f7c', - symbol: 'tBTC', - }, + asset: asset1, available: '0', balance: '0', breakdown: [ { __typename: 'AccountBalance', - asset: { - __typename: 'Asset', - decimals: 5, - id: '5cfa87844724df6069b94e4c8a6f03af21907d7bc251593d08e4251043ee9f7c', - symbol: 'tBTC', - }, + asset: asset1, available: '0', balance: '125600000', total: '125600000', diff --git a/libs/accounts/src/lib/transfer-form.spec.tsx b/libs/accounts/src/lib/transfer-form.spec.tsx index 0fdad0897..93b5e522f 100644 --- a/libs/accounts/src/lib/transfer-form.spec.tsx +++ b/libs/accounts/src/lib/transfer-form.spec.tsx @@ -1,4 +1,10 @@ -import { fireEvent, render, screen, waitFor } from '@testing-library/react'; +import { + fireEvent, + render, + screen, + waitFor, + within, +} from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import BigNumber from 'bignumber.js'; import { @@ -7,7 +13,7 @@ import { TransferForm, type TransferFormProps, } from './transfer-form'; -import { AccountType } from '@vegaprotocol/types'; +import { AccountType, AccountTypeMapping } from '@vegaprotocol/types'; import { removeDecimal } from '@vegaprotocol/utils'; describe('TransferForm', () => { @@ -39,8 +45,7 @@ describe('TransferForm', () => { }; const amount = '100'; - const pubKey = - '70d14a321e02e71992fd115563df765000ccc4775cbe71a0e2f9ff5a3b9dc680'; + const pubKey = '1'.repeat(64); const asset = { id: 'eur', symbol: '€', @@ -50,10 +55,7 @@ describe('TransferForm', () => { }; const props = { pubKey, - pubKeys: [ - pubKey, - 'a4b6e3de5d7ef4e31ae1b090be49d1a2ef7bcefff60cccf7658a0d4922651cce', - ], + pubKeys: [pubKey, '2'.repeat(64)], feeFactor: '0.001', submitTransfer: jest.fn(), accounts: [ @@ -182,7 +184,7 @@ describe('TransferForm', () => { // Test use max button await userEvent.click(screen.getByRole('button', { name: 'Use max' })); - expect(amountInput).toHaveValue('1000'); + expect(amountInput).toHaveValue('1000.00'); // Test amount validation await userEvent.clear(amountInput); @@ -267,7 +269,7 @@ describe('TransferForm', () => { // Test use max button await userEvent.click(screen.getByRole('button', { name: 'Use max' })); - expect(amountInput).toHaveValue('100'); + expect(amountInput).toHaveValue('100.00'); // If transfering from a vested account 'include fees' checkbox should // be disabled and fees should be 0 @@ -296,6 +298,88 @@ describe('TransferForm', () => { }); }); + it('handles lots of decimal places', async () => { + const balance = '904195168829277777'; + const expectedBalance = '0.904195168829277777'; + + const longDecimalAsset = { + id: 'assetId', + symbol: 'VEGA', + name: 'VEGA', + decimals: 18, + quantum: '1', + }; + + const account = { + type: AccountType.ACCOUNT_TYPE_VESTED_REWARDS, + asset: longDecimalAsset, + balance, + }; + + const mockSubmit = jest.fn(); + + renderComponent({ + ...props, + accounts: [account], + submitTransfer: mockSubmit, + minQuantumMultiple: '100000', + }); + + // Select a pubkey + await userEvent.selectOptions( + screen.getByLabelText('To Vega key'), + props.pubKeys[1] // Use not current pubkey so we can check it switches to current pubkey later + ); + + // Select asset + await selectAsset(longDecimalAsset); + + const accountSelect = screen.getByLabelText('From account'); + const option = within(accountSelect) + .getAllByRole('option') + .find( + (o) => o.getAttribute('value') === `${account.type}-${account.asset.id}` + ); + // plus one for disabled 'please select' option + + expect(option).toHaveTextContent( + `${AccountTypeMapping[account.type]} (${expectedBalance} ${ + account.asset.symbol + })` + ); + + await userEvent.selectOptions( + accountSelect, + `${AccountType.ACCOUNT_TYPE_VESTED_REWARDS}-${longDecimalAsset.id}` + ); + + expect(accountSelect).toHaveValue( + `${AccountType.ACCOUNT_TYPE_VESTED_REWARDS}-${longDecimalAsset.id}` + ); + + // Check switch back to connected key + const amountInput = screen.getByLabelText('Amount'); + + // Test use max button + await userEvent.click(screen.getByRole('button', { name: 'Use max' })); + expect(amountInput).toHaveValue(expectedBalance); + + await submit(); + + await waitFor(() => { + // 1003-TRAN-023 + expect(mockSubmit).toHaveBeenCalledTimes(1); + expect(mockSubmit).toHaveBeenCalledWith({ + fromAccountType: AccountType.ACCOUNT_TYPE_VESTED_REWARDS, + toAccountType: AccountType.ACCOUNT_TYPE_GENERAL, + to: props.pubKey, + asset: longDecimalAsset.id, + amount: balance, + oneOff: {}, + }); + }); + }); + describe('IncludeFeesCheckbox', () => { it('validates fields and submits when checkbox is checked', async () => { const mockSubmit = jest.fn(); diff --git a/libs/accounts/src/lib/transfer-form.tsx b/libs/accounts/src/lib/transfer-form.tsx index 07958ddfc..b38c12946 100644 --- a/libs/accounts/src/lib/transfer-form.tsx +++ b/libs/accounts/src/lib/transfer-form.tsx @@ -5,7 +5,6 @@ import { vegaPublicKey, addDecimal, formatNumber, - addDecimalsFormatNumber, toBigNum, } from '@vegaprotocol/utils'; import { t } from '@vegaprotocol/i18n'; @@ -214,12 +213,7 @@ export const TransferForm = ({ - } + balance={} /> ))} @@ -286,8 +280,8 @@ export const TransferForm = ({ return ( ); })} @@ -413,7 +407,7 @@ export const TransferForm = ({ type="button" className="absolute top-0 right-0 ml-auto text-xs underline" onClick={() => - setValue('amount', parseFloat(accountBalance).toString(), { + setValue('amount', accountBalance, { shouldValidate: true, }) }