UI test for positions table (#290)

* Positions test passing with mocks

* Update position mocks with changes

* Use Cypress env for public key in mock

apps/trading-e2e/src/integration/markets-page.feature

@@ -15,3 +15,9 @@ Feature: Markets page
     Given I am on the markets page
     When I click on "Suspended" market
     Then trading page for "suspended" market is displayed
+
+  Scenario: Positions displayed
+    Given I am on the trading page for an active market
+    And I connect to Vega Wallet
+    When I click on positions tab
+    Then positions are displayed

apps/trading-e2e/src/support/mocks/generate-positions.ts

@@ -0,0 +1,128 @@
+import merge from 'lodash/merge';
+import type { PartialDeep } from 'type-fest';
+import type {
+  Positions,
+  Positions_party_positions,
+} from '@vegaprotocol/positions';
+import { MarketTradingMode } from '@vegaprotocol/types';
+
+export const generatePositions = (
+  override?: PartialDeep<Positions>
+): Positions => {
+  const positions: Positions_party_positions[] = [
+    {
+      realisedPNL: '0',
+      openVolume: '6',
+      unrealisedPNL: '895000',
+      averageEntryPrice: '1129935',
+      market: {
+        id: 'c9f5acd348796011c075077e4d58d9b7f1689b7c1c8e030a5e886b83aa96923d',
+        name: 'UNIDAI Monthly (30 Jun 2022)',
+        data: {
+          markPrice: '17588787',
+          marketTradingMode: MarketTradingMode.Continuous,
+          __typename: 'MarketData',
+          market: { __typename: 'Market', id: '123' },
+        },
+        decimalPlaces: 5,
+        tradableInstrument: {
+          instrument: {
+            id: '',
+            name: 'UNIDAI Monthly (30 Jun 2022)',
+            metadata: {
+              tags: [
+                'formerly:3C58ED2A4A6C5D7E',
+                'base:UNI',
+                'quote:DAI',
+                'class:fx/crypto',
+                'monthly',
+                'sector:defi',
+              ],
+              __typename: 'InstrumentMetadata',
+            },
+            code: 'UNIDAI.MF21',
+            product: {
+              settlementAsset: {
+                id: '6d9d35f657589e40ddfb448b7ad4a7463b66efb307527fedd2aa7df1bbd5ea61',
+                symbol: 'tDAI',
+                name: 'tDAI TEST',
+                decimals: 5,
+                __typename: 'Asset',
+              },
+              quoteName: 'DAI',
+              __typename: 'Future',
+            },
+            __typename: 'Instrument',
+          },
+          __typename: 'TradableInstrument',
+        },
+        __typename: 'Market',
+      },
+      __typename: 'Position',
+    },
+    {
+      realisedPNL: '0',
+      openVolume: '1',
+      unrealisedPNL: '-22519',
+      averageEntryPrice: '84400088',
+      market: {
+        id: '5a4b0b9e9c0629f0315ec56fcb7bd444b0c6e4da5ec7677719d502626658a376',
+        name: 'Tesla Quarterly (30 Jun 2022)',
+        data: {
+          markPrice: '84377569',
+          marketTradingMode: MarketTradingMode.Continuous,
+          __typename: 'MarketData',
+          market: {
+            __typename: 'Market',
+            id: '5a4b0b9e9c0629f0315ec56fcb7bd444b0c6e4da5ec7677719d502626658a376',
+          },
+        },
+        decimalPlaces: 5,
+        tradableInstrument: {
+          instrument: {
+            id: '',
+            name: 'Tesla Quarterly (30 Jun 2022)',
+            metadata: {
+              tags: [
+                'formerly:5A86B190C384997F',
+                'quote:EURO',
+                'ticker:TSLA',
+                'class:equities/single-stock-futures',
+                'sector:tech',
+                'listing_venue:NASDAQ',
+                'country:US',
+              ],
+              __typename: 'InstrumentMetadata',
+            },
+            code: 'TSLA.QM21',
+            product: {
+              settlementAsset: {
+                id: '8b52d4a3a4b0ffe733cddbc2b67be273816cfeb6ca4c8b339bac03ffba08e4e4',
+                symbol: 'tEURO',
+                name: 'tEURO TEST',
+                decimals: 5,
+                __typename: 'Asset',
+              },
+              quoteName: 'EURO',
+              __typename: 'Future',
+            },
+            __typename: 'Instrument',
+          },
+          __typename: 'TradableInstrument',
+        },
+        __typename: 'Market',
+      },
+      __typename: 'Position',
+    },
+  ];
+
+  const defaultResult = {
+    party: {
+      id: Cypress.env('vegaPublicKey'),
+      positions,
+      __typename: 'Party',
+    },
+  };
+
+  return merge(defaultResult, override);
+};

apps/trading-e2e/src/support/pages/trading-page.ts

@@ -15,6 +15,10 @@ export default class TradingPage extends BasePage {
     cy.getByTestId(this.ordersTab).click();
   }
 
+  clickOnPositionsTab() {
+    cy.getByTestId(this.positionsTab).click();
+  }
+
   clickOnTicketTab() {
     cy.getByTestId(this.ticketTab).click();
   }

apps/trading-e2e/src/support/step_definitions/markets-page.step.ts

@@ -1,10 +1,14 @@
 import { And, Given, Then, When } from 'cypress-cucumber-preprocessor/steps';
 import { hasOperationName } from '..';
-import MarketsPage from '../pages/markets-page';
 // eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
 import { generateMarkets } from '../mocks/generate-markets';
+import MarketsPage from '../pages/markets-page';
+import TradingPage from '../pages/trading-page';
+import PositionsList from '../trading-windows/positions-list';
 
 const marketsPage = new MarketsPage();
+const tradingPage = new TradingPage();
+const positionsList = new PositionsList();
 
 const mockMarkets = () => {
   cy.mockGQL('Markets', (req) => {
@@ -41,3 +45,11 @@ And('the market table is displayed', () => {
 When('I click on {string} market', (Expectedmarket) => {
   marketsPage.clickOnMarket(Expectedmarket);
 });
+
+When('I click on positions tab', () => {
+  tradingPage.clickOnPositionsTab();
+});
+
+Then('positions are displayed', () => {
+  positionsList.verifyPositionsDisplayed();
+});

apps/trading-e2e/src/support/step_definitions/trading-page.step.ts

@@ -8,6 +8,7 @@ import { generateCandles } from '../mocks/generate-candles';
 import { generateTrades } from '../mocks/generate-trades';
 import { generateDealTicketQuery } from '../mocks/generate-deal-ticket-query';
 import { generateMarket } from '../mocks/generate-market';
+import { generatePositions } from '../mocks/generate-positions';
 
 const tradesList = new TradesList();
 const tradingPage = new TradingPage();
@@ -27,6 +28,12 @@ const mockMarket = (state: MarketState) => {
       });
     }
 
+    if (hasOperationName(req, 'Positions')) {
+      req.reply({
+        body: { data: generatePositions() },
+      });
+    }
+
     if (hasOperationName(req, 'DealTicketQuery')) {
       req.reply({
         body: { data: generateDealTicketQuery({ market: { state } }) },

apps/trading-e2e/src/support/trading-windows/positions-list.ts

@@ -0,0 +1,18 @@
+export default class PositionsList {
+  positionMarketSymbol = 'market.tradableInstrument.instrument.code';
+  positionOpenVolume = 'openVolume';
+  positionPrices = 'flash-cell';
+
+  verifyPositionsDisplayed() {
+    cy.get(`[col-id='${this.positionMarketSymbol}']`).each(($marketSymbol) => {
+      cy.wrap($marketSymbol).invoke('text').should('not.be.empty');
+    });
+    cy.get(`[col-id='${this.positionOpenVolume}']`).each(($openVolume) => {
+      cy.wrap($openVolume).invoke('text').should('not.be.empty');
+    });
+    // includes average entry price, mark price & realised PNL
+    cy.getByTestId(this.positionPrices).each(($prices) => {
+      cy.wrap($prices).invoke('text').should('not.be.empty');
+    });
+  }
+}

libs/positions/src/index.ts

@@ -1,3 +1,5 @@
 export * from './lib/positions-table';
 export * from './lib/positions-container';
 export * from './lib/positions-data-provider';
+export * from './lib/__generated__/Positions';
+export * from './lib/__generated__/PositionDetails';