Mock accounts for trading page (#311)

* move accounts and positions into own feature, add mock for accounts

* use length for expected number of columns

* combine trading feature tests into single trading-page.feature

* add orders scenario for trading page

* fix typo

* move related test cases for orders together

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

@@ -15,22 +15,3 @@ 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: Accounts displayed when connected to wallet
-    Given I am on the trading page for an active market
-    And I connect to Vega Wallet
-    When I click on accounts tab
-    Then accounts are displayed
-    And I can see account for tEURO
-
-  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
-
-  Scenario: Placed orders displayed
-    Given I am on the trading page for an active market
-    And I connect to Vega Wallet
-    When I click on orders tab
-    Then placed orders are displayed

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

@@ -1,5 +1,5 @@
-Feature: Deal ticket
+Feature: Trading page
-  Scenario Outline: Successfull market buy orders
+  Scenario Outline: Deal ticket: Successfull market buy orders
     Given I am on the trading page for an active market
     And I connect to Vega Wallet
     When I place a buy '<marketOrderType>' market order
@@ -10,7 +10,7 @@ Feature: Deal ticket
       | FOK             |
       | IOC             |
 
-  Scenario Outline: Successfull Limit buy orders
+  Scenario Outline: Deal ticket: Successfull Limit buy orders
     Given I am on the trading page for an active market
     And I connect to Vega Wallet
     When I place a buy '<limitOrderType>' limit order
@@ -24,7 +24,7 @@ Feature: Deal ticket
       # | GFA            | Requires market to be in auction
       | GFN            |
 
-  Scenario Outline: Successfull market sell order
+  Scenario Outline: Deal ticket: Successfull market sell order
     Given I am on the trading page for an active market
     And I connect to Vega Wallet
     When I place a sell '<marketOrderType>' market order
@@ -35,7 +35,7 @@ Feature: Deal ticket
       | FOK             |
       | IOC             |
 
-  Scenario Outline: Successfull limit sell order
+  Scenario Outline: Deal ticket: Successfull limit sell order
     Given I am on the trading page for an active market
     And I connect to Vega Wallet
     When I place a sell '<limitOrderType>' limit order
@@ -50,7 +50,7 @@ Feature: Deal ticket
       | GFN            |
 
   @ignore
-  Scenario: Unsuccessfull order because lack of funds
+  Scenario: Deal ticket: Unsuccessfull order because lack of funds
     Given I am on the homepage
     And I navigate to markets page
     When I click on active market
@@ -58,29 +58,48 @@ Feature: Deal ticket
     And place a buy 'FOK' market order
     Then error message for insufficient funds is displayed
 
-  Scenario: Unable to order because market is suspended
+  Scenario: Deal ticket: Unable to order because market is suspended
     Given I am on the trading page for a suspended market
     And I connect to Vega Wallet
     Then place order button is disabled
     And "Market is currently suspended" error is shown
 
-  Scenario: Unable to order because wallet is not connected
+  Scenario: Deal ticket: Unable to order because wallet is not connected
     Given I am on the trading page for an active market
     Then place order button is disabled
     And "No public key selected" error is shown
 
   @ignore
-  Scenario: Unsuccessfull because quantity is 0
+  Scenario: Deal ticket: Unsuccessfull because quantity is 0
     Given I am on the trading page for an active market
     And I connect to Vega Wallet
     And place a buy 'FOK' market order with amount of 0
     Then Order rejected by wallet error shown containing text "must be positive"
 
   @manual
-  Scenario: GTT order failed because invalid date
+  Scenario: Deal ticket: GTT order failed because invalid date
 
   @manual
-  Scenario: GTT order failed because date in the past
+  Scenario: Deal ticket: GTT order failed because date in the past
 
   @manual
-  Scenario: GTT order failed because date over allowed period
+  Scenario: Deal ticket: GTT order failed because date over allowed period
+
+  Scenario: Positions: Displayed when connected to wallet
+    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
+
+  Scenario: Accounts: Displayed when connected to wallet
+    Given I am on the trading page for an active market
+    And I connect to Vega Wallet
+    When I click on accounts tab
+    Then accounts are displayed
+    And I can see account for tEURO
+ 
+  Scenario: Orders: Placed orders displayed
+    Given I am on the trading page for an active market
+    And I connect to Vega Wallet
+    When I click on orders tab
+    Then placed orders are displayed

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

@@ -0,0 +1,30 @@
+import merge from 'lodash/merge';
+import type { Accounts } from '@vegaprotocol/accounts';
+import { AccountType } from '@vegaprotocol/types';
+import type { PartialDeep } from 'type-fest';
+
+export const generateAccounts = (
+  override?: PartialDeep<Accounts>
+): Accounts => {
+  const defaultAccounts: Accounts = {
+    party: {
+      __typename: 'Party',
+      id: Cypress.env('vegaPublicKey'),
+      accounts: [
+        {
+          __typename: 'Account',
+          type: AccountType.General,
+          balance: '100000000',
+          market: null,
+          asset: {
+            __typename: 'Asset',
+            id: 'asset-id',
+            symbol: 'tEURO',
+            decimals: 5,
+          },
+        },
+      ],
+    },
+  };
+  return merge(defaultAccounts, override);
+};

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

@@ -31,7 +31,7 @@ export default class MarketPage extends BasePage {
         );
       })
       .then(($list) => {
-        cy.wrap($list).should('have.length', 7);
+        cy.wrap($list).should('have.length', expectedMarketHeaders.length);
       });
 
     cy.get(`[col-id='${this.marketRowNameColumn}']`).each(($marketName) => {

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

@@ -1,16 +1,9 @@
 import { And, Given, Then, When } from 'cypress-cucumber-preprocessor/steps';
 import { hasOperationName } from '..';
-// 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';
-import AccountsList from '../trading-windows/accounts-list';
 
 const marketsPage = new MarketsPage();
-const tradingPage = new TradingPage();
-const positionsList = new PositionsList();
-const accountList = new AccountsList();
 
 const mockMarkets = () => {
   cy.mockGQL('Markets', (req) => {
@@ -47,29 +40,3 @@ 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();
-});
-
-When('I click on accounts tab', () => {
-  tradingPage.clickOnAccountsTab();
-});
-
-Then('accounts are displayed', () => {
-  accountList.verifyAccountsDisplayed();
-});
-
-Then('I can see account for tEURO', () => {
-  accountList.verifySingleAccountDisplayed(
-    'General-tEURO-null',
-    'tEURO',
-    'General',
-    '—',
-    '1,000.00000'
-  );
-});

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

@@ -8,13 +8,18 @@ import { generateDealTicketQuery } from '../mocks/generate-deal-ticket-query';
 import { generateMarket } from '../mocks/generate-market';
 import { generateOrders } from '../mocks/generate-orders';
 import { generatePositions } from '../mocks/generate-positions';
+import { generateAccounts } from '../mocks/generate-accounts';
+import PositionsList from '../trading-windows/positions-list';
+import AccountsList from '../trading-windows/accounts-list';
 import TradesList from '../trading-windows/trades-list';
 import TradingPage from '../pages/trading-page';
-import OrderList from '../trading-windows/orders-list';
+import OrdersList from '../trading-windows/orders-list';
 
 const tradesList = new TradesList();
 const tradingPage = new TradingPage();
-const ordersList = new OrderList();
+const positionsList = new PositionsList();
+const accountList = new AccountsList();
+const ordersList = new OrdersList();
 
 const mockMarket = (state: MarketState) => {
   cy.mockGQL('Market', (req) => {
@@ -36,6 +41,14 @@ const mockMarket = (state: MarketState) => {
       });
     }
 
+    if (hasOperationName(req, 'Accounts')) {
+      req.reply({
+        body: {
+          data: generateAccounts(),
+        },
+      });
+    }
+
     if (hasOperationName(req, 'Positions')) {
       req.reply({
         body: { data: generatePositions() },
@@ -84,10 +97,6 @@ Given('I am on the trading page for a suspended market', () => {
   cy.contains('Market: SUSPENDED MARKET');
 });
 
-When('I click on orders tab', () => {
-  tradingPage.clickOnOrdersTab();
-});
-
 Then('trading page for {string} market is displayed', (marketType) => {
   switch (marketType) {
     case 'active':
@@ -105,6 +114,36 @@ Then('trading page for {string} market is displayed', (marketType) => {
   tradesList.verifyTradesListDisplayed();
 });
 
+When('I click on orders tab', () => {
+  tradingPage.clickOnOrdersTab();
+});
+
 Then('placed orders are displayed', () => {
   ordersList.verifyOrdersDisplayed();
 });
+
+When('I click on accounts tab', () => {
+  tradingPage.clickOnAccountsTab();
+});
+
+Then('accounts are displayed', () => {
+  accountList.verifyAccountsDisplayed();
+});
+
+Then('I can see account for tEURO', () => {
+  accountList.verifySingleAccountDisplayed(
+    'General-tEURO-null',
+    'tEURO',
+    'General',
+    '—',
+    '1,000.00000'
+  );
+});
+
+When('I click on positions tab', () => {
+  tradingPage.clickOnPositionsTab();
+});
+
+Then('positions are displayed', () => {
+  positionsList.verifyPositionsDisplayed();
+});

apps/trading/lib/assets.ts

@@ -7,10 +7,10 @@ export interface ERC20Asset extends AssetFields {
   };
 }
 
-type UnknownAssset = Pick<AssetFields, '__typename' | 'source'>;
+type UnknownAsset = Pick<AssetFields, '__typename' | 'source'>;
 
 // Type guard to ensure an asset is an ERC20 token
-export const isERC20Asset = (asset: UnknownAssset): asset is ERC20Asset => {
+export const isERC20Asset = (asset: UnknownAsset): asset is ERC20Asset => {
   if (asset.source.__typename === 'ERC20') {
     return true;
   }

libs/accounts/src/index.ts

@@ -1,3 +1,6 @@
 export * from './lib/accounts-table';
 export * from './lib/accounts-container';
 export * from './lib/accounts-data-provider';
+export * from './lib/__generated__/AccountFields';
+export * from './lib/__generated__/Accounts';
+export * from './lib/__generated__/AccountSubscribe';

libs/accounts/src/lib/__generated__/AccountFields.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { AccountType } from "./../../../../types/src/__generated__/globalTypes";
+import { AccountType } from "@vegaprotocol/types";
 
 // ====================================================
 // GraphQL fragment: AccountFields

libs/accounts/src/lib/__generated__/AccountSubscribe.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { AccountType } from "./../../../../types/src/__generated__/globalTypes";
+import { AccountType } from "@vegaprotocol/types";
 
 // ====================================================
 // GraphQL subscription operation: AccountSubscribe

libs/accounts/src/lib/__generated__/Accounts.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { AccountType } from "./../../../../types/src/__generated__/globalTypes";
+import { AccountType } from "@vegaprotocol/types";
 
 // ====================================================
 // GraphQL query operation: Accounts