mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
tom goriunovandGitHub
5c0c18149d
* move charts to toolkit * refactor imports * fix tests * change the behavior of the color mode hook and add the noWatermark prop * fix gas tracker test and fix toolkit build
208 lines
7.1 KiB
TypeScript
208 lines
7.1 KiB
TypeScript
import React from 'react';
|
|
|
|
import { test, expect } from 'playwright/lib';
|
|
import type { ChartWidgetProps } from 'toolkit/components/charts/ChartWidget';
|
|
|
|
import ChartWidget from './ChartWidget.pwstory';
|
|
|
|
test.use({ viewport: { width: 400, height: 300 } });
|
|
|
|
const props: ChartWidgetProps = {
|
|
charts: [
|
|
{
|
|
id: 'native-coin-circulating-supply',
|
|
name: 'Value',
|
|
items: [
|
|
{ date: new Date('2023-02-13'), value: 1.7631568828337087 },
|
|
{ date: new Date('2023-02-14'), value: 9547912.248607066 },
|
|
{ date: new Date('2023-02-15'), value: 19795391.669569757 },
|
|
{ date: new Date('2023-02-16'), value: 18338481.6037719 },
|
|
{ date: new Date('2023-02-17'), value: 18716729.946751505 },
|
|
{ date: new Date('2023-02-18'), value: 32164355.603443976 },
|
|
{ date: new Date('2023-02-19'), value: 20856850.45498412 },
|
|
{ date: new Date('2023-02-20'), value: 18846303.416569296 },
|
|
{ date: new Date('2023-02-21'), value: 26366091.117737416 },
|
|
{ date: new Date('2023-02-22'), value: 30446292.68212635 },
|
|
{ date: new Date('2023-02-23'), value: 25136740.887217894 },
|
|
],
|
|
charts: [],
|
|
units: 'ETH',
|
|
},
|
|
],
|
|
title: 'Native coin circulating supply',
|
|
description: 'Amount of token circulating supply for the period',
|
|
isLoading: false,
|
|
isError: false,
|
|
noAnimation: true,
|
|
};
|
|
|
|
test('base view +@dark-mode', async({ render, page }) => {
|
|
const component = await render(<ChartWidget { ...props } href="/stats/test"/>);
|
|
|
|
await page.waitForFunction(() => {
|
|
return document.querySelector('path[data-name="native-coin-circulating-supply-small"]')?.getAttribute('opacity') === '1';
|
|
});
|
|
await expect(component).toHaveScreenshot();
|
|
|
|
await component.getByLabel('Open chart options menu').click();
|
|
await expect(component).toHaveScreenshot();
|
|
|
|
await page.mouse.move(0, 0);
|
|
await page.mouse.click(0, 0);
|
|
await page.mouse.move(80, 150);
|
|
await page.mouse.move(100, 150);
|
|
await expect(component).toHaveScreenshot();
|
|
|
|
await page.mouse.down();
|
|
await page.mouse.move(300, 150);
|
|
await page.mouse.up();
|
|
await expect(component).toHaveScreenshot();
|
|
});
|
|
|
|
test('loading', async({ render }) => {
|
|
const component = await render(<ChartWidget { ...props } isLoading minH="250px"/>);
|
|
await expect(component).toHaveScreenshot();
|
|
});
|
|
|
|
test('error', async({ render }) => {
|
|
const component = await render(<ChartWidget { ...props } isError/>);
|
|
await expect(component).toHaveScreenshot();
|
|
});
|
|
|
|
test('small values', async({ render, page }) => {
|
|
const modifiedProps = {
|
|
...props,
|
|
charts: [
|
|
{
|
|
...props.charts[0],
|
|
items: [
|
|
{ date: new Date('2023-02-13'), value: 0.000005041012112611958 },
|
|
{ date: new Date('2023-02-14'), value: 0.000004781545670577531 },
|
|
{ date: new Date('2023-02-15'), value: 0.00000520510604212437 },
|
|
{ date: new Date('2023-02-16'), value: 0.000005274901030625893 },
|
|
{ date: new Date('2023-02-17'), value: 0.00000534325322320271 },
|
|
{ date: new Date('2023-02-18'), value: 0.00000579140116207668 },
|
|
{ date: new Date('2023-02-19'), value: 0.000004878307079043056 },
|
|
{ date: new Date('2023-02-20'), value: 0.0000053454186920910215 },
|
|
{ date: new Date('2023-02-21'), value: 0.000005770588532081243 },
|
|
{ date: new Date('2023-02-22'), value: 0.00000589334810122426 },
|
|
{ date: new Date('2023-02-23'), value: 0.00000547040196358741 },
|
|
],
|
|
},
|
|
],
|
|
};
|
|
|
|
const component = await render(<ChartWidget { ...modifiedProps }/>);
|
|
await page.waitForFunction(() => {
|
|
return document.querySelector('path[data-name="native-coin-circulating-supply-small"]')?.getAttribute('opacity') === '1';
|
|
});
|
|
await expect(component).toHaveScreenshot();
|
|
});
|
|
|
|
test('small variations in big values', async({ render, page }) => {
|
|
const modifiedProps = {
|
|
...props,
|
|
charts: [
|
|
{
|
|
...props.charts[0],
|
|
items: [
|
|
{ date: new Date('2023-02-13'), value: 8886203 },
|
|
{ date: new Date('2023-02-14'), value: 8890184 },
|
|
{ date: new Date('2023-02-15'), value: 8893483 },
|
|
{ date: new Date('2023-02-16'), value: 8897924 },
|
|
{ date: new Date('2023-02-17'), value: 8902268 },
|
|
{ date: new Date('2023-02-18'), value: 8906320 },
|
|
{ date: new Date('2023-02-19'), value: 8910264 },
|
|
{ date: new Date('2023-02-20'), value: 8914827 },
|
|
{ date: new Date('2023-02-21'), value: 8918592 },
|
|
{ date: new Date('2023-02-22'), value: 8921988 },
|
|
{ date: new Date('2023-02-23'), value: 8922206 },
|
|
],
|
|
},
|
|
],
|
|
};
|
|
|
|
const component = await render(<ChartWidget { ...modifiedProps }/>);
|
|
await page.waitForFunction(() => {
|
|
return document.querySelector('path[data-name="native-coin-circulating-supply-small"]')?.getAttribute('opacity') === '1';
|
|
});
|
|
await expect(component).toHaveScreenshot();
|
|
});
|
|
|
|
test('incomplete day', async({ render, page }) => {
|
|
const modifiedProps = {
|
|
...props,
|
|
charts: [
|
|
{
|
|
...props.charts[0],
|
|
items: [
|
|
...props.charts[0].items,
|
|
{ date: new Date('2023-02-24'), value: 25136740.887217894 / 4, isApproximate: true },
|
|
],
|
|
},
|
|
],
|
|
};
|
|
|
|
const component = await render(<ChartWidget { ...modifiedProps }/>);
|
|
await page.waitForFunction(() => {
|
|
return document.querySelector('path[data-name="native-coin-circulating-supply-small"]')?.getAttribute('opacity') === '1';
|
|
});
|
|
await expect(component).toHaveScreenshot();
|
|
|
|
await page.hover('.ChartOverlay', { position: { x: 120, y: 120 } });
|
|
await page.hover('.ChartOverlay', { position: { x: 320, y: 120 } });
|
|
await expect(page.getByText('Incomplete day')).toBeVisible();
|
|
await expect(component).toHaveScreenshot();
|
|
});
|
|
|
|
test('multiple charts', async({ render, page }) => {
|
|
const modifiedProps: ChartWidgetProps = {
|
|
...props,
|
|
charts: [
|
|
{
|
|
...props.charts[0],
|
|
charts: [
|
|
{
|
|
type: 'area' as const,
|
|
gradient: {
|
|
startColor: 'rgba(233, 216, 253, 1)',
|
|
stopColor: 'rgba(233, 216, 253, 0)',
|
|
},
|
|
},
|
|
{
|
|
type: 'line' as const,
|
|
color: '#DBC7F5',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: 'native-coin-circulating-supply-2',
|
|
name: 'Limit',
|
|
charts: [
|
|
{
|
|
type: 'line' as const,
|
|
color: '#D53F8C',
|
|
strokeWidth: 3,
|
|
strokeDasharray: '6 6',
|
|
},
|
|
],
|
|
items: props.charts[0].items.map(({ date }) => ({ date, value: 20000000 })),
|
|
units: 'ETH',
|
|
},
|
|
],
|
|
};
|
|
|
|
const component = await render(<ChartWidget { ...modifiedProps }/>);
|
|
await page.waitForFunction(() => {
|
|
return document.querySelector('path[data-name="native-coin-circulating-supply-small"]')?.getAttribute('opacity') === '1';
|
|
});
|
|
await expect(component).toHaveScreenshot();
|
|
|
|
await page.hover('.ChartOverlay', { position: { x: 120, y: 120 } });
|
|
await page.hover('.ChartOverlay', { position: { x: 320, y: 120 } });
|
|
await expect(component).toHaveScreenshot();
|
|
|
|
await page.locator('p').filter({ hasText: 'Value' }).click();
|
|
await expect(component).toHaveScreenshot();
|
|
});
|