fix FilterKeyType.spec.tsx, AddDatabaseScreen.spec.tsx, FetchPipelinePopover.spec.tsx, TemplateForm.spec.tsx

Author: pd-redis

redisinsight/ui/src/mocks/handlers/instances/instancesHandlers.ts

@@ -92,19 +92,30 @@ const handlers: HttpHandler[] = [
   http.get(getMswURL(`${ApiEndpoints.DATABASES}/:id/connect`), async () => {
     return HttpResponse.text('', { status: 200 })
   }),
-]
-
-// rest.post(`${ApiEndpoints.INSTANCE}`, (req, res, ctx) => {
-//   const { username } = req.body
+  http.post<
+    any,
+    {
+      name: string
+      host: string
+      port: number
+      username: string
+      timeout: number
+      tls: boolean
+    },
+    Partial<Instance>
+  >(getMswURL(`${ApiEndpoints.DATABASES}`), async ({ request }) => {
+    const { username } = await request.json()
 
-//   return res(
-//     ctx.json({
-//       id: 'f79e82e8-c34a-4dc7-a49e-9fadc0979fda',
-//       username,
-//       firstName: 'John',
-//       lastName: 'Maverick',
-//     }),
-//   )
-// }),
+    return HttpResponse.json(
+      {
+        id: 'f79e82e8-c34a-4dc7-a49e-9fadc0979fda',
+        username,
+        host: 'localhost',
+        port: 6379,
+      },
+      { status: 201 },
+    )
+  }),
+]
 
 export default handlers

redisinsight/ui/src/mocks/handlers/rdi/rdiHandler.ts

@@ -2,25 +2,36 @@ import { http, HttpHandler, HttpResponse } from 'msw'
 import { getMswURL } from 'uiSrc/utils/test-utils'
 import { getUrl } from 'uiSrc/utils'
 import { ApiEndpoints } from 'uiSrc/constants'
