diff --git a/apps/trading-e2e/src/integration/markets.cy.ts b/apps/trading-e2e/src/integration/markets.cy.ts index aa47c61a3..0c9b6b8a0 100644 --- a/apps/trading-e2e/src/integration/markets.cy.ts +++ b/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); + }); + } }); diff --git a/apps/trading-e2e/src/support/mocks/generate-market.ts b/apps/trading-e2e/src/support/mocks/generate-market.ts index 5a21d09c4..f8905a491 100644 --- a/apps/trading-e2e/src/support/mocks/generate-market.ts +++ b/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 => { - 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', }, }; diff --git a/apps/trading-e2e/src/support/trading.ts b/apps/trading-e2e/src/support/trading.ts index 3b3c3db57..4f3decb74 100644 --- a/apps/trading-e2e/src/support/trading.ts +++ b/apps/trading-e2e/src/support/trading.ts @@ -21,6 +21,7 @@ export const mockTradingPage = ( generateMarket({ market: { name: `${state.toUpperCase()} MARKET`, + state: state, }, }) ); diff --git a/apps/trading/pages/markets/trade-grid.tsx b/apps/trading/pages/markets/trade-grid.tsx index eb26211df..2f150c99a 100644 --- a/apps/trading/pages/markets/trade-grid.tsx +++ b/apps/trading/pages/markets/trade-grid.tsx @@ -72,7 +72,10 @@ export const TradeMarketHeader = ({ -
+
Change (24h)
Volume - + {market.data && market.data.indicativeVolume !== '0' ? market.data.indicativeVolume : '-'} @@ -90,11 +93,15 @@ export const TradeMarketHeader = ({
Trading mode - {market.tradingMode} + + {market.tradingMode} +
State - {market.state} + + {market.state} +