Fe/feature/ri 4876 optimize UI unit tests (#2678)

* #RI-4876 - Optimize ui unit tests
---------

Co-authored-by: zalenskiSofteq <[email protected]>

Author: AmirAllayarovSofteq

.circleci/config.yml

@@ -239,7 +239,7 @@ jobs:
       - run:
           name: Unit tests UI
           command: |
-            yarn test:cov --ci
+            yarn test:cov --ci --silent
       - save_cache:
           <<: *uiDepsCacheKey
           paths:

babel.config.js renamed to babel.config.cjs

@@ -1,9 +1,8 @@
-const { TextDecoder, TextEncoder } = require('util')
-
 /** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
 module.exports = {
-  testURL: 'http://localhost/',
-  runner: 'groups',
+  testEnvironmentOptions: {
+    url: 'http://localhost/'
+  },
   moduleNameMapper: {
     '\\.(jpg|jpeg|png|ico|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
       '<rootDir>/redisinsight/__mocks__/fileMock.js',
@@ -19,6 +18,8 @@ module.exports = {
     'unist-util-visit': '<rootDir>/redisinsight/__mocks__/unistUtilsVisit.js',
     'react-children-utilities': '<rootDir>/redisinsight/__mocks__/react-children-utilities.js',
     d3: '<rootDir>/node_modules/d3/dist/d3.min.js',
+    '^uuid$': require.resolve('uuid'),
+    msgpackr: require.resolve('msgpackr'),
   },
   setupFiles: [
     '<rootDir>/redisinsight/ui/src/setup-env.ts',
@@ -37,7 +38,8 @@ module.exports = {
     'tsx',
     'json',
   ],
-  testEnvironment: 'jsdom',
+  testEnvironment: 'jest-environment-jsdom',
+  // type: 'module',
   transformIgnorePatterns: [
     'node_modules/(?!(monaco-editor|react-monaco-editor)/)',
   ],
@@ -63,8 +65,4 @@ module.exports = {
     //   statements: 90,
     // },
   },
-  globals: {
-    TextDecoder,
-    TextEncoder,
-  },
 }

jest.config.js renamed to jest.config.cjs

@@ -42,7 +42,7 @@
     "start:web:public": "cross-env PUBLIC_DEV=true NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack serve --config ./configs/webpack.config.web.dev.ts",
     "test": "jest ./redisinsight/ui -w 1",
     "test:watch": "jest ./redisinsight/ui --watch -w 1",
-    "test:cov": "jest ./redisinsight/ui --coverage --runInBand",
+    "test:cov": "jest ./redisinsight/ui --coverage --no-cache --forceExit -w 3",
     "test:cov:unit": "jest ./redisinsight/ui --group=-component --coverage -w 1",
     "test:cov:component": "jest ./redisinsight/ui --group=component --coverage -w 1",
     "type-check:ui": "tsc --project redisinsight/ui --noEmit"
@@ -143,6 +143,7 @@
     "@types/redux-mock-store": "^1.0.2",
     "@types/segment-analytics": "^0.0.34",
     "@types/supertest": "^2.0.8",
+    "@types/text-encoding": "^0.0.37",
     "@types/uuid": "^8.3.4",
     "@types/webpack-bundle-analyzer": "^4.6.0",
     "@types/webpack-env": "^1.15.2",
@@ -188,15 +189,16 @@
     "identity-obj-proxy": "^3.0.0",
     "ioredis-mock": "^5.5.4",
     "ip": "^1.1.8",
-    "jest": "^27.5.1",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "jest-runner-groups": "^2.2.0",
     "jest-when": "^3.2.1",
     "license-checker": "^25.0.1",
     "lint-staged": "^10.2.11",
     "mini-css-extract-plugin": "2.7.2",
     "moment": "^2.29.3",
     "monaco-editor-webpack-plugin": "^6.0.0",
-    "msw": "^0.45.0",
+    "msw": "^1.3.2",
     "node-sass": "^8.0.0",
     "opencollective-postinstall": "^2.0.3",
     "react-hot-loader": "^4.13.0",
@@ -211,6 +213,7 @@
     "style-loader": "^2.0.0",
     "supertest": "^4.0.2",
     "terser-webpack-plugin": "^5.0.3",
+    "text-encoding": "^0.7.0",
     "ts-jest": "27.1.5",
     "ts-loader": "^6.2.1",
     "ts-mockito": "^2.6.1",
@@ -291,5 +294,8 @@
   },
   "husky": {
     "hooks": {}
+  },
+  "browser": {
+    "uuid": "./node_modules/uuid/dist/esm-browser/index.js"
   }
 }

package.json

@@ -0,0 +1 @@
+export const visit = jest.fn()

redisinsight/__mocks__/rawproto.js

@@ -0,0 +1 @@
+export const MOCK_TIMESTAMP = 1629128049027

redisinsight/ui/src/mocks/data/dateNow.ts

@@ -13,7 +13,7 @@ export const APP_INFO_DATA_MOCK = {
 
 const handlers: RestHandler[] = [
   // fetchServerInfo
-  rest.get<DatabaseInstanceResponse[]>(getMswURL(ApiEndpoints.INFO), async (req, res, ctx) => res(
+  rest.get<DatabaseInstanceResponse[]>(getMswURL(ApiEndpoints.INFO), async (_req, res, ctx) => res(
     ctx.status(200),
     ctx.json(APP_INFO_DATA_MOCK),
   ))

redisinsight/ui/src/mocks/handlers/app/infoHandlers.ts

@@ -6,7 +6,6 @@ import {
   getTriggeredFunctionsLibrariesList,
   triggeredFunctionsLibrariesSelector,
   triggeredFunctionsAddLibrarySelector,
-  setAddLibraryFormOpen,
 } from 'uiSrc/slices/triggeredFunctions/triggeredFunctions'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { TRIGGERED_FUNCTIONS_LIBRARIES_LIST_MOCKED_DATA } from 'uiSrc/mocks/data/triggeredFunctions'

redisinsight/ui/src/pages/triggeredFunctions/pages/Libraries/LibrariesPage.spec.tsx

@@ -377,7 +377,14 @@ describe('db analysis slice', () => {
           getDBAnalysis(),
           getDBAnalysisSuccess(data),
           loadDBAnalysisReports(),
-          setSelectedAnalysisId(data.id)
+          setSelectedAnalysisId(data.id),
+          loadDBAnalysisReportsSuccess([
+            {
+              createdAt: mockAnalysis.createdAt,
+              id: mockAnalysis.id,
+            },
+            mockHistoryReport,
+          ])
         ]
 
         expect(store.getActions()).toEqual(expectedActions)

redisinsight/ui/src/slices/tests/analytics/dbAnalysis.spec.ts

@@ -5,6 +5,7 @@ import { apiService } from 'uiSrc/services'
 import { setSlowLogUnits } from 'uiSrc/slices/app/context'
 import { cleanup, mockedStore, initialStateDefault } from 'uiSrc/utils/test-utils'
 import { addErrorNotification } from 'uiSrc/slices/app/notifications'
+import { MOCK_TIMESTAMP } from 'uiSrc/mocks/data/dateNow'
 
 import { SlowLog, SlowLogConfig } from 'apiSrc/modules/slow-log/models'
 
@@ -27,7 +28,6 @@ import reducer, {
   slowLogSelector
 } from '../../analytics/slowlog'
 
-const timestamp = 1629128049027
 let store: typeof mockedStore
 let dateNow: jest.SpyInstance<number>
 
@@ -39,7 +39,7 @@ beforeEach(() => {
 
 describe('slowLog slice', () => {
   beforeAll(() => {
-    dateNow = jest.spyOn(Date, 'now').mockImplementation(() => timestamp)
+    dateNow = jest.spyOn(Date, 'now').mockImplementation(() => MOCK_TIMESTAMP)
   })
 
   afterAll(() => {
@@ -112,7 +112,7 @@ describe('slowLog slice', () => {
         ...initialState,
         loading: false,
         data,
-        lastRefreshTime: timestamp
+        lastRefreshTime: MOCK_TIMESTAMP
       }
 
       // Act