Merge pull request #501 from blockscout/address-balance-history-tests

tests for address balance history tab

mocks/address/coinBalanceHistory.ts

-export const base = {
+import type { AddressCoinBalanceHistoryItem, AddressCoinBalanceHistoryResponse, AddressCoinBalanceHistoryChart } from 'types/api/address';
+
+export const base: AddressCoinBalanceHistoryItem = {
   block_number: 30367643,
   block_timestamp: '2022-12-11T17:55:20Z',
   delta: '-5568096000000000',
   transaction_hash: null,
   value: '107014805905725000000',
 };
+
+export const baseResponse: AddressCoinBalanceHistoryResponse = {
+  items: [
+    {
+      block_number: 30367643,
+      block_timestamp: '2022-10-11T17:55:20Z',
+      delta: '-2105682233848856',
+      transaction_hash: null,
+      value: '10102109526582662088',
+    },
+    {
+      block_number: 30367234,
+      block_timestamp: '2022-10-01T17:55:20Z',
+      delta: '1933020674364000',
+      transaction_hash: '0x62d597ebcf3e8d60096dd0363bc2f0f5e2df27ba1dacd696c51aa7c9409f3193',
+      value: '10143933697708939226',
+    },
+    {
+      block_number: 30363402,
+      block_timestamp: '2022-09-03T17:55:20Z',
+      delta: '-1448410607186694',
+      transaction_hash: null,
+      value: '10142485287101752532',
+    },
+  ],
+  next_page_params: null,
+};
+
+export const chartResponse: AddressCoinBalanceHistoryChart = [
+  {
+    date: '2022-11-02',
+    value: '128238612887883515',
+  },
+  {
+    date: '2022-11-03',
+    value: '199807583157570922',
+  },
+  {
+    date: '2022-11-04',
+    value: '114487912907005778',
+  },
+  {
+    date: '2022-11-05',
+    value: '219533112907005778',
+  },
+  {
+    date: '2022-11-06',
+    value: '116487912907005778',
+  },
+  {
+    date: '2022-11-07',
+    value: '199807583157570922',
+  },
+  {
+    date: '2022-11-08',
+    value: '216488112907005778',
+  },
+];

types/api/address.ts

@@ -88,7 +88,7 @@ export interface AddressCoinBalanceHistoryResponse {
   next_page_params: {
     block_number: number;
     items_count: number;
-  };
+  } | null;
 }
 
 export type AddressCoinBalanceHistoryChart = Array<{

ui/address/AddressCoinBalance.pw.tsx

+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import * as balanceHistoryMock from 'mocks/address/coinBalanceHistory';
+import TestApp from 'playwright/TestApp';
+import buildApiUrl from 'playwright/utils/buildApiUrl';
+
+import AddressCoinBalance from './AddressCoinBalance';
+
+const addressHash = 'hash';
+const BALANCE_HISTORY_API_URL = buildApiUrl('address_coin_balance', { id: addressHash });
+const BALANCE_HISTORY_CHART_API_URL = buildApiUrl('address_coin_balance_chart', { id: addressHash });
+const hooksConfig = {
+  router: {
+    query: { id: addressHash },
+  },
+};
+
+test('base view +@dark-mode +@mobile', async({ mount, page }) => {
+  await page.route(BALANCE_HISTORY_API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(balanceHistoryMock.baseResponse),
+  }));
+  await page.route(BALANCE_HISTORY_CHART_API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(balanceHistoryMock.chartResponse),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <AddressCoinBalance/>
+    </TestApp>,
+    { hooksConfig },
+  );
+  await page.waitForFunction(() => {
+    return document.querySelector('path[data-name="chart-Balances-small"]')?.getAttribute('opacity') === '1';
+  });
+  await page.mouse.move(240, 100);
+
+  await expect(component).toHaveScreenshot();
+});

ui/shared/chart/ChartArea.tsx

@@ -47,7 +47,14 @@ const ChartArea = ({ id, xScale, yScale, color, data, disableAnimation, ...props
 
   return (
     <>
-      <path ref={ ref } d={ d } fill={ color ? `url(#${ gradientColorId })` : 'url(#gradient-chart-area-default)' } opacity={ 0 } { ...props }/>
+      <path
+        ref={ ref }
+        d={ d }
+        fill={ color ? `url(#${ gradientColorId })` : 'url(#gradient-chart-area-default)' }
+        opacity={ 0 }
+        data-name={ id || 'gradient-chart-area' }
+        { ...props }
+      />
       { color ? (
         <defs>
           <linearGradient id={ `${ gradientColorId }` } x1="0%" x2="0%" y1="0%" y2="100%">

ui/shared/chart/ChartWidgetGraph.tsx

@@ -54,7 +54,7 @@ const ChartWidgetGraph = ({ isEnlarged, items, onZoom, isZoomResetInitial, title
   }, [ isZoomResetInitial ]);
 
   return (
-    <svg width={ width || '100%' } height={ height || 'auto' } ref={ ref } cursor="pointer" id={ chartId } opacity={ width ? 1 : 0 }>
+    <svg width={ width || '100%' } height={ height || '100%' } ref={ ref } cursor="pointer" id={ chartId } opacity={ width ? 1 : 0 }>
 
       <g transform={ `translate(${ CHART_MARGIN?.left || 0 },${ CHART_MARGIN?.top || 0 })` }>
         <ChartGridLine