Expanded test coverage for key UI components

Signed-off-by: saimedhi <[email protected]>

public/pages/workflow_detail/workflow_detail.test.tsx

@@ -74,7 +74,6 @@ describe('WorkflowDetail Page with create ingestion option', () => {
         getAllByText,
         getByText,
         getByRole,
-        container,
         getByTestId,
       } = renderWithRouter(workflowId, workflowName, type);
 
@@ -109,14 +108,6 @@ describe('WorkflowDetail Page with create ingestion option', () => {
       const searchPipelineButton = getByTestId('searchPipelineButton');
       expect(searchPipelineButton).toBeInTheDocument();
       expect(searchPipelineButton).toBeDisabled();
-
-      // "Create an ingest pipeline" option should be selected by default
-      const createIngestRadio = container.querySelector('#create');
-      expect(createIngestRadio).toBeChecked();
-
-      // "Skip ingestion pipeline" option should be unselected by default
-      const skipIngestRadio = container.querySelector('#skip');
-      expect(skipIngestRadio).not.toBeChecked();
     });
   });
 });
@@ -178,3 +169,67 @@ describe('WorkflowDetail Page Functionality (Custom Workflow)', () => {
     expect(history.location.pathname).toBe('/workflows');
   });
 });
+
+describe('WorkflowDetail Page with skip ingestion option (Hybrid Search Workflow)', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  test(`renders the WorkflowDetail page with skip ingestion option`, async () => {
+    const {
+      container,
+      getByTestId,
+      getAllByText,
+      getAllByTestId,
+    } = renderWithRouter(workflowId, workflowName, WORKFLOW_TYPE.HYBRID_SEARCH);
+
+    // "Create an ingest pipeline" option should be selected by default
+    const createIngestRadio = container.querySelector('#create');
+    expect(createIngestRadio).toBeChecked();
+
+    // "Skip ingestion pipeline" option should be unselected by default
+    const skipIngestRadio = container.querySelector('#skip');
+    expect(skipIngestRadio).not.toBeChecked();
+
+    // Selected "Skip ingestion pipeline"
+    await waitFor(() => userEvent.click(skipIngestRadio!));
+    expect(createIngestRadio).not.toBeChecked();
+    expect(skipIngestRadio).toBeChecked();
+    const searchPipelineButton = getByTestId('searchPipelineButton');
+    await waitFor(() => userEvent.click(searchPipelineButton));
+
+    // Search pipeline
+    expect(getAllByText('Define search pipeline').length).toBeGreaterThan(0);
+    expect(getAllByText('Configure query').length).toBeGreaterThan(0);
+    const searchTestButton = getByTestId('searchTestButton');
+    expect(searchTestButton).toBeInTheDocument();
+
+    // Edit Search Query
+    const queryEditButton = getByTestId('queryEditButton');
+    expect(queryEditButton).toBeInTheDocument();
+    await waitFor(() => userEvent.click(queryEditButton));
+    expect(getAllByText('Edit query').length).toBeGreaterThan(0);
+    const searchQueryPresetButton = getByTestId('searchQueryPresetButton');
+    expect(searchQueryPresetButton).toBeInTheDocument();
+    const searchQueryCloseButton = getByTestId('searchQueryCloseButton');
+    expect(searchQueryCloseButton).toBeInTheDocument();
+    await waitFor(() => userEvent.click(searchQueryCloseButton));
+
+    // Add request processor
+    const addRequestProcessorButton = getAllByTestId('addProcessorButton')[0];
+    await waitFor(() => userEvent.click(addRequestProcessorButton));
+    expect(getAllByText('Processors').length).toBeGreaterThan(0);
+
+    // Add response processor
+    const addResponseProcessorButton = getAllByTestId('addProcessorButton')[1];
+    await waitFor(() => userEvent.click(addResponseProcessorButton));
+    expect(getAllByText('Processors').length).toBeGreaterThan(0);
+
+    // Save, Build and Run query, Back buttons
+    expect(getByTestId('saveSearchPipelineButton')).toBeInTheDocument();
+    expect(getByTestId('runQueryButton')).toBeInTheDocument();
+    const searchPipelineBackButton = getByTestId('searchPipelineBackButton');
+    await waitFor(() => userEvent.click(searchPipelineBackButton));
+
+    expect(skipIngestRadio).toBeChecked();
+  });
+});

