Expanded unit test coverage for key UI components (#395) (#397)

* Expanded test coverage for key UI components Signed-off-by: saimedhi <[email protected]> * Expanded test coverage for key UI components Signed-off-by: saimedhi <[email protected]> --------- Signed-off-by: saimedhi <[email protected]> (cherry picked from commit 95049f7) Co-authored-by: Sai Medhini Reddy Maryada <[email protected]>
opensearch-project · Sep 20, 2024 · 1bc2936 · 1bc2936
1 parent 3447d9a
commit 1bc2936
Show file tree

Hide file tree

Showing 8 changed files with 170 additions and 46 deletions.
diff --git a/public/pages/workflow_detail/workflow_detail.test.tsx b/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();
     });
   });
 });
@@ -133,37 +124,49 @@ describe('WorkflowDetail Page Functionality (Custom Workflow)', () => {
     );
 
     // Export button opens the export component
-    await waitFor(() => userEvent.click(getByTestId('exportButton')));
-    expect(getByText(`Export ${workflowName}`)).toBeInTheDocument();
+    userEvent.click(getByTestId('exportButton'));
+    await waitFor(() => {
+      expect(getByText(`Export ${workflowName}`)).toBeInTheDocument();
+    });
 
     // Close the export component
-    await waitFor(() => userEvent.click(getByTestId('exportCloseButton')));
+    userEvent.click(getByTestId('exportCloseButton'));
 
     // Check workspace buttons (Visual and JSON)
     const visualButton = getByTestId('workspaceVisualButton');
-    expect(visualButton).toBeVisible();
+    await waitFor(() => {
+      expect(visualButton).toBeVisible();
+    });
     expect(visualButton).toHaveClass('euiFilterButton-hasActiveFilters');
     const jsonButton = getByTestId('workspaceJSONButton');
     expect(jsonButton).toBeVisible();
-    await waitFor(() => userEvent.click(jsonButton));
-    expect(jsonButton).toHaveClass('euiFilterButton-hasActiveFilters');
+    userEvent.click(jsonButton);
+    await waitFor(() => {
+      expect(jsonButton).toHaveClass('euiFilterButton-hasActiveFilters');
+    });
 
     // Tools panel should collapse and expand on toggle
     const toolsPanel = container.querySelector('#tools_panel_id');
     expect(toolsPanel).toBeVisible();
 
     const toggleButton = toolsPanel?.querySelector('button[type="button"]');
     expect(toggleButton).toBeInTheDocument();
-    await waitFor(() => userEvent.click(toggleButton!));
+    userEvent.click(toggleButton!);
 
     // Tools panel after collapsing
     const collapsedToolsPanel = container.querySelector('#tools_panel_id');
-    expect(collapsedToolsPanel).toHaveClass('euiResizablePanel-isCollapsed');
+    await waitFor(() => {
+      expect(collapsedToolsPanel).toHaveClass('euiResizablePanel-isCollapsed');
+    });
 
     // Tools panel after expanding
-    await waitFor(() => userEvent.click(toggleButton!));
+    userEvent.click(toggleButton!);
     const expandedToolsPanel = container.querySelector('#tools_panel_id');
-    expect(expandedToolsPanel).not.toHaveClass('euiResizablePanel-isCollapsed');
+    await waitFor(() => {
+      expect(expandedToolsPanel).not.toHaveClass(
+        'euiResizablePanel-isCollapsed'
+      );
+    });
   });
 
   test('tests navigation to workflows list on Close button click', async () => {
@@ -174,7 +177,87 @@ describe('WorkflowDetail Page Functionality (Custom Workflow)', () => {
     );
 
     // The WorkflowDetail Page Close button should navigate back to the workflows list
-    await waitFor(() => userEvent.click(getByTestId('closeButton')));
-    expect(history.location.pathname).toBe('/workflows');
+    userEvent.click(getByTestId('closeButton'));
+    await waitFor(() => {
+      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"
+    userEvent.click(skipIngestRadio!);
+    await waitFor(() => {
+      expect(createIngestRadio).not.toBeChecked();
+    });
+    expect(skipIngestRadio).toBeChecked();
+    const searchPipelineButton = getByTestId('searchPipelineButton');
+    userEvent.click(searchPipelineButton);
+
+    // Search pipeline
+    await waitFor(() => {
+      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();
+    userEvent.click(queryEditButton);
+    await waitFor(() => {
+      expect(getAllByText('Edit query').length).toBeGreaterThan(0);
+    });
+    const searchQueryPresetButton = getByTestId('searchQueryPresetButton');
+    expect(searchQueryPresetButton).toBeInTheDocument();
+    const searchQueryCloseButton = getByTestId('searchQueryCloseButton');
+    expect(searchQueryCloseButton).toBeInTheDocument();
+    userEvent.click(searchQueryCloseButton);
+
+    // Add request processor
+    const addRequestProcessorButton = await waitFor(
+      () => getAllByTestId('addProcessorButton')[0]
+    );
+    userEvent.click(addRequestProcessorButton);
+    await waitFor(() => {
+      expect(getAllByText('Processors').length).toBeGreaterThan(0);
+    });
+
+    // Add response processor
+    const addResponseProcessorButton = getAllByTestId('addProcessorButton')[1];
+    userEvent.click(addResponseProcessorButton);
+    await waitFor(() => {
+      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');
+    userEvent.click(searchPipelineBackButton);
+
+    await waitFor(() => {
+      expect(skipIngestRadio).toBeChecked();
+    });
   });
 });
diff --git a/public/pages/workflow_detail/workflow_inputs/processors_list.tsx b/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'

diff --git a/public/pages/workflow_detail/workflow_inputs/search_inputs/configure_search_request.tsx b/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>

diff --git a/public/pages/workflow_detail/workflow_inputs/search_inputs/edit_query_modal.tsx b/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"
         >

diff --git a/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx b/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>

diff --git a/public/pages/workflows/new_workflow/new_workflow.test.tsx b/public/pages/workflows/new_workflow/new_workflow.test.tsx
@@ -73,9 +73,9 @@ describe('NewWorkflow', () => {
     // Click the first "Go" button on the templates and test Quick Configure.
     const goButtons = getAllByTestId('goButton');
     userEvent.click(goButtons[0]);
-    await waitFor(() =>
-      expect(getAllByText('Quick configure')).toHaveLength(1)
-    );
+    await waitFor(() => {
+      expect(getAllByText('Quick configure')).toHaveLength(1);
+    });
 
     // Verify that the create button is present in the Quick Configure pop-up.
     expect(getByTestId('quickConfigureCreateButton')).toBeInTheDocument();
@@ -87,8 +87,19 @@ describe('NewWorkflow', () => {
     userEvent.click(quickConfigureCancelButton);
 
     // Ensure the quick configure pop-up is closed after canceling.
-    await waitFor(() =>
-      expect(queryByText('quickConfigureCreateButton')).toBeNull()
-    );
+    await waitFor(() => {
+      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();
+    });
   });
 });
diff --git a/public/pages/workflows/workflow_list/workflow_list.test.tsx b/public/pages/workflows/workflow_list/workflow_list.test.tsx
@@ -80,28 +80,30 @@ describe('WorkflowList', () => {
     userEvent.click(sortButtons[0]!);
     await waitFor(() => {
       expect(queryByText('workflow_name_19')).toBeInTheDocument();
-      expect(queryByText('workflow_name_0')).toBeNull();
     });
+    expect(queryByText('workflow_name_0')).toBeNull();
+
     userEvent.click(sortButtons[0]!);
     await waitFor(() => {
       expect(queryByText('workflow_name_0')).toBeInTheDocument();
-      expect(queryByText('workflow_name_9')).toBeInTheDocument();
-      expect(queryByText('workflow_name_10')).toBeNull();
-      expect(queryByText('workflow_name_19')).toBeNull();
     });
+    expect(queryByText('workflow_name_9')).toBeInTheDocument();
+    expect(queryByText('workflow_name_10')).toBeNull();
+    expect(queryByText('workflow_name_19')).toBeNull();
 
     // Sort workflows list by Type
     expect(sortButtons[1]).toBeInTheDocument();
     userEvent.click(sortButtons[1]!);
     await waitFor(() => {
       expect(getAllByText('Custom').length).toBeGreaterThan(0);
-      expect(queryByText('Unknown')).toBeNull();
     });
+    expect(queryByText('Unknown')).toBeNull();
+
     userEvent.click(sortButtons[1]!);
     await waitFor(() => {
       expect(queryByText('Unknown')).toBeNull();
-      expect(getAllByText('Custom').length).toBeGreaterThan(0);
     });
+    expect(getAllByText('Custom').length).toBeGreaterThan(0);
   });
 
   test('pagination functionality', async () => {
@@ -124,8 +126,8 @@ describe('WorkflowList', () => {
     userEvent.click(nextButton);
     await waitFor(() => {
       expect(getByText('workflow_name_19')).toBeInTheDocument();
-      expect(queryByText('workflow_name_0')).toBeNull();
     });
+    expect(queryByText('workflow_name_0')).toBeNull();
 
     // Navigate to previous page
     const previousButton = container.querySelector(
@@ -134,8 +136,8 @@ describe('WorkflowList', () => {
     userEvent.click(previousButton);
     await waitFor(() => {
       expect(getByText('workflow_name_0')).toBeInTheDocument();
-      expect(queryByText('workflow_name_19')).toBeNull();
     });
+    expect(queryByText('workflow_name_19')).toBeNull();
   });
 
   test('delete action functionality', async () => {
@@ -161,4 +163,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();
+  });
 });
diff --git a/public/pages/workflows/workflows.test.tsx b/public/pages/workflows/workflows.test.tsx
@@ -54,24 +54,30 @@ describe('Workflows', () => {
     // Import Workflow Testing
     expect(getAllByText('Workflows').length).toBeGreaterThan(0);
     const importWorkflowButton = getByTestId('importWorkflowButton');
-    await waitFor(() => userEvent.click(importWorkflowButton));
-    expect(
-      getAllByText('Select or drag and drop a file').length
-    ).toBeGreaterThan(0);
+    userEvent.click(importWorkflowButton);
+    await waitFor(() => {
+      expect(
+        getAllByText('Select or drag and drop a file').length
+      ).toBeGreaterThan(0);
+    });
 
     // Closing or canceling the import
     const cancelImportButton = getByTestId('cancelImportButton');
-    await waitFor(() => userEvent.click(cancelImportButton));
-    expect(
-      queryByText('Select or drag and drop a file')
-    ).not.toBeInTheDocument();
+    userEvent.click(cancelImportButton);
+    await waitFor(() => {
+      expect(
+        queryByText('Select or drag and drop a file')
+      ).not.toBeInTheDocument();
+    });
     expect(getAllByText('Manage existing workflows').length).toBeGreaterThan(0);
 
     // When the "Create Workflow" button is clicked, the "New workflow" tab opens
     // Create Workflow Testing
     const createWorkflowButton = getByTestId('createWorkflowButton');
     expect(createWorkflowButton).toBeInTheDocument();
-    await waitFor(() => userEvent.click(createWorkflowButton));
-    expect(getAllByText('Create from a template').length).toBeGreaterThan(0);
+    userEvent.click(createWorkflowButton);
+    await waitFor(() => {
+      expect(getAllByText('Create from a template').length).toBeGreaterThan(0);
+    });
   });
 });