chore: mock gql subscriptions (#1419)

* chore: mock gql subscriptions

* chore: fix market info, inprove fills unit tests

* chore: fix socket mock

apps/trading-e2e/.env

@@ -1,2 +1,3 @@
 NX_USE_ENV_OVERRIDES=0
 NX_VEGA_WALLET_URL=http://localhost:1789/api/v1
+CYPRESS_VEGA_URL=https://api.n07.testnet.vega.xyz/graphql

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

@@ -11,6 +11,7 @@ const formFieldError = 'input-error-text';
 describe('deposit form validation', () => {
   beforeEach(() => {
     cy.mockWeb3Provider();
+    cy.mockGQLSubscription();
     cy.mockGQL((req) => {
       aliasQuery(req, 'NetworkParamsQuery', generateNetworkParameters());
       aliasQuery(req, 'DepositPage', generateDepositPage());

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

@@ -10,6 +10,7 @@ describe('vega wallet', () => {
   beforeEach(() => {
     // Using portfolio page as it requires vega wallet connection
     cy.visit('/portfolio');
+    cy.mockGQLSubscription();
     cy.get('main[data-testid="portfolio"]').should('exist');
   });
 

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

@@ -8,6 +8,7 @@ describe('home', () => {
     cy.mockGQL((req) => {
       mockTradingPage(req, MarketState.STATE_ACTIVE);
     });
+    cy.mockGQLSubscription();
     cy.visit('/');
   });
 

apps/trading-e2e/src/integration/market-info.cy.ts

@@ -12,6 +12,7 @@ describe('market info is displayed', () => {
     cy.mockGQL((req) => {
       mockTradingPage(req, MarketState.STATE_ACTIVE);
     });
+    cy.mockGQLSubscription();
     cy.visit('/markets/market-0');
     cy.wait('@Market');
     cy.getByTestId(marketInfoBtn).click();
@@ -128,7 +129,9 @@ describe('market info is displayed', () => {
   });
 
   it('liquidity displayed', () => {
-    cy.getByTestId('accordion-toggle').eq(13).click();
+    cy.getByTestId(marketTitle)
+      .contains(/Liquidity(?! m)/)
+      .click();
 
     validateMarketDataRow(0, 'Target Stake', '0.56789 tBTC');
     validateMarketDataRow(1, 'Supplied Stake', '0.56767 tBTC');

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

@@ -6,6 +6,7 @@ describe('markets table', () => {
     cy.mockGQL((req) => {
       mockTradingPage(req, MarketState.STATE_ACTIVE);
     });
+    cy.mockGQLSubscription();
   });
 
   it('renders markets correctly', () => {

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

@@ -6,6 +6,7 @@ beforeEach(() => {
   cy.mockGQL((req) => {
     mockTradingPage(req, MarketState.STATE_ACTIVE);
   });
+  cy.mockGQLSubscription();
   cy.visit('/markets/market-0');
 });
 

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

@@ -6,6 +6,7 @@ beforeEach(() => {
   cy.mockGQL((req) => {
     mockTradingPage(req, MarketState.STATE_ACTIVE);
   });
+  cy.mockGQLSubscription();
   cy.visit('/markets/market-0');
 });
 

apps/trading-e2e/src/integration/trading-deal-ticket.cy.ts

@@ -32,6 +32,7 @@ describe('deal ticket orders', () => {
     cy.mockGQL((req) => {
       mockTradingPage(req, MarketState.STATE_ACTIVE);
     });
+    cy.mockGQLSubscription();
     cy.visit('/markets/market-0');
     cy.wait('@Market');
     connectVegaWallet();

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

@@ -10,6 +10,7 @@ describe('fills', () => {
       mockTradingPage(req, MarketState.STATE_ACTIVE);
       aliasQuery(req, 'Fills', generateFills());
     });
+    cy.mockGQLSubscription();
   });
 
   it('renders fills on portfolio page', () => {

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

@@ -6,6 +6,7 @@ before(() => {
   cy.mockGQL((req) => {
     mockTradingPage(req, MarketState.STATE_ACTIVE);
   });
+  cy.mockGQLSubscription();
   cy.visit('/markets/market-0');
   cy.getByTestId('Orders').click();
   cy.getByTestId('tab-orders').contains('Please connect Vega wallet');

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

@@ -6,6 +6,7 @@ beforeEach(() => {
   cy.mockGQL((req) => {
     mockTradingPage(req, MarketState.STATE_ACTIVE);
   });
+  cy.mockGQLSubscription();
 });
 
 describe('positions', () => {

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

@@ -5,6 +5,7 @@ beforeEach(() => {
   cy.mockGQL((req) => {
     mockTradingPage(req, MarketState.STATE_ACTIVE);
   });
+  cy.mockGQLSubscription();
   cy.visit('/markets/market-0');
 });
 

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

@@ -23,6 +23,7 @@ describe('withdraw', () => {
       aliasQuery(req, 'WithdrawFormQuery', generateWithdrawFormQuery());
       aliasQuery(req, 'Accounts', generateAccounts());
     });
+    cy.mockGQLSubscription();
 
     cy.visit('/portfolio');
     cy.getByTestId('Withdrawals').click();

libs/cypress/src/index.ts

@@ -1,5 +1,8 @@
 import { addGetTestIdcommand } from './lib/commands/get-by-test-id';
-import { addMockGQLCommand } from './lib/commands/mock-gql';
+import {
+  addMockGQLCommand,
+  addMockGQLSubscriptionCommand,
+} from './lib/commands/mock-gql';
 import { addMockVegaWalletCommands } from './lib/commands/mock-vega-wallet';
 import { addMockWeb3ProviderCommand } from './lib/commands/mock-web3-provider';
 import { addSlackCommand } from './lib/commands/slack';
@@ -8,6 +11,7 @@ import { addHighlightLog } from './lib/commands/highlight-log';
 addGetTestIdcommand();
 addSlackCommand();
 addMockGQLCommand();
+addMockGQLSubscriptionCommand();
 addMockVegaWalletCommands();
 addMockWeb3ProviderCommand();
 addHighlightLog();

libs/cypress/src/lib/commands/mock-gql.ts

@@ -1,11 +1,12 @@
 import type { RouteHandler } from 'cypress/types/net-stubbing';
-
+import { Server, WebSocket } from 'mock-socket';
 declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace Cypress {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     interface Chainable<Subject> {
       mockGQL(handler: RouteHandler): void;
+      mockGQLSubscription(mocks?: Record<string, onMessage>): void;
     }
   }
 }
@@ -15,3 +16,49 @@ export function addMockGQLCommand() {
     cy.intercept('POST', '**/graphql', handler).as('GQL');
   });
 }
+
+const mockSocketServer = Cypress.env('VEGA_URL')
+  ? new Server(Cypress.env('VEGA_URL').replace('http', 'ws'))
+  : null;
+
+interface onMessage {
+  (send: (data: object) => void, variables: object): void;
+}
+
+export function addMockGQLSubscriptionCommand() {
+  Cypress.Commands.add(
+    'mockGQLSubscription',
+    (mocks?: Record<string, onMessage>) => {
+      cy.on('window:before:load', (win) => {
+        if (!mockSocketServer) {
+          return;
+        }
+        win.WebSocket = WebSocket;
+        mockSocketServer.on('connection', (socket) => {
+          socket.on('message', (message) => {
+            if (typeof message !== 'string') {
+              return;
+            }
+            const { id, payload, type } = JSON.parse(message);
+            if (type === 'connection_init') {
+              socket.send(JSON.stringify({ type: 'connection_ack' }));
+            }
+            if (payload && mocks && mocks[payload.operationName]) {
+              mocks[payload.operationName](
+                (data) =>
+                  socket.send(
+                    JSON.stringify({
+                      type: 'data',
+                      id,
+                      payload: { errors: [], data },
+                    })
+                  ),
+                payload.variables
+              );
+            }
+          });
+        });
+      });
+    }
+  );
+}

libs/fills/src/lib/fills-table.spec.tsx

@@ -51,7 +51,8 @@ describe('FillsTable', () => {
     await waitForGridToBeInTheDOM();
     await waitForDataToHaveLoaded();
 
-    await waitFor(() => {
+    await waitFor(async () => {
+      await screen.findByText('Market');
       const headers = screen.getAllByRole('columnheader');
       expect(headers).toHaveLength(7);
       expect(headers.map((h) => h.textContent?.trim())).toEqual([

libs/market-info/src/components/market-info/info-market.tsx

@@ -238,7 +238,7 @@ export const Info = ({ market, onSelect }: InfoProps) => {
         <MarketInfoTable
           data={market.riskFactors}
           unformatted={true}
-          omits={['market']}
+          omits={['market', '__typename']}
         />
       ),
     },
@@ -264,12 +264,6 @@ export const Info = ({ market, onSelect }: InfoProps) => {
         <MarketInfoTable data={trigger} decimalPlaces={market.decimalPlaces} />
       ),
     })),
-    ...(market.data?.priceMonitoringBounds || []).map((trigger, i) => ({
-      title: t(`Price monitoring bound ${i + 1}`),
-      content: (
-        <MarketInfoTable data={trigger} decimalPlaces={market.decimalPlaces} />
-      ),
-    })),
     {
       title: t('Liquidity monitoring parameters'),
       content: (

package.json

@@ -160,6 +160,7 @@
     "jest-websocket-mock": "^2.3.0",
     "lint-staged": "^12.3.3",
     "mock-apollo-client": "^1.2.0",
+    "mock-socket": "^9.1.5",
     "npmlog": "^6.0.2",
     "nx": "14.5.10",
     "postcss": "8.4.16",

yarn.lock

@@ -16775,7 +16775,7 @@ mock-apollo-client@^1.2.0:
   resolved "https://registry.yarnpkg.com/mock-apollo-client/-/mock-apollo-client-1.2.1.tgz#e3bfdc3ff73b1fea28fa7e91ec82e43ba8cbfa39"
   integrity sha512-QYQ6Hxo+t7hard1bcHHbsHxlNQYTQsaMNsm2Psh/NbwLMi2R4tGzplJKt97MUWuARHMq3GHB4PTLj/gxej4Caw==
 
-mock-socket@^9.1.0:
+mock-socket@^9.1.0, mock-socket@^9.1.5:
   version "9.1.5"
   resolved "https://registry.yarnpkg.com/mock-socket/-/mock-socket-9.1.5.tgz#2c4e44922ad556843b6dfe09d14ed8041fa2cdeb"
   integrity sha512-3DeNIcsQixWHHKk6NdoBhWI4t1VMj5/HzfnI1rE/pLl5qKx7+gd4DNA07ehTaZ6MoUU053si6Hd+YtiM/tQZfg==