Merge pull request #3530 from RedisInsight/fe/feature/RI-5855_cover_wrong_structure_response

Fe/feature/ri 5855 cover wrong structure response

Author: mariasergeenko

redisinsight/ui/src/pages/rdi/pipeline-management/components/dry-run-job-commands/DryRunJobCommands.spec.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { act, render, screen } from 'uiSrc/utils/test-utils'
+
+import { rdiDryRunJobSelector } from 'uiSrc/slices/rdi/dryRun'
+import DryRunJobCommands from './DryRunJobCommands'
+
+jest.mock('uiSrc/slices/rdi/dryRun', () => ({
+  ...jest.requireActual('uiSrc/slices/rdi/dryRun'),
+  rdiDryRunJobSelector: jest.fn().mockReturnValue({
+    results: null,
+  })
+}))
+
+describe('DryRunJobCommands', () => {
+  it('should render', () => {
+    expect(render(<DryRunJobCommands />)).toBeTruthy()
+  })
+
+  it('should render no commands message', async () => {
+    const rdiDryRunJobSelectorMock = jest.fn().mockReturnValue({
+      results: { output: {} },
+    });
+    (rdiDryRunJobSelector as jest.Mock).mockImplementationOnce(rdiDryRunJobSelectorMock)
+
+    await act(async () => {
+      render(<DryRunJobCommands />)
+    })
+
+    expect(screen.getByTestId('commands-output')).toHaveTextContent('No Redis commands provided.')
+  })
+
+  it('should render transformations', async () => {
+    const rdiDryRunJobSelectorMock = jest.fn().mockReturnValue({
+      results: {
+        output: [
+          {
+            connection: 'target',
+            commands: [
+              'HSET person:Yossi:Shirizli FNAME Yossi LAST_NAME Shirizli COUNTRY IL'
+            ]
+          }
+        ],
+      },
+    });
+    (rdiDryRunJobSelector as jest.Mock).mockImplementationOnce(rdiDryRunJobSelectorMock)
+
+    await act(async () => {
+      render(<DryRunJobCommands target="target" />)
+    })
+    expect(screen.getByTestId('commands-output')).toHaveTextContent('HSET person:Yossi:Shirizli FNAME Yossi LAST_NAME Shirizli COUNTRY IL')
+  })
+})

redisinsight/ui/src/pages/rdi/pipeline-management/components/dry-run-job-commands/DryRunJobCommands.tsx

@@ -11,22 +11,28 @@ export interface Props {
   target?: string
 }
 