-import { Rdi as RdiInstanceResponse } from 'apiSrc/modules/rdi/models/rdi'
 
 const handlers: HttpHandler[] = [
   // fetch rdi instances
-  http.get<any, RdiInstanceResponse[]>(
-    getMswURL(getUrl(ApiEndpoints.RDI_INSTANCES)),
+  http.get(getMswURL(getUrl(ApiEndpoints.RDI_INSTANCES)), async () => {
+    return HttpResponse.json(
+      [
+        {
+          id: '1',
+          name: 'My first integration',
+          url: 'redis-12345.c253.us-central1-1.gce.cloud.redislabs.com:12345',
+          lastConnection: new Date(),
+          version: '1.2',
+          type: 'api',
+          username: 'user',
+        },
+      ],
+      { status: 200 },
+    )
+  }),
+  http.get(
+    getMswURL(`/${ApiEndpoints.RDI_INSTANCES}/:id/pipeline`),
     async () => {
       return HttpResponse.json(
-        [
-          {
-            id: '1',
-            name: 'My first integration',
-            url: 'redis-12345.c253.us-central1-1.gce.cloud.redislabs.com:12345',
-            lastConnection: new Date(),
-            version: '1.2',
-            type: 'api',
-            username: 'user',
-          },
-        ],
+        {
+          jobs: [
+            { name: 'job1', value: 'value' },
+            { name: 'job2', value: 'value' },
+          ],
+          config: { field: 'value' },
+        },
         { status: 200 },
       )
     },

redisinsight/ui/src/pages/browser/components/filter-key-type/FilterKeyType.spec.tsx

@@ -2,7 +2,7 @@ import { cloneDeep, set } from 'lodash'
 import React from 'react'
 import {
   cleanup,
-  clearStoreActions,
+  expectActionsToContain,
   fireEvent,
   initialStateDefault,
   mockedStore,
@@ -68,10 +68,13 @@ describe('FilterKeyType', () => {
     await userEvent.click(screen.getByTestId(filterSelectId))
     await userEvent.click(await findByText('Hash'))
 
-    const expectedActions = [setFilter(KeyTypes.Hash), resetBrowserTree(), loadKeys()]
-    expect(clearStoreActions(store.getActions())).toEqual(
-      clearStoreActions(expectedActions),
-    )
+    const expectedActions = [
+      setFilter(KeyTypes.Hash),
+      resetBrowserTree(),
+      loadKeys(),
+    ]
+
+    expectActionsToContain(store.getActions(), expectedActions)
   })
 
   it('should be disabled filter with database redis version < 6.0', () => {

redisinsight/ui/src/pages/home/components/add-database-screen/AddDatabaseScreen.spec.tsx

@@ -8,6 +8,7 @@ import {
   mockedStore,
   cleanup,
   act,
+  expectActionsToContain,
 } from 'uiSrc/utils/test-utils'
 
 import { defaultInstanceChanging } from 'uiSrc/slices/instances/instances'
@@ -35,7 +36,7 @@ describe('AddDatabaseScreen', () => {
       fireEvent.click(screen.getByTestId('btn-submit'))
     })
 
-    expect(store.getActions()).toEqual([defaultInstanceChanging()])
+    expectActionsToContain(store.getActions(), [defaultInstanceChanging()])
   })
 
   it('should disable test connection and submit buttons when connection url is invalid', async () => {

redisinsight/ui/src/pages/rdi/instance/components/header/components/fetch-pipeline-popover/FetchPipelinePopover.spec.tsx

@@ -3,10 +3,12 @@ import { cloneDeep } from 'lodash'
 import {
   act,
   cleanup,
+  expectActionsToContain,
   fireEvent,
   mockedStore,
   render,
   screen,
+  userEvent,
 } from 'uiSrc/utils/test-utils'
 import { getPipeline, rdiPipelineSelector } from 'uiSrc/slices/rdi/pipeline'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
@@ -57,26 +59,24 @@ describe('FetchPipelinePopover', () => {
 
     expect(screen.queryByTestId('confirm-btn')).not.toBeInTheDocument()
 
-    await act(() => {
-      fireEvent.click(screen.getByTestId('upload-pipeline-btn'))
-    })
+    await userEvent.click(screen.getByTestId('upload-pipeline-btn'))
 
     expect(screen.queryByTestId('upload-confirm-btn')).toBeInTheDocument()
   })
 
   it('should call proper actions', async () => {
     render(<FetchPipelinePopover />)
 
-    await act(() => {
+    await act(async () => {
       fireEvent.click(screen.getByTestId('upload-pipeline-btn'))
     })
 
-    await act(() => {
+    await act(async () => {
       fireEvent.click(screen.getByTestId('upload-confirm-btn'))
     })
 
     const expectedActions = [getPipeline()]
-    expect(store.getActions()).toEqual(expectedActions)
+    expectActionsToContain(store.getActions(), expectedActions)
   })
 
   it('should call proper telemetry event', async () => {
@@ -87,11 +87,11 @@ describe('FetchPipelinePopover', () => {
 
     render(<FetchPipelinePopover />)
 
-    await act(() => {
+    await act(async () => {
       fireEvent.click(screen.getByTestId('upload-pipeline-btn'))
     })
 
-    expect(sendEventTelemetry).toBeCalledWith({
+    expect(sendEventTelemetry).toHaveBeenCalledWith({
       event: TelemetryEvent.RDI_PIPELINE_UPLOAD_FROM_SERVER_CLICKED,
       eventData: {
         id: 'rdiInstanceId',

redisinsight/ui/src/pages/rdi/pipeline-management/components/template-form/TemplateForm.spec.tsx

@@ -5,6 +5,7 @@ import { instance, mock } from 'ts-mockito'
 import {
   act,
   cleanup,
+  expectActionsToContain,
   fireEvent,
   mockedStore,
   render,
@@ -66,11 +67,9 @@ describe('TemplateForm', () => {
       render(<TemplateForm {...instance(mockedProps)} />)
     })
 
-    const expectedActions = getPipelineStrategies()
+    const expectedActions = [getPipelineStrategies()]
 
-    expect(store.getActions()).toEqual(
-      expect.arrayContaining([expectedActions]),
-    )
+    expectActionsToContain(store.getActions(), expectedActions)
   })
 
   it('apply btn should be disabled if there is any value', () => {

redisinsight/ui/src/utils/test-utils.tsx

@@ -442,6 +442,18 @@ export const mockFeatureFlags = (
     })
 }
 
+/**
+ * Helper function to check if expected actions are contained within actual store actions
+ * @param actualActions - The actual actions dispatched to the store
+ * @param expectedActions - The expected actions that should be present
+ */
+const expectActionsToContain = (
+  actualActions: any[],
+  expectedActions: any[],
+) => {
+  expect(actualActions).toEqual(expect.arrayContaining(expectedActions))
+}
+
 // re-export everything
 export * from '@testing-library/react'
 // override render method
@@ -455,4 +467,5 @@ export {
   waitForRiTooltipVisible,
   waitForRiTooltipHidden,
   waitForRiPopoverVisible,
+  expectActionsToContain,
 }