unit tests added

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

package.json

@@ -34,6 +34,8 @@
     "reactflow": "^11.8.3",
     "yup": "^1.3.2"
   },
-  "devDependencies": {},
+  "devDependencies": {
+    "@testing-library/user-event": "^14.5.2"
+  },
   "resolutions": {}
-}
+}

public/pages/workflow_detail/components/export_modal.tsx

@@ -118,7 +118,10 @@ export function ExportModal(props: ExportModalProps) {
         </EuiFlexGroup>
       </EuiModalBody>
       <EuiModalFooter>
-        <EuiSmallButtonEmpty onClick={() => props.setIsExportModalOpen(false)}>
+        <EuiSmallButtonEmpty
+          onClick={() => props.setIsExportModalOpen(false)}
+          data-testid="exportCloseButton"
+        >
           Close
         </EuiSmallButtonEmpty>
       </EuiModalFooter>

public/pages/workflow_detail/components/header.tsx

@@ -218,6 +218,7 @@ export function WorkflowDetailHeader(props: WorkflowDetailHeaderProps) {
                 onClick={() => {
                   setIsExportModalOpen(true);
                 }}
+                data-testid="exportButton"
               >
                 Export
               </EuiSmallButton>,
@@ -232,6 +233,7 @@ export function WorkflowDetailHeader(props: WorkflowDetailHeaderProps) {
                     )
                   );
                 }}
+                data-testid="closeButton"
               >
                 Close
               </EuiSmallButtonEmpty>,

public/pages/workflow_detail/workflow_detail.test.tsx

