RI-6615 fixed tests and navigation close when switch btw dbs

kchepikava · kchepikava · commit bf23d42df5a8 · 2025-01-15T15:39:22.000+01:00
diff --git a/redisinsight/ui/src/components/instance-header/components/instances-navigation-popover/InstancesNavigationPopover.tsx b/redisinsight/ui/src/components/instance-header/components/instances-navigation-popover/InstancesNavigationPopover.tsx
@@ -137,6 +137,7 @@ const InstancesNavigationPopover = ({ name }: Props) => {
             selectedTab={selectedTab}
             filteredDbInstances={filteredDbInstances}
             filteredRdiInstances={filteredRdiInstances}
+            onItemClick={showPopover}
           />
           <div>
             <EuiSpacer size="m" />
diff --git a/redisinsight/ui/src/components/instance-header/components/instances-navigation-popover/components/instances-list/InstancesList.tsx b/redisinsight/ui/src/components/instance-header/components/instances-navigation-popover/components/instances-list/InstancesList.tsx
@@ -15,12 +15,14 @@ export interface InstancesListProps {
   selectedTab: InstancesTabs
   filteredDbInstances: Instance[]
   filteredRdiInstances: RdiInstance[]
+  onItemClick: () => void
 }
 
 const InstancesList = ({
   selectedTab,
   filteredDbInstances,
   filteredRdiInstances,
+  onItemClick,
 } :InstancesListProps) => {
   const [loading, setLoading] = useState<boolean>(false)
   const [selected, setSelected] = useState<string>('')
@@ -33,6 +35,7 @@ const InstancesList = ({
   const connectToInstance = (id = '') => {
     dispatch(setConnectedInstanceId(id))
     setLoading(false)
+    onItemClick?.()
     history.push(Pages.browser(id))
   }
 
@@ -65,7 +68,7 @@ const InstancesList = ({
       instance.id,
       (id: string) => {
         setLoading(false)
-
+        onItemClick?.()
         history.push(Pages.rdiPipelineConfig(id))
       },
       () => setLoading(false)
diff --git a/redisinsight/ui/src/pages/rdi/pipeline-management/pages/job/Job.spec.tsx b/redisinsight/ui/src/pages/rdi/pipeline-management/pages/job/Job.spec.tsx
@@ -7,6 +7,7 @@ import {
   rdiPipelineSelector,
   setChangedFile,
   deleteChangedFile,
+  setPipelineJobs,
 } from 'uiSrc/slices/rdi/pipeline'
 import { act, cleanup, fireEvent, mockedStore, render, screen } from 'uiSrc/utils/test-utils'
 
@@ -63,6 +64,23 @@ describe('Job', () => {
       loading: false,
       schema: { jobs: { test: {} } },
       error: '',
+      config: `connections:
+      target:
+        type: redis
+    `,
+      jobs: [{
+        name: 'jobName',
+        value: `job:
+                    transform:
+                      type: sql
+                `
+      }, {
+        name: 'job2',
+        value: `job2:
+                    transform:
+                      type: redis
+                    `
+      }],
     });
     (rdiPipelineSelector as jest.Mock).mockImplementation(rdiPipelineSelectorMock)
     const pushMock = jest.fn()
@@ -96,6 +114,7 @@ describe('Job', () => {
 
     const expectedActions = [
       getPipelineStrategies(),
+      setPipelineJobs(expect.any(Array)),
     ]
 
     expect(store.getActions()).toEqual(expectedActions)
@@ -112,6 +131,7 @@ describe('Job', () => {
 
     const expectedActions = [
       getPipelineStrategies(),
+      setPipelineJobs(expect.any(Array)),
       setChangedFile({ name: 'jobName', status: FileChangeType.Modified }),
     ]
 
@@ -129,6 +149,7 @@ describe('Job', () => {
 
     const expectedActions = [
       getPipelineStrategies(),
+      setPipelineJobs(expect.any(Array)),
       deleteChangedFile('jobName')
     ]
 
diff --git a/redisinsight/ui/src/pages/rdi/pipeline-management/pages/job/JobsWrapper.spec.tsx b/redisinsight/ui/src/pages/rdi/pipeline-management/pages/job/JobsWrapper.spec.tsx
@@ -4,10 +4,10 @@ import { useFormikContext } from 'formik'
 import { cloneDeep } from 'lodash'
 import { AxiosError } from 'axios'
 
-import { deleteChangedFile, getPipelineStrategies, rdiPipelineSelector, setChangedFile } from 'uiSrc/slices/rdi/pipeline'
+import { deleteChangedFile, getPipelineStrategies, rdiPipelineSelector, setChangedFile, setPipelineJobs } from 'uiSrc/slices/rdi/pipeline'
 import { cleanup, fireEvent, mockedStore, render, screen } from 'uiSrc/utils/test-utils'
 import { sendPageViewTelemetry, TelemetryPageView, sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
-import { MOCK_RDI_PIPELINE_CONFIG, MOCK_RDI_PIPELINE_DATA, MOCK_RDI_PIPELINE_JOB2 } from 'uiSrc/mocks/data/rdi'
+import { MOCK_RDI_PIPELINE_CONFIG, MOCK_RDI_PIPELINE_DATA, MOCK_RDI_PIPELINE_JOB1, MOCK_RDI_PIPELINE_JOB2 } from 'uiSrc/mocks/data/rdi'
 import { FileChangeType } from 'uiSrc/slices/interfaces'
 import { addErrorNotification } from 'uiSrc/slices/app/notifications'
 import JobWrapper from './JobWrapper'
@@ -23,11 +23,26 @@ jest.mock('uiSrc/slices/rdi/pipeline', () => ({
   rdiPipelineSelector: jest.fn().mockReturnValue({
     loading: false,
     schema: { jobs: { test: {} } },
+    config: `connections:
+        target:
+          type: redis
+      `,
+    jobs: [{
+      name: 'jobName',
+      value: `job:
+    transform:
+    type: sql
+    `
+    }, {
+      name: 'job2',
+      value: `job2:
+    transform:
+    type: redis
+    `
+    }],
   }),
 }))
 
-jest.mock('formik')
-
 let store: typeof mockedStore
 beforeEach(() => {
   cleanup()
@@ -36,14 +51,6 @@ beforeEach(() => {
 })
 
 describe('JobWrapper', () => {
-  beforeEach(() => {
-    const mockUseFormikContext = {
-      setFieldValue: jest.fn,
-      values: MOCK_RDI_PIPELINE_DATA,
-    };
-    (useFormikContext as jest.Mock).mockReturnValue(mockUseFormikContext)
-  })
-
   it('should render', () => {
     expect(render(<JobWrapper />)).toBeTruthy()
   })
@@ -62,31 +69,16 @@ describe('JobWrapper', () => {
     })
   })
 
-  it('should render loading spinner', () => {
-    const rdiPipelineSelectorMock = jest.fn().mockReturnValue({
-      loading: true,
-    });
-    (rdiPipelineSelector as jest.Mock).mockImplementation(rdiPipelineSelectorMock)
-
-    render(<JobWrapper />)
-
-    expect(screen.getByTestId('rdi-job-loading')).toBeInTheDocument()
-  })
-
   it('should push to config page', () => {
     const rdiPipelineSelectorMock = jest.fn().mockReturnValue({
       loading: false,
+      config: MOCK_RDI_PIPELINE_CONFIG,
+      jobs: [MOCK_RDI_PIPELINE_JOB2],
     });
-    (rdiPipelineSelector as jest.Mock).mockImplementation(rdiPipelineSelectorMock)
+    (rdiPipelineSelector as jest.Mock).mockImplementationOnce(rdiPipelineSelectorMock)
     const pushMock = jest.fn()
     reactRouterDom.useHistory = jest.fn().mockReturnValueOnce({ push: pushMock })
 
-    const mockUseFormikContext = {
-      setFieldValue: jest.fn,
-      values: { config: MOCK_RDI_PIPELINE_CONFIG, jobs: [MOCK_RDI_PIPELINE_JOB2] },
-    };
-    (useFormikContext as jest.Mock).mockReturnValueOnce(mockUseFormikContext)
-
     render(<JobWrapper />)
 
     expect(pushMock).toBeCalledWith('/integrate/rdiInstanceId/pipeline-management/config')
@@ -97,7 +89,7 @@ describe('JobWrapper', () => {
       loading: false,
       error: '',
     });
-    (rdiPipelineSelector as jest.Mock).mockImplementation(rdiPipelineSelectorMock)
+    (rdiPipelineSelector as jest.Mock).mockImplementationOnce(rdiPipelineSelectorMock)
     const pushMock = jest.fn()
     reactRouterDom.useHistory = jest.fn().mockReturnValueOnce({ push: pushMock })
 
@@ -141,9 +133,10 @@ describe('JobWrapper', () => {
     const rdiPipelineSelectorMock = jest.fn().mockReturnValue({
       loading: false,
       schema: { jobs: { test: {} } },
-      data: { jobs: [{ name: 'jobName', value: 'value' }] }
+      data: { jobs: [{ name: 'jobName', value: 'value' }] },
+      jobs: [{ name: 'jobName', value: 'value' }]
     });
-    (rdiPipelineSelector as jest.Mock).mockImplementation(rdiPipelineSelectorMock)
+    (rdiPipelineSelector as jest.Mock).mockImplementationOnce(rdiPipelineSelectorMock)
 
     render(<JobWrapper />)
 
@@ -155,6 +148,7 @@ describe('JobWrapper', () => {
 
     const expectedActions = [
       getPipelineStrategies(),
+      setPipelineJobs(expect.any(Array)),
       setChangedFile({ name: 'jobName', status: FileChangeType.Modified })
     ]
 
@@ -165,7 +159,8 @@ describe('JobWrapper', () => {
     const rdiPipelineSelectorMock = jest.fn().mockReturnValue({
       loading: false,
       schema: { jobs: { test: {} } },
-      data: { jobs: [{ name: 'jobName', value: '123' }] }
+      data: { jobs: [{ name: 'jobName', value: '123' }] },
+      jobs: [{ name: 'jobName' }],
     });
     (rdiPipelineSelector as jest.Mock).mockImplementation(rdiPipelineSelectorMock)
 
@@ -179,6 +174,7 @@ describe('JobWrapper', () => {
 
     const expectedActions = [
       getPipelineStrategies(),
+      setPipelineJobs([{ name: 'jobName', value: '123' }]),
       deleteChangedFile('jobName')
     ]
 
@@ -189,16 +185,12 @@ describe('JobWrapper', () => {
     const rdiPipelineSelectorMock = jest.fn().mockReturnValue({
       loading: false,
       schema: { jobs: { test: {} } },
-      data: { jobs: [{ name: 'jobName', value: 'sources:incorrect\n target:' }] }
+      data: { jobs: [{ name: 'jobName', value: 'sources:incorrect\n target:' }] },
+      config: MOCK_RDI_PIPELINE_CONFIG,
+      jobs: [{ name: 'jobName', value: 'sources:incorrect\n target:' }]
     });
     (rdiPipelineSelector as jest.Mock).mockImplementation(rdiPipelineSelectorMock)
 
-    const mockUseFormikContext = {
-      setFieldValue: jest.fn,
-      values: { config: MOCK_RDI_PIPELINE_CONFIG, jobs: [{ name: 'jobName', value: 'sources:incorrect\n target:' }] },
-    };
-    (useFormikContext as jest.Mock).mockReturnValue(mockUseFormikContext)
-
     const { queryByTestId } = render(<JobWrapper />)
 
     fireEvent.click(screen.getByTestId('rdi-job-dry-run'))
diff --git a/redisinsight/ui/src/slices/tests/rdi/pipeline.spec.ts b/redisinsight/ui/src/slices/tests/rdi/pipeline.spec.ts
@@ -40,6 +40,8 @@ import reducer, {
   triggerPipelineActionSuccess,
   triggerPipelineActionFailure,
   rdiPipelineActionSelector,
+  setPipelineConfig,
+  setPipelineJobs,
 } from 'uiSrc/slices/rdi/pipeline'
 import { apiService } from 'uiSrc/services'
 import { addErrorNotification, addInfiniteNotification, addMessageNotification } from 'uiSrc/slices/app/notifications'
@@ -119,6 +121,8 @@ describe('rdi pipe slice', () => {
         ...initialState,
         loading: false,
         data: MOCK_RDI_PIPELINE_DATA,
+        config: MOCK_RDI_PIPELINE_DATA.config,
+        jobs: MOCK_RDI_PIPELINE_DATA.jobs,
       }
       // Act
       const nextState = reducer(initialState, getPipelineSuccess(MOCK_RDI_PIPELINE_DATA))
@@ -133,6 +137,46 @@ describe('rdi pipe slice', () => {
     })
   })
 
+  describe('setPipelineConfig', () => {
+    it('should properly set state', () => {
+      // Arrange
+      const state = {
+        ...initialState,
+        config: MOCK_RDI_PIPELINE_DATA.config,
+      }
+      // Act
+      const nextState = reducer(initialState, setPipelineConfig(MOCK_RDI_PIPELINE_DATA.config))
+
+      // Assert
+      const rootState = Object.assign(initialStateDefault, {
+        rdi: {
+          pipeline: nextState,
+        }
+      })
+      expect(rdiPipelineSelector(rootState)).toEqual(state)
+    })
+  })
+
+  describe('setPipelineJobs', () => {
+    it('should properly set state', () => {
+      // Arrange
+      const state = {
+        ...initialState,
+        jobs: MOCK_RDI_PIPELINE_DATA.jobs,
+      }
+      // Act
+      const nextState = reducer(initialState, setPipelineJobs(MOCK_RDI_PIPELINE_DATA.jobs))
+
+      // Assert
+      const rootState = Object.assign(initialStateDefault, {
+        rdi: {
+          pipeline: nextState,
+        }
+      })
+      expect(rdiPipelineSelector(rootState)).toEqual(state)
+    })
+  })
+
   describe('getPipelineFailure', () => {
     it('should properly set state', () => {
       // Arrange
