From f266b0895d15ff8066493e9752fde77ff05f50b3 Mon Sep 17 00:00:00 2001
From: maciek <maciek@vegaprotocol.io>
Date: Mon, 13 Feb 2023 09:42:31 +0100
Subject: [PATCH] chore: positions and collateral tables - make columns
 sortable - add int test

---
 .../src/integration/trading-accounts.cy.ts    | 118 +++++++++++++++++-
 libs/accounts/src/lib/accounts.mock.ts        |  17 ++-
 2 files changed, 132 insertions(+), 3 deletions(-)

diff --git a/apps/trading-e2e/src/integration/trading-accounts.cy.ts b/apps/trading-e2e/src/integration/trading-accounts.cy.ts
index 923c0b99a..071dde28c 100644
--- a/apps/trading-e2e/src/integration/trading-accounts.cy.ts
+++ b/apps/trading-e2e/src/integration/trading-accounts.cy.ts
@@ -1,3 +1,4 @@
+const { _ } = Cypress;
 beforeEach(() => {
   cy.mockTradingPage();
   cy.mockWeb3Provider();
@@ -36,6 +37,121 @@ describe('accounts', { tags: '@smoke' }, () => {
     cy.getByTestId('tab-accounts')
       .get(tradingAccountRowId)
       .find('[col-id="deposited"]')
-      .should('have.text', '1,000.00');
+      .should('have.text', '1,001.00');
   });
+  describe('sorting by ag-grid columns should work well', () => {
+    it('sorting by asset', () => {
+      cy.getByTestId('Collateral').click();
+      const marketsSortedDefault = ['tBTC', 'AST0', 'tEURO', 'tDAI', 'tBTC'];
+      const marketsSortedAsc = ['AST0', 'tBTC', 'tBTC', 'tDAI', 'tEURO'];
+      const marketsSortedDesc = ['tEURO', 'tDAI', 'tBTC', 'tBTC', 'AST0'];
+      checkSorting(
+        'asset.symbol',
+        marketsSortedDefault,
+        marketsSortedAsc,
+        marketsSortedDesc
+      );
+    });
+
+    it('sorting by total', () => {
+      cy.getByTestId('Collateral').click();
+      const marketsSortedDefault = [
+        '1,000.00002',
+        '1,001.00',
+        '1,000.01',
+        '1,000.01',
+        '1,000.00001',
+      ];
+      const marketsSortedAsc = [
+        '1,000.00001',
+        '1,000.00002',
+        '1,000.01',
+        '1,000.01',
+        '1,001.00',
+      ];
+      const marketsSortedDesc = [
+        '1,001.00',
+        '1,000.01',
+        '1,000.01',
+        '1,000.00002',
+        '1,000.00001',
+      ];
+      checkSorting(
+        'deposited',
+        marketsSortedDefault,
+        marketsSortedAsc,
+        marketsSortedDesc
+      );
+    });
+
+    it('sorting by used', () => {
+      cy.getByTestId('Collateral').click();
+      const marketsSortedDefault = ['0.00', '1.00', '0.01', '0.01', '0.00'];
+      const marketsSortedAsc = ['0.00', '0.00', '0.01', '0.01', '1.00'];
+      const marketsSortedDesc = ['1.00', '0.01', '0.01', '0.00', '0.00'];
+      checkSorting(
+        'used',
+        marketsSortedDefault,
+        marketsSortedAsc,
+        marketsSortedDesc
+      );
+    });
+
+    it('sorting by available', () => {
+      cy.getByTestId('Collateral').click();
+      const marketsSortedDefault = [
+        '1,000.00002',
+        '1,000.00',
+        '1,000.00',
+        '1,000.00',
+        '1,000.00001',
+      ];
+      const marketsSortedAsc = [
+        '1,000.00',
+        '1,000.00',
+        '1,000.00',
+        '1,000.00001',
+        '1,000.00002',
+      ];
+      const marketsSortedDesc = [
+        '1,000.00002',
+        '1,000.00001',
+        '1,000.00',
+        '1,000.00',
+        '1,000.00',
+      ];
+
+      checkSorting(
+        'available',
+        marketsSortedDefault,
+        marketsSortedAsc,
+        marketsSortedDesc
+      );
+    });
+  });
+  function checkSorting(
+    column: string,
+    orderTabDefault: string[],
+    orderTabAsc: string[],
+    orderTabDesc: string[]
+  ) {
+    checkSortChange(orderTabDefault, column);
+    cy.get('.ag-header-container').within(() => {
+      cy.get(`[col-id="${column}"]`).click();
+    });
+    checkSortChange(orderTabAsc, column);
+    cy.get('.ag-header-container').within(() => {
+      cy.get(`[col-id="${column}"]`).click();
+    });
+    checkSortChange(orderTabDesc, column);
+  }
+  function checkSortChange(tabsArr: string[], column: string) {
+    cy.get('.ag-center-cols-container').within(() => {
+      tabsArr.forEach((entry, i) => {
+        cy.get(`[row-index="${i}"]`).within(() => {
+          cy.get(`[col-id="${column}"]`).should('have.text', tabsArr[i]);
+        });
+      });
+    });
+  }
 });
diff --git a/libs/accounts/src/lib/accounts.mock.ts b/libs/accounts/src/lib/accounts.mock.ts
index 1e72ef745..e8731b0b5 100644
--- a/libs/accounts/src/lib/accounts.mock.ts
+++ b/libs/accounts/src/lib/accounts.mock.ts
@@ -78,6 +78,19 @@ export const accountFields: AccountFieldsFragment[] = [
       id: 'asset-id-2',
     },
   },
+  {
+    __typename: 'AccountBalance',
+    type: Schema.AccountType.ACCOUNT_TYPE_MARGIN,
+    balance: '100000',
+    market: {
+      __typename: 'Market',
+      id: 'market-3',
+    },
+    asset: {
+      __typename: 'Asset',
+      id: 'asset-0',
+    },
+  },
   {
     __typename: 'AccountBalance',
     type: Schema.AccountType.ACCOUNT_TYPE_GENERAL,
@@ -92,7 +105,7 @@ export const accountFields: AccountFieldsFragment[] = [
   {
     __typename: 'AccountBalance',
     type: Schema.AccountType.ACCOUNT_TYPE_GENERAL,
-    balance: '100000000',
+    balance: '100000001',
     market: null,
     asset: {
       __typename: 'Asset',
@@ -102,7 +115,7 @@ export const accountFields: AccountFieldsFragment[] = [
   {
     __typename: 'AccountBalance',
     type: Schema.AccountType.ACCOUNT_TYPE_GENERAL,
-    balance: '100000000',
+    balance: '100000002',
     market: null,
     asset: {
       __typename: 'Asset',