public/pages/workflow_detail/workflow_inputs/processors_list.tsx

@@ -191,6 +191,7 @@ export function ProcessorsList(props: ProcessorsListProps) {
                 onClick={() => {
                   setPopover(!isPopoverOpen);
                 }}
+                data-testid="addProcessorButton"
               >
                 {processors.length > 0
                   ? 'Add another processor'

public/pages/workflow_detail/workflow_inputs/search_inputs/configure_search_request.tsx

@@ -120,6 +120,7 @@ export function ConfigureSearchRequest(props: ConfigureSearchRequestProps) {
             fill={false}
             style={{ width: '100px' }}
             onClick={() => setIsEditModalOpen(true)}
+            data-testid="queryEditButton"
           >
             Edit
           </EuiSmallButton>
@@ -163,6 +164,7 @@ export function ConfigureSearchRequest(props: ConfigureSearchRequestProps) {
                     console.error('Error running query: ', error);
                   });
               }}
+              data-testid="searchTestButton"
             >
               Test
             </EuiSmallButton>

public/pages/workflow_detail/workflow_inputs/search_inputs/edit_query_modal.tsx

@@ -54,7 +54,10 @@ export function EditQueryModal(props: EditQueryModalProps) {
       <EuiModalBody>
         <EuiPopover
           button={
-            <EuiSmallButton onClick={() => setPopoverOpen(!popoverOpen)}>
+            <EuiSmallButton
+              onClick={() => setPopoverOpen(!popoverOpen)}
+              data-testid="searchQueryPresetButton"
+            >
               Choose from a preset
             </EuiSmallButton>
           }
@@ -90,6 +93,7 @@ export function EditQueryModal(props: EditQueryModalProps) {
       <EuiModalFooter>
         <EuiSmallButton
           onClick={() => props.setModalOpen(false)}
+          data-testid="searchQueryCloseButton"
           fill={false}
           color="primary"
         >

public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx

@@ -876,6 +876,7 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
                         <EuiSmallButtonEmpty
                           disabled={searchBackButtonDisabled}
                           onClick={() => setSelectedStep(STEP.INGEST)}
+                          data-testid="searchPipelineBackButton"
                         >
                           Back
                         </EuiSmallButtonEmpty>
@@ -897,6 +898,7 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
                           onClick={() => {
                             updateWorkflowUiConfig();
                           }}
+                          data-testid="saveSearchPipelineButton"
                         >
                           {`Save`}
                         </EuiSmallButtonEmpty>
@@ -909,6 +911,7 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
                           onClick={() => {
                             validateAndRunQuery();
                           }}
+                          data-testid="runQueryButton"
                         >
                           Build and run query
                         </EuiSmallButton>

public/pages/workflows/new_workflow/new_workflow.test.tsx

@@ -93,4 +93,15 @@ describe('NewWorkflow', () => {
       expect(queryByText('quickConfigureCreateButton')).toBeNull()
     );
   });
+
+  test('search functionality ', async () => {
+    const { getByText, getByPlaceholderText, queryByText } = renderWithRouter();
+
+    // Search by Template Name
+    userEvent.type(getByPlaceholderText('Search'), 'hybrid');
+    await waitFor(() => {
+      expect(getByText('Hybrid Search')).toBeInTheDocument();
+      expect(queryByText('Multimodal Search')).toBeNull();
+    });
+  });
 });

public/pages/workflows/workflow_list/workflow_list.test.tsx

@@ -161,4 +161,16 @@ describe('WorkflowList', () => {
       expect(getByText('No existing resources found')).toBeInTheDocument();
     });
   });
+
+  test('search functionality ', async () => {
+    const { getByText, getByPlaceholderText, queryByText } = renderWithRouter();
+
+    // Search by Name
+    userEvent.type(getByPlaceholderText('Search'), 'name_18');
+    await waitFor(() => {
+      expect(getByText('workflow_name_18')).toBeInTheDocument();
+      expect(queryByText('workflow_name_19')).toBeNull();
+      expect(queryByText('workflow_name_0')).toBeNull();
+    });
+  });
 });