LatestBlocks and LatestTxs tests

mocks/txs/tx.ts

@@ -61,7 +61,6 @@ export const base: Transaction = {
   tx_tag: null,
   tx_types: [
     'contract_call',
-    'token_transfer',
   ],
   type: 2,
   value: '42000000000000000000',
@@ -80,6 +79,9 @@ export const withContractCreation: Transaction = {
     public_tags: [],
     watchlist_names: [],
   },
+  tx_types: [
+    'contract_creation',
+  ],
 };
 
 export const withTokenTransfer: Transaction = {
@@ -100,6 +102,9 @@ export const withTokenTransfer: Transaction = {
     tokenTransferMock.erc1155,
     tokenTransferMock.erc1155multiple,
   ],
+  tx_types: [
+    'token_transfer',
+  ],
 };
 
 export const withDecodedRevertReason: Transaction = {

ui/home/LatestBlocks.pw.tsx

+import { test as base, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import * as blockMock from 'mocks/blocks/block';
+import * as statsMock from 'mocks/stats/index';
+import * as socketServer from 'playwright/fixtures/socketServer';
+import TestApp from 'playwright/TestApp';
+
+import LatestBlocks from './LatestBlocks';
+
+const STATS_API_URL = '/node-api/stats';
+const BLOCKS_API_URL = '/node-api/index/blocks';
+
+export const test = base.extend<socketServer.SocketServerFixture>({
+  createSocket: socketServer.createSocket,
+});
+
+test('default view +@mobile +@dark-mode', async({ mount, page }) => {
+  await page.route(STATS_API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(statsMock.base),
+  }));
+  await page.route(BLOCKS_API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify([
+      blockMock.base,
+      blockMock.base2,
+    ]),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <LatestBlocks/>
+    </TestApp>,
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
+test.describe('socket', () => {
+  test.describe.configure({ mode: 'serial' });
+
+  test('new item', async({ mount, page, createSocket }) => {
+    await page.route(STATS_API_URL, (route) => route.fulfill({
+      status: 200,
+      body: JSON.stringify(statsMock.base),
+    }));
+    await page.route(BLOCKS_API_URL, (route) => route.fulfill({
+      status: 200,
+      body: JSON.stringify([
+        blockMock.base,
+        blockMock.base2,
+      ]),
+    }));
+
+    const component = await mount(
+      <TestApp withSocket>
+        <LatestBlocks/>
+      </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();
+  });
+});

ui/home/LatestBlocks.tsx

@@ -109,10 +109,10 @@ const LatestBlocks = () => {
   }
 
   return (
-    <>
+    <Box width={{ base: '100%', lg: '280px' }}>
       <Heading as="h4" size="sm" mb={ 4 }>Latest Blocks</Heading>
       { content }
-    </>
+    </Box>
   );
 };
 

ui/home/LatestTxs.pw.tsx

+import { test as base, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import { ROUTES } from 'lib/link/routes';
+import * as statsMock from 'mocks/stats/index';
+import * as txMock from 'mocks/txs/tx';
+import * as socketServer from 'playwright/fixtures/socketServer';
+import TestApp from 'playwright/TestApp';
+
+import LatestTxs from './LatestTxs';
+
+export const test = base.extend<socketServer.SocketServerFixture>({
+  createSocket: socketServer.createSocket,
+});
+
+test('default view +@mobile +@dark-mode', async({ mount, page }) => {
+  await page.route('/node-api/stats', (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(statsMock.base),
+  }));
+  await page.route('/node-api/index/txs', (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify([
+      txMock.base,
+      txMock.withContractCreation,
+      txMock.withTokenTransfer,
+    ]),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <LatestTxs/>
+    </TestApp>,
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
+test.describe('socket', () => {
+  test.describe.configure({ mode: 'serial' });
+
+  const hooksConfig = {
+    router: {
+      pathname: ROUTES.network_index.pattern,
+      query: {},
+    },
+  };
+
+  test('new item', async({ mount, page, createSocket }) => {
+    await page.route('/node-api/stats', (route) => route.fulfill({
+      status: 200,
+      body: JSON.stringify(statsMock.base),
+    }));
+    await page.route('/node-api/index/txs', (route) => route.fulfill({
+      status: 200,
+      body: JSON.stringify([
+        txMock.base,
+        txMock.withContractCreation,
+        txMock.withTokenTransfer,
+      ]),
+    }));
+
+    const component = await mount(
+      <TestApp withSocket>
+        <LatestTxs/>
+      </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();
+  });
+});

ui/home/LatestTxs.tsx

@@ -53,10 +53,10 @@ const LatestTransactions = () => {
   }
 
   return (
-    <>
+    <Box flexGrow={ 1 }>
       <Heading as="h4" size="sm" mb={ 4 }>Latest transactions</Heading>
       { content }
-    </>
+    </Box>
   );
 };
 

ui/pages/Home.tsx

@@ -47,9 +47,9 @@ const Home = () => {
       </Box>
       <Stats/>
       <ChainIndicators/>
-      <Flex mt={ 12 } direction={{ base: 'column', lg: 'row' }}>
-        <Box mr={{ base: 0, lg: 12 }} mb={{ base: 8, lg: 0 }} width={{ base: '100%', lg: '280px' }}><LatestBlocks/></Box>
-        <Box flexGrow={ 1 }><LatestTxs/></Box>
+      <Flex mt={ 12 } direction={{ base: 'column', lg: 'row' }} columnGap={ 12 } rowGap={ 8 }>
+        <LatestBlocks/>
+        <LatestTxs/>
       </Flex>
     </Page>
   );