Fe/feature/ri 4876 optimize UI unit tests

.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:

jest.config.js → jest.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,
-  },
 }

package.json

@@ -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"
   }
 }

redisinsight/__mocks__/rawproto.js

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

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

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

redisinsight/ui/src/mocks/handlers/app/infoHandlers.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/pages/triggeredFunctions/pages/Libraries/LibrariesPage.spec.tsx

@@ -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/slices/tests/analytics/dbAnalysis.spec.ts

@@ -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/slowlog.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

redisinsight/ui/src/slices/tests/browser/hash.spec.ts

@@ -10,11 +10,14 @@ import {
 import successMessages from 'uiSrc/components/notifications/success-messages'
 import { bufferToString, stringToBuffer } from 'uiSrc/utils'
 import { deleteRedisearchKeyFromList } from 'uiSrc/slices/browser/redisearch'
+import { MOCK_TIMESTAMP } from 'uiSrc/mocks/data/dateNow'
 import {
   defaultSelectedKeyAction,
   refreshKeyInfo,
   deleteSelectedKeySuccess,
   updateSelectedKeyRefreshTime,
+  refreshKeyInfoSuccess,
+  loadKeyInfoSuccess,
 } from '../../browser/keys'
 import reducer, {
   deleteHashFields,
@@ -58,7 +61,7 @@ beforeEach(() => {
 
 describe('hash slice', () => {
   beforeAll(() => {
-    dateNow = jest.spyOn(Date, 'now').mockImplementation(() => 1629128049027)
+    dateNow = jest.spyOn(Date, 'now').mockImplementation(() => MOCK_TIMESTAMP)
   })
 
   afterAll(() => {
@@ -602,7 +605,9 @@ describe('hash slice', () => {
                 fields.map((field) => bufferToString(field)).join(''),
                 'Field'
               )
-            )
+            ),
+            refreshKeyInfoSuccess({ affected: 2 }),
+            updateSelectedKeyRefreshTime(MOCK_TIMESTAMP)
           ]
 
           expect(mockedStore.getActions()).toEqual(expectedActions)
@@ -670,6 +675,8 @@ describe('hash slice', () => {
           updateValue(),
           updateValueSuccess(),
           defaultSelectedKeyAction(),
+          loadKeyInfoSuccess({ affected: 2 }),
+          updateSelectedKeyRefreshTime(MOCK_TIMESTAMP),
         ]
 
         expect(mockedStore.getActions()).toEqual(expectedActions)
@@ -719,6 +726,8 @@ describe('hash slice', () => {
           updateValueSuccess(),
           updateFieldsInList(fields),
           refreshKeyInfo(),
+          refreshKeyInfoSuccess({ affected: 2 }),
+          updateSelectedKeyRefreshTime(MOCK_TIMESTAMP),
         ]
 
         expect(mockedStore.getActions()).toEqual(expectedActions)

redisinsight/ui/src/slices/tests/browser/keys.spec.ts

@@ -8,6 +8,7 @@ import { addErrorNotification, addMessageNotification } from 'uiSrc/slices/app/n
 import successMessages from 'uiSrc/components/notifications/success-messages'
 import { SearchHistoryItem, SearchMode } from 'uiSrc/slices/interfaces/keys'
 import { resetBrowserTree } from 'uiSrc/slices/app/context'
+import { MOCK_TIMESTAMP } from 'uiSrc/mocks/data/dateNow'
 import {
   CreateHashWithExpireDto,
   CreateListWithExpireDto,
@@ -78,7 +79,7 @@ import reducer, {
   setLastBatchPatternKeys,
   updateSelectedKeyRefreshTime,
 } from '../../browser/keys'
-import { getString } from '../../browser/string'
+import { getString, getStringSuccess } from '../../browser/string'
 
 jest.mock('uiSrc/services', () => ({
   ...jest.requireActual('uiSrc/services'),
@@ -94,7 +95,7 @@ beforeEach(() => {
 
 describe('keys slice', () => {
   beforeAll(() => {
-    dateNow = jest.spyOn(Date, 'now').mockImplementation(() => 1629128049027)
+    dateNow = jest.spyOn(Date, 'now').mockImplementation(() => MOCK_TIMESTAMP)
   })
 
   afterAll(() => {
@@ -1239,6 +1240,7 @@ describe('keys slice', () => {
           updateSelectedKeyRefreshTime(Date.now()),
           // fetch keyInfo
           getString(),
+          getStringSuccess(data),
         ]
         expect(store.getActions()).toEqual(expectedActions)
       })
@@ -1566,6 +1568,8 @@ describe('keys slice', () => {
           editPatternKeyTTLFromList([key, ttl]),
           defaultSelectedKeyAction(),
           defaultSelectedKeyActionSuccess(),
+          loadKeyInfoSuccess({ data: '{}', keyName: 'keyName' }),
+          updateSelectedKeyRefreshTime(MOCK_TIMESTAMP)
         ]
         expect(store.getActions()).toEqual(expectedActions)
       })

redisinsight/ui/src/slices/tests/browser/list.spec.ts

@@ -10,6 +10,7 @@ import {
 import successMessages from 'uiSrc/components/notifications/success-messages'
 import { stringToBuffer } from 'uiSrc/utils'
 import { deleteRedisearchKeyFromList } from 'uiSrc/slices/browser/redisearch'
+import { MOCK_TIMESTAMP } from 'uiSrc/mocks/data/dateNow'
 import { DeleteListElementsDto, PushElementToListDto } from 'apiSrc/modules/browser/dto'
 import {
   defaultSelectedKeyAction,
@@ -66,7 +67,7 @@ beforeEach(() => {
 
 describe('list slice', () => {
   beforeAll(() => {
-    dateNow = jest.spyOn(Date, 'now').mockImplementation(() => 1629128049027)
+    dateNow = jest.spyOn(Date, 'now').mockImplementation(() => MOCK_TIMESTAMP)
   })
 
   afterAll(() => {
@@ -700,7 +701,7 @@ describe('list slice', () => {
         // Assert
         const expectedActions = [loadListElements()]
 
-        expect(store.getActions()).toEqual(expectedActions)
+        expect(store.getActions().slice(0, expectedActions.length)).toEqual(expectedActions)
       })
     })
 
@@ -727,7 +728,7 @@ describe('list slice', () => {
           refreshKeyInfo(),
         ]
 
-        expect(mockedStore.getActions()).toEqual(expectedActions)
+        expect(store.getActions().slice(0, expectedActions.length)).toEqual(expectedActions)
       })
       it('failed to update element in list', async () => {
         // Arrange
@@ -775,7 +776,7 @@ describe('list slice', () => {
           defaultSelectedKeyAction(),
         ]
 
-        expect(mockedStore.getActions()).toEqual(expectedActions)
+        expect(mockedStore.getActions().slice(0, expectedActions.length)).toEqual(expectedActions)
       })
       it('failed to insert element in list', async () => {
         // Arrange
@@ -844,7 +845,7 @@ describe('list slice', () => {
           )
         ]
 
-        expect(mockedStore.getActions()).toEqual(expectedActions)
+        expect(mockedStore.getActions().slice(0, expectedActions.length)).toEqual(expectedActions)
       })
 
       it('succeed to delete all elements from list', async () => {

redisinsight/ui/src/slices/tests/browser/redisearch.spec.ts

@@ -13,6 +13,7 @@ import {
 } from 'uiSrc/slices/browser/keys'
 import { initialState as initialStateInstances } from 'uiSrc/slices/instances/instances'
 import { RedisDefaultModules } from 'uiSrc/slices/interfaces'
+import { MOCK_TIMESTAMP } from 'uiSrc/mocks/data/dateNow'
 import reducer, {
   initialState,
   loadKeys,
@@ -63,7 +64,7 @@ jest.mock('uiSrc/services', () => ({
 
 describe('redisearch slice', () => {
   beforeAll(() => {
-    dateNow = jest.spyOn(Date, 'now').mockImplementation(() => 1629128049027)
+    dateNow = jest.spyOn(Date, 'now').mockImplementation(() => MOCK_TIMESTAMP)
   })
 
   afterAll(() => {
@@ -1059,6 +1060,7 @@ describe('redisearch slice', () => {
           loadKeysFailure(errorMessage),
           setRedisearchInitialState(),
           loadList(),
+          loadListSuccess(REDISEARCH_LIST_DATA_MOCK.indexes),
         ]
         expect(newStore.getActions()).toEqual(expectedActions)
       })
@@ -1157,7 +1159,8 @@ describe('redisearch slice', () => {
           createIndex(),
           createIndexSuccess(),
           addMessageNotification(successMessages.CREATE_INDEX()),
-          loadList()
+          loadList(),
+          loadListSuccess(REDISEARCH_LIST_DATA_MOCK.indexes),
         ]
         expect(store.getActions()).toEqual(expectedActions)
       })

redisinsight/ui/src/slices/tests/browser/rejson.spec.ts

@@ -441,7 +441,7 @@ describe('rejson slice', () => {
           loadRejsonBranch(),
           refreshKeyInfo()
         ]
-        expect(store.getActions()).toEqual(expectedActions)
+        expect(store.getActions().slice(0, expectedActions.length)).toEqual(expectedActions)
       })
 
       it('failed to fetch set json data', async () => {
@@ -496,7 +496,7 @@ describe('rejson slice', () => {
           loadRejsonBranch(),
           refreshKeyInfo()
         ]
-        expect(store.getActions()).toEqual(expectedActions)
+        expect(store.getActions().slice(0, expectedActions.length)).toEqual(expectedActions)
       })
 
       it('failed to fetch append array data', async () => {
@@ -558,7 +558,7 @@ describe('rejson slice', () => {
             )
           )
         ]
-        expect(store.getActions()).toEqual(expectedActions)
+        expect(store.getActions().slice(0, expectedActions.length)).toEqual(expectedActions)
       })
 
       it('failed to fetch remove json key', async () => {