test(ui): added tests for the onboarding screen

re #RI-7432

Author: valkirilov

redisinsight/ui/src/pages/vector-search/components/onboarding/VectorSearchOnboarding.spec.tsx

@@ -2,35 +2,47 @@ import React from 'react'
 import { render, screen } from 'uiSrc/utils/test-utils'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { VectorSearchOnboarding } from './VectorSearchOnboarding'
-import useVectorSearchOnboarding from '../../create-index/hooks/useVectorSearchOnboarding'
 import { INSTANCE_ID_MOCK } from 'uiSrc/mocks/handlers/instances/instancesHandlers'
-
-jest.mock('../../create-index/hooks/useVectorSearchOnboarding')
+import {
+  VectorSearchOnboardingContext,
+  VectorSearchOnboardingContextType,
+} from '../../context/VectorSearchOnboardingContext'
 
 // Mock the telemetry module, so we don't send actual telemetry data during tests
 jest.mock('uiSrc/telemetry', () => ({
   ...jest.requireActual('uiSrc/telemetry'),
   sendEventTelemetry: jest.fn(),
 }))
 
-const renderVectorSearchOnboardingComponent = () =>
-  render(<VectorSearchOnboarding />)
+const renderVectorSearchOnboardingComponent = (
+  contextValue?: Partial<VectorSearchOnboardingContextType>,
+) => {
+  const defaultContextValue: VectorSearchOnboardingContextType = {
+    showOnboarding: false,
+    setOnboardingSeen: jest.fn(),
+    setOnboardingSeenSilent: jest.fn(),
+    ...contextValue,
+  }
 
-describe('VectorSearchOnboarding', () => {
-  const mockMarkOnboardingAsSeen = jest.fn()
-  const mockUseVectorSearchOnboarding = useVectorSearchOnboarding as jest.Mock
+  return render(
+    <VectorSearchOnboardingContext.Provider value={defaultContextValue}>
+      <VectorSearchOnboarding />
+    </VectorSearchOnboardingContext.Provider>,
+  )
+}
 
+describe('VectorSearchOnboarding', () => {
   beforeEach(() => {
     jest.clearAllMocks()
-
-    mockUseVectorSearchOnboarding.mockReturnValue({
-      showOnboarding: true,
-      markOnboardingAsSeen: mockMarkOnboardingAsSeen,
-    })
   })
 
   it('should render onboarding content', () => {
-    renderVectorSearchOnboardingComponent()
+    const mockMarkOnboardingAsSeenSilent = jest.fn()
+
+    renderVectorSearchOnboardingComponent({
+      showOnboarding: true,
+      setOnboardingSeenSilent: mockMarkOnboardingAsSeenSilent,
+    })
 
     const container = screen.getByTestId('vector-search-onboarding')
     expect(container).toBeInTheDocument()
@@ -49,12 +61,30 @@ describe('VectorSearchOnboarding', () => {
     expect(footer).toBeInTheDocument()
 
     // Verify the onboarding was marked as seen
-    expect(mockMarkOnboardingAsSeen).toHaveBeenCalledTimes(1)
+    expect(mockMarkOnboardingAsSeenSilent).toHaveBeenCalledTimes(1)
 
     // Verify telemetry event was sent
     expect(sendEventTelemetry).toHaveBeenCalledWith({
       event: TelemetryEvent.VECTOR_SEARCH_INITIAL_MESSAGE_DISPLAYED,
       eventData: { databaseId: INSTANCE_ID_MOCK },
     })
   })
+
+  it('should dismiss the onboarding when the "X" button is clicked', () => {
+    const mockSetOnboardingSeen = jest.fn()
+
+    renderVectorSearchOnboardingComponent({
+      showOnboarding: true,
+      setOnboardingSeen: mockSetOnboardingSeen,
+    })
+
+    const dismissButton = screen.getByTestId(
+      'vector-search-onboarding--dismiss-button',
+    )
+    expect(dismissButton).toBeInTheDocument()
+
+    // Simulate button click and verify the function is called
+    dismissButton.click()
+    expect(mockSetOnboardingSeen).toHaveBeenCalled()
+  })
 })

redisinsight/ui/src/pages/vector-search/components/onboarding/components/Actions.spec.tsx

@@ -0,0 +1,77 @@
+import React from 'react'
+
+import { fireEvent, render, screen } from 'uiSrc/utils/test-utils'
+import {
+  VectorSearchOnboardingContext,
+  VectorSearchOnboardingContextType,
+} from 'uiSrc/pages/vector-search/context/VectorSearchOnboardingContext'
+import Actions from './Actions'
+import useStartWizard from 'uiSrc/pages/vector-search/hooks/useStartWizard'
+
+jest.mock('uiSrc/pages/vector-search/hooks/useStartWizard', () => jest.fn())
+
+const renderActionsComponent = (
+  contextValue?: Partial<VectorSearchOnboardingContextType>,
+) => {
+  const defaultContextValue: VectorSearchOnboardingContextType = {
+    showOnboarding: false,
+    setOnboardingSeen: jest.fn(),
+    setOnboardingSeenSilent: jest.fn(),
+    ...contextValue,
+  }
+
+  return render(
+    <VectorSearchOnboardingContext.Provider value={defaultContextValue}>
+      <Actions />
+    </VectorSearchOnboardingContext.Provider>,
+  )
+}
+
+describe('Actions', () => {
+  const mockUseStartWizard = useStartWizard as jest.Mock
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('should render', () => {
+    renderActionsComponent()
+
+    const container = screen.getByTestId('vector-search-onboarding--actions')
+    expect(container).toBeInTheDocument()
+
+    // Verify buttons are rendered
+    const exploreButton = screen.getByText(/Explore vector search/i)
+    const skipButton = screen.getByText(/Skip for now/i)
+
+    expect(exploreButton).toBeInTheDocument()
+    expect(skipButton).toBeInTheDocument()
+  })
+
+  it('should call setOnboardingSeen when "Skip for now" button is clicked', () => {
+    const mockSetOnboardingSeen = jest.fn()
+
+    renderActionsComponent({ setOnboardingSeen: mockSetOnboardingSeen })
+
+    const skipButton = screen.getByText(/Skip for now/i)
+    expect(skipButton).toBeInTheDocument()
+
+    // Simulate button click and verify the function is called
+    fireEvent.click(skipButton)
+    expect(mockSetOnboardingSeen).toHaveBeenCalled()
+  })
+
+  it('should call startOnboardingWizard when "Explore vector search" is clicked', () => {
+    const mockStartOnboardingWizard = jest.fn()
+    mockUseStartWizard.mockReturnValue(mockStartOnboardingWizard)
+
+    renderActionsComponent()
+
+    const exploreButton = screen.getByText(/Explore vector search/i)
+    expect(exploreButton).toBeInTheDocument()
+
+    // Simulate button click and verify the function is called
+    fireEvent.click(exploreButton)
+    expect(mockStartOnboardingWizard).toHaveBeenCalled()
+  })
+})

redisinsight/ui/src/pages/vector-search/pages/VectorSearchPage.spec.tsx

@@ -9,9 +9,12 @@ import {
 } from 'uiSrc/mocks/handlers/instances/instancesHandlers'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { redisearchListSelector } from 'uiSrc/slices/browser/redisearch'
-import VectorSearchPage from './VectorSearchPage'
+import { VectorSearch } from './VectorSearchPage'
 import useRedisInstanceCompatibility from '../create-index/hooks/useRedisInstanceCompatibility'
-import useVectorSearchOnboarding from '../create-index/hooks/useVectorSearchOnboarding'
+import {
+  VectorSearchOnboardingContext,
+  VectorSearchOnboardingContextType,
+} from '../context/VectorSearchOnboardingContext'
 
 // Mock the telemetry module, so we don't send actual telemetry data during tests
 jest.mock('uiSrc/telemetry', () => ({
@@ -23,14 +26,26 @@ jest.mock('../create-index/hooks/useRedisInstanceCompatibility', () =>
   jest.fn(),
 )
 
-jest.mock('../create-index/hooks/useVectorSearchOnboarding', () => jest.fn())
-
-const renderVectorSearchPageComponent = () => render(<VectorSearchPage />)
+const renderVectorSearchPageComponent = (
+  contextValue?: Partial<VectorSearchOnboardingContextType>,
+) => {
+  const defaultContextValue: VectorSearchOnboardingContextType = {
+    showOnboarding: false,
+    setOnboardingSeen: jest.fn(),
+    setOnboardingSeenSilent: jest.fn(),
+    ...contextValue,
+  }
+
+  return render(
+    <VectorSearchOnboardingContext.Provider value={defaultContextValue}>
+      <VectorSearch />
+    </VectorSearchOnboardingContext.Provider>,
+  )
+}
 
 describe('VectorSearchPage', () => {
   const mockUseRedisInstanceCompatibility =
     useRedisInstanceCompatibility as jest.Mock
-  const mockUseVectorSearchOnboarding = useVectorSearchOnboarding as jest.Mock
 
   beforeEach(() => {
     cleanup()
@@ -40,11 +55,6 @@ describe('VectorSearchPage', () => {
       hasRedisearch: true,
       hasSupportedVersion: true,
     })
-
-    mockUseVectorSearchOnboarding.mockReturnValue({
-      showOnboarding: false,
-      markOnboardingAsSeen: jest.fn(),
-    })
   })
 
   afterEach(() => {
@@ -87,12 +97,7 @@ describe('VectorSearchPage', () => {
   })
 
   it('should render onboarding screen when opening the page for the first time', () => {
-    mockUseVectorSearchOnboarding.mockReturnValue({
-      showOnboarding: true,
-      markOnboardingAsSeen: jest.fn(),
-    })
-
-    renderVectorSearchPageComponent()
+    renderVectorSearchPageComponent({ showOnboarding: true })
 
     const onboarding = screen.getByTestId('vector-search-onboarding')
     expect(onboarding).toBeInTheDocument()