stats updates tests

mocks/stats/line.ts

@@ -191,7 +191,7 @@ export const averageGasPrice: stats.LineChart = {
   ],
   info: {
     title: 'Chart title',
-    description: 'Chert description',
+    description: 'Chart description',
     id: 'chart',
     resolutions: [ 'DAY', 'MONTH' ],
   },

ui/pages/Chart.pw.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import * as statsLineMock from 'mocks/stats/line';
+import { test, expect } from 'playwright/lib';
+import formatDate from 'ui/shared/chart/utils/formatIntervalDate';
+
+import Chart from './Chart';
+
+const CHART_ID = 'averageGasPrice';
+
+test.beforeEach(async({ mockTextAd }) => {
+  await mockTextAd();
+});
+
+const hooksConfig = {
+  router: {
+    query: { id: CHART_ID },
+  },
+};
+
+test('base view +@dark-mode +@mobile', async({ render, mockApiResponse, page }) => {
+  const date = new Date();
+  date.setMonth(date.getMonth() - 1);
+
+  const chartApiUrl = await mockApiResponse(
+    'stats_line',
+    statsLineMock.averageGasPrice,
+    {
+      pathParams: { id: CHART_ID },
+      queryParams: {
+        from: formatDate(date),
+        to: '2022-11-11',
+        resolution: 'DAY',
+      },
+    },
+  );
+
+  const component = await render(<Chart/>, { hooksConfig });
+  await page.waitForResponse(chartApiUrl);
+  await page.waitForFunction(() => {
+    return document.querySelector('path[data-name="chart-Charttitle-fullscreen"]')?.getAttribute('opacity') === '1';
+  });
+  await expect(component).toHaveScreenshot();
+});

ui/pages/Chart.tsx

@@ -167,17 +167,17 @@ const Chart = () => {
         mb={ 3 }
         isLoading={ isInfoLoading }
         backLink={ backLink }
-        contentAfter={ isMobile ? shareAndMenu : undefined }
+        afterTitle={ isMobile ? shareAndMenu : undefined }
         secondRow={ info?.description || lineQuery.data?.info?.description }
         withTextAd
       />
       <Flex alignItems="center" justifyContent="space-between">
         <Flex alignItems="center" gap={ 3 } maxW="100%" overflow="hidden">
           <Text>Period</Text>
           <ChartIntervalSelect interval={ interval } onIntervalChange={ setIntervalState }/>
-          { lineQuery.data?.info?.resolutions && lineQuery.data?.info?.resolutions.length > 2 && (
+          { lineQuery.data?.info?.resolutions && lineQuery.data?.info?.resolutions.length > 1 && (
             <>
-              <Text ml={ 3 }>{ isMobile ? 'Res.' : 'Resolution' }</Text>
+              <Text ml={{ base: 0, lg: 3 }}>{ isMobile ? 'Res.' : 'Resolution' }</Text>
               <ChartResolutionSelect
                 resolution={ resolution }
                 onResolutionChange={ setResolution }

ui/shared/chart/ChartWidget.tsx

@@ -87,6 +87,8 @@ const ChartWidget = ({
           isLoaded={ !isLoading }
           color="text_secondary"
           fontSize="xs"
+          mt={ 1 }
+
         >
           <span>{ description }</span>
         </Skeleton>