From 51c88d2fce1d529b72bb6dccbe940654b83576cb Mon Sep 17 00:00:00 2001
From: Ben <ben@vega.xyz>
Date: Tue, 10 Oct 2023 11:13:23 +0100
Subject: [PATCH] chore(trading): move trades tests to jest (#5001)

---
 .../src/integration/trading-trades.cy.ts      | 94 -------------------
 libs/trades/src/lib/trades-table.spec.tsx     | 34 +++++++
 2 files changed, 34 insertions(+), 94 deletions(-)
 delete mode 100644 apps/trading-e2e/src/integration/trading-trades.cy.ts

diff --git a/apps/trading-e2e/src/integration/trading-trades.cy.ts b/apps/trading-e2e/src/integration/trading-trades.cy.ts
deleted file mode 100644
index 47518fbca..000000000
--- a/apps/trading-e2e/src/integration/trading-trades.cy.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-const colHeader = '.ag-header-cell-text';
-const colIdPrice = '[col-id=price]';
-const colIdSize = '[col-id=size]';
-const colIdCreatedAt = '[col-id=createdAt]';
-const tradesTab = 'Trades';
-const tradesTable = 'tab-trades';
-
-describe('trades', { tags: '@smoke' }, () => {
-  before(() => {
-    cy.mockTradingPage();
-    cy.mockSubscription();
-    cy.setOnBoardingViewed();
-    cy.intercept('POST', '/graphql', (req) => {
-      if (req.body.operationName === 'Trades') {
-        req.alias = '@Trades';
-      }
-    });
-    cy.visit('/#/markets/market-0');
-    cy.getByTestId(tradesTab).click();
-    cy.wait('@Trades');
-  });
-
-  it('show trades', () => {
-    // 6005-THIS-001
-    // 6005-THIS-002
-    cy.getByTestId(tradesTab).should('be.visible');
-    cy.getByTestId(tradesTable).should('be.visible');
-    cy.getByTestId(tradesTable).should('not.be.empty');
-  });
-
-  it('show trades prices', () => {
-    // 6005-THIS-003
-    cy.getByTestId(tradesTable)
-      .get(`${colIdPrice} ${colHeader}`)
-      .first()
-      .should('have.text', 'Price');
-    cy.getByTestId(tradesTable)
-      .get(colIdPrice)
-      .each(($tradePrice) => {
-        cy.wrap($tradePrice).invoke('text').should('not.be.empty');
-      });
-  });
-
-  it('show trades sizes', () => {
-    // 6005-THIS-004
-    cy.getByTestId(tradesTable)
-      .get(`${colIdSize} ${colHeader}`)
-      .first()
-      .should('have.text', 'Size');
-    cy.getByTestId(tradesTable)
-      .get(colIdSize)
-      .each(($tradeSize) => {
-        cy.wrap($tradeSize).invoke('text').should('not.be.empty');
-      });
-  });
-
-  it('show trades date and time', () => {
-    // 6005-THIS-005
-    cy.getByTestId(tradesTable) // order table shares identical col id
-      .find(`${colIdCreatedAt} ${colHeader}`)
-      .should('have.text', 'Created at');
-    const dateTimeRegex = /(\d{1,2}):(\d{1,2}):(\d{1,2})/gm;
-    cy.getByTestId(tradesTable)
-      .get(`.ag-center-cols-container ${colIdCreatedAt}`)
-      .each(($tradeDateTime) => {
-        cy.wrap($tradeDateTime).invoke('text').should('match', dateTimeRegex);
-      });
-  });
-
-  it('trades are sorted descending by datetime', () => {
-    // 6005-THIS-006
-    const dateTimes: Date[] = [];
-    cy.getByTestId(tradesTable)
-      .find(colIdCreatedAt)
-      .each(($tradeDateTime, index) => {
-        if (index != 0) {
-          //ignore header
-          dateTimes.push(new Date($tradeDateTime.text()));
-        }
-      })
-      .then(() => {
-        expect(dateTimes).to.deep.equal(
-          dateTimes.sort((a, b) => b.getTime() - a.getTime())
-        );
-      });
-  });
-
-  it('copy price to deal ticket form', () => {
-    // 6005-THIS-007
-    cy.getByTestId('order-type-Limit').click();
-    cy.get(colIdPrice).last().should('be.visible').click();
-    cy.getByTestId('order-price').should('have.value', '171.16898');
-  });
-});
diff --git a/libs/trades/src/lib/trades-table.spec.tsx b/libs/trades/src/lib/trades-table.spec.tsx
index 0f67491d6..e06faa0de 100644
--- a/libs/trades/src/lib/trades-table.spec.tsx
+++ b/libs/trades/src/lib/trades-table.spec.tsx
@@ -24,6 +24,8 @@ describe('TradesTable', () => {
     await act(async () => {
       render(<TradesTable rowData={[trade]} />);
     });
+    // 6005-THIS-001
+    // 6005-THIS-002
     const expectedHeaders = ['Price', 'Size', 'Created at'];
     const headers = screen.getAllByRole('columnheader');
     expect(headers).toHaveLength(expectedHeaders.length);
@@ -31,6 +33,8 @@ describe('TradesTable', () => {
   });
 
   it('should format number and data columns', async () => {
+    // 6005-THIS-003
+    // 6005-THIS-004
     await act(async () => {
       render(<TradesTable rowData={[trade]} />);
     });
@@ -73,4 +77,34 @@ describe('TradesTable', () => {
     expect(sizeCells[1]).not.toHaveClass(SELL_CLASS);
     expect(sizeCells[1]).not.toHaveClass(BUY_CLASS);
   });
+
+  it('should be in created at desc order', async () => {
+    // 6005-THIS-005
+    // 6005-THIS-006
+    const earlierDate = new Date(trade.createdAt);
+    earlierDate.setMinutes(earlierDate.getMinutes() - 1);
+    const trade2 = {
+      ...trade,
+      id: 'trade-id-2',
+      price: (Number(trade.price) + 10).toString(),
+      size: (Number(trade.size) - 10).toString(),
+      createdAt: earlierDate.toISOString(),
+    };
+
+    await act(async () => {
+      render(<TradesTable rowData={[trade2, trade]} />);
+    });
+
+    const cells = screen.getAllByRole('gridcell');
+
+    const createdAtCells = cells.filter(
+      (cell) => cell.getAttribute('col-id') === 'createdAt'
+    );
+
+    const [firstDateCell, secondDateCell] = createdAtCells;
+
+    // Compare the times as strings
+    expect(firstDateCell.textContent).toBe('6:59:00 PM');
+    expect(secondDateCell.textContent).toBe('7:00:00 PM');
+  });
 });