+const NO_COMMANDS_MESSAGE = 'No Redis commands provided.'
+
 const DryRunJobCommands = ({ target }: Props) => {
   const { results } = useSelector(rdiDryRunJobSelector)
   const [commands, setCommands] = useState<string>('')
 
   useEffect(() => {
-    const targetCommands = results?.output
-      ?.find((el) => el.connection === target)
-      ?.commands
+    if (!results) {
+      return
+    }
 
     try {
+      const targetCommands = results?.output
+        ?.find((el) => el.connection === target)
+        ?.commands
+
       monaco.editor.colorize((targetCommands ?? []).join('\n').trim(), MonacoLanguage.Redis, {})
         .then((data) => {
           setCommands(data)
         })
     } catch (e) {
-      setCommands((targetCommands ?? []).join(''))
+      setCommands(NO_COMMANDS_MESSAGE)
     }
   }, [results, target])
 

redisinsight/ui/src/pages/rdi/pipeline-management/components/dry-run-job-transformations/DryRunJobTransformations.spec.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { render, screen } from 'uiSrc/utils/test-utils'
+
+import { rdiDryRunJobSelector } from 'uiSrc/slices/rdi/dryRun'
+import DryRunJobTransformations from './DryRunJobTransformations'
+
+jest.mock('uiSrc/slices/rdi/dryRun', () => ({
+  ...jest.requireActual('uiSrc/slices/rdi/dryRun'),
+  rdiDryRunJobSelector: jest.fn().mockReturnValue({
+    results: null,
+  })
+}))
+
+describe('DryRunJobTransformations', () => {
+  it('should render', () => {
+    expect(render(<DryRunJobTransformations />)).toBeTruthy()
+  })
+
+  it('should render no transformation message', () => {
+    const rdiDryRunJobSelectorMock = jest.fn().mockReturnValue({
+      results: {},
+    });
+    (rdiDryRunJobSelector as jest.Mock).mockImplementationOnce(rdiDryRunJobSelectorMock)
+
+    render(<DryRunJobTransformations />)
+    expect(screen.getByTestId('transformations-output')).toHaveTextContent('No transformation results provided.')
+  })
+
+  it('should render transformations', () => {
+    const rdiDryRunJobSelectorMock = jest.fn().mockReturnValue({
+      results: { transformation: [] },
+    });
+    (rdiDryRunJobSelector as jest.Mock).mockImplementationOnce(rdiDryRunJobSelectorMock)
+
+    render(<DryRunJobTransformations />)
+    expect(screen.getByTestId('transformations-output')).toHaveTextContent('[]')
+  })
+})

redisinsight/ui/src/pages/rdi/pipeline-management/components/dry-run-job-transformations/DryRunJobTransformations.tsx

@@ -4,17 +4,23 @@ import { useSelector } from 'react-redux'
 import { rdiDryRunJobSelector } from 'uiSrc/slices/rdi/dryRun'
 import MonacoJson from 'uiSrc/components/monaco-editor/components/monaco-json'
 
+const NO_TRANSFORMATION_MESSAGE = 'No transformation results provided.'
+
 const DryRunJobTransformations = () => {
   const { results } = useSelector(rdiDryRunJobSelector)
 
   const [transformations, setTransformations] = useState('')
 
   useEffect(() => {
+    if (!results) {
+      return
+    }
+
     try {
       const transformations = JSON.stringify(results?.transformation, null, 2)
-      setTransformations(transformations)
+      setTransformations(transformations || NO_TRANSFORMATION_MESSAGE)
     } catch (e) {
-      // ignore error
+      setTransformations(NO_TRANSFORMATION_MESSAGE)
     }
   }, [results])
 

redisinsight/ui/src/pages/rdi/pipeline-management/components/jobs-panel/Panel.spec.tsx

@@ -53,15 +53,15 @@ describe('JobsPanel', () => {
     expect(screen.getByTestId('dry-run-btn')).toBeDisabled()
 
     // set valid json value
-    fireEvent.change(screen.getByTestId('input-value'), { target: { value: 1 } })
+    fireEvent.change(screen.getByTestId('input-value'), { target: { value: '[]' } })
 
     expect(screen.getByTestId('dry-run-btn')).not.toBeDisabled()
   })
 
   it('should call proper telemetry events', () => {
     render(<JobsPanel {...instance(mockedProps)} />)
 
-    fireEvent.change(screen.getByTestId('input-value'), { target: { value: 1 } })
+    fireEvent.change(screen.getByTestId('input-value'), { target: { value: '[]' } })
     fireEvent.click(screen.getByTestId('dry-run-btn'))
 
     expect(sendEventTelemetry).toBeCalledWith({
@@ -92,7 +92,7 @@ describe('JobsPanel', () => {
   it('should fetch dry run job results', () => {
     render(<JobsPanel {...instance(mockedProps)} />)
 
-    fireEvent.change(screen.getByTestId('input-value'), { target: { value: 1 } })
+    fireEvent.change(screen.getByTestId('input-value'), { target: { value: '[]' } })
     fireEvent.click(screen.getByTestId('dry-run-btn'))
 
     const expectedActions = [

redisinsight/ui/src/pages/rdi/pipeline-management/components/jobs-panel/Panel.tsx

@@ -13,6 +13,7 @@ import {
 } from '@elastic/eui'
 import { useDispatch, useSelector } from 'react-redux'
 import { useParams } from 'react-router-dom'
+import { isArray } from 'lodash'
 import yaml from 'js-yaml'
 
 import { PipelineJobsTabs } from 'uiSrc/slices/interfaces/rdi'
@@ -65,8 +66,8 @@ const DryRunJobPanel = (props: Props) => {
 
   useEffect(() => {
     try {
-      JSON.parse(input)
-      setIsFormValid(true)
+      const jsonValue = JSON.parse(input)
+      setIsFormValid(isArray(jsonValue))
     } catch (e) {
       setIsFormValid(false)
     }
@@ -78,9 +79,11 @@ const DryRunJobPanel = (props: Props) => {
   }, [])
 
   useEffect(() => {
-    if (!results?.output) return
+    if (!results?.output || !isArray(results.output)) return
 
-    const targets = results.output.map(({ connection }) => getTargetOption(connection))
+    const targets = results.output
+      .filter(({ connection }) => connection)
+      .map(({ connection }) => getTargetOption(connection))
     setTargetOptions(targets)
     setSelectedTarget(targets[0]?.value)
   }, [results])
@@ -114,6 +117,7 @@ const DryRunJobPanel = (props: Props) => {
   const isSelectAvailable = selectedTab === PipelineJobsTabs.Output
     && !!results?.output
     && (results?.output?.length > 1)
+    && !!targetOptions.length
 
   const Tabs = useCallback(() => (
     <EuiTabs className={styles.tabs}>