TxsNewItemNotice test

playwright/fixtures/socketServer.ts

@@ -55,6 +55,8 @@ export const joinChannel = async(socket: WebSocket, channelName: string) => {
   });
 };
 
+export function sendMessage(socket: WebSocket, channel: Channel, msg: 'transaction', payload: { transaction: number }): void;
+export function sendMessage(socket: WebSocket, channel: Channel, msg: 'pending_transaction', payload: { pending_transaction: number }): void;
 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([

ui/txs/TxsNewItemNotice.pw.tsx

+import { test as base, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import { ROUTES } from 'lib/link/routes';
+import * as socketServer from 'playwright/fixtures/socketServer';
+import TestApp from 'playwright/TestApp';
+
+import TxsNewItemNotice from './TxsNewItemNotice';
+
+const hooksConfig = {
+  router: {
+    pathname: ROUTES.txs.pattern,
+    query: {},
+  },
+};
+
+export const test = base.extend<socketServer.SocketServerFixture>({
+  createSocket: socketServer.createSocket,
+});
+
+test.describe.configure({ mode: 'serial' });
+
+test('new item in validated txs list', async({ mount, createSocket }) => {
+  const component = await mount(
+    <TestApp withSocket>
+      <TxsNewItemNotice/>
+    </TestApp>,
+    { hooksConfig },
+  );
+
+  const socket = await createSocket();
+  const channel = await socketServer.joinChannel(socket, 'transactions:new_transaction');
+  socketServer.sendMessage(socket, channel, 'transaction', { transaction: 1 });
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('2 new items in validated txs list', async({ mount, page, createSocket }) => {
+  const component = await mount(
+    <TestApp withSocket>
+      <TxsNewItemNotice/>
+    </TestApp>,
+    { hooksConfig },
+  );
+
+  const socket = await createSocket();
+  const channel = await socketServer.joinChannel(socket, 'transactions:new_transaction');
+  socketServer.sendMessage(socket, channel, 'transaction', { transaction: 1 });
+  socketServer.sendMessage(socket, channel, 'transaction', { transaction: 1 });
+
+  await page.waitForSelector('text=2 more');
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('connection loss', async({ mount, createSocket }) => {
+  const component = await mount(
+    <TestApp withSocket>
+      <TxsNewItemNotice/>
+    </TestApp>,
+    { hooksConfig },
+  );
+
+  const socket = await createSocket();
+  await socketServer.joinChannel(socket, 'transactions:new_transaction');
+  socket.close();
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('fetching', async({ mount, createSocket }) => {
+  const component = await mount(
+    <TestApp withSocket>
+      <TxsNewItemNotice/>
+    </TestApp>,
+    { hooksConfig },
+  );
+
+  const socket = await createSocket();
+  await socketServer.joinChannel(socket, 'transactions:new_transaction');
+
+  await expect(component).toHaveScreenshot();
+});

ui/txs/TxsNewItemNotice.tsx

@@ -8,7 +8,7 @@ interface InjectedProps {
 }
 
 interface Props {
-  children: (props: InjectedProps) => JSX.Element;
+  children?: (props: InjectedProps) => JSX.Element;
   className?: string;
 }
 
@@ -51,7 +51,7 @@ const TxsNewItemNotice = ({ children, className }: Props) => {
     );
   })();
 
-  return children({ content });
+  return children ? children({ content }) : content;
 };
 
 export default chakra(TxsNewItemNotice);