tests for block socket

configs/envs/.env.pw

 # app config
-NEXT_PUBLIC_APP_HOST=blockscout.com
+NEXT_PUBLIC_APP_PROTOCOL=http
+NEXT_PUBLIC_APP_HOST=localhost
+NEXT_PUBLIC_APP_PORT=3100
 NEXT_PUBLIC_APP_INSTANCE=pw
 NEXT_PUBLIC_APP_ENV=testing
 

lib/socket/context.tsx

@@ -6,7 +6,7 @@ export const SocketContext = React.createContext<Socket | null>(null);
 
 interface SocketProviderProps {
   children: React.ReactNode;
-  url: string;
+  url?: string;
   options?: Partial<SocketConnectOption>;
 }
 
@@ -14,6 +14,10 @@ export function SocketProvider({ children, options, url }: SocketProviderProps)
   const [ socket, setSocket ] = useState<Socket | null>(null);
 
   useEffect(() => {
+    if (!url) {
+      return;
+    }
+
     const socketInstance = new Socket(url, options);
     socketInstance.connect();
     setSocket(socketInstance);

package.json

@@ -68,6 +68,7 @@
     "@types/phoenix": "^1.5.4",
     "@types/react": "18.0.9",
     "@types/react-dom": "18.0.5",
+    "@types/ws": "^8.5.3",
     "@typescript-eslint/eslint-plugin": "^5.27.0",
     "dotenv-cli": "^6.0.0",
     "eslint": "8.16.0",
@@ -86,7 +87,8 @@
     "ts-node": "^10.9.1",
     "typescript": "4.7.2",
     "vite-plugin-svgr": "^2.2.2",
-    "vite-tsconfig-paths": "^3.5.2"
+    "vite-tsconfig-paths": "^3.5.2",
+    "ws": "^8.11.0"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": "eslint --cache --fix"

playwright/TestApp.tsx

@@ -2,13 +2,16 @@ import { ChakraProvider } from '@chakra-ui/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import React from 'react';
 
+import { SocketProvider } from 'lib/socket/context';
+import { PORT } from 'playwright/fixtures/socketServer';
 import theme from 'theme';
 
 type Props = {
   children: React.ReactNode;
+  withSocket?: boolean;
 }
 
-const TestApp = ({ children }: Props) => {
+const TestApp = ({ children, withSocket }: Props) => {
   const [ queryClient ] = React.useState(() => new QueryClient({
     defaultOptions: {
       queries: {
@@ -21,7 +24,9 @@ const TestApp = ({ children }: Props) => {
   return (
     <ChakraProvider theme={ theme }>
       <QueryClientProvider client={ queryClient }>
-        { children }
+        <SocketProvider url={ withSocket ? `ws://localhost:${ PORT }` : undefined }>
+          { children }
+        </SocketProvider>
       </QueryClientProvider>
     </ChakraProvider>
   );

playwright/fixtures/socketServer.ts

+import type { TestFixture, Page } from '@playwright/test';
+import type { WebSocket } from 'ws';
+import { WebSocketServer } from 'ws';
+
+import type { NewBlockSocketResponse } from 'types/api/block';
+
+type ReturnType = () => Promise<WebSocket>;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type ArgsType = any;
+
+type Channel = [string, string, string];
+
+export interface SocketServerFixture {
+  createSocket: ReturnType;
+}
+
+export const PORT = 3200;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const createSocket: TestFixture<ReturnType, ArgsType> = async({ page }, use) => {
+  const socketServer = new WebSocketServer({ port: PORT });
+
+  const connectionPromise = new Promise<WebSocket>((resolve) => {
+    socketServer.on('connection', (socket: WebSocket) => {
+      resolve(socket);
+    });
+  });
+
+  await use(() => connectionPromise);
+
+  socketServer.close();
+};
+
+export const joinChannel = async(socket: WebSocket, channelName: string) => {
+  return new Promise<[string, string, string]>((resolve, reject) => {
+    socket.on('message', (msg) => {
+      try {
+        const payload: Array<string> = JSON.parse(msg.toString());
+
+        if (channelName === payload[2] && payload[3] === 'phx_join') {
+          socket.send(JSON.stringify([
+            payload[0],
+            payload[1],
+            payload[2],
+            'phx_reply',
+            { response: {}, status: 'ok' },
+          ]));
+
+          resolve([ payload[0], payload[1], payload[2] ]);
+        }
+      } catch (error) {
+        reject(error);
+      }
+    });
+  });
+};
+
+export function sendMessage(socket: WebSocket, channel: Channel, msg: 'new_block', payload: NewBlockSocketResponse): void;
+export function sendMessage(socket: WebSocket, channel: Channel, msg: string, payload: unknown): void {
+  socket.send(JSON.stringify([
+    ...channel,
+    msg,
+    payload,
+  ]));
+}
+
+// we massively rely here on phoenix socket lib implementation where page hide event causes socket disconnect
+// i was not able to find better way to simulate connection loss state, feel free to improve it
+// see more here https://github.com/phoenixframework/phoenix/blob/3cf1f1065ce11a906bd04b7841814cdced3f0df2/assets/js/phoenix/socket.js#L113
+export async function simulateConnectionLoss(page: Page) {
+  await page.evaluate(() => {
+    window.dispatchEvent(new Event('pagehide'));
+  });
+}

ui/blocks/BlocksContent.pw.tsx

-import { test, expect } from '@playwright/experimental-ct-react';
+import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as blockMock from 'mocks/blocks/block';
+import * as socketServer from 'playwright/fixtures/socketServer';
 import TestApp from 'playwright/TestApp';
 
 import BlocksContent from './BlocksContent';
 
 const API_URL = '/node-api/blocks';
 
+export const test = base.extend<socketServer.SocketServerFixture>({
+  createSocket: socketServer.createSocket,
+});
+
+// FIXME
+// test cases which use socket cannot run in parallel since the socket server always run on the same port
+test.describe.configure({ mode: 'serial' });
+
 test('base view +@mobile', async({ mount, page }) => {
   await page.route(API_URL, (route) => route.fulfill({
     status: 200,
@@ -19,8 +28,52 @@ test('base view +@mobile', async({ mount, page }) => {
       <BlocksContent/>
     </TestApp>,
   );
+  await page.waitForResponse(API_URL);
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('new item from socket', async({ mount, page, createSocket }) => {
+  await page.route(API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(blockMock.baseListResponse),
+  }));
+
+  const component = await mount(
+    <TestApp withSocket>
+      <BlocksContent/>
+    </TestApp>,
+  );
+
+  const socket = await createSocket();
+  const channel = await socketServer.joinChannel(socket, 'blocks:new_block');
+  socketServer.sendMessage(socket, channel, 'new_block', {
+    average_block_time: '6212.0',
+    block: {
+      ...blockMock.base,
+      height: blockMock.base.height + 1,
+      timestamp: '2022-11-11T11:59:58Z',
+    },
+  });
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('socket error', async({ mount, page, createSocket }) => {
+  await page.route(API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(blockMock.baseListResponse),
+  }));
+
+  const component = await mount(
+    <TestApp withSocket>
+      <BlocksContent/>
+    </TestApp>,
+  );
 
-  await page.waitForResponse(API_URL),
+  const socket = await createSocket();
+  await socketServer.joinChannel(socket, 'blocks:new_block');
+  await socketServer.simulateConnectionLoss(page);
 
   await expect(component).toHaveScreenshot();
 });

yarn.lock

@@ -3525,6 +3525,13 @@
   resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.2.tgz#6286b4c7228d58ab7866d19716f3696e03a09397"
   integrity sha512-Q5vtl1W5ue16D+nIaW8JWebSSraJVlK+EthKn7e7UcD4KWsaSJ8BqGPXNaPghgtcn/fhvrN17Tv8ksUsQpiplw==
 
+"@types/ws@^8.5.3":
+  version "8.5.3"
+  resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.3.tgz#7d25a1ffbecd3c4f2d35068d0b283c037003274d"
+  integrity sha512-6YOoWjruKj1uLf3INHH7D3qTXwFfEsg1kf3c0uDdSBJwfa/llkwIjrAGV7j7mVgGNbzTQ3HiHKKDXl6bJPD97w==
+  dependencies:
+    "@types/node" "*"
+
 "@types/yargs-parser@*":
   version "21.0.0"
   resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-21.0.0.tgz#0c60e537fa790f5f9472ed2776c2b71ec117351b"
@@ -8971,7 +8978,7 @@ ws@7.4.6:
   resolved "https://registry.yarnpkg.com/ws/-/ws-7.4.6.tgz#5654ca8ecdeee47c33a9a4bf6d28e2be2980377c"
   integrity sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==
 
-ws@^8.9.0:
+ws@^8.11.0, ws@^8.9.0:
   version "8.11.0"
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.11.0.tgz#6a0d36b8edfd9f96d8b25683db2f8d7de6e8e143"
   integrity sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==