mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
tom goriunovandGitHub
d4c92518b1
* selected state for Button * tests * fix menu filter button hover issue * update screenshots * try to fix SearchBar recent keywords test
76 lines
3.0 KiB
TypeScript
76 lines
3.0 KiB
TypeScript
import { Box, Button, Flex } from '@chakra-ui/react';
|
|
import React from 'react';
|
|
|
|
import { test, expect } from 'playwright/lib';
|
|
|
|
test.use({ viewport: { width: 150, height: 350 } });
|
|
|
|
[
|
|
{ variant: 'solid', states: [ 'default', 'disabled', 'hovered', 'active' ] },
|
|
{ variant: 'outline', colorScheme: 'gray', withDarkMode: true, states: [ 'default', 'disabled', 'hovered', 'active', 'selected' ] },
|
|
{ variant: 'outline', colorScheme: 'blue', withDarkMode: true, states: [ 'default', 'disabled', 'hovered', 'active', 'selected' ] },
|
|
{ variant: 'simple', withDarkMode: true, states: [ 'default', 'hovered' ] },
|
|
{ variant: 'ghost', withDarkMode: true, states: [ 'default', 'hovered', 'active' ] },
|
|
{ variant: 'subtle', states: [ 'default', 'hovered' ] },
|
|
{ variant: 'subtle', colorScheme: 'gray', states: [ 'default', 'hovered' ], withDarkMode: true },
|
|
].forEach(({ variant, colorScheme, withDarkMode, states }) => {
|
|
test.describe(`variant ${ variant }${ colorScheme ? ` with ${ colorScheme } color scheme` : '' }${ withDarkMode ? ' +@dark-mode' : '' }`, () => {
|
|
test('', async({ render }) => {
|
|
const component = await render(
|
|
<Flex p={ 2 } flexDir="column" rowGap={ 3 }>
|
|
{ states?.map((state) => {
|
|
switch (state) {
|
|
case 'default': {
|
|
return (
|
|
<Box>
|
|
<Box color="text_secondary" fontSize="sm">Default:</Box>
|
|
<Button variant={ variant } colorScheme={ colorScheme }>Click me</Button>
|
|
</Box>
|
|
);
|
|
}
|
|
case 'disabled': {
|
|
return (
|
|
<Box>
|
|
<Box color="text_secondary" fontSize="sm">Disabled:</Box>
|
|
<Button variant={ variant } colorScheme={ colorScheme } isDisabled>Click me</Button>
|
|
</Box>
|
|
);
|
|
}
|
|
case 'active': {
|
|
return (
|
|
<Box>
|
|
<Box color="text_secondary" fontSize="sm">Active:</Box>
|
|
<Button variant={ variant } colorScheme={ colorScheme } isActive>Click me</Button>
|
|
</Box>
|
|
);
|
|
}
|
|
case 'hovered': {
|
|
return (
|
|
<Box>
|
|
<Box color="text_secondary" fontSize="sm">Hovered:</Box>
|
|
<Button variant={ variant } colorScheme={ colorScheme }>Hover me</Button>
|
|
</Box>
|
|
);
|
|
}
|
|
case 'selected': {
|
|
return (
|
|
<Box>
|
|
<Box color="text_secondary" fontSize="sm">Selected:</Box>
|
|
<Button variant={ variant } colorScheme={ colorScheme } data-selected="true">Click me</Button>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
default: {
|
|
return null;
|
|
}
|
|
}
|
|
}) }
|
|
</Flex>,
|
|
);
|
|
await component.getByText('Hover me').hover();
|
|
await expect(component).toHaveScreenshot();
|
|
});
|
|
});
|
|
});
|