Improving and expanding functionality checks for the workflow_detail page

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

@@ -4,9 +4,10 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 import { Provider } from 'react-redux';
 import { RouteComponentProps, Route, Switch, Router } from 'react-router-dom';
+import userEvent from '@testing-library/user-event';
 import { WorkflowDetail } from './workflow_detail';
 import { WorkflowDetailRouterProps } from '../../pages';
 import '@testing-library/jest-dom';
@@ -22,44 +23,51 @@ jest.mock('../../services', () => {
   };
 });
 
+jest.setTimeout(10000);
+
 const workflowId = '12345';
 const workflowName = 'test_workflow';
 
-const history = createMemoryHistory({
-  initialEntries: [`/workflow/${workflowId}`],
-});
-
 window.ResizeObserver = resizeObserverMock;
 
 const renderWithRouter = (
   workflowId: string,
   workflowName: string,
   workflowType: WORKFLOW_TYPE
-) => ({
-  ...render(
-    <Provider store={mockStore(workflowId, workflowName, workflowType)}>
-      <Router history={history}>
-        <Switch>
-          <Route
-            path="/workflow/:workflowId"
-            render={(props: RouteComponentProps<WorkflowDetailRouterProps>) => {
-              return <WorkflowDetail setActionMenu={jest.fn()} {...props} />;
-            }}
-          />
-        </Switch>
-      </Router>
-    </Provider>
-  ),
-});
+) => {
+  const history = createMemoryHistory({
+    initialEntries: [`/workflow/${workflowId}`],
+  });
 
-describe('WorkflowDetail', () => {
+  return {
+    ...render(
+      <Provider store={mockStore(workflowId, workflowName, workflowType)}>
+        <Router history={history}>
+          <Switch>
+            <Route
+              path="/workflow/:workflowId"
+              render={(
+                props: RouteComponentProps<WorkflowDetailRouterProps>
+              ) => <WorkflowDetail setActionMenu={jest.fn()} {...props} />}
+            />
+          </Switch>
+        </Router>
+      </Provider>
+    ),
+    history,
+  };
+};
+
+describe('WorkflowDetail Page with create ingestion option', () => {
   Object.values(WORKFLOW_TYPE).forEach((type) => {
-    test(`renders the page with ${type} type`, () => {
-      const { getAllByText, getByText, getByRole } = renderWithRouter(
-        workflowId,
-        workflowName,
-        type
-      );
+    test(`renders the WorkflowDetail page with ${type} type`, async () => {
+      const {
+        getAllByText,
+        getByText,
+        getByRole,
+        container,
+        getByTestId,
+      } = renderWithRouter(workflowId, workflowName, type);
 
       expect(getAllByText(workflowName).length).toBeGreaterThan(0);
       expect(getAllByText('Create an ingest pipeline').length).toBeGreaterThan(
@@ -82,6 +90,79 @@ describe('WorkflowDetail', () => {
       expect(getByRole('tab', { name: 'Run queries' })).toBeInTheDocument();
       expect(getByRole('tab', { name: 'Errors' })).toBeInTheDocument();
       expect(getByRole('tab', { name: 'Resources' })).toBeInTheDocument();
+
+      // "Run ingestion" button should be enabled by default
+      const runIngestionButton = getByTestId('runIngestionButton');
+      expect(runIngestionButton).toBeInTheDocument();
+      expect(runIngestionButton).toBeEnabled();
+
+      // "Search pipeline" button should be disabled by default
+      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();
     });
   });
 });
+
+describe('WorkflowDetail Page Functionality (Custom Workflow)', () => {
+  test('tests Export button, Tools panel toggling, and Workspace preview', async () => {
+    const { getByText, container, getByTestId } = renderWithRouter(
+      workflowId,
+      workflowName,
+      WORKFLOW_TYPE.CUSTOM
+    );
+
+    // Export button opens the export component
+    await waitFor(() => userEvent.click(getByTestId('exportButton')));
+    expect(getByText(`Export ${workflowName}`)).toBeInTheDocument();
+
+    // Close the export component
+    await waitFor(() => userEvent.click(getByTestId('exportCloseButton')));
+
+    // Check workspace buttons (Visual and JSON)
+    const visualButton = getByTestId('workspaceVisualButton');
+    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');
+
+    // 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!));
+
+    // Tools panel after collapsing
+    const collapsedToolsPanel = container.querySelector('#tools_panel_id');
+    expect(collapsedToolsPanel).toHaveClass('euiResizablePanel-isCollapsed');
+
+    // Tools panel after expanding
+    await waitFor(() => userEvent.click(toggleButton!));
+    const expandedToolsPanel = container.querySelector('#tools_panel_id');
+    expect(expandedToolsPanel).not.toHaveClass('euiResizablePanel-isCollapsed');
+  });
+
+  test('tests navigation to workflows list on Close button click', async () => {
+    const { getByTestId, history } = renderWithRouter(
+      workflowId,
+      workflowName,
+      WORKFLOW_TYPE.CUSTOM
+    );
+
+    // The WorkflowDetail Page Close button should navigate back to the workflows list
+    await waitFor(() => userEvent.click(getByTestId('closeButton')));
+    expect(history.location.pathname).toBe('/workflows');
+  });
+});

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>

yarn.lock

@@ -68,6 +68,11 @@
     classcat "^5.0.3"
     zustand "^4.4.1"
 
+"@testing-library/user-event@^14.5.2":
+  version "14.5.2"
+  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.5.2.tgz#db7257d727c891905947bd1c1a99da20e03c2ebd"
+  integrity sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==
+
 "@types/d3-array@*":
   version "3.0.8"
   resolved "https://registry.yarnpkg.com/@types/d3-array/-/d3-array-3.0.8.tgz#a5d0687a12b48142c6f124d5e3796054e91bcea5"