fixes

README.md

@@ -22,6 +22,11 @@ For local development please follow next steps:
 - create local env file `.env.local` according to `.env.example` snapshot (see list of used environment variables [below](#environment-variables))
 - run `yarn dev` to spin up local dev server and navigate to the host from logs output
 
+## 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`
+
 ## Environment variables
 ### Variables list
 The app instance could be customized by passing following variables to NodeJS environment.

package.json

@@ -15,7 +15,7 @@
     "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.26.0-focal yarn test-ct"
+    "test-docker": "docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.26.0-focal ./run-tests.sh"
   },
   "dependencies": {
     "@chakra-ui/react": "2.3.1",
@@ -33,7 +33,6 @@
     "next": "12.2.5",
     "next-react-svg": "1.1.3",
     "node-fetch": "^3.2.9",
-    "playwright": "^1.26.1",
     "react": "18.1.0",
     "react-dom": "18.1.0",
     "react-hook-form": "^7.33.1",
@@ -56,6 +55,7 @@
     "eslint-plugin-regexp": "^1.7.0",
     "husky": "^8.0.0",
     "lint-staged": ">=10",
+    "playwright": "^1.26.1",
     "svgo": "^2.8.0",
     "typescript": "4.7.2"
   },

ui/test-helpers/RenderWithChakra.tsx → 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

+#!/bin/sh
+yarn install
+yarn test-ct
\ No newline at end of file

ui/shared/Utilization.spec.tsx

 import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import RenderWithChakra from '../test-helpers/RenderWithChakra';
+import RenderWithChakra from '../../playwright/RenderWithChakra';
 import Utilization from './Utilization';
 
 test.use({ viewport: { width: 100, height: 50 } });