Task/305 add consolev2 first screen test (#515)

* test: extract data via graphql in prep for date order checks

* test: linting changes

* test: overlay tests expanded

* test: linting follow up

* test: extra tests and increase timeouts

waiting on pr to improve scoping locators to the dialog and checking columns for content

* test: linting

* test: tweaks required to aid in initial wait

* test: linting

* test: removed a couple of imports not being used

* test: addressing typescript issues

* test: linting

* chore: type errors

* test: tidy up tests after typescript changes

* test: quick fix due to multiple links - using first

going forward it would be better to have ids for wrappers

Co-authored-by: Dexter <dexter.edwards93@gmail.com>

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

@@ -2,23 +2,66 @@ Feature: Home page
 
   Background:
     Given I am on the homepage
+    And I query the server for Open Markets
+    When the server contains at least 6 open markets
 
-  Scenario: Visit Portfolio page
+  Scenario: Choose market overlay: prompted to choose market
+    Then I am prompted to select a market
+
+  Scenario: Choose market overlay: oldest currently trading market shown in background by default
+    Then the oldest current trading market is loaded on the trading tab
+
+  Scenario: Choose market overlay: contains at least 6 listed markets
+    Then I expect the market overlay table to contain at least 6 rows 
+
+  Scenario: Choose market overlay: each listed item reflects an open market
+    Then each market shown in overlay table exists as open market on server
+  
+  Scenario: Choose market overlay: each listed item contains values for last price and change
+    Then each market shown in overlay table contains content under the last price and change fields
+  
+  Scenario: Choose market overlay: oldest trading market appears at top of list
+    Then the oldest market trading in continous mode shown at top of overlay table
+
+  Scenario: Choose market overlay: can be closed without choosing an option
+    When I close the dialog form
+    And the choose market overlay is no longer showing
+    Then the oldest current trading market is loaded on the trading tab
+
+  Scenario: Choose market overlay: clicking a market name will load that market
+    When I click the most recent trading market
+    And the choose market overlay is no longer showing
+    Then the most recent current trading market is loaded on the trading tab
+
+  Scenario: Choose market overlay: full market list: clicking the full market list shows all open markets
+    When I click the view full market list
+    And the choose market overlay is no longer showing
+    Then each market shown in the full list exists as open market on server
+
+  Scenario: Choose market overlay: full market list: clicking a market name will load that market
+    When I click the view full market list
+    And the choose market overlay is no longer showing
+    When I click the most recent trading market
+    Then the most recent current trading market is loaded on the trading tab
+
+  Scenario: Navigation: Visit Portfolio page
+    When I close the dialog form
     And I navigate to portfolio page
 
-  Scenario: Visit Markets page
+  Scenario: Navigation: Visit Markets page
+    When I close the dialog form
     And I navigate to markets page
 
-  Scenario: Able to switch public key for connected Vega wallet
+  Scenario: Vega Wallett Overlay: Able to switch public key for connected Vega wallet
     Given I connect to Vega Wallet
     When I open wallet dialog
     And select a different public key
     Then public key is switched
 
-  Scenario: Unable to connect Vega wallet with incorrect credentials
+  Scenario: Vega Wallett Overlay: Unable to connect Vega wallet with incorrect credentials
     When I try to connect Vega wallet with incorrect details
     Then wallet not running error message is displayed
 
-  Scenario: Unable to connect Vega wallet with blank fields
+  Scenario: Vega Wallett Overlay: Unable to connect Vega wallet with blank fields
     When I try to connect Vega wallet with blank fields
-    Then wallet field validation errors are shown
+    Then wallet field validation errors are shown

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

@@ -17,13 +17,17 @@ export default class BasePage {
 
   navigateToPortfolio() {
     cy.get(`a[href='${this.portfolioUrl}']`)
+      .first()
       .should('be.visible')
       .click({ force: true });
     cy.url().should('include', '/portfolio');
   }
 
   navigateToMarkets() {
-    cy.get(`a[href='${this.marketsUrl}']`).should('be.visible').click();
+    cy.get(`a[href='${this.marketsUrl}']`)
+      .first()
+      .should('be.visible')
+      .click({ force: true });
     cy.url().should('include', '/markets');
   }
 

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

@@ -0,0 +1,80 @@
+import BasePage from './base-page';
+import type { OpenMarketType } from '../step_definitions/home-page.step';
+
+export default class HomePage extends BasePage {
+  validateStringIsDisplayedAtTopOfTable(value: string) {
+    // Ignore header row
+    cy.get('table tr')
+      .eq(1)
+      .within(() => cy.contains(value).should('be.visible'));
+  }
+
+  getOpenMarketsFromServer() {
+    const query = `{markets{marketTimestamps{open},tradableInstrument{instrument{code,name}}}}`;
+    return cy
+      .request({
+        method: 'POST',
+        url: `https://lb.testnet.vega.xyz/query`,
+        body: { query },
+        headers: { 'content-type': 'application/json' },
+      })
+      .its('body.data.markets');
+  }
+
+  getOpenMarketCodes(openMarkets: OpenMarketType[]) {
+    const openMarketCodes: string[] = [];
+    openMarkets.forEach((market: OpenMarketType) => {
+      openMarketCodes.push(market.tradableInstrument.instrument.code);
+    });
+    return openMarketCodes;
+  }
+
+  getOldestOpenMarket(openMarkets: OpenMarketType[]) {
+    const [oldestMarket] = openMarkets.sort(
+      (a, b) =>
+        new Date(a.marketTimestamps.open).getTime() -
+        new Date(b.marketTimestamps.open).getTime()
+    );
+    if (!oldestMarket) {
+      throw new Error('Could not find oldest market');
+    }
+    return oldestMarket;
+  }
+
+  getMostRecentOpenMarket(openMarkets: OpenMarketType[]) {
+    const [recentMarket] = openMarkets.sort(
+      (b, a) =>
+        new Date(a.marketTimestamps.open).getTime() -
+        new Date(b.marketTimestamps.open).getTime()
+    );
+    if (!recentMarket) {
+      throw new Error('Could not find most recent market');
+    }
+    return recentMarket;
+  }
+
+  validateTableCodesExistOnServer(openMarketCodes: string[]) {
+    cy.get('table tr', { timeout: 12000 }).each(($element, index) => {
+      if (index > 0) {
+        // skip header row
+        const openMarketCodeText: string = $element.children().first().text();
+        assert.include(
+          openMarketCodes,
+          openMarketCodeText,
+          `Checking ${openMarketCodeText} is shown within server open markets response`
+        );
+      }
+    });
+  }
+
+  validateTableContainsLastPriceAndChange() {
+    cy.get('table tr').each(($element, index) => {
+      if (index > 0) {
+        // skip header row
+        cy.root().within(() => {
+          cy.getByTestId('price').should('not.be.empty');
+        });
+      }
+    });
+  }
+}

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

@@ -1,4 +1,4 @@
-import { Given } from 'cypress-cucumber-preprocessor/steps';
+import { Given, When } from 'cypress-cucumber-preprocessor/steps';
 import { hasOperationName } from '..';
 import { generateMarketList } from '../mocks/generate-market-list';
 import BasePage from '../pages/base-page';
@@ -14,6 +14,13 @@ Given('I am on the homepage', () => {
     }
   });
   cy.visit('/');
+  cy.getByTestId('market', { timeout: 60000 }).should('be.visible', {
+    timeout: 20000,
+  });
+  cy.contains('Loading...', { timeout: 20000 }).should('not.exist');
+});
+
+When('I close the dialog form', () => {
   basePage.closeDialog();
 });
 

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

