diff --git a/apps/trading-e2e/src/integration/markets.cy.ts b/apps/trading-e2e/src/integration/markets.cy.ts index 432eb4b78..fa1c92f50 100644 --- a/apps/trading-e2e/src/integration/markets.cy.ts +++ b/apps/trading-e2e/src/integration/markets.cy.ts @@ -1,72 +1,44 @@ import { aliasQuery } from '@vegaprotocol/cypress'; import { MarketState } from '@vegaprotocol/types'; -import { generateMarkets } from '../support/mocks/generate-markets'; +import { generateMarketList } from '../support/mocks/generate-market-list'; import { mockTradingPage } from '../support/trading'; describe('markets table', () => { beforeEach(() => { cy.mockGQL((req) => { - aliasQuery(req, 'Markets', generateMarkets()); + aliasQuery(req, 'MarketList', generateMarketList()); }); - cy.visit('/markets'); + cy.visit('/'); + cy.wait('@MarketList'); }); - it.skip('renders correctly', () => { - const marketRowHeaderClassname = 'div > span.ag-header-cell-text'; - const marketRowNameColumn = 'tradableInstrument.instrument.code'; - const marketRowSymbolColumn = - 'tradableInstrument.instrument.product.settlementAsset.symbol'; - const marketRowPrices = 'flash-cell'; - const marketRowDescription = 'name'; - - cy.wait('@Markets'); - cy.get('.ag-root-wrapper').should('be.visible'); - - const expectedMarketHeaders = [ - 'Market', - 'Settlement asset', - 'Trading mode', - 'Best bid', - 'Best offer', - 'Mark price', - 'Description', - ]; - - for (let index = 0; index < expectedMarketHeaders.length; index++) { - cy.get(marketRowHeaderClassname).should( - 'contain.text', - expectedMarketHeaders[index] - ); - } - - cy.get(`[col-id='${marketRowNameColumn}']`).each(($marketName) => { - cy.wrap($marketName).should('not.be.empty'); - }); - - cy.get(`[col-id='${marketRowSymbolColumn}']`).each(($marketSymbol) => { - cy.wrap($marketSymbol).should('not.be.empty'); - }); - - cy.getByTestId(marketRowPrices).each(($price) => { - cy.wrap($price).should('not.be.empty').and('contain.text', '.'); - }); - - cy.get(`[col-id='${marketRowDescription}']`).each(($marketDescription) => { - cy.wrap($marketDescription).should('not.be.empty'); - }); + it('renders markets correctly', () => { + cy.get('[data-testid^="market-link-"]') + .should('not.be.empty') + .and('have.attr', 'href'); + cy.getByTestId('price').invoke('text').should('not.be.empty'); + cy.getByTestId('settlement-asset').should('not.be.empty'); + cy.getByTestId('price-change-percentage').should('not.be.empty'); + cy.getByTestId('price-change').should('not.be.empty'); + cy.getByTestId('sparkline-svg').should('be.visible'); }); - it.skip('can select an active market', () => { - cy.wait('@Markets'); - cy.get('.ag-root-wrapper').should('be.visible'); + it('renders market list drop down', () => { + openMarketDropDown(); + cy.getByTestId('price').invoke('text').should('not.be.empty'); + cy.getByTestId('trading-mode').should('not.be.empty'); + cy.getByTestId('taker-fee').should('contain.text', '%'); + cy.getByTestId('market-volume').should('not.be.empty'); + cy.getByTestId('market-name').should('not.be.empty'); + }); + it('Able to select market from dropdown', () => { cy.mockGQL((req) => { mockTradingPage(req, MarketState.Active); }); - // click on market - cy.get('[role="gridcell"][col-id=data]').should('be.visible'); - cy.get('[role="gridcell"][col-id=name]').contains('ACTIVE MARKET').click(); + openMarketDropDown(); + cy.getByTestId('market-link-market-0').click(); cy.wait('@Market'); cy.contains('ACTIVE MARKET'); @@ -74,6 +46,12 @@ describe('markets table', () => { verifyMarketSummaryDisplayed(); }); + function openMarketDropDown() { + cy.getByTestId('dialog-close').click(); + cy.getByTestId('popover-trigger').click(); + cy.contains('Loading market data...').should('not.exist'); + } + function verifyMarketSummaryDisplayed() { const marketSummaryBlock = 'market-summary'; const percentageValue = 'price-change-percentage'; @@ -89,6 +67,7 @@ describe('markets table', () => { cy.getByTestId(tradingVolume).should('not.be.empty'); cy.contains('Trading mode'); cy.getByTestId(tradingMode).should('not.be.empty'); + cy.getByTestId('mark-price').should('not.be.empty'); }); } }); diff --git a/apps/trading-e2e/src/support/mocks/generate-market-list.ts b/apps/trading-e2e/src/support/mocks/generate-market-list.ts index e7055a737..86793871c 100644 --- a/apps/trading-e2e/src/support/mocks/generate-market-list.ts +++ b/apps/trading-e2e/src/support/mocks/generate-market-list.ts @@ -1,7 +1,11 @@ import merge from 'lodash/merge'; import type { PartialDeep } from 'type-fest'; import type { MarketList, MarketList_markets } from '@vegaprotocol/market-list'; -import { MarketState, MarketTradingMode } from '@vegaprotocol/types'; +import { + AuctionTrigger, + MarketState, + MarketTradingMode, +} from '@vegaprotocol/types'; export const generateMarketList = ( override?: PartialDeep @@ -9,15 +13,32 @@ export const generateMarketList = ( const markets: MarketList_markets[] = [ { id: 'market-0', + name: 'BTCUSD Monthly (30 Jun 2022)', decimalPlaces: 5, + positionDecimalPlaces: 0, state: MarketState.Active, tradingMode: MarketTradingMode.Continuous, + fees: { + factors: { + makerFee: '0.0002', + infrastructureFee: '0.0005', + liquidityFee: '0.001', + __typename: 'FeeFactors', + }, + __typename: 'Fees', + }, data: { market: { id: '10cd0a793ad2887b340940337fa6d97a212e0e517fe8e9eab2b5ef3a38633f35', + state: MarketState.Active, + tradingMode: MarketTradingMode.Continuous, __typename: 'Market', }, + bestBidPrice: '2411432389', + bestOfferPrice: '2346732714', markPrice: '4612690058', + trigger: AuctionTrigger.Price, + indicativeVolume: '1216', __typename: 'MarketData', }, tradableInstrument: { @@ -28,29 +49,51 @@ export const generateMarketList = ( __typename: 'InstrumentMetadata', tags: ['tag1'], }, + product: { + settlementAsset: { + symbol: 'tBTC', + __typename: 'Asset', + }, + __typename: 'Future', + }, __typename: 'Instrument', }, __typename: 'TradableInstrument', }, marketTimestamps: { __typename: 'MarketTimestamps', - open: '', + open: '2022-08-12T09:57:02.420419276Z', close: '', }, - candles: [{ __typename: 'Candle', open: '100', close: '100' }], + candles: [ + { + __typename: 'Candle', + open: '100', + close: '100', + high: '110', + low: '90', + }, + ], __typename: 'Market', }, { id: 'market-1', + name: 'SOL/USD', decimalPlaces: 2, + positionDecimalPlaces: 0, state: MarketState.Suspended, tradingMode: MarketTradingMode.MonitoringAuction, data: { market: { id: '34d95e10faa00c21d19d382d6d7e6fc9722a96985369f0caec041b0f44b775ed', + state: MarketState.Suspended, + tradingMode: MarketTradingMode.MonitoringAuction, __typename: 'Market', }, + bestBidPrice: '17065127', + bestOfferPrice: '17017654', markPrice: '8441', + indicativeVolume: '249', __typename: 'MarketData', }, tradableInstrument: { @@ -61,6 +104,13 @@ export const generateMarketList = ( __typename: 'InstrumentMetadata', tags: ['tag1'], }, + product: { + settlementAsset: { + symbol: 'SOLUSD', + __typename: 'Asset', + }, + __typename: 'Future', + }, __typename: 'Instrument', }, __typename: 'TradableInstrument', @@ -70,7 +120,15 @@ export const generateMarketList = ( open: '', close: '', }, - candles: [{ __typename: 'Candle', open: '100', close: '100' }], + candles: [ + { + __typename: 'Candle', + open: '100', + close: '100', + high: '110', + low: '90', + }, + ], __typename: 'Market', }, ]; diff --git a/libs/market-list/src/lib/components/select-market-columns.tsx b/libs/market-list/src/lib/components/select-market-columns.tsx index 3d03d2383..43429c087 100644 --- a/libs/market-list/src/lib/components/select-market-columns.tsx +++ b/libs/market-list/src/lib/components/select-market-columns.tsx @@ -38,6 +38,7 @@ export interface Column { value: string | React.ReactNode; className: string; onlyOnDetailed: boolean; + dataTestId?: string; } export const columnHeadersPositionMarkets: Column[] = [ @@ -233,6 +234,7 @@ export const columns = (market: any, onSelect: (id: string) => void) => { }, { value: market.settlementAsset, + dataTestId: 'settlement-asset', className: thClassNames('left'), onlyOnDetailed: false, }, @@ -301,6 +303,7 @@ export const columns = (market: any, onSelect: (id: string) => void) => { : formatLabel(market.tradingMode), className: thClassNames('left'), onlyOnDetailed: true, + dataTestId: 'trading-mode', }, { value: ( @@ -314,6 +317,7 @@ export const columns = (market: any, onSelect: (id: string) => void) => { ), className: tdClassNames, onlyOnDetailed: true, + dataTestId: 'taker-fee', }, { value: @@ -325,11 +329,13 @@ export const columns = (market: any, onSelect: (id: string) => void) => { : '-', className: tdClassNames, onlyOnDetailed: true, + dataTestId: 'market-volume', }, { value: market.name, className: thClassNames('left'), onlyOnDetailed: true, + dataTestId: 'market-name', }, ]; return selectMarketColumns; diff --git a/libs/market-list/src/lib/components/select-market-table.tsx b/libs/market-list/src/lib/components/select-market-table.tsx index a947e51a9..75b638640 100644 --- a/libs/market-list/src/lib/components/select-market-table.tsx +++ b/libs/market-list/src/lib/components/select-market-table.tsx @@ -31,9 +31,9 @@ export const SelectMarketTableRow = ({ className={`hover:bg-black/20 dark:hover:bg-white/20 cursor-pointer relative`} > {columns.map( - ({ value, className, onlyOnDetailed }, i) => + ({ value, className, dataTestId, onlyOnDetailed }, i) => (!onlyOnDetailed || detailed === onlyOnDetailed) && ( - + {value} )