test(client): add screenshot tests to base UI components

.github/workflows/nodejs.yml

@@ -14,6 +14,9 @@ jobs:
         node-version: [16.x]
 
     steps:
+      - uses: browser-actions/setup-chrome@latest
+      - run: chrome --version
+
       - uses: actions/checkout@v2
 
       - name: Use Node.js ${{ matrix.node-version }}

.gitignore

@@ -14,3 +14,6 @@ data/
 current/
 difference/
 storybook-static/
+reg-diff/
+reg.json
+report.html

Makefile

@@ -1,5 +1,5 @@
 install:
 	npx lerna bootstrap --hoist
 
-lint:
+test:
 	npx lerna run test

apps/client/.storybook/main.js

@@ -1,34 +1,54 @@
 const path = require('path');
-const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 
 module.exports = {
   stories: [
-    "../src/**/*.stories.mdx",
-    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+    '../src/**/*.stories.mdx',
+    '../src/**/*.stories.@(js|jsx|ts|tsx)'
   ],
   addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+		'@storybook/addon-a11y',
+		'storybook-react-intl',
   ],
-  framework: "@storybook/react",
+  framework: '@storybook/react',
   core: {
-    builder: "@storybook/builder-webpack5"
+    builder: '@storybook/builder-webpack5'
+  },
+	features: {
+    interactionsDebugger: true,
   },
   webpackFinal: async (config) => {
-    config.resolve.plugins = [
-      ...(config.resolve.plugins || []),
-      new TsconfigPathsPlugin({
-        extensions: config.resolve.extensions,
-      }),
-    ];
+		config.resolve.alias = {
+      ...config.resolve.alias,
+      "@": path.resolve(__dirname, "../src/"),
+    };
+    config.resolve.extensions.push(".ts", ".tsx");
 
     config.module.rules.push({
-      test: /\.scss$/,
-      use: ['style-loader', 'css-loader', 'sass-loader'],
+      test: /\.module\.s(a|c)ss$/,
+      use: ['style-loader', {
+				loader: 'css-loader',
+				options: {
+					modules: {
+						localIdentName: '[local]_[hash:base64:5]',
+					},
+				},
+			}, 'sass-loader'],
       include: path.resolve(__dirname, '../'),
     });
 
+    config.module.rules.push({
+			test: /\.s(a|c)ss$/,
+			exclude: /\.module.(s(a|c)ss)$/,
+			use: [
+				'style-loader',
+				'css-loader',
+				'sass-loader',
+			],
+		});
+
     return config;
   },
 }

apps/client/.storybook/preview.js

@@ -1,4 +1,6 @@
-import '!style-loader!css-loader!sass-loader!../src/styles/main.scss';
+import '@/styles/main.scss';
+import { LOCALES } from '@/i18n/locales';
+import reactIntl from './reactIntl';
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
@@ -7,5 +9,28 @@ export const parameters = {
       color: /(background|color)$/i,
       date: /Date$/,
     },
+  },
+	reactIntl,
+  locale: reactIntl.defaultLocale,
+  locales: {
+		[LOCALES.ENGLISH]: {title: "English", left: '🇬🇧'},
+		[LOCALES.RUSSIAN]: {title: "Русский", left: '🇷🇺'},
+	},
+	backgrounds: {
+    default: 'light',
+    values: [
+      {
+        name: 'light',
+        value: '#ffffff',
+      },
+      {
+        name: 'dark',
+        value: '#212529',
+      },
+      {
+        name: 'gray',
+        value: '#6c757d',
+      },
+    ],
   },
 }

apps/client/.storybook/reactIntl.js

@@ -0,0 +1,13 @@
+import { LOCALES } from '../src/i18n/locales';
+import { messages } from '../src/i18n/messages';
+
+const locales = [LOCALES.ENGLISH, LOCALES.RUSSIAN];
+
+const reactIntl = {
+  defaultLocale: LOCALES.ENGLISH,
+  locales,
+  messages,
+	formats: {},
+};
+
+export default reactIntl;

apps/client/jest.config.js

@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const tsconfig = require('./tsconfig.json');
-const moduleNameMapper = require('tsconfig-paths-jest')(tsconfig);
 
 /** @type {import('jest').Config} */
 module.exports = {
@@ -15,5 +14,8 @@ module.exports = {
 	transform: {
 		'^.+\\.[t|j]sx?$': 'babel-jest',
 	},
-	moduleNameMapper,
+	moduleNameMapper: {
+		...require('tsconfig-paths-jest')(tsconfig),
+		'.+\\.(css|sass|scss)$': 'identity-obj-proxy',
+	},
 };

apps/client/loki.config.js

@@ -1,15 +1,22 @@
 module.exports = {
+	diffingEngine: 'pixelmatch',
+	chromeSelector: '#root > *',
 	configurations: {
 		'chrome.laptop': {
-			target: 'chrome.docker',
+			target: 'chrome.app',
 			width: 1366,
 			height: 768,
 			deviceScaleFactor: 1,
 			mobile: false,
 		},
 		'chrome.iphone7': {
-			target: 'chrome.docker',
+			target: 'chrome.app',
 			preset: 'iPhone 7',
 		},
 	},
+	fileNameFormatter: ({ configurationName, kind, story }) => {
+		const formattedStoryName = story.replaceAll(' ', '_').toLowerCase();
+
+		return `${configurationName.toLowerCase()}/${kind}/${formattedStoryName}`;
+	},
 };