update pw version and config

.github/workflows/unit-tests.yml

@@ -18,13 +18,13 @@ jobs:
     - name: Install dependencies
       run: yarn install --frozen-lockfile
     - name: Run tests
-      run: yarn test:unit
+      run: yarn test:jest
 
   pw_tests:
     name: Run components visual tests with PlayWright
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.27.0-focal
+      image: mcr.microsoft.com/playwright:v1.28.0-focal
 
     steps:
       - run: apt-get update && apt-get install git-lfs
@@ -38,7 +38,7 @@ jobs:
       - name: Install dependencies
         run: yarn install --frozen-lockfile
       - name: Run your tests
-        run: HOME=/root yarn test-ct
+        run: HOME=/root yarn test:pw
       - name: Upload test results
         if: always()
         uses: actions/upload-artifact@v2

.vscode/tasks.json

@@ -84,7 +84,7 @@
         },
         {
             "type": "npm",
-            "script": "test-docker",
+            "script": "test:pw:docker",
             "problemMatcher": [],
             "label": "test: playwright",
             "detail": "run visual components tests",
@@ -102,10 +102,10 @@
         },
         {
             "type": "npm",
-            "script": "test:unit",
+            "script": "test:jest",
             "problemMatcher": [],
-            "label": "test: unit",
-            "detail": "run unit tests",
+            "label": "test: jest",
+            "detail": "run jest tests",
             "presentation": {
                 "reveal": "always",
                 "panel": "new",
@@ -120,10 +120,10 @@
         },
         {
             "type": "npm",
-            "script": "test:unit:watch",
+            "script": "test:jest:watch",
             "problemMatcher": [],
-            "label": "test: unit: watch",
-            "detail": "run unit tests in watch mode",
+            "label": "test: jest: watch",
+            "detail": "run jest tests in watch mode",
             "presentation": {
                 "reveal": "always",
                 "panel": "new",

README.md

@@ -30,7 +30,7 @@ For local development please follow next steps:
 ## Components visual testing
 
 We use [playwright experimental components testing](https://playwright.dev/docs/test-components) for visual (screenshots) CI check. Test renders a single component in headless browser in docker, generates screenshots and then compares this screenshot with a reference one.
-To perform testing locally you need to install docker and run `yarn test-docker`
+To perform testing locally you need to install docker and run `yarn test:pw:docker`
 
 ## Environment variables
 

package.json

@@ -20,10 +20,10 @@
     "lint:tsc": "./node_modules/.bin/tsc -p ./tsconfig.json",
     "prepare": "husky install",
     "format-svg": "./node_modules/.bin/svgo -r ./icons",
-    "test-ct": "playwright test -c playwright-ct.config.ts",
-    "test-docker": "docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.27.0-focal ./run-tests.sh",
-    "test:unit": "jest",
-    "test:unit:watch": "jest --watch"
+    "test:pw": "playwright test -c playwright-ct.config.ts",
+    "test:pw:docker": "docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.28.0-focal ./playwright/run-tests.sh",
+    "test:jest": "jest",
+    "test:jest:watch": "jest --watch"
   },
   "dependencies": {
     "@chakra-ui/react": "2.3.1",
@@ -57,10 +57,10 @@
     "use-font-face-observer": "^1.2.1"
   },
   "devDependencies": {
-    "@playwright/experimental-ct-react": "^1.26.1",
+    "@playwright/experimental-ct-react": "^1.28.0",
     "@svgr/webpack": "^6.5.1",
-    "@types/d3": "^7.4.0",
     "@testing-library/react": "^13.4.0",
+    "@types/d3": "^7.4.0",
     "@types/jest": "^29.2.0",
     "@types/node": "17.0.36",
     "@types/phoenix": "^1.5.4",
@@ -78,11 +78,12 @@
     "jest-environment-jsdom": "^29.2.1",
     "lint-staged": ">=10",
     "mockdate": "^3.0.5",
-    "playwright": "^1.26.1",
+    "playwright": "^1.28.0",
     "svgo": "^2.8.0",
     "ts-jest": "^29.0.3",
     "ts-node": "^10.9.1",
-    "typescript": "4.7.2"
+    "typescript": "4.7.2",
+    "vite-tsconfig-paths": "^3.5.2"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": "eslint --cache --fix"

playwright-ct.config.ts

@@ -1,5 +1,6 @@
 import type { PlaywrightTestConfig } from '@playwright/experimental-ct-react';
 import { devices } from '@playwright/experimental-ct-react';
+import tsconfigPaths from 'vite-tsconfig-paths';
 
 /**
  * See https://playwright.dev/docs/test-configuration.
@@ -9,8 +10,7 @@ const config: PlaywrightTestConfig = {
 
   testMatch: /.*\.pw\.tsx/,
 
-  /* The base directory, relative to the config file, for snapshot files created with toMatchSnapshot and toHaveScreenshot. */
-  snapshotDir: './__snapshots__',
+  snapshotPathTemplate: '{testDir}/{testFileDir}/__screenshots__/{testFileName}_{arg}{ext}',
 
   /* Maximum time one test can run for. */
   timeout: 10 * 1000,
@@ -40,27 +40,17 @@ const config: PlaywrightTestConfig = {
     ctPort: 3100,
 
     headless: true,
+
+    ctViteConfig: {
+      plugins: [ tsconfigPaths() ],
+    },
   },
 
   /* Configure projects for major browsers */
   projects: [
     {
       name: 'chromium',
-      use: {
-        ...devices['Desktop Chrome'],
-      },
-    },
-    {
-      name: 'firefox',
-      use: {
-        ...devices['Desktop Firefox'],
-      },
-    },
-    {
-      name: 'webkit',
-      use: {
-        ...devices['Desktop Safari'],
-      },
+      use: devices['Desktop Chrome'],
     },
   ],
 };

playwright/RenderWithChakra.tsx

@@ -2,7 +2,7 @@ import { ChakraProvider } from '@chakra-ui/react';
 import type { ColorMode } from '@chakra-ui/react';
 import React from 'react';
 
-import theme from '../theme';
+import theme from 'theme';
 
 type Props = {
   children: React.ReactNode;

run-tests.sh → playwright/run-tests.sh

@@ -1,3 +1,3 @@
 #!/bin/sh
 yarn install
-yarn test-ct
+yarn test:pw

ui/block/BlockDetails.tsx

@@ -30,7 +30,7 @@ import GasUsedToTargetRatio from 'ui/shared/GasUsedToTargetRatio';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import PrevNext from 'ui/shared/PrevNext';
 import TextSeparator from 'ui/shared/TextSeparator';
-import Utilization from 'ui/shared/Utilization';
+import Utilization from 'ui/shared/Utilization/Utilization';
 
 const BlockDetails = () => {
   const [ isExpanded, setIsExpanded ] = React.useState(false);

ui/blocks/BlocksListItem.tsx

@@ -14,7 +14,7 @@ import BlockTimestamp from 'ui/blocks/BlockTimestamp';
 import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
 import AddressLink from 'ui/shared/address/AddressLink';
 import GasUsedToTargetRatio from 'ui/shared/GasUsedToTargetRatio';
-import Utilization from 'ui/shared/Utilization';
+import Utilization from 'ui/shared/Utilization/Utilization';
 
 interface Props {
   data: Block;

ui/blocks/BlocksTableItem.tsx

@@ -11,7 +11,7 @@ import link from 'lib/link/link';
 import BlockTimestamp from 'ui/blocks/BlockTimestamp';
 import AddressLink from 'ui/shared/address/AddressLink';
 import GasUsedToTargetRatio from 'ui/shared/GasUsedToTargetRatio';
-import Utilization from 'ui/shared/Utilization';
+import Utilization from 'ui/shared/Utilization/Utilization';
 
 interface Props {
   data: Block;

ui/shared/Utilization/Utilization.pw.tsx

@@ -0,0 +1,44 @@
+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import RenderWithChakra from 'playwright/RenderWithChakra';
+
+import Utilization from './Utilization';
+
+test.use({ viewport: { width: 100, height: 50 } });
+
+test('green color scheme in light mode', async({ mount }) => {
+  const component = await mount(
+    <RenderWithChakra>
+      <Utilization value={ 0.423 }/>
+    </RenderWithChakra>,
+  );
+  await expect(component).toHaveScreenshot();
+});
+
+test('green color scheme in dark mode', async({ mount }) => {
+  const component = await mount(
+    <RenderWithChakra colorMode="dark">
+      <Utilization value={ 0.423 }/>
+    </RenderWithChakra>,
+  );
+  await expect(component).toHaveScreenshot();
+});
+
+test('gray color scheme in light mode', async({ mount }) => {
+  const component = await mount(
+    <RenderWithChakra>
+      <Utilization value={ 0.423 } colorScheme="gray"/>
+    </RenderWithChakra>,
+  );
+  await expect(component).toHaveScreenshot();
+});
+
+test('gray color scheme in dark mode', async({ mount }) => {
+  const component = await mount(
+    <RenderWithChakra colorMode="dark">
+      <Utilization value={ 0.423 } colorScheme="gray"/>
+    </RenderWithChakra>,
+  );
+  await expect(component).toHaveScreenshot();
+});

ui/tx/TxDetails.tsx

@@ -23,7 +23,7 @@ import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import RawInputData from 'ui/shared/RawInputData';
 import TextSeparator from 'ui/shared/TextSeparator';
 import TxStatus from 'ui/shared/TxStatus';
-import Utilization from 'ui/shared/Utilization';
+import Utilization from 'ui/shared/Utilization/Utilization';
 import TxDetailsSkeleton from 'ui/tx/details/TxDetailsSkeleton';
 import TxDetailsTokenTransfers from 'ui/tx/details/TxDetailsTokenTransfers';
 import TxRevertReason from 'ui/tx/details/TxRevertReason';

ui/txs/TxAdditionalInfo.tsx

@@ -9,7 +9,7 @@ import getValueWithUnit from 'lib/getValueWithUnit';
 import link from 'lib/link/link';
 import CurrencyValue from 'ui/shared/CurrencyValue';
 import TextSeparator from 'ui/shared/TextSeparator';
-import Utilization from 'ui/shared/Utilization';
+import Utilization from 'ui/shared/Utilization/Utilization';
 
 const TxAdditionalInfo = ({ tx }: { tx: Transaction }) => {
   const sectionBorderColor = useColorModeValue('gray.200', 'whiteAlpha.200');