Add a new WS mocking utility to send fixtures or single messages

frontend/cypress/support/commands.ts

@@ -44,6 +44,7 @@
 
 import { PageIdleDetector } from './PageIdleDetector';
 import { mockWebSocket } from './websocket';
+import { mockWebSocketV2 } from './websocket';
 
 /* global Cypress */
 const codes = {
@@ -72,6 +73,10 @@ Cypress.Commands.add('mockMempoolSocket', () => {
   mockWebSocket();
 });
 
+Cypress.Commands.add('mockMempoolSocketV2', () => {
+  mockWebSocketV2();
+});
+
 Cypress.Commands.add('changeNetwork', (network: "testnet" | "testnet4" | "signet" | "liquid" | "mainnet") => {
   cy.get('.dropdown-toggle').click().then(() => {
     cy.get(`a.${network}`).click().then(() => {

frontend/cypress/support/index.d.ts

@@ -5,6 +5,7 @@ declare namespace Cypress {
         waitForSkeletonGone(): Chainable<any>
         waitForPageIdle(): Chainable<any>
         mockMempoolSocket(): Chainable<any>
+        mockMempoolSocketV2(): Chainable<any>
         changeNetwork(network: "testnet"|"testnet4"|"signet"|"liquid"|"mainnet"): Chainable<any>
     }
 }

frontend/cypress/support/websocket.ts

@@ -27,6 +27,37 @@ const createMock = (url: string) => {
 	return mocks[url];
 };
 
+export const mockWebSocketV2 = () => {
+	cy.on('window:before:load', (win) => {
+		const winWebSocket = win.WebSocket;
+		cy.stub(win, 'WebSocket').callsFake((url) => {
+			console.log(url);
+			if ((new URL(url).pathname.indexOf('/sockjs-node/') !== 0)) {
+				const { server, websocket } = createMock(url);
+
+				win.mockServer = server;
+				win.mockServer.on('connection', (socket) => {
+					win.mockSocket = socket;
+				});
+
+				win.mockServer.on('message', (message) => {
+					console.log(message);
+				});
+
+				return websocket;
+			} else {
+				return new winWebSocket(url);
+			}
+		});
+	});
+
+	cy.on('window:before:unload', () => {
+		for (const url in mocks) {
+			cleanupMock(url);
+		}
+	});
+};
+
 export const mockWebSocket = () => {
 	cy.on('window:before:load', (win) => {
 		const winWebSocket = win.WebSocket;
@@ -65,6 +96,27 @@ export const mockWebSocket = () => {
 	});
 };
 
+export const receiveWebSocketMessageFromServer = ({
+	params
+}: { params?: any } = {}) => {
+	cy.window().then((win) => {
+		if (params.message) {
+			console.log('sending message');
+			win.mockSocket.send(params.message.contents);
+		}
+
+		if (params.file) {
+			cy.readFile(`cypress/fixtures/${params.file.path}`, 'utf-8').then((fixture) => {
+				console.log('sending payload');
+				win.mockSocket.send(JSON.stringify(fixture));
+			});
+
+		}
+	});
+	return;
+};
+
+
 export const emitMempoolInfo = ({
 	params
 }: { params?: any } = {}) => {
@@ -82,16 +134,22 @@ export const emitMempoolInfo = ({
 		switch (params.command) {
 			case "init": {
 				win.mockSocket.send('{"conversions":{"USD":32365.338815782445}}');
-				cy.readFile('cypress/fixtures/mainnet_live2hchart.json', 'ascii').then((fixture) => {
+				cy.readFile('cypress/fixtures/mainnet_live2hchart.json', 'utf-8').then((fixture) => {
 					win.mockSocket.send(JSON.stringify(fixture));
 				});
-				cy.readFile('cypress/fixtures/mainnet_mempoolInfo.json', 'ascii').then((fixture) => {
+				cy.readFile('cypress/fixtures/mainnet_mempoolInfo.json', 'utf-8').then((fixture) => {
 					win.mockSocket.send(JSON.stringify(fixture));
 				});
 				break;
 			}
 			case "rbfTransaction": {
-				cy.readFile('cypress/fixtures/mainnet_rbf.json', 'ascii').then((fixture) => {
+				cy.readFile('cypress/fixtures/mainnet_rbf.json', 'utf-8').then((fixture) => {
+					win.mockSocket.send(JSON.stringify(fixture));
+				});
+				break;
+			}
+			case 'trackTx': {
+				cy.readFile('cypress/fixtures/track_tx.json', 'utf-8').then((fixture) => {
 					win.mockSocket.send(JSON.stringify(fixture));
 				});
 				break;