mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
tom goriunovandGitHub
f0e713b877
* UI customizations: new features Fixes #2905 * colors for graphs * introduce env variable * colors for topbar, stats, selected state and tabs * fix build * fix validator * refactor link.primary.hover color token * refactor selected colors * update styles for switch and fix some color tokens * change color for selectable controls * icon color tokens refactoring * UI customizations: new features Fixes #2905 * test for common components * tweaks * migrate from color-mode-hex cookie to color-theme cookie * clean up * update screenshots * more screenshot updates * update default color of chart line * update envs for mega eth
37 lines
1.4 KiB
TypeScript
37 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
|
|
import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
|
|
import { test, expect } from 'playwright/lib';
|
|
import { TabsRoot } from 'toolkit/chakra/tabs';
|
|
|
|
import Select from './Select';
|
|
|
|
test('default +@dark-mode', async({ render, page }) => {
|
|
const component = await render(<TabsRoot defaultValue="select"><Select/></TabsRoot>);
|
|
await expect(component).toHaveScreenshot();
|
|
|
|
const asyncSection = component.locator('section').filter({ hasText: 'With search (async)' });
|
|
const asyncSelect = asyncSection.getByRole('combobox');
|
|
await asyncSelect.click();
|
|
|
|
const lastOption = page.getByRole('option', { name: 'Svelte' });
|
|
await lastOption.hover();
|
|
|
|
await expect(page).toHaveScreenshot({ clip: { x: 150, y: 150, width: 400, height: 400 } });
|
|
});
|
|
|
|
test('color theme overrides +@dark-mode', async({ render, mockEnvs, page }) => {
|
|
await mockEnvs(ENVS_MAP.colorThemeOverrides);
|
|
const component = await render(<TabsRoot defaultValue="select"><Select/></TabsRoot>);
|
|
await expect(component).toHaveScreenshot();
|
|
|
|
const asyncSection = component.locator('section').filter({ hasText: 'With search (async)' });
|
|
const asyncSelect = asyncSection.getByRole('combobox');
|
|
await asyncSelect.click();
|
|
|
|
const lastOption = page.getByRole('option', { name: 'Svelte' });
|
|
await lastOption.hover();
|
|
|
|
await expect(page).toHaveScreenshot({ clip: { x: 150, y: 150, width: 400, height: 400 } });
|
|
});
|