Test for market table (#238)

* Test for market table

* Remove old method

* Fix typo

* Add braces and curly lint

.eslintrc.json

@@ -32,7 +32,8 @@
             "name": "lodash",
             "message": "Import the specific methods you need from lodash e.g. `import get from 'lodash/get'`. This helps with bundle sizing."
           }
-        ]
+        ],
+        "curly": "warn"
       }
     },
     {

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

@@ -0,0 +1,6 @@
+Feature: Market Page
+
+  Scenario: Market table displayed on market page
+    Given I am on the homepage
+    And I navigate to markets page
+    Then the market table is displayed

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

@@ -1,7 +1,12 @@
 import BasePage from './base-page';
 
 export default class MarketPage extends BasePage {
-  marketRow = 'market-row';
+  marketRowHeaderClassname = '.ag-header-cell-text';
+  marketRowNameColumn = 'tradableInstrument.instrument.code';
+  marketRowSymbolColumn =
+    'tradableInstrument.instrument.product.settlementAsset.symbol';
+  marketRowPrices = 'flash-cell';
+  marketRowDescription = 'name';
   chartTab = 'chart';
   ticketTab = 'ticket';
   orderbookTab = 'orderbook';
@@ -12,8 +17,45 @@ export default class MarketPage extends BasePage {
   completedTrades = 'market-trades';
   orderBookTab = 'orderbook';
 
-  validateMarketsAreDisplayed() {
-    cy.getByTestId(this.marketRow).should('have.length.above', 0);
+  validateMarketTableDisplayed() {
+    const expectedMarketHeaders = [
+      'Market',
+      'Settlement asset',
+      'State',
+      'Best bid',
+      'Best offer',
+      'Mark price',
+      'Description',
+    ];
+
+    cy.get(this.marketRowHeaderClassname)
+      .each(($marketHeader, index) => {
+        cy.wrap($marketHeader).should(
+          'have.text',
+          expectedMarketHeaders[index]
+        );
+      })
+      .then(($list) => {
+        cy.wrap($list).should('have.length', 7);
+      });
+
+    cy.get(`[col-id='${this.marketRowNameColumn}']`).each(($marketName) => {
+      cy.wrap($marketName).should('not.be.empty');
+    });
+
+    cy.get(`[col-id='${this.marketRowSymbolColumn}']`).each(($marketSymbol) => {
+      cy.wrap($marketSymbol).should('not.be.empty');
+    });
+
+    cy.getByTestId(this.marketRowPrices).each(($price) => {
+      cy.wrap($price).should('not.be.empty').and('contain.text', '.');
+    });
+
+    cy.get(`[col-id='${this.marketRowDescription}']`).each(
+      ($marketDescription) => {
+        cy.wrap($marketDescription).should('not.be.empty');
+      }
+    );
   }
 
   validateCompletedTradesDisplayed() {

apps/trading-e2e/src/support/step_definitions/market-order.step.js

@@ -1,19 +1,8 @@
 import { Then, When } from 'cypress-cucumber-preprocessor/steps';
-import MarketsPage from '../pages/markets-page';
+
 import DealTicketPage from '../pages/deal-ticket-page';
-const marketsPage = new MarketsPage();
 const dealTicketPage = new DealTicketPage();
 
-When('I click on market for {string}', (marketText) => {
-  marketsPage.clickOnMarket(marketText);
-});
-
-When('I click on active market', () => {
-  if (Cypress.env('bypassPlacingOrders' != true)) {
-    marketsPage.clickOnMarket('Active');
-  } else marketsPage.clickOnTopMarketRow();
-});
-
 When('place a buy {string} market order', (orderType) => {
   dealTicketPage.placeMarketOrder(true, 100, orderType);
   dealTicketPage.clickPlaceOrder();
@@ -39,10 +28,6 @@ When('place a buy {string} market order with amount of 0', (orderType) => {
   dealTicketPage.clickPlaceOrder();
 });
 
-When('I click on suspended market', () => {
-  marketsPage.clickOnMarket('Suspended');
-});
-
 Then('order request is sent', () => {
   if (Cypress.env('bypassPlacingOrders' != true)) {
     dealTicketPage.verifyOrderRequestSent();

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

@@ -0,0 +1,23 @@
+import { When, Then } from 'cypress-cucumber-preprocessor/steps';
+import MarketsPage from '../pages/markets-page';
+const marketsPage = new MarketsPage();
+
+When('I click on market for {string}', (marketText) => {
+  marketsPage.clickOnMarket(marketText);
+});
+
+When('I click on active market', () => {
+  if (Cypress.env('bypassPlacingOrders' != true)) {
+    marketsPage.clickOnMarket('Active');
+  } else {
+    marketsPage.clickOnTopMarketRow();
+  }
+});
+
+When('I click on suspended market', () => {
+  marketsPage.clickOnMarket('Suspended');
+});
+
+Then('the market table is displayed', () => {
+  marketsPage.validateMarketTableDisplayed();
+});