Test/30 market dropdown (#1039)

* test: update market tests * chore: remove old tests * chore: remove unused string
2022-08-16 08:35:33 +01:00 · 2022-08-16 08:35:33 +01:00 · 88dea2b8b4
commit 88dea2b8b4
parent 08b7c9769a
4 changed files with 101 additions and 58 deletions
--- 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');
    });
  }
 });
--- 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<MarketList>
@ -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',
    },
  ];
--- 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;
--- 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) && (
-            <td key={i} className={className}>
+            <td key={i} data-testid={dataTestId} className={className}>
              {value}
            </td>
          )