diff --git a/mocks/stats/line.ts b/mocks/stats/line.ts index ce9a4637f7..0c10eed840 100644 --- a/mocks/stats/line.ts +++ b/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' ], }, diff --git a/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png b/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png index 4b2d50bcea..582a2e501c 100644 Binary files a/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png and b/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png differ diff --git a/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_default_base-view-dark-mode-mobile-1.png b/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_default_base-view-dark-mode-mobile-1.png index 58053b91e2..5c67fdd9f3 100644 Binary files a/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_default_base-view-dark-mode-mobile-1.png and b/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_default_base-view-dark-mode-mobile-1.png differ diff --git a/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_mobile_base-view-dark-mode-mobile-1.png b/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_mobile_base-view-dark-mode-mobile-1.png index c86acec370..2b1559efce 100644 Binary files a/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_mobile_base-view-dark-mode-mobile-1.png and b/ui/address/__screenshots__/AddressCoinBalance.pw.tsx_mobile_base-view-dark-mode-mobile-1.png differ diff --git a/ui/pages/Chart.pw.tsx b/ui/pages/Chart.pw.tsx new file mode 100644 index 0000000000..d5e494abbb --- /dev/null +++ b/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(, { hooksConfig }); + await page.waitForResponse(chartApiUrl); + await page.waitForFunction(() => { + return document.querySelector('path[data-name="chart-Charttitle-fullscreen"]')?.getAttribute('opacity') === '1'; + }); + await expect(component).toHaveScreenshot(); +}); diff --git a/ui/pages/Chart.tsx b/ui/pages/Chart.tsx index 4afc423a17..09daf4b96a 100644 --- a/ui/pages/Chart.tsx +++ b/ui/pages/Chart.tsx @@ -167,7 +167,7 @@ const Chart = () => { mb={ 3 } isLoading={ isInfoLoading } backLink={ backLink } - contentAfter={ isMobile ? shareAndMenu : undefined } + afterTitle={ isMobile ? shareAndMenu : undefined } secondRow={ info?.description || lineQuery.data?.info?.description } withTextAd /> @@ -175,9 +175,9 @@ const Chart = () => { Period - { lineQuery.data?.info?.resolutions && lineQuery.data?.info?.resolutions.length > 2 && ( + { lineQuery.data?.info?.resolutions && lineQuery.data?.info?.resolutions.length > 1 && ( <> - { isMobile ? 'Res.' : 'Resolution' } + { isMobile ? 'Res.' : 'Resolution' } { description } diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-1.png index 013a49d77f..f6ca5a9b5b 100644 Binary files a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-1.png and b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-1.png differ diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-2.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-2.png index a96f29fff0..98e4c6d510 100644 Binary files a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-2.png and b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-2.png differ diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-3.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-3.png index e33f6ba409..e93438c41c 100644 Binary files a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-3.png and b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-3.png differ diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-4.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-4.png index f393e68904..7e5ea0df53 100644 Binary files a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-4.png and b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-4.png differ diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-1.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-1.png index ecc5aaa91a..c66c18ae5f 100644 Binary files a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-1.png and b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-1.png differ diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-2.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-2.png index 02cd055ba5..4b42410f10 100644 Binary files a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-2.png and b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-2.png differ diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-3.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-3.png index f7d676aa6a..afabf22d29 100644 Binary files a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-3.png and b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-3.png differ diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-4.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-4.png index df1055b271..8169d24768 100644 Binary files a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-4.png and b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-4.png differ diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_error-1.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_error-1.png index e054536499..03ec8c11ff 100644 Binary files a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_error-1.png and b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_error-1.png differ diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_incomplete-day-1.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_incomplete-day-1.png index b031715818..eb0a751f03 100644 Binary files a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_incomplete-day-1.png and b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_incomplete-day-1.png differ diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_incomplete-day-2.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_incomplete-day-2.png index 073dfce3a1..3f2fa2ed7c 100644 Binary files a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_incomplete-day-2.png and b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_incomplete-day-2.png differ diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_loading-1.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_loading-1.png index 4646071b6b..f502de8f6c 100644 Binary files a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_loading-1.png and b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_loading-1.png differ diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_small-values-1.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_small-values-1.png index 90244d1fdf..6d6db77598 100644 Binary files a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_small-values-1.png and b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_small-values-1.png differ diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_small-variations-in-big-values-1.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_small-variations-in-big-values-1.png index a522c08ed7..079b107539 100644 Binary files a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_small-variations-in-big-values-1.png and b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_small-variations-in-big-values-1.png differ