Merge pull request #445 from blockscout/chakra-theme-tests

сhakra theme tests

.vscode/tasks.json

@@ -11,7 +11,7 @@
             "detail": "start local dev server",
             "presentation": {
                 "reveal": "silent",
-                "panel": "dedicated",
+                "panel": "shared",
                 "close": true,
                 "revealProblems": "onProblem",
             },
@@ -31,7 +31,7 @@
             "detail": "start local dev server for POA network",
             "presentation": {
                 "reveal": "silent",
-                "panel": "dedicated",
+                "panel": "shared",
                 "close": true,
                 "revealProblems": "onProblem",
             },
@@ -51,7 +51,7 @@
             "detail": "start local dev server for Goerli network",
             "presentation": {
                 "reveal": "silent",
-                "panel": "dedicated",
+                "panel": "shared",
                 "close": true,
                 "revealProblems": "onProblem",
             },
@@ -77,7 +77,7 @@
             },
             "presentation": {
                 "reveal": "never",
-                "panel": "dedicated",
+                "panel": "shared",
                 "close": true,
                 "revealProblems": "onProblem",
             },
@@ -91,7 +91,7 @@
             "detail": "run eslint",
             "presentation": {
                 "reveal": "silent",
-                "panel": "dedicated",
+                "panel": "shared",
                 "revealProblems": "onProblem",
             },
             "icon": {
@@ -112,7 +112,7 @@
             "detail": "run visual components tests for current file",
             "presentation": {
                 "reveal": "always",
-                "panel": "dedicated",
+                "panel": "shared",
                 "focus": true,
             },
             "icon": {
@@ -131,7 +131,7 @@
             "detail": "run visual components tests for current file",
             "presentation": {
                 "reveal": "always",
-                "panel": "dedicated",
+                "panel": "shared",
                 "focus": true,
             },
             "icon": {
@@ -150,7 +150,7 @@
             "detail": "run visual components tests",
             "presentation": {
                 "reveal": "always",
-                "panel": "dedicated",
+                "panel": "shared",
                 "focus": true,
             },
             "icon": {
@@ -171,7 +171,7 @@
             "detail": "run jest tests",
             "presentation": {
                 "reveal": "always",
-                "panel": "dedicated",
+                "panel": "shared",
                 "focus": true,
             },
             "icon": {
@@ -190,7 +190,7 @@
             "detail": "run jest tests in watch mode",
             "presentation": {
                 "reveal": "always",
-                "panel": "dedicated",
+                "panel": "shared",
                 "close": true,
                 "focus": true,
             },
@@ -210,7 +210,7 @@
             "detail": "run jest tests in watch mode for current file",
             "presentation": {
                 "reveal": "always",
-                "panel": "dedicated",
+                "panel": "shared",
                 "focus": true,
             },
             "icon": {
@@ -230,7 +230,7 @@
             "detail": "build docker image",
             "presentation": {
                 "reveal": "always",
-                "panel": "dedicated",
+                "panel": "shared",
                 "close": true,
                 "revealProblems": "onProblem",
                 "focus": true,
@@ -251,7 +251,7 @@
             "detail": "run docker container for POA network",
             "presentation": {
                 "reveal": "silent",
-                "panel": "dedicated",
+                "panel": "shared",
                 "close": true,
                 "revealProblems": "onProblem",
             },
@@ -271,7 +271,7 @@
             "detail": "format svg files with svgo",
             "presentation": {
                 "reveal": "silent",
-                "panel": "dedicated",
+                "panel": "shared",
                 "close": true,
                 "revealProblems": "onProblem",
             },

theme/components/Button/Button.pw.tsx

+import { Button } from '@chakra-ui/react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import TestApp from 'playwright/TestApp';
+
+[
+  { variant: 'solid' },
+  { variant: 'solid', colorScheme: 'gray', withDarkMode: true },
+  { variant: 'outline', colorScheme: 'gray', withDarkMode: true },
+  { variant: 'outline', colorScheme: 'gray-dark', withDarkMode: true },
+  { variant: 'outline', colorScheme: 'blue', withDarkMode: true },
+  { variant: 'simple', withDarkMode: true },
+  { variant: 'ghost', withDarkMode: true },
+  { variant: 'subtle' },
+  { variant: 'subtle', colorScheme: 'gray', withDarkMode: true },
+].forEach(({ variant, colorScheme, withDarkMode }) => {
+  test.describe(`variant ${ variant }${ colorScheme ? ` with ${ colorScheme } color scheme` : '' }${ withDarkMode ? ' +@dark-mode' : '' }`, () => {
+    test('base', async({ mount }) => {
+      const component = await mount(
+        <TestApp>
+          <Button variant={ variant } colorScheme={ colorScheme }>Click me</Button>
+        </TestApp>,
+      );
+      await expect(component.locator('button')).toHaveScreenshot();
+    });
+
+    test('disabled', async({ mount }) => {
+      const component = await mount(
+        <TestApp>
+          <Button variant={ variant } colorScheme={ colorScheme } disabled>Click me</Button>
+        </TestApp>,
+      );
+      await expect(component.locator('button')).toHaveScreenshot();
+    });
+
+    test('hovered', async({ mount }) => {
+      const component = await mount(
+        <TestApp>
+          <Button variant={ variant } colorScheme={ colorScheme }>Click me</Button>
+        </TestApp>,
+      );
+      await component.getByText(/click/i).hover();
+      await expect(component.locator('button')).toHaveScreenshot();
+    });
+
+    test('active', async({ mount }) => {
+      const component = await mount(
+        <TestApp>
+          <Button variant={ variant } colorScheme={ colorScheme } isActive>Click me</Button>
+        </TestApp>,
+      );
+      await expect(component.locator('button')).toHaveScreenshot();
+    });
+  });
+});

theme/components/Form/FormControl.pw.tsx

+import { FormControl, Input, FormLabel } from '@chakra-ui/react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import TestApp from 'playwright/TestApp';
+
+test.use({ viewport: { width: 500, height: 300 } });
+
+test.describe('floating label size md +@dark-mode', () => {
+  test('empty', async({ mount }) => {
+    const component = await mount(
+      <TestApp>
+        <FormControl variant="floating" id="name" isRequired size="md">
+          <Input required value=""/>
+          <FormLabel>Smart contract / Address (0x...)</FormLabel>
+        </FormControl>
+      </TestApp>,
+    );
+
+    await expect(component).toHaveScreenshot();
+
+    await component.locator('input').focus();
+    await expect(component).toHaveScreenshot();
+  });
+
+  test('empty error', async({ mount }) => {
+    const component = await mount(
+      <TestApp>
+        <FormControl variant="floating" id="name" isRequired size="md">
+          <Input required value="" isInvalid/>
+          <FormLabel>Smart contract / Address (0x...)</FormLabel>
+        </FormControl>
+      </TestApp>,
+    );
+
+    await expect(component).toHaveScreenshot();
+
+    await component.locator('input').focus();
+    await expect(component).toHaveScreenshot();
+  });
+
+  test('filled', async({ mount }) => {
+    const component = await mount(
+      <TestApp>
+        <FormControl variant="floating" id="name" isRequired size="md">
+          <Input required value="foo"/>
+          <FormLabel>Smart contract / Address (0x...)</FormLabel>
+        </FormControl>
+      </TestApp>,
+    );
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test('filled disabled', async({ mount }) => {
+    const component = await mount(
+      <TestApp>
+        <FormControl variant="floating" id="name" isRequired size="md">
+          <Input required value="foo" isDisabled/>
+          <FormLabel>Smart contract / Address (0x...)</FormLabel>
+        </FormControl>
+      </TestApp>,
+    );
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test('filled error', async({ mount }) => {
+    const component = await mount(
+      <TestApp>
+        <FormControl variant="floating" id="name" isRequired size="md">
+          <Input required value="foo" isInvalid/>
+          <FormLabel>Smart contract / Address (0x...)</FormLabel>
+        </FormControl>
+      </TestApp>,
+    );
+
+    await expect(component).toHaveScreenshot();
+  });
+});
+
+test.describe('floating label size lg +@dark-mode', () => {
+  test('empty', async({ mount }) => {
+    const component = await mount(
+      <TestApp>
+        <FormControl variant="floating" id="name" isRequired size="lg">
+          <Input required value=""/>
+          <FormLabel>Smart contract / Address (0x...)</FormLabel>
+        </FormControl>
+      </TestApp>,
+    );
+
+    await expect(component).toHaveScreenshot();
+
+    await component.locator('input').focus();
+    await expect(component).toHaveScreenshot();
+  });
+
+  test('filled', async({ mount }) => {
+    const component = await mount(
+      <TestApp>
+        <FormControl variant="floating" id="name" isRequired size="lg">
+          <Input required value="foo"/>
+          <FormLabel>Smart contract / Address (0x...)</FormLabel>
+        </FormControl>
+      </TestApp>,
+    );
+
+    await expect(component).toHaveScreenshot();
+
+    await component.locator('input').focus();
+    await expect(component).toHaveScreenshot();
+  });
+});

theme/components/Tag/Tag.pw.tsx

+import { Box, Tag } from '@chakra-ui/react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import TestApp from 'playwright/TestApp';
+
+[ 'blue', 'gray', 'orange', 'green', 'purple', 'cyan', 'teal' ].forEach((colorScheme) => {
+  test(`${ colorScheme } color scheme +@dark-mode`, async({ mount }) => {
+    const component = await mount(
+      <TestApp>
+        <Tag colorScheme={ colorScheme }>content</Tag>
+      </TestApp>,
+    );
+
+    await expect(component.getByText(/content/i)).toHaveScreenshot();
+  });
+});
+
+test('with long text', async({ mount }) => {
+  const component = await mount(
+    <TestApp>
+      <Box w="100px">
+        <Tag>this is very looooooooooong text</Tag>
+      </Box>
+    </TestApp>,
+  );
+
+  await expect(component.getByText(/this/i)).toHaveScreenshot();
+});

theme/components/Tag.ts → theme/components/Tag/Tag.ts

@@ -4,8 +4,8 @@ import {
   defineStyle,
 } from '@chakra-ui/styled-system';
 
-import getDefaultTransitionProps from '../utils/getDefaultTransitionProps';
-import Badge from './Badge';
+import getDefaultTransitionProps from '../../utils/getDefaultTransitionProps';
+import Badge from '../Badge';
 const transitionProps = getDefaultTransitionProps();
 
 const { defineMultiStyleConfig, definePartsStyle } =

theme/components/Tooltip/Tooltip.pw.tsx

+import { Box, Tooltip, Icon } from '@chakra-ui/react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import TestApp from 'playwright/TestApp';
+
+test('base view +@dark-mode', async({ mount, page }) => {
+  const component = await mount(
+    <TestApp>
+      <Box m={ 10 }>
+        <Tooltip label="Tooltip content">
+          trigger
+        </Tooltip>
+      </Box>
+    </TestApp>,
+  );
+
+  await component.getByText(/trigger/i).hover();
+
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 40, width: 130, height: 64 } });
+});
+
+// was not able to reproduce in tests issue when Icon is used as trigger for tooltip
+// https://github.com/chakra-ui/chakra-ui/issues/7107
+test.skip('with icon', async({ mount, page }) => {
+  const component = await mount(
+    <TestApp>
+      <Box m={ 10 }>
+        <Tooltip label="Tooltip content">
+          <Icon viewBox="0 0 20 20" boxSize={ 5 } aria-label="Trigger">
+            <circle cx="10" cy="10" r="10"/>
+          </Icon>
+        </Tooltip>
+      </Box>
+    </TestApp>,
+  );
+
+  const tooltip = page.getByText(/tooltip content/i);
+  expect(await tooltip.isVisible()).toBe(false);
+
+  await component.locator('svg[aria-label="Trigger"]').hover();
+  expect(await tooltip.isVisible()).toBe(true);
+});

theme/components/Tooltip.ts → theme/components/Tooltip/Tooltip.ts

@@ -2,8 +2,6 @@ import { Tooltip as TooltipComponent } from '@chakra-ui/react';
 import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
 import { mode, cssVar } from '@chakra-ui/theme-tools';
 
-// these cause console warning about kebab-case in naming of css variables
-// but the chakra-ui itself uses the same variable names, and i guess we cannot override them
 const $bg = cssVar('tooltip-bg');
 const $fg = cssVar('tooltip-fg');
 const $arrowBg = cssVar('popper-arrow-bg');
@@ -33,9 +31,9 @@ const baseStyle = defineStyle((props) => {
 
   return {
     bg: $bg.reference,
-    color: mode('white', 'black')(props),
+    color: $fg.reference,
     [$bg.variable]: `colors.${ bg }`,
-    [$fg.reference]: `colors.${ fg }`,
+    [$fg.variable]: `colors.${ fg }`,
     [$arrowBg.variable]: $bg.reference,
     maxWidth: props.maxWidth || props.maxW || 'unset',
   };

theme/components/index.ts

 import Alert from './Alert';
 import Badge from './Badge';
-import Button from './Button';
+import Button from './Button/Button';
 import Checkbox from './Checkbox';
 import Drawer from './Drawer';
 import Form from './Form';
@@ -16,10 +16,10 @@ import Spinner from './Spinner';
 import Switch from './Switch';
 import Table from './Table';
 import Tabs from './Tabs';
-import Tag from './Tag';
+import Tag from './Tag/Tag';
 import Text from './Text';
 import Textarea from './Textarea';
-import Tooltip from './Tooltip';
+import Tooltip from './Tooltip/Tooltip';
 
 const components = {
   Alert,