test(trading): 7001-COLL-collateral - e2e tests (#3561)

Co-authored-by: m.ray <16125548+MadalinaRaicu@users.noreply.github.com>

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

@@ -1,17 +1,23 @@
 import { checkSorting } from '@vegaprotocol/cypress';
 
 describe('accounts', { tags: '@smoke' }, () => {
-  before(() => {
-    cy.clearAllLocalStorage();
+  beforeEach(() => {
     cy.mockTradingPage();
     cy.mockWeb3Provider();
     cy.mockSubscription();
     cy.setVegaWallet();
     cy.visit('/#/markets/market-0');
-    cy.wait('@Assets');
   });
 
   it('renders accounts', () => {
+    // 7001-COLL-001
+    // 7001-COLL-002
+    // 7001-COLL-003
+    // 7001-COLL-004
+    // 7001-COLL-005
+    // 7001-COLL-006
+    // 7001-COLL-007
+
     const tradingAccountRowId = '[row-id="t-0"]';
     cy.getByTestId('Collateral').click();
 
@@ -22,6 +28,21 @@ describe('accounts', { tags: '@smoke' }, () => {
       .find('[col-id="asset.symbol"]')
       .should('have.text', 'AST0');
 
+    cy.getByTestId('tab-accounts')
+      .get(tradingAccountRowId)
+      .find('[col-id="used"]')
+      .should('have.text', '1.010.00%');
+
+    cy.getByTestId('tab-accounts')
+      .get(tradingAccountRowId)
+      .find('[col-id="available"]')
+      .should('have.text', '100,000.00');
+
+    cy.getByTestId('tab-accounts')
+      .get(tradingAccountRowId)
+      .find('[col-id="total"]')
+      .should('have.text', '100,001.01');
+
     cy.getByTestId('tab-accounts')
       .get(tradingAccountRowId)
       .find('[col-id="accounts-actions"]')
@@ -31,12 +52,63 @@ describe('accounts', { tags: '@smoke' }, () => {
       .get(tradingAccountRowId)
       .find('[col-id="total"]')
       .should('have.text', '100,001.01');
+
+    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('breakdown').should('be.visible');
+    cy.getByTestId('Collateral').click({ force: true });
   });
 
   it('should open asset details dialog when clicked on symbol', () => {
+    // 7001-COLL-008
     cy.getByTestId('asset').contains('tEURO').click();
-    cy.get('[data-testid="dialog-content"]:visible').should('exist');
-    cy.get('[data-testid="dialog-close"]:visible').click();
+    cy.get('[data-testid$="_label"]').should('have.length', 16);
+    cy.get('[data-testid="dialog-close"]').click();
+  });
+
+  it('should open asset details dialog when clicked on symbol', () => {
+    // 7001-COLL-008
+    cy.getByTestId('asset').contains('tEURO').click();
+    cy.get('[data-testid$="_label"]').should('have.length', 16);
+    cy.get('[data-testid="dialog-close"]').click();
+  });
+
+  it('should open usage breakdown dialog when clicked on used', () => {
+    // 7001-COLL-009
+    cy.getByTestId('breakdown').contains('1.01').click();
+    const headers = ['Market', 'Account type', 'Balance'];
+    cy.getByTestId('usage-breakdown').within(($headers) => {
+      cy.wrap($headers)
+        .get('.ag-header-cell-text')
+        .each(($header, i) => {
+          cy.wrap($header).should('have.text', headers[i]);
+        });
+    });
+    cy.get('[data-testid="dialog-close"]').click();
+  });
+
+  it('sorting usage breakdown columns should work well', () => {
+    // 7001-COLL-010
+    cy.getByTestId('breakdown').contains('1.01').click();
+    cy.getByTestId('usage-breakdown')
+      .find('[col-id="type"]')
+      .eq(1)
+      .should('have.text', 'Margin');
+    cy.getByTestId('usage-breakdown')
+      .find('[col-id="type"]')
+      .eq(2)
+      .should('have.text', 'Margin');
+    cy.getByTestId('usage-breakdown')
+      .find('[col-id="type"]')
+      .eq(3)
+      .should('have.text', 'General');
+
+    cy.get('[data-testid="dialog-close"]').click();
   });
 
   describe('sorting by ag-grid columns should work well', () => {

apps/trading-e2e/src/integration/trading-deal-ticket-order.cy.ts

@@ -88,5 +88,18 @@ describe('deal ticker order validation', { tags: '@smoke' }, () => {
         'Size cannot be lower than 1'
       );
     });
+    it('must have total margin available', () => {
+      // 7001-COLL-011
+      cy.getByTestId('tab-ticket')
+        .find('.text-xs')
+        .eq(5)
+        .within(() => {
+          cy.get('[data-state="closed"]').should(
+            'have.text',
+            'Total margin available'
+          );
+          cy.get('.text-neutral-500').should('have.text', '~100,000.01 tDAI');
+        });
+    });
   });
 });

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

@@ -455,7 +455,7 @@ describe('amend and cancel order', { tags: '@smoke' }, () => {
       });
   });
   it('must be warned (pre-submit) if the input price has too many digits after the decimal place for the market', () => {
-    // 7003-MORD-016
+    // 7003-MORD-013
     updateOrder({
       id: orderId,
       status: Schema.OrderStatus.STATUS_ACTIVE,

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

@@ -299,6 +299,7 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
                           <DropdownMenuTrigger
                             iconName="more"
                             className="hover:bg-vega-light-200 dark:hover:bg-vega-dark-200 p-0.5 focus:rounded-full hover:rounded-full"
+                            data-testid="dropdown-menu"
                           ></DropdownMenuTrigger>
                         }
                       >
@@ -359,7 +360,10 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
           }
         </AgGrid>
         <Dialog size="medium" open={openBreakdown} onChange={setOpenBreakdown}>
-          <div className="h-[35vh] w-full m-auto flex flex-col">
+          <div
+            className="h-[35vh] w-full m-auto flex flex-col"
+            data-testid="usage-breakdown"
+          >
             <h1 className="text-xl mb-4">
               {row?.asset?.symbol} {t('usage breakdown')}
             </h1>