chore(trading): add accounts jest test (#4962)

apps/trading-e2e/src/integration/trading-accounts.cy.ts

@@ -11,60 +11,8 @@ describe('accounts', { tags: '@smoke' }, () => {
     cy.visit('/#/markets/market-0');
   });
 
-  it('renders accounts', () => {
-    // 7001-COLL-001
-    // 7001-COLL-002
-    // 7001-COLL-003
-    // 7001-COLL-004
-    // 7001-COLL-005
-    // 7001-COLL-006
-    // 7001-COLL-007
-    // 1003-TRAN-001
-    // 7001-COLL-012
-
-    const tradingAccountRowId = '[row-id="t-0"]';
-    cy.getByTestId('Collateral').click();
-
-    cy.getByTestId('tab-accounts').should('be.visible');
-
-    cy.getByTestId('tab-accounts')
-      .get(tradingAccountRowId)
-      .find('[col-id="asset.symbol"]')
-      .should('have.text', 'AST0');
-
-    cy.getByTestId('tab-accounts')
-      .get(tradingAccountRowId)
-      .find('[col-id="used"]')
-      .should('have.text', '1.01' + '1.00%');
-
-    cy.getByTestId('tab-accounts')
-      .get(tradingAccountRowId)
-      .find('[col-id="available"]')
-      .should('have.text', '100.00');
-
-    cy.getByTestId('tab-accounts')
-      .get(tradingAccountRowId)
-      .find('[col-id="total"]')
-      .should('have.text', '101.01');
-
-    cy.getByTestId('tab-accounts')
-      .get(tradingAccountRowId)
-      .find('[col-id="accounts-actions"]')
-      .should('have.text', '');
-
-    cy.getByTestId('tab-accounts')
-      .get('[col-id="accounts-actions"]')
-      .find('[data-testid="dropdown-menu"]')
-      .eq(1)
-      .click();
-    cy.getByTestId('deposit').should('be.visible');
-    cy.getByTestId('withdraw').should('be.visible');
-    cy.getByTestId('transfer').should('be.visible');
-    cy.getByTestId('breakdown').should('be.visible');
-    cy.getByTestId('Collateral').click({ force: true });
-  });
-
   it('should open usage breakdown dialog when clicked on used', () => {
+    cy.getByTestId('Collateral').click();
     // 7001-COLL-009
     cy.get('[col-id="used"]').contains('1.01').click();
     const headers = ['Market', 'Account type', 'Balance', 'Margin health'];

libs/accounts/src/lib/accounts-actions-dropdown.spec.tsx

@@ -0,0 +1,75 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { AccountsActionsDropdown } from './accounts-actions-dropdown';
+import userEvent from '@testing-library/user-event';
+
+describe('AccountsActionsDropdown', () => {
+  let onClickDeposit: jest.Mock;
+  let onClickWithdraw: jest.Mock;
+  let onClickBreakdown: jest.Mock;
+  let onClickTransfer: jest.Mock;
+
+  beforeEach(() => {
+    onClickDeposit = jest.fn();
+    onClickWithdraw = jest.fn();
+    onClickBreakdown = jest.fn();
+    onClickTransfer = jest.fn();
+  });
+
+  it('should render dropdown items correctly', async () => {
+    // 7001-COLL-005
+    // 7001-COLL-006
+    // 1003-TRAN-001
+    render(
+      <AccountsActionsDropdown
+        assetId="testAssetId"
+        assetContractAddress="testAssetContractAddress"
+        onClickDeposit={onClickDeposit}
+        onClickWithdraw={onClickWithdraw}
+        onClickBreakdown={onClickBreakdown}
+        onClickTransfer={onClickTransfer}
+      />
+    );
+
+    await userEvent.click(screen.getByTestId('icon-kebab'));
+
+    expect(screen.getByTestId('deposit')).toHaveTextContent('Deposit');
+    expect(screen.getByTestId('withdraw')).toHaveTextContent('Withdraw');
+    expect(screen.getByTestId('transfer')).toHaveTextContent('Transfer');
+    expect(screen.getByTestId('breakdown')).toHaveTextContent(
+      'View usage breakdown'
+    );
+    expect(screen.getByText('View asset details')).toBeInTheDocument();
+    expect(screen.getByText('Copy asset ID')).toBeInTheDocument();
+    expect(screen.getByText('View on Etherscan')).toBeInTheDocument();
+  });
+
+  it('should call callback functions on click', async () => {
+    render(
+      <AccountsActionsDropdown
+        assetId="testAssetId"
+        assetContractAddress="testAssetContractAddress"
+        onClickDeposit={onClickDeposit}
+        onClickWithdraw={onClickWithdraw}
+        onClickBreakdown={onClickBreakdown}
+        onClickTransfer={onClickTransfer}
+      />
+    );
+
+    await userEvent.click(screen.getByTestId('icon-kebab'));
+    await userEvent.click(screen.getByTestId('deposit'));
+    expect(onClickDeposit).toHaveBeenCalledTimes(1);
+
+    await userEvent.click(screen.getByTestId('icon-kebab'));
+    await userEvent.click(screen.getByTestId('withdraw'));
+    expect(onClickWithdraw).toHaveBeenCalledTimes(1);
+
+    await userEvent.click(screen.getByTestId('icon-kebab'));
+    await userEvent.click(screen.getByTestId('transfer'));
+    expect(onClickTransfer).toHaveBeenCalledTimes(1);
+
+    await userEvent.click(screen.getByTestId('icon-kebab'));
+    await userEvent.click(screen.getByTestId('breakdown'));
+    expect(onClickBreakdown).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -26,6 +26,13 @@ const singleRowData = [singleRow];
 
 describe('AccountsTable', () => {
   it('should render correct columns', async () => {
+    // 7001-COLL-001
+    // 7001-COLL-002
+    // 7001-COLL-003
+    // 7001-COLL-004
+    // 7001-COLL-007
+    // 1003-TRAN-001
+    // 7001-COLL-012
     await act(async () => {
       render(
         <AccountTable