@@ -1,7 +1,148 @@
 import { Then, When } from 'cypress-cucumber-preprocessor/steps';
 import VegaWallet from '../vega-wallet';
+import HomePage from '../pages/home-page';
 
 const vegaWallet = new VegaWallet();
+const homePage = new HomePage();
+
+export interface OpenMarketType {
+  marketTimestamps: {
+    open: string;
+  };
+  tradableInstrument: {
+    instrument: {
+      code: string;
+      name: string;
+    };
+  };
+}
+
+When('I query the server for Open Markets', function () {
+  homePage.getOpenMarketsFromServer().then((openMarkets: OpenMarketType[]) => {
+    cy.wrap(openMarkets).as('openMarketData');
+  });
+});
+
+Then('I am prompted to select a market', () => {
+  cy.contains('Select a market to get started', { timeout: 20000 }).should(
+    'be.visible'
+  );
+});
+
+Then('the choose market overlay is no longer showing', () => {
+  cy.contains('Select a market to get started').should('not.exist');
+  cy.contains('Loading...', { timeout: 20000 }).should('not.exist');
+});
+
+Then(
+  'the server contains at least {int} open markets',
+  (expectedNumber: number) => {
+    cy.get('@openMarketData')
+      .its('length')
+      .should('be.at.least', expectedNumber);
+  }
+);
+
+Then(
+  'I expect the market overlay table to contain at least {int} rows',
+  (expectedNumber: number) => {
+    cy.get('table tr').then((row) => {
+      expect(row.length).to.be.at.least(expectedNumber);
+    });
+  }
+);
+
+Then(
+  'each market shown in overlay table exists as open market on server',
+  () => {
+    const arrayOfOpenMarketCodes: string[] = [];
+    cy.get('@openMarketData')
+      .each((openMarket: OpenMarketType) => {
+        arrayOfOpenMarketCodes.push(
+          openMarket.tradableInstrument.instrument.code
+        );
+      })
+      .then(() => {
+        homePage.validateTableCodesExistOnServer(arrayOfOpenMarketCodes);
+      });
+  }
+);
+
+Then(
+  'each market shown in overlay table contains content under the last price and change fields',
+  () => {
+    homePage.validateTableContainsLastPriceAndChange();
+  }
+);
+
+Then(
+  'each market shown in the full list exists as open market on server',
+  () => {
+    cy.get('@openMarketData').each((openMarket: OpenMarketType) => {
+      cy.contains(openMarket.tradableInstrument.instrument.code).should(
+        'be.visible'
+      );
+    });
+  }
+);
+
+Then(
+  'the oldest market trading in continous mode shown at top of overlay table',
+  () => {
+    cy.get<OpenMarketType[]>('@openMarketData').then(
+      (openMarkets: OpenMarketType[]) => {
+        const oldestMarket = homePage.getOldestOpenMarket(openMarkets);
+        homePage.validateStringIsDisplayedAtTopOfTable(
+          oldestMarket.tradableInstrument.instrument.code
+        );
+      }
+    );
+  }
+);
+
+Then('the oldest current trading market is loaded on the trading tab', () => {
+  cy.get<OpenMarketType[]>('@openMarketData').then(
+    (openMarkets: OpenMarketType[]) => {
+      const oldestMarket = homePage.getOldestOpenMarket(openMarkets);
+      cy.getByTestId('market', { timeout: 12000 }).within(() => {
+        cy.get('button')
+          .contains(oldestMarket.tradableInstrument.instrument.name)
+          .should('be.visible');
+      });
+    }
+  );
+});
+
+Then(
+  'the most recent current trading market is loaded on the trading tab',
+  () => {
+    cy.get<OpenMarketType[]>('@openMarketData').then(
+      (openMarkets: OpenMarketType[]) => {
+        const latestMarket = homePage.getMostRecentOpenMarket(openMarkets);
+        cy.getByTestId('market', { timeout: 12000 }).within(() => {
+          cy.get('button')
+            .contains(latestMarket.tradableInstrument.instrument.name)
+            .should('be.visible');
+        });
+      }
+    );
+  }
+);
+
+When('I click the most recent trading market', () => {
+  cy.get<OpenMarketType[]>('@openMarketData').then(
+    (openMarkets: OpenMarketType[]) => {
+      const latestMarket = homePage.getMostRecentOpenMarket(openMarkets);
+      cy.contains(latestMarket.tradableInstrument.instrument.code).click();
+    }
+  );
+});
+
+When('I click the view full market list', () => {
+  cy.contains('Or view full market list').click();
+  cy.contains('Loading...').should('be.visible');
+  cy.contains('Loading...').should('not.exist');
+});
 
 When('I try to connect Vega wallet with incorrect details', () => {
   vegaWallet.openVegaWalletConnectDialog();

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

@@ -22,6 +22,10 @@ Then('I navigate to markets page', () => {
   cy.wait('@Markets');
 });
 
+Then('I can view markets', () => {
+  marketsPage.validateMarketsAreDisplayed();
+});
+
 Given('I am on the markets page', () => {
   mockMarkets();
   cy.visit('/markets');

apps/trading-e2e/src/support/vega-wallet/index.ts

@@ -56,11 +56,11 @@ export default class VegaWallet {
   }
 
   selectPublicKey() {
-    cy.getByTestId(this.selectPublicKeyBtn).click();
+    cy.getByTestId(this.selectPublicKeyBtn).first().click();
   }
 
   clickOnWalletConnectDialog() {
-    cy.getByTestId(this.connectVegaBtn).click();
+    cy.getByTestId(this.connectVegaBtn).click({ force: true });
   }
 
   clickDisconnectAllKeys() {