Introduce factories for mocking test data (#4772)

- integrate fishery to provide simple and handy tools for building factories
- integrate faker to provide utils for generating dynamic and realistic-looking data
- create example factory for the vector search field box and update unit tests

Author: valkirilov

package.json

@@ -105,6 +105,7 @@
     "@babel/preset-react": "^7.22.15",
     "@babel/preset-typescript": "^7.23.2",
     "@electron/rebuild": "^3.7.1",
+    "@faker-js/faker": "^9.9.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
     "@svgr/webpack": "^8.1.0",
     "@teamsupercell/typings-for-css-modules-loader": "^2.4.0",
@@ -178,6 +179,7 @@
     "eslint-plugin-react-hooks": "^4.0.8",
     "eslint-plugin-sonarjs": "^0.10.0",
     "file-loader": "^6.0.0",
+    "fishery": "^2.3.1",
     "google-auth-library": "^9.0.0",
     "googleapis": "^125.0.0",
     "html-webpack-plugin": "^5.6.0",

redisinsight/ui/src/components/new-index/create-index-step/field-box/FieldBox.spec.tsx

@@ -1,16 +1,15 @@
 import React from 'react'
 import { BoxSelectionGroup } from '@redis-ui/components'
 
-import { FieldTypes } from 'uiSrc/pages/browser/components/create-redisearch-index/constants'
-import { MOCK_VECTOR_SEARCH_BOX } from 'uiSrc/constants/mocks/mock-vector-index-search'
 import { cleanup, fireEvent, render, screen } from 'uiSrc/utils/test-utils'
+import { vectorSearchBoxFactory } from 'uiSrc/mocks/factories/redisearch/VectorSearchBox.factory'
 
 import { FieldBox, FieldBoxProps } from './FieldBox'
 import { VectorSearchBox } from './types'
 
 const renderFieldBoxComponent = (props?: FieldBoxProps) => {
   const defaultProps: FieldBoxProps = {
-    box: MOCK_VECTOR_SEARCH_BOX,
+    box: vectorSearchBoxFactory.build(),
   }
 
   return render(
@@ -27,14 +26,7 @@ describe('CreateIndexStepWrapper', () => {
 
   it('should render', () => {
     const props: FieldBoxProps = {
-      box: {
-        ...MOCK_VECTOR_SEARCH_BOX,
-        value: 'id',
-        label: 'id',
-        text: 'Unique product identifier',
-        tag: FieldTypes.TAG,
-        disabled: false,
-      },
+      box: vectorSearchBoxFactory.build(),
     }
 
     const { container } = renderFieldBoxComponent(props)
@@ -53,23 +45,31 @@ describe('CreateIndexStepWrapper', () => {
     expect(checkbox).toBeInTheDocument()
   })
 
-  it('should select the box when clicked', () => {
-    renderFieldBoxComponent()
+  it('should select the box when clicked', async () => {
+    const props: FieldBoxProps = {
+      box: vectorSearchBoxFactory.build({
+        disabled: false,
+      }),
+    }
+
+    renderFieldBoxComponent(props)
 
+    // Verify that the checkbox is not checked initially
     const checkbox = screen.getByRole('checkbox')
     expect(checkbox).not.toBeChecked()
 
-    const box = screen.getByTestId(`field-box-${MOCK_VECTOR_SEARCH_BOX.value}`)
+    // Click on the box to select it
+    const box = screen.getByTestId(`field-box-${props.box.value}`)
     fireEvent.click(box)
 
+    // Wait for the checkbox to be checked
     expect(checkbox).toBeChecked()
   })
 
   it('should not select the box when clicked if disabled', () => {
-    const disabledBox: VectorSearchBox = {
-      ...MOCK_VECTOR_SEARCH_BOX,
+    const disabledBox: VectorSearchBox = vectorSearchBoxFactory.build({
       disabled: true,
-    }
+    })
 
     renderFieldBoxComponent({ box: disabledBox })
 

redisinsight/ui/src/components/new-index/create-index-step/field-boxes-group/FieldBoxesGroup.spec.tsx

@@ -1,15 +1,15 @@
 import React from 'react'
 
 import { fireEvent, render, screen } from 'uiSrc/utils/test-utils'
-import { MOCK_VECTOR_SEARCH_BOX } from 'uiSrc/constants/mocks/mock-vector-index-search'
+import { vectorSearchBoxFactory } from 'uiSrc/mocks/factories/redisearch/VectorSearchBox.factory'
 import { FieldBoxesGroup, FieldBoxesGroupProps } from './FieldBoxesGroup'
 
 const renderFieldBoxesGroupComponent = (
   props?: Partial<FieldBoxesGroupProps>,
 ) => {
   const defaultProps: FieldBoxesGroupProps = {
-    boxes: [MOCK_VECTOR_SEARCH_BOX],
-    value: [MOCK_VECTOR_SEARCH_BOX.value],
+    boxes: vectorSearchBoxFactory.buildList(3, { disabled: false }),
+    value: [],
     onChange: jest.fn(),
   }
 
@@ -26,30 +26,44 @@ describe('FieldBoxesGroup', () => {
     expect(fieldBoxesGroup).toBeInTheDocument()
 
     const fieldBoxes = screen.getAllByTestId(/field-box-/)
-    expect(fieldBoxes).toHaveLength(1)
+    expect(fieldBoxes).toHaveLength(3)
   })
 
   it('should call onChange when clicking on a box to select it', () => {
-    const onChangeMock = jest.fn()
-    const value: string[] = []
+    const mockVectorSearchBox = vectorSearchBoxFactory.build({
+      disabled: false,
+    })
 
-    renderFieldBoxesGroupComponent({ value, onChange: onChangeMock })
+    const props: FieldBoxesGroupProps = {
+      boxes: [mockVectorSearchBox],
+      value: [],
+      onChange: jest.fn(),
+    }
 
-    const box = screen.getByTestId(`field-box-${MOCK_VECTOR_SEARCH_BOX.value}`)
+    renderFieldBoxesGroupComponent(props)
+
+    const box = screen.getByTestId(`field-box-${mockVectorSearchBox.value}`)
 
     fireEvent.click(box)
-    expect(onChangeMock).toHaveBeenCalledWith([MOCK_VECTOR_SEARCH_BOX.value])
+    expect(props.onChange).toHaveBeenCalledWith([mockVectorSearchBox.value])
   })
 
   it('should call onChange when clicking on a box to deselect it', () => {
-    const onChangeMock = jest.fn()
-    const value: string[] = [MOCK_VECTOR_SEARCH_BOX.value]
+    const mockVectorSearchBox = vectorSearchBoxFactory.build({
+      disabled: false,
+    })
+
+    const props: FieldBoxesGroupProps = {
+      boxes: [mockVectorSearchBox],
+      value: [mockVectorSearchBox.value],
+      onChange: jest.fn(),
+    }
 
-    renderFieldBoxesGroupComponent({ value, onChange: onChangeMock })
+    renderFieldBoxesGroupComponent(props)
 
-    const box = screen.getByTestId(`field-box-${MOCK_VECTOR_SEARCH_BOX.value}`)
+    const box = screen.getByTestId(`field-box-${mockVectorSearchBox.value}`)
 
     fireEvent.click(box)
-    expect(onChangeMock).toHaveBeenCalledWith([])
+    expect(props.onChange).toHaveBeenCalledWith([])
   })
 })