chore: add example of gql subscription mock usage (#1440)

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

@@ -1,12 +1,26 @@
 import { MarketState } from '@vegaprotocol/types';
 import { mockTradingPage } from '../support/trading';
+import type { onMessage } from '@vegaprotocol/cypress';
+import type {
+  OrderSub as OrderSubData,
+  OrderSubVariables,
+} from '@vegaprotocol/orders';
 import { connectVegaWallet } from '../support/vega-wallet';
 
+const onOrderSub: onMessage<OrderSubData, OrderSubVariables> = function (send) {
+  send({
+    orders: [],
+  });
+};
+
+const subscriptionMocks = { OrderSub: onOrderSub };
+
 before(() => {
+  cy.spy(subscriptionMocks, 'OrderSub');
   cy.mockGQL((req) => {
     mockTradingPage(req, MarketState.STATE_ACTIVE);
   });
-  cy.mockGQLSubscription();
+  cy.mockGQLSubscription(subscriptionMocks);
   cy.visit('/markets/market-0');
   cy.getByTestId('Orders').click();
   cy.getByTestId('tab-orders').contains('Please connect Vega wallet');
@@ -28,6 +42,7 @@ describe('orders', { tags: '@smoke' }, () => {
 
   it('renders orders', () => {
     cy.getByTestId('tab-orders').should('be.visible');
+    expect(subscriptionMocks.OrderSub).to.be.calledOnce;
 
     cy.getByTestId('tab-orders').within(() => {
       cy.get(`[col-id='${orderSymbol}']`).each(($symbol) => {

libs/cypress/src/index.ts

@@ -17,6 +17,7 @@ addMockWeb3ProviderCommand();
 addHighlightLog();
 
 export * from './lib/graphql-test-utils';
+export type { onMessage } from './lib/commands/mock-gql';
 
 Cypress.on(
   'uncaught:exception',

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

@@ -1,5 +1,10 @@
 import type { RouteHandler } from 'cypress/types/net-stubbing';
 import { Server, WebSocket } from 'mock-socket';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export interface onMessage<T = any, V = any> {
+  (send: (data: T) => void, variables: V): void;
+}
 declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace Cypress {
@@ -21,10 +26,6 @@ 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',
@@ -35,20 +36,22 @@ export function addMockGQLSubscriptionCommand() {
         }
         win.WebSocket = WebSocket;
         mockSocketServer.on('connection', (socket) => {
-          socket.on('message', (message) => {
-            if (typeof message !== 'string') {
+          socket.on('message', (rawMessage) => {
+            if (typeof rawMessage !== 'string') {
               return;
             }
-            const { id, payload, type } = JSON.parse(message);
+            const message = JSON.parse(rawMessage);
+            const { id, payload, type } = message;
             if (type === 'connection_init') {
               socket.send(JSON.stringify({ type: 'connection_ack' }));
+              return;
             }
             if (payload && mocks && mocks[payload.operationName]) {
               mocks[payload.operationName](
                 (data) =>
                   socket.send(
                     JSON.stringify({
-                      type: 'data',
+                      type: 'next',
                       id,
                       payload: { errors: [], data },
                     })