@@ -37,7 +37,7 @@ const renderWithRouter = (
   workflowType: WORKFLOW_TYPE
 ) => ({
   ...render(
-    <Provider store={mockStore(workflowId, workflowName, workflowType)}>
+    <Provider store={mockStore([workflowId, workflowName, workflowType])}>
       <Router history={history}>
         <Switch>
           <Route

public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx

@@ -816,6 +816,7 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
                         onClick={() => {
                           setSelectedStep(STEP.SEARCH);
                         }}
+                        data-testid="searchPipelineButton"
                       >
                         {`Search pipeline >`}
                       </EuiSmallButton>
@@ -849,6 +850,7 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
                           onClick={() => {
                             validateAndRunIngestion();
                           }}
+                          data-testid="runIngestionButton"
                           disabled={ingestRunButtonDisabled}
                           isLoading={isRunningIngest}
                         >
@@ -861,6 +863,7 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
                           onClick={() => {
                             setSelectedStep(STEP.SEARCH);
                           }}
+                          data-testid="searchPipelineButton"
                           disabled={ingestToSearchButtonDisabled}
                         >
                           {`Search pipeline >`}

public/pages/workflow_detail/workspace/workspace.tsx

@@ -137,13 +137,15 @@ export function Workspace(props: WorkspaceProps) {
                   size="l"
                   hasActiveFilters={visualSelected}
                   onClick={() => toggleSelection()}
+                  data-testid="workspaceVisualButton"
                 >
                   Visual
                 </EuiFilterButton>
                 <EuiFilterButton
                   size="l"
                   hasActiveFilters={!visualSelected}
                   onClick={() => toggleSelection()}
+                  data-testid="workspaceJSONButton"
                 >
                   JSON
                 </EuiFilterButton>

public/pages/workflows/import_workflow/import_workflow_modal.tsx

@@ -134,7 +134,10 @@ export function ImportWorkflowModal(props: ImportWorkflowModalProps) {
         </EuiFlexGroup>
       </EuiModalBody>
       <EuiModalFooter>
-        <EuiSmallButtonEmpty onClick={() => onModalClose()}>
+        <EuiSmallButtonEmpty
+          onClick={() => onModalClose()}
+          data-testid="cancelImportButton"
+        >
           Cancel
         </EuiSmallButtonEmpty>
         <EuiSmallButton

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

@@ -4,12 +4,13 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
-import '@testing-library/jest-dom';
 import { Provider } from 'react-redux';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
-import { store } from '../../../store';
 import { NewWorkflow } from './new_workflow';
+import { render } from '@testing-library/react';
+import configureStore from 'redux-mock-store';
+import * as ReactReduxHooks from '../../../store/store';
+import '@testing-library/jest-dom';
 
 jest.mock('../../../services', () => {
   const { mockCoreServices } = require('../../../../test');
@@ -19,7 +20,56 @@ jest.mock('../../../services', () => {
   };
 });
 
-const renderWithRouter = () =>
+const mockDispatch = jest.fn();
+
+const mockStore = configureStore([]);
+
+const initialState = {
+  presets: {
+    loading: false,
+    success: 'hope',
+    presetWorkflows: [
+      {
+        name: 'Custom',
+        description: 'A blank workflow with no preset configurations',
+        use_case: 'CUSTOM',
+        version: { template: '1.0.0', compatibility: ['2.17.0', '3.0.0'] },
+      },
+      {
+        name: 'Hybrid Search',
+        description:
+          'A basic workflow containing the ingest pipeline, search pipeline, and index configurations for performing hybrid search',
+        version: { template: '1.0.0', compatibility: ['2.17.0', '3.0.0'] },
+        ui_metadata: { type: 'Hybrid search' },
+      },
+      {
+        name: 'Multimodal Search',
+        description:
+          'A basic workflow containing the ingest pipeline, search pipeline, and index configurations for performing multimodal search',
+        version: { template: '1.0.0', compatibility: ['2.17.0', '3.0.0'] },
+        ui_metadata: { type: 'Multimodal search' },
+      },
+      {
+        name: 'Semantic Search',
+        description:
+          'A basic workflow containing the ingest pipeline, search pipeline, and index configurations for performing semantic search',
+        version: { template: '1.0.0', compatibility: ['2.17.0', '3.0.0'] },
+        ui_metadata: { type: 'Semantic search' },
+      },
+      {
+        name: 'Sentiment Analysis',
+        description:
+          'A basic workflow containing the ingest pipeline, search pipeline, and index configurations for performing sentiment analysis',
+        version: { template: '1.0.0', compatibility: ['2.17.0', '3.0.0'] },
+        ui_metadata: { type: 'Sentiment analysis' },
+      },
+    ],
+  },
+};
+
+const store = mockStore(initialState);
+
+const renderWithProvider = () =>
   render(
     <Provider store={store}>
       <Router>
@@ -31,8 +81,29 @@ const renderWithRouter = () =>
   );
 
 describe('NewWorkflow', () => {
-  test('renders the search bar', () => {
-    const { getByPlaceholderText } = renderWithRouter();
+  beforeEach(() => {
+    jest.clearAllMocks();
+    jest.spyOn(ReactReduxHooks, 'useAppDispatch').mockReturnValue(mockDispatch);
+  });
+
+  test('renders the search bar and workflows', () => {
+    const {
+      getByPlaceholderText,
+      getAllByText,
+      queryByText,
+    } = renderWithProvider();
+
+    // Assert that the search bar is rendered
     expect(getByPlaceholderText('Search')).toBeInTheDocument();
+
+    // Assert that the "Custom" workflow is rendered
+    expect(getAllByText('Custom')).toHaveLength(1);
+
+    // Assert that the loading spinner is not rendered
+    expect(queryByText('Loading')).toBeNull();
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
   });
 });

public/pages/workflows/new_workflow/use_case.tsx

@@ -41,6 +41,7 @@ export function UseCase(props: UseCaseProps) {
         titleSize="s"
         paddingSize="l"
         layout="horizontal"
+        data-testid={`usecase-card-${props.workflow.name}`}
       >
         <EuiFlexGroup direction="column" gutterSize="l">
           <EuiHorizontalRule size="full" margin="m" />

public/pages/workflows/workflow_list/delete_workflow_modal.tsx

@@ -98,7 +98,10 @@ export function DeleteWorkflowModal(props: DeleteWorkflowModalProps) {
         </EuiFlexGroup>
       </EuiModalBody>
       <EuiModalFooter>
-        <EuiSmallButtonEmpty onClick={() => props.clearDeleteState()}>
+        <EuiSmallButtonEmpty
+          onClick={() => props.clearDeleteState()}
+          data-testid="cancelDeleteWorkflowButton"
+        >
           {' '}
           Cancel
         </EuiSmallButtonEmpty>
@@ -135,6 +138,7 @@ export function DeleteWorkflowModal(props: DeleteWorkflowModalProps) {
             setIsDeleting(false);
             props.clearDeleteState();
           }}
+          data-testid="deleteWorkflowButton"
           fill={true}
           color="danger"
         >