chore(trading): remove noise form the test logs (#2801)

apps/trading/components/footer/footer.spec.tsx

@@ -49,7 +49,6 @@ describe('NodeHealth', () => {
   it.each(cases)(
     'renders correct text and indicator color for $diff block difference',
     (elem) => {
-      console.log(elem);
       render(<NodeHealth blockDiff={elem.diff} openNodeSwitcher={jest.fn()} />);
       expect(screen.getByTestId('indicator')).toHaveClass(elem.classname);
       expect(screen.getByText(elem.text)).toBeInTheDocument();

apps/trading/components/select-market/select-market.spec.tsx

@@ -151,6 +151,8 @@ const MARKET_B: PartialMarket = {
 };
 
 describe('SelectMarket', () => {
+  const table = document.createElement('table');
+
   it('should render the SelectAllMarketsTableBody', () => {
     const onSelect = jest.fn();
     const onCellClick = jest.fn();
@@ -162,7 +164,7 @@ describe('SelectMarket', () => {
           onSelect={onSelect}
         />
       </MemoryRouter>,
-      { wrapper: MockedProvider }
+      { wrapper: MockedProvider, container: document.body.appendChild(table) }
     );
     expect(screen.getByText('ABCDEF')).toBeTruthy(); // name
     expect(screen.getByText('25.00%')).toBeTruthy(); // price change

libs/accounts/src/lib/accounts-manager.spec.tsx

@@ -59,7 +59,9 @@ describe('AccountManager', () => {
     await waitFor(() => {
       expect(screen.getByText('No accounts')).toBeInTheDocument();
     });
+    await act(() => {
       expect(mockedUpdate({ data: [] })).toEqual(true);
+
       expect(
         mockedUpdate({ data: [{ party: { id: 't1' } }] as AccountFields[] })
       ).toEqual(false);
@@ -69,4 +71,5 @@ describe('AccountManager', () => {
       expect(mockedUpdate({ data: [] })).toEqual(false);
       expect(mockedUpdate({ data: [] })).toEqual(true);
     });
+  });
 });

libs/deposits/src/lib/deposit-form.tsx

@@ -185,7 +185,7 @@ export const DepositForm = ({
               hasError={Boolean(errors.asset?.message)}
             >
               {assets.filter(isAssetTypeERC20).map((a) => (
-                <AssetOption asset={a} />
+                <AssetOption asset={a} key={a.id} />
               ))}
             </RichSelect>
           )}

libs/fills/src/lib/fills-table.spec.tsx

@@ -82,8 +82,9 @@ describe('FillsTable', () => {
         liquidityFee: '2',
       },
     });
-
+    await act(async () => {
       render(<FillsTable partyId={partyId} rowData={[{ ...buyerFill }]} />);
+    });
     await waitForGridToBeInTheDOM();
     await waitForDataToHaveLoaded();
 
@@ -119,8 +120,9 @@ describe('FillsTable', () => {
         liquidityFee: '1',
       },
     });
-
+    await act(async () => {
       render(<FillsTable partyId={partyId} rowData={[buyerFill]} />);
+    });
     await waitForGridToBeInTheDOM();
     await waitForDataToHaveLoaded();
 
@@ -150,10 +152,13 @@ describe('FillsTable', () => {
       },
       aggressor: Schema.Side.SIDE_SELL,
     });
-
+    let rerenderer: (ui: React.ReactElement) => void;
+    await act(async () => {
       const { rerender } = render(
         <FillsTable partyId={partyId} rowData={[takerFill]} />
       );
+      rerenderer = rerender;
+    });
     await waitForGridToBeInTheDOM();
     await waitForDataToHaveLoaded();
 
@@ -169,8 +174,9 @@ describe('FillsTable', () => {
       },
       aggressor: Schema.Side.SIDE_BUY,
     });
-
+    await act(async () => {
-    rerender(<FillsTable partyId={partyId} rowData={[makerFill]} />);
+      rerenderer(<FillsTable partyId={partyId} rowData={[makerFill]} />);
+    });
     await waitForGridToBeInTheDOM();
     await waitForDataToHaveLoaded();
 
@@ -189,7 +195,7 @@ describe('FillsTable', () => {
       },
       aggressor: Schema.Side.SIDE_SELL,
     });
-    act(() => {
+    await act(async () => {
       render(<FillsTable partyId={partyId} rowData={[takerFill]} />);
     });
     await waitForGridToBeInTheDOM();
@@ -206,11 +212,12 @@ describe('FillsTable', () => {
     await waitFor(() => {
       expect(feeCell).toBeInTheDocument();
     });
-    act(() => {
+    await act(async () => {
       userEvent.hover(feeCell as HTMLElement);
+      await new Promise((res) => setTimeout(() => res(true), 1000));
     });
 
-    await waitFor(() => {
+    await act(async () => {
       expect(screen.getByTestId('fee-breakdown-tooltip')).toBeInTheDocument();
     });
   });

libs/orders/src/lib/components/order-list-manager/order-list-manager.spec.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, act } from '@testing-library/react';
 import { OrderListManager } from './order-list-manager';
 import * as useDataProviderHook from '@vegaprotocol/react-helpers';
 import type { OrderFieldsFragment } from '../';
@@ -19,7 +19,7 @@ const generateJsx = () => {
   );
 };
 
-it('Renders a loading state while awaiting orders', () => {
+it('Renders a loading state while awaiting orders', async () => {
   jest.spyOn(useDataProviderHook, 'useDataProvider').mockReturnValue({
     data: [],
     loading: true,
@@ -29,11 +29,13 @@ it('Renders a loading state while awaiting orders', () => {
     load: jest.fn(),
     totalCount: 0,
   });
+  await act(async () => {
     render(generateJsx());
+  });
   expect(screen.getByText('Loading...')).toBeInTheDocument();
 });
 
-it('Renders an error state', () => {
+it('Renders an error state', async () => {
   const errorMsg = 'Oops! An Error';
   jest.spyOn(useDataProviderHook, 'useDataProvider').mockReturnValue({
     data: [],
@@ -44,7 +46,9 @@ it('Renders an error state', () => {
     load: jest.fn(),
     totalCount: undefined,
   });
+  await act(async () => {
     render(generateJsx());
+  });
   expect(
     screen.getByText(`Something went wrong: ${errorMsg}`)
   ).toBeInTheDocument();
@@ -63,6 +67,8 @@ it('Renders the order list if orders provided', async () => {
     load: jest.fn(),
     totalCount: undefined,
   });
+  await act(async () => {
     render(generateJsx());
+  });
   expect(await screen.findByText('OrderList')).toBeInTheDocument();
 });

libs/wallet/src/use-vega-transaction-updater.spec.tsx

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react-hooks';
 import type { MockedResponse } from '@apollo/client/testing';
 import { MockedProvider } from '@apollo/client/testing';
 import type { ReactNode } from 'react';
@@ -33,6 +33,7 @@ const render = (mocks?: MockedResponse[]) => {
   const wrapper = ({ children }: { children: ReactNode }) => (
     <MockedProvider mocks={mocks}>{children}</MockedProvider>
   );
+
   return renderHook(() => useVegaTransactionUpdater(), { wrapper });
 };
 
@@ -193,20 +194,24 @@ describe('useVegaTransactionManager', () => {
   it('updates order on OrderBusEvents', async () => {
     mockTransactionStoreState.mockReturnValue(defaultState);
     const { waitForNextUpdate } = render([mockedOrderBusEvent]);
+    await act(async () => {
       waitForNextUpdate();
       await waitForNextTick();
       expect(updateOrder).toHaveBeenCalledWith(orderBusEvent);
     });
+  });
 
   it('updates transaction on TransactionResultBusEvents', async () => {
     mockTransactionStoreState.mockReturnValue(defaultState);
     const { waitForNextUpdate } = render([mockedTransactionResultBusEvent]);
+    await act(async () => {
       waitForNextUpdate();
       await waitForNextTick();
       expect(updateTransactionResult).toHaveBeenCalledWith(
         transactionResultBusEvent
       );
     });
+  });
 
   it('updates withdrawal on WithdrawalBusEvents', async () => {
     mockTransactionStoreState.mockReturnValue(defaultState);
@@ -215,6 +220,7 @@ describe('useVegaTransactionManager', () => {
       erc20WithdrawalApproval
     );
     const { waitForNextUpdate } = render([mockedWithdrawalBusEvent]);
+    await act(async () => {
       waitForNextUpdate();
       await waitForNextTick();
       expect(updateWithdrawal).toHaveBeenCalledWith(
@@ -222,4 +228,5 @@ describe('useVegaTransactionManager', () => {
         erc20WithdrawalApproval
       );
     });
+  });
 });

libs/web3/__mocks__/zustand.js

@@ -1,4 +1,4 @@
-import { act } from 'react-dom/test-utils';
+import { act } from '@testing-library/react';
 const zu = jest.requireActual('zustand'); // if using jest
 
 // a variable to hold reset functions for all stores declared in the app
@@ -6,7 +6,14 @@ const storeResetFns = new Set();
 
 // when creating a store, we get its initial state, create a reset function and add it in the set
 export const create = (createState) => {
-  const store = zu.create(createState);
+  let store;
+  if (typeof createState === 'function') {
+    store = zu.create(createState);
+  } else {
+    store = (selector, equalityFn) =>
+      zu.useStore(createState, selector, equalityFn);
+    Object.assign(store, createState);
+  }
   const initialState = store.getState();
   storeResetFns.add(() => store.setState(initialState, true));
   return store;

libs/web3/src/lib/web3-container.spec.tsx

@@ -1,4 +1,11 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import {
+  fireEvent,
+  render,
+  screen,
+  act,
+  waitFor,
+} from '@testing-library/react';
+import type { RenderResult } from '@testing-library/react';
 import type { MockedResponse } from '@apollo/client/testing';
 import { MockedProvider } from '@apollo/client/testing';
 import { Web3Container } from './web3-container';
@@ -63,8 +70,10 @@ jest.mock('@web3-react/core', () => {
   };
 });
 
-function setup(mock = networkParamsQueryMock) {
+let renderResults: RenderResult;
-  return render(
+async function setup(mock = networkParamsQueryMock) {
+  await act(async () => {
+    renderResults = await render(
       <EnvironmentProvider definitions={mockEnvironment}>
         <MockedProvider mocks={[mock]}>
           <Web3Container>
@@ -77,68 +86,74 @@ function setup(mock = networkParamsQueryMock) {
         <Web3ConnectUncontrolledDialog />
       </EnvironmentProvider>
     );
+  });
+  return renderResults;
 }
 
-it('Prompt to connect opens dialog', async () => {
+describe('Web3Container', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  it('Prompt to connect opens dialog', async () => {
     mockHookValue = defaultHookValue;
-  setup();
+    await setup();
-
+    await waitFor(async () => {
-  expect(screen.getByText('Loading...')).toBeInTheDocument();
       expect(
         await screen.findByText('Connect your Ethereum wallet')
       ).toBeInTheDocument();
 
       expect(screen.queryByText('Child')).not.toBeInTheDocument();
-  expect(screen.queryByTestId('web3-connector-list')).not.toBeInTheDocument();
+      expect(
-
+        screen.queryByTestId('web3-connector-list')
+      ).not.toBeInTheDocument();
+      await act(() => {
         fireEvent.click(screen.getByText('Connect'));
+      });
       expect(screen.getByTestId('web3-connector-list')).toBeInTheDocument();
-});
+    });
+  });
 
-it('Error message is shown', async () => {
+  it('Error message is shown', async () => {
     const message = 'Opps! An error';
     mockHookValue = { ...defaultHookValue, error: new Error(message) };
-  setup();
+    await setup();
 
-  expect(screen.getByText('Loading...')).toBeInTheDocument();
+    await waitFor(async () => {
       expect(
         await screen.findByText(`Something went wrong: ${message}`)
       ).toBeInTheDocument();
       expect(screen.queryByText('Child')).not.toBeInTheDocument();
-});
+    });
+  });
 
-it('Checks that chain ID matches app ID', async () => {
+  it('Checks that chain ID matches app ID', async () => {
     const expectedChainId = 4;
     mockHookValue = {
       ...defaultHookValue,
       isActive: true,
       chainId: expectedChainId,
     };
-  setup();
+    await setup();
-
-  expect(screen.getByText('Loading...')).toBeInTheDocument();
     expect(
       await screen.findByText(`This app only works on Sepolia`)
     ).toBeInTheDocument();
     expect(screen.queryByText('Child')).not.toBeInTheDocument();
-});
+  });
 
-it('Passes ethereum config to children', async () => {
+  it('Passes ethereum config to children', async () => {
     mockHookValue = {
       ...defaultHookValue,
       isActive: true,
     };
-  setup();
+    await setup();
-
-  expect(screen.getByText('Loading...')).toBeInTheDocument();
     expect(
       await screen.findByText(
         mockEthereumConfig.collateral_bridge_contract.address
       )
     ).toBeInTheDocument();
-});
+  });
 
-it('Shows no config found message if the network parameter doesnt exist', async () => {
+  it('Shows no config found message if the network parameter doesnt exist', async () => {
     const mock: MockedResponse<NetworkParamsQuery> = {
       request: {
         query: NetworkParamsDocument,
@@ -159,7 +174,7 @@ it('Shows no config found message if the network parameter doesnt exist', async
         },
       },
     };
-  setup(mock);
+    await setup(mock);
-  expect(screen.getByText('Loading...')).toBeInTheDocument();
     expect(await screen.findByText('No data')).toBeInTheDocument();
+  });
 });

libs/withdraws/src/lib/withdraw-form-container.spec.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, act, waitFor } from '@testing-library/react';
 import { MockedProvider } from '@apollo/client/testing';
 import type { Account } from '@vegaprotocol/accounts';
 import { WithdrawFormContainer } from './withdraw-form-container';
@@ -95,7 +95,7 @@ describe('WithdrawFormContainer', () => {
   afterEach(() => {
     jest.resetAllMocks();
   });
-  it('should be properly rendered', () => {
+  it('should be properly rendered', async () => {
     mockData = [
       { ...account1 },
       { ...account2 },
@@ -186,50 +186,68 @@ describe('WithdrawFormContainer', () => {
         __typename: 'AccountBalance',
       },
     ];
-    const { container } = render(
+    let rendererContainer: Element;
-      <MockedProvider>
+    await act(() => {
-        <WithdrawFormContainer {...props} />
+      const { container } = render(<WithdrawFormContainer {...props} />, {
-      </MockedProvider>
+        wrapper: MockedProvider,
+      });
+      rendererContainer = container;
+    });
+    await expect(screen.getByTestId('select-asset')).toBeInTheDocument();
+    await waitFor(() => {
+      const options = rendererContainer.querySelectorAll(
+        'select[name="asset"] option'
       );
-    expect(screen.getByTestId('select-asset')).toBeInTheDocument();
-    const options = container.querySelectorAll('select[name="asset"] option');
       expect(options).toHaveLength(3);
     });
+  });
 
-  it('should display no data message', () => {
+  it('should display no data message', async () => {
     mockData = null;
+    await act(() => {
       render(
         <MockedProvider>
           <WithdrawFormContainer {...props} />
         </MockedProvider>
       );
+    });
     expect(
       screen.getByText('You have no assets to withdraw')
     ).toBeInTheDocument();
   });
 
-  it('should filter out zero balance account assets', () => {
+  it('should filter out zero balance account assets', async () => {
+    let rendererContainer: Element;
     mockData = [{ ...account1 }, { ...account2, balance: '0' }];
+    await act(() => {
       const { container } = render(
         <MockedProvider>
           <WithdrawFormContainer {...props} />
         </MockedProvider>
       );
+      rendererContainer = container;
+    });
     expect(screen.getByTestId('select-asset')).toBeInTheDocument();
-    const options = container.querySelectorAll('select[name="asset"] option');
+    await waitFor(() => {
+      const options = rendererContainer.querySelectorAll(
+        'select[name="asset"] option'
+      );
       expect(options).toHaveLength(2);
     });
+  });
 
-  it('when no accounts have a balance should should display no data message', () => {
+  it('when no accounts have a balance should should display no data message', async () => {
     mockData = [
       { ...account1, balance: '0' },
       { ...account2, balance: '0' },
     ];
+    await act(() => {
       render(
         <MockedProvider>
           <WithdrawFormContainer {...props} />
         </MockedProvider>
       );
+    });
     expect(
       screen.getByText('You have no assets to withdraw')
     ).toBeInTheDocument();

libs/withdraws/src/lib/withdraw-form-container.tsx

@@ -23,13 +23,17 @@ export const WithdrawFormContainer = ({
     variables,
   });
 
-  const filteredAsset = data
+  const filteredAsset = useMemo(
+    () =>
+      data
         ?.filter(
           (account) =>
             account.type === Types.AccountType.ACCOUNT_TYPE_GENERAL &&
             toBigNum(account.balance, account.asset.decimals).isGreaterThan(0)
         )
-    .map((account) => account.asset);
+        .map((account) => account.asset),
+    [data]
+  );
   const assets = filteredAsset?.length ? filteredAsset : null;
   return (
     <AsyncRenderer

libs/withdraws/src/lib/withdraw-form.tsx

@@ -92,9 +92,6 @@ export const WithdrawForm = ({
   }: {
     field: ControllerRenderProps<FormFields, 'asset'>;
   }) => {
-    console.log('assets', assets.filter(isAssetTypeERC20));
-    console.log('selected asset', selectedAsset);
-
     return (
       <RichSelect
         data-testid="select-asset"
@@ -110,7 +107,7 @@ export const WithdrawForm = ({
         hasError={Boolean(errors.asset?.message)}
       >
         {assets.filter(isAssetTypeERC20).map((a) => (
-          <AssetOption asset={a} />
+          <AssetOption key={a.id} asset={a} />
         ))}
       </RichSelect>
     );