Test/154 market summary (#643)

* chore: additional test ids

* test: additional test for market summary

* chore: move function inside describe block

apps/trading-e2e/src/integration/markets.cy.ts

@@ -71,6 +71,8 @@ describe('markets table', () => {
     cy.wait('@Market');
     cy.contains('ACTIVE MARKET');
     cy.url().should('include', '/markets/market-0');
+
+    verifyMarketSummaryDisplayed('Active');
   });
 
   it('can select a suspended market', () => {
@@ -88,5 +90,28 @@ describe('markets table', () => {
     cy.wait('@Market');
     cy.contains('SUSPENDED MARKET');
     cy.url().should('include', '/markets/market-1');
+
+    verifyMarketSummaryDisplayed('Suspended');
   });
+
+  function verifyMarketSummaryDisplayed(expectedMarketState: string) {
+    const marketSummaryBlock = 'market-summary';
+    const percentageValue = 'price-change-percentage';
+    const priceChangeValue = 'price-change';
+    const tradingVolume = 'trading-volume';
+    const tradingMode = 'trading-mode';
+    const marketState = 'market-state';
+
+    cy.getByTestId(marketSummaryBlock).within(() => {
+      cy.contains('Change (24h)');
+      cy.getByTestId(percentageValue).should('not.be.empty');
+      cy.getByTestId(priceChangeValue).should('not.be.empty');
+      cy.contains('Volume');
+      cy.getByTestId(tradingVolume).should('not.be.empty');
+      cy.contains('Trading mode');
+      cy.getByTestId(tradingMode).should('not.be.empty');
+      cy.contains('State');
+      cy.getByTestId(marketState).should('have.text', expectedMarketState);
+    });
+  }
 });

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

@@ -1,21 +1,68 @@
 import merge from 'lodash/merge';
+import { MarketState, MarketTradingMode } from '@vegaprotocol/types';
 import type { PartialDeep } from 'type-fest';
-
-export interface Market_market {
-  __typename: 'Market';
-  id: string;
-  name: string;
-}
-
-export interface Market {
-  market: Market_market | null;
-}
+// eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
+import type { Market } from '../../../../trading/pages/markets/__generated__/Market';
 
 export const generateMarket = (override?: PartialDeep<Market>): Market => {
-  const defaultResult = {
+  const defaultResult: Market = {
     market: {
       id: 'market-0',
-      name: 'MARKET NAME',
+      name: 'ACTIVE MARKET',
+      tradingMode: MarketTradingMode.Continuous,
+      state: MarketState.Active,
+      decimalPlaces: 5,
+      data: {
+        market: {
+          id: '10cd0a793ad2887b340940337fa6d97a212e0e517fe8e9eab2b5ef3a38633f35',
+          __typename: 'Market',
+        },
+        markPrice: '13739109',
+        indicativeVolume: '0',
+        bestBidVolume: '244',
+        bestOfferVolume: '100',
+        bestStaticBidVolume: '482',
+        bestStaticOfferVolume: '2188',
+        __typename: 'MarketData',
+      },
+      tradableInstrument: {
+        instrument: {
+          name: 'BTCUSD Monthly',
+          code: 'BTCUSD.MF21',
+          metadata: {
+            tags: [
+              'formerly:076BB86A5AA41E3E',
+              'base:BTC',
+              'quote:USD',
+              'class:fx/crypto',
+              'monthly',
+              'sector:crypto',
+            ],
+            __typename: 'InstrumentMetadata',
+          },
+          __typename: 'Instrument',
+        },
+        __typename: 'TradableInstrument',
+      },
+      marketTimestamps: {
+        open: '2022-06-21T17:18:43.484055236Z',
+        close: null,
+        __typename: 'MarketTimestamps',
+      },
+      candles: [
+        {
+          open: '2095312844',
+          close: '2090090607',
+          volume: '4847',
+          __typename: 'Candle',
+        },
+        {
+          open: '2090090000',
+          close: '2090090607',
+          volume: '4847',
+          __typename: 'Candle',
+        },
+      ],
       __typename: 'Market',
     },
   };

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

@@ -21,6 +21,7 @@ export const mockTradingPage = (
     generateMarket({
       market: {
         name: `${state.toUpperCase()} MARKET`,
+        state: state,
       },
     })
   );

apps/trading/pages/markets/trade-grid.tsx

@@ -72,7 +72,10 @@ export const TradeMarketHeader = ({
           <ArrowDown color="yellow" borderX={8} borderTop={12} />
         </button>
 
-        <div className="flex flex-auto items-start gap-64 overflow-x-auto whitespace-nowrap w-[400px]">
+        <div
+          data-testid="market-summary"
+          className="flex flex-auto items-start gap-64 overflow-x-auto whitespace-nowrap w-[400px]"
+        >
           <div className={headerItemClassName}>
             <span className={itemClassName}>Change (24h)</span>
             <PriceCellChange
@@ -82,7 +85,7 @@ export const TradeMarketHeader = ({
           </div>
           <div className={headerItemClassName}>
             <span className={itemClassName}>Volume</span>
-            <span className={itemValueClassName}>
+            <span data-testid="trading-volume" className={itemValueClassName}>
               {market.data && market.data.indicativeVolume !== '0'
                 ? market.data.indicativeVolume
                 : '-'}
@@ -90,11 +93,15 @@ export const TradeMarketHeader = ({
           </div>
           <div className={headerItemClassName}>
             <span className={itemClassName}>Trading mode</span>
-            <span className={itemValueClassName}>{market.tradingMode}</span>
+            <span data-testid="trading-mode" className={itemValueClassName}>
+              {market.tradingMode}
+            </span>
           </div>
           <div className={headerItemClassName}>
             <span className={itemClassName}>State</span>
-            <span className={itemValueClassName}>{market.state}</span>
+            <span data-testid="market-state" className={itemValueClassName}>
+              {market.state}
+            </span>
           </div>
         </div>
       </div>