stats and charts tests

.vscode/tasks.json

@@ -11,7 +11,7 @@
             "detail": "start local dev server",
             "presentation": {
                 "reveal": "silent",
-                "panel": "new",
+                "panel": "dedicated",
                 "close": true,
                 "revealProblems": "onProblem",
             },
@@ -31,7 +31,7 @@
             "detail": "start local dev server for POA network",
             "presentation": {
                 "reveal": "silent",
-                "panel": "new",
+                "panel": "dedicated",
                 "close": true,
                 "revealProblems": "onProblem",
             },
@@ -51,7 +51,7 @@
             "detail": "start local dev server for Goerli network",
             "presentation": {
                 "reveal": "silent",
-                "panel": "new",
+                "panel": "dedicated",
                 "close": true,
                 "revealProblems": "onProblem",
             },
@@ -77,7 +77,7 @@
             },
             "presentation": {
                 "reveal": "never",
-                "panel": "new",
+                "panel": "dedicated",
                 "close": true,
                 "revealProblems": "onProblem",
             },
@@ -91,7 +91,7 @@
             "detail": "run eslint",
             "presentation": {
                 "reveal": "silent",
-                "panel": "new",
+                "panel": "dedicated",
                 "revealProblems": "onProblem",
             },
             "icon": {
@@ -112,7 +112,7 @@
             "detail": "run visual components tests for current file",
             "presentation": {
                 "reveal": "always",
-                "panel": "new",
+                "panel": "dedicated",
                 "focus": true,
             },
             "icon": {
@@ -131,7 +131,7 @@
             "detail": "run visual components tests for current file",
             "presentation": {
                 "reveal": "always",
-                "panel": "new",
+                "panel": "dedicated",
                 "focus": true,
             },
             "icon": {
@@ -150,7 +150,7 @@
             "detail": "run visual components tests",
             "presentation": {
                 "reveal": "always",
-                "panel": "new",
+                "panel": "dedicated",
                 "focus": true,
             },
             "icon": {
@@ -171,7 +171,7 @@
             "detail": "run jest tests",
             "presentation": {
                 "reveal": "always",
-                "panel": "new",
+                "panel": "dedicated",
                 "focus": true,
             },
             "icon": {
@@ -190,7 +190,7 @@
             "detail": "run jest tests in watch mode",
             "presentation": {
                 "reveal": "always",
-                "panel": "new",
+                "panel": "dedicated",
                 "close": true,
                 "focus": true,
             },
@@ -210,7 +210,7 @@
             "detail": "run jest tests in watch mode for current file",
             "presentation": {
                 "reveal": "always",
-                "panel": "new",
+                "panel": "dedicated",
                 "focus": true,
             },
             "icon": {
@@ -230,7 +230,7 @@
             "detail": "build docker image",
             "presentation": {
                 "reveal": "always",
-                "panel": "new",
+                "panel": "dedicated",
                 "close": true,
                 "revealProblems": "onProblem",
                 "focus": true,
@@ -251,7 +251,7 @@
             "detail": "run docker container for POA network",
             "presentation": {
                 "reveal": "silent",
-                "panel": "new",
+                "panel": "dedicated",
                 "close": true,
                 "revealProblems": "onProblem",
             },
@@ -271,7 +271,7 @@
             "detail": "format svg files with svgo",
             "presentation": {
                 "reveal": "silent",
-                "panel": "new",
+                "panel": "dedicated",
                 "close": true,
                 "revealProblems": "onProblem",
             },

mocks/stats/daily_txs.ts

@@ -0,0 +1,128 @@
+export const base = {
+  chart_data: [
+    {
+      date: '2022-11-28',
+      tx_count: 26815,
+    },
+    {
+      date: '2022-11-27',
+      tx_count: 34784,
+    },
+    {
+      date: '2022-11-26',
+      tx_count: 77527,
+    },
+    {
+      date: '2022-11-25',
+      tx_count: 39687,
+    },
+    {
+      date: '2022-11-24',
+      tx_count: 40752,
+    },
+    {
+      date: '2022-11-23',
+      tx_count: 32569,
+    },
+    {
+      date: '2022-11-22',
+      tx_count: 34449,
+    },
+    {
+      date: '2022-11-21',
+      tx_count: 106047,
+    },
+    {
+      date: '2022-11-20',
+      tx_count: 107713,
+    },
+    {
+      date: '2022-11-19',
+      tx_count: 96311,
+    },
+    {
+      date: '2022-11-18',
+      tx_count: 30828,
+    },
+    {
+      date: '2022-11-17',
+      tx_count: 27422,
+    },
+    {
+      date: '2022-11-16',
+      tx_count: 75898,
+    },
+    {
+      date: '2022-11-15',
+      tx_count: 84084,
+    },
+    {
+      date: '2022-11-14',
+      tx_count: 62266,
+    },
+    {
+      date: '2022-11-13',
+      tx_count: 22338,
+    },
+    {
+      date: '2022-11-12',
+      tx_count: 86764,
+    },
+    {
+      date: '2022-11-11',
+      tx_count: 79493,
+    },
+    {
+      date: '2022-11-10',
+      tx_count: 92887,
+    },
+    {
+      date: '2022-11-09',
+      tx_count: 43691,
+    },
+    {
+      date: '2022-11-08',
+      tx_count: 74197,
+    },
+    {
+      date: '2022-11-07',
+      tx_count: 58131,
+    },
+    {
+      date: '2022-11-06',
+      tx_count: 62477,
+    },
+    {
+      date: '2022-11-05',
+      tx_count: 82897,
+    },
+    {
+      date: '2022-11-04',
+      tx_count: 91725,
+    },
+    {
+      date: '2022-11-03',
+      tx_count: 83667,
+    },
+    {
+      date: '2022-11-02',
+      tx_count: 63743,
+    },
+    {
+      date: '2022-11-01',
+      tx_count: 152059,
+    },
+    {
+      date: '2022-10-31',
+      tx_count: 62519,
+    },
+    {
+      date: '2022-10-30',
+      tx_count: 48569,
+    },
+    {
+      date: '2022-10-29',
+      tx_count: 36789,
+    },
+  ],
+};

mocks/stats/index.ts

@@ -0,0 +1,20 @@
+import type { Stats } from 'types/api/stats';
+
+export const base: Stats = {
+  average_block_time: 6212.0,
+  coin_price: '0.00199678',
+  gas_prices: {
+    average: 48.0,
+    fast: 67.5,
+    slow: 48.0,
+  },
+  gas_used_today: '4108680603',
+  market_cap: '330809.96443288102524',
+  network_utilization_percentage: 1.55372064,
+  static_gas_price: '10',
+  total_addresses: '19667249',
+  total_blocks: '30215608',
+  total_gas_used: '0',
+  total_transactions: '82258122',
+  transactions_today: '26815',
+};

playwright-ct.config.ts

@@ -88,6 +88,14 @@ const config: PlaywrightTestConfig = {
         colorScheme: 'dark',
       },
     },
+    {
+      name: 'dark color mode mobile',
+      grep: /\+@dark-mode-mobile/,
+      use: {
+        ...devices['iPhone 13 Pro'],
+        colorScheme: 'dark',
+      },
+    },
   ],
 };
 

ui/home/Stats.pw.tsx

@@ -0,0 +1,25 @@
+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import * as statsMock from 'mocks/stats/index';
+import TestApp from 'playwright/TestApp';
+
+import Stats from './Stats';
+
+const API_URL = '/node-api/stats';
+
+test('all items +@mobile +@dark-mode +@desktop-xl', async({ mount, page }) => {
+  await page.route(API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(statsMock.base),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <Stats/>
+    </TestApp>,
+  );
+  await page.waitForResponse(API_URL),
+
+  await expect(component).toHaveScreenshot();
+});

ui/home/Stats.tsx

@@ -2,7 +2,7 @@ import { Grid } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import React from 'react';
 
-import { Stats } from 'types/api/stats';
+import type { Stats as TStats } from 'types/api/stats';
 import { QueryKeys } from 'types/client/queries';
 
 import appConfig from 'configs/app/config';
@@ -26,7 +26,7 @@ let itemsCount = 5;
 const Stats = () => {
   const fetch = useFetch();
 
-  const { data, isLoading, isError } = useQuery<unknown, unknown, Stats>(
+  const { data, isLoading, isError } = useQuery<unknown, unknown, TStats>(
     [ QueryKeys.stats ],
     async() => await fetch(`/node-api/stats`),
   );

ui/home/indicators/ChainIndicators.pw.tsx

@@ -0,0 +1,32 @@
+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import * as dailyTxsMock from 'mocks/stats/daily_txs';
+import * as statsMock from 'mocks/stats/index';
+import TestApp from 'playwright/TestApp';
+
+import ChainIndicators from './ChainIndicators';
+
+const STATS_API_URL = '/node-api/stats';
+const TX_CHART_API_URL = '/node-api/stats/charts/transactions';
+
+test('daily txs chart +@mobile +@dark-mode +@dark-mode-mobile', async({ mount, page }) => {
+  await page.route(STATS_API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(statsMock.base),
+  }));
+  await page.route(TX_CHART_API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(dailyTxsMock.base),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <ChainIndicators/>
+    </TestApp>,
+  );
+  await page.waitForResponse(STATS_API_URL),
+  await page.hover('.ChartOverlay', { position: { x: 100, y: 100 } });
+
+  await expect(component).toHaveScreenshot();
+});