test: add unit test for transfer-form

libs/accounts/src/lib/transfer-form.spec.tsx

@@ -1,6 +1,133 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import BigNumber from 'bignumber.js';
-import { AddressField, TransferFee } from './transfer-form';
+import { AddressField, TransferFee, TransferForm } from './transfer-form';
+import { AccountType } from '@vegaprotocol/types';
+import { formatNumber, removeDecimal } from '@vegaprotocol/react-helpers';
+
+describe('TransferForm', () => {
+  const submit = () => fireEvent.submit(screen.getByTestId('transfer-form'));
+  const amount = '100';
+  const pubKey =
+    '70d14a321e02e71992fd115563df765000ccc4775cbe71a0e2f9ff5a3b9dc680';
+  const asset = {
+    id: 'asset-0',
+    symbol: 'ASSET 0',
+    name: 'Asset 0',
+    decimals: 2,
+    balance: '1000',
+  };
+  const props = {
+    pubKey,
+    pubKeys: [
+      pubKey,
+      'a4b6e3de5d7ef4e31ae1b090be49d1a2ef7bcefff60cccf7658a0d4922651cce',
+    ],
+    assets: [asset],
+    feeFactor: '0.001',
+    submitTransfer: jest.fn(),
+  };
+
+  it('validates fields and submits', async () => {
+    render(<TransferForm {...props} />);
+
+    // check current pubkey not shown
+    const keySelect: HTMLSelectElement = screen.getByLabelText('Vega key');
+    expect(keySelect.children).toHaveLength(2);
+    expect(Array.from(keySelect.options).map((o) => o.value)).toEqual([
+      '',
+      props.pubKeys[1],
+    ]);
+
+    submit();
+    expect(await screen.findAllByText('Required')).toHaveLength(3);
+
+    // Select a pubkey
+    fireEvent.change(screen.getByLabelText('Vega key'), {
+      target: { value: props.pubKeys[1] },
+    });
+
+    // Select asset
+    fireEvent.change(
+      // Bypass RichSelect and target hidden native select
+      // eslint-disable-next-line
+      document.querySelector('select[name="asset"]')!,
+      { target: { value: asset.id } }
+    );
+
+    // assert rich select as updated
+    expect(await screen.findByTestId('select-asset')).toHaveTextContent(
+      asset.name
+    );
+    expect(screen.getByTestId('asset-balance')).toHaveTextContent(
+      formatNumber(asset.balance, asset.decimals)
+    );
+
+    // Test amount validation
+    fireEvent.change(screen.getByLabelText('Amount'), {
+      target: { value: '0.00000001' },
+    });
+    expect(
+      await screen.findByText('Value is below minimum')
+    ).toBeInTheDocument();
+
+    fireEvent.change(screen.getByLabelText('Amount'), {
+      target: { value: '9999999' },
+    });
+    expect(
+      await screen.findByText(/cannot transfer more/i)
+    ).toBeInTheDocument();
+
+    // set valid amount
+    fireEvent.change(screen.getByLabelText('Amount'), {
+      target: { value: amount },
+    });
+    expect(screen.getByTestId('transfer-fee')).toHaveTextContent(
+      new BigNumber(props.feeFactor).times(amount).toFixed()
+    );
+
+    submit();
+
+    await waitFor(() => {
+      expect(props.submitTransfer).toHaveBeenCalledTimes(1);
+      expect(props.submitTransfer).toHaveBeenCalledWith({
+        fromAccountType: AccountType.ACCOUNT_TYPE_GENERAL,
+        toAccountType: AccountType.ACCOUNT_TYPE_GENERAL,
+        to: props.pubKeys[1],
+        asset: asset.id,
+        amount: removeDecimal(amount, asset.decimals),
+        oneOff: {},
+      });
+    });
+  });
+
+  it('validates a manually entered address', async () => {
+    render(<TransferForm {...props} />);
+    submit();
+    expect(await screen.findAllByText('Required')).toHaveLength(3);
+    const toggle = screen.getByText('Enter manually');
+    fireEvent.click(toggle);
+    // has switched to input
+    expect(toggle).toHaveTextContent('Select from wallet');
+    expect(screen.getByLabelText('Vega key')).toHaveAttribute('type', 'text');
+    fireEvent.change(screen.getByLabelText('Vega key'), {
+      target: { value: 'invalid-address' },
+    });
+    await waitFor(() => {
+      const errors = screen.getAllByTestId('input-error-text');
+      expect(errors[0]).toHaveTextContent('Invalid Vega key');
+    });
+
+    // same pubkey
+    fireEvent.change(screen.getByLabelText('Vega key'), {
+      target: { value: pubKey },
+    });
+
+    await waitFor(() => {
+      const errors = screen.getAllByTestId('input-error-text');
+      expect(errors[0]).toHaveTextContent('Vega key is the same');
+    });
+  });
+});
 
 describe('AddressField', () => {
   const props = {

libs/accounts/src/lib/transfer-form.tsx

@@ -123,6 +123,8 @@ export const TransferForm = ({
             <Input
               // eslint-disable-next-line jsx-a11y/no-autofocus
               autoFocus={true} // focus input immediately after is shown
+              id="to-address"
+              type="text"
               {...register('toAddress', {
                 validate: {
                   required,
@@ -166,10 +168,10 @@ export const TransferForm = ({
             >
               {assets.map((a) => (
                 <Option key={a.id} value={a.id}>
-                  <div className="text-left">
+                  <div className="text-left" data-testid={`asset-${a.id}`}>
                     <div>{a.name}</div>
                     <div className="text-xs">
-                      <span className="font-mono">
+                      <span className="font-mono" data-testid="asset-balance">
                         {formatNumber(a.balance, a.decimals)}
                       </span>{' '}
                       <span>{a.symbol}</span>
@@ -197,7 +199,6 @@ export const TransferForm = ({
               minSafe: (value) => minSafe(new BigNumber(min))(value),
               maxSafe: (v) => {
                 const value = new BigNumber(v);
-                console.log(value.toString(), max.toString());
                 if (value.isGreaterThan(max)) {
                   return t(
                     'You cannot transfer more than your available collateral'