test: test for market conditions tool tip (#1054)

* test: test for market conditions tool tip

* fix: failing to click market dropdown

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

@@ -9,7 +9,7 @@ describe('markets table', () => {
       aliasQuery(req, 'MarketList', generateMarketList());
     });
     cy.visit('/');
-    cy.wait('@MarketList');
+    cy.wait('@MarketList', { timeout: 5000 });
   });
 
   it('renders markets correctly', () => {
@@ -38,7 +38,7 @@ describe('markets table', () => {
     });
 
     openMarketDropDown();
-    cy.getByTestId('market-link-market-0').click();
+    cy.getByTestId('market-link-market-0').should('be.visible').click();
 
     cy.wait('@Market');
     cy.contains('ACTIVE MARKET');
@@ -46,6 +46,49 @@ describe('markets table', () => {
     verifyMarketSummaryDisplayed();
   });
 
+  it('Auction conditions are displayed', () => {
+    const toolTipLabel = 'tooltip-label';
+    const toolTipValue = 'tooltip-value';
+    const auctionToolTipLabels = [
+      'Auction start',
+      'Est auction end',
+      'Target liquidity',
+      'Current liquidity',
+      'Est uncrossing price',
+      'Est uncrossing vol',
+    ];
+
+    cy.mockGQL((req) => {
+      mockTradingPage(req, MarketState.Active);
+    });
+
+    cy.visit('/markets/market-0');
+    cy.wait('@Market');
+
+    cy.getByTestId('trading-mode').eq(0).realHover();
+    cy.getByTestId('tooltip-market-info').within(() => {
+      cy.get('span')
+        .eq(0)
+        .should(
+          'contain.text',
+          'This market is in auction until it reaches sufficient liquidity.'
+        );
+      cy.getByTestId('link')
+        .should('have.attr', 'href')
+        .and(
+          'include',
+          'https://docs.fairground.vega.xyz/docs/trading-questions/#auctions-what-is-a-liquidity-monitoring-auction'
+        );
+    });
+
+    for (let i = 0; i < 6; i++) {
+      cy.getByTestId(toolTipLabel)
+        .eq(i)
+        .should('have.text', auctionToolTipLabels[i]);
+      cy.getByTestId(toolTipValue).eq(i).should('not.be.empty');
+    }
+  });
+
   function openMarketDropDown() {
     cy.getByTestId('dialog-close').click();
     cy.getByTestId('popover-trigger').click();

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

@@ -1 +1,2 @@
 import '@vegaprotocol/cypress';
+import 'cypress-real-events/support';

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

@@ -13,7 +13,7 @@ export const generateMarket = (override?: PartialDeep<Market>): Market => {
     market: {
       id: 'market-0',
       name: 'ACTIVE MARKET',
-      tradingMode: MarketTradingMode.Continuous,
+      tradingMode: MarketTradingMode.MonitoringAuction,
       state: MarketState.Active,
       decimalPlaces: 5,
       positionDecimalPlaces: 0,
@@ -22,13 +22,18 @@ export const generateMarket = (override?: PartialDeep<Market>): Market => {
           id: '10cd0a793ad2887b340940337fa6d97a212e0e517fe8e9eab2b5ef3a38633f35',
           __typename: 'Market',
         },
+        auctionStart: '2022-08-12T11:13:47.611014117Z',
+        auctionEnd: '2022-08-16T09:08:23.611014117Z',
         markPrice: '13739109',
-        indicativeVolume: '0',
+        indicativeVolume: '2316',
+        indicativePrice: '88470230',
+        suppliedStake: '79481836527',
+        targetStake: '97284519014',
         bestBidVolume: '244',
         bestOfferVolume: '100',
         bestStaticBidVolume: '482',
         bestStaticOfferVolume: '2188',
-        trigger: AuctionTrigger.Unspecified,
+        trigger: AuctionTrigger.Liquidity,
         __typename: 'MarketData',
       },
       tradableInstrument: {

apps/trading-e2e/tsconfig.json

@@ -5,7 +5,7 @@
     "sourceMap": false,
     "outDir": "../../dist/out-tsc",
     "allowJs": true,
-    "types": ["cypress", "node"],
+    "types": ["cypress", "node", "cypress-real-events"],
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "forceConsistentCasingInFileNames": true,

apps/trading/components/trading-mode-tooltip/trading-mode-tooltip.tsx

@@ -23,8 +23,8 @@ const MarketDataGrid = ({ grid }: MarketDataGridProps) => {
         ({ label, value, isEstimate }, index) =>
           value && (
             <div key={index} className="grid grid-cols-2">
-              <span>{label}</span>
+              <span data-testid="tooltip-label">{label}</span>
-              <span>
+              <span data-testid="tooltip-value">
                 {isEstimate && <span className="ml-[-0.625em]">{'~'}</span>}
                 {value}
               </span>
@@ -150,7 +150,7 @@ export const TradingModeTooltip = ({ market }: TradingModeTooltipProps) => {
         case AuctionTrigger.Liquidity: {
           return (
             <>
-              <p className="mb-16">
+              <p data-testid="tooltip-market-info" className="mb-16">
                 <span>
                   {t(
                     'This market is in auction until it reaches sufficient liquidity.'