Improving and expanding functionality checks for the workflow_detail page

Signed-off-by: saimedhi <saimedhi@amazon.com>

Author: saimedhi

package.json

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

public/pages/workflow_detail/workflow_detail.test.tsx

@@ -4,15 +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,
-  Redirect,
-} from 'react-router-dom';
+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';
@@ -31,41 +26,48 @@ jest.mock('../../services', () => {
 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}`],
+  });
+
+  return {
+    ...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>
+    ),
+    history,
+  };
+};
 
 describe('WorkflowDetail', () => {
   Object.values(WORKFLOW_TYPE).forEach((type) => {
-    test(`renders the page with ${type} type`, () => {
-      const { getAllByText, getByText, getByRole } = renderWithRouter(
-        workflowId,
-        workflowName,
-        type
-      );
+    test(`renders the page with ${type} type`, async () => {
+      const {
+        getAllByText,
+        getByText,
+        getByRole,
+        container,
+        history,
+      } = renderWithRouter(workflowId, workflowName, type);
 
       expect(getAllByText(workflowName).length).toBeGreaterThan(0);
       expect(getAllByText('Create an ingest pipeline').length).toBeGreaterThan(
@@ -88,6 +90,86 @@ 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 = getByRole('button', { name: 'Run ingestion' });
+      expect(runIngestionButton).toBeInTheDocument();
+      expect(runIngestionButton).toBeEnabled();
+
+      // "Search pipeline >" button should be disabled by default
+      const searchPipelineButton = getByRole('button', {
+        name: 'Search pipeline >',
+      });
+      expect(searchPipelineButton).toBeInTheDocument();
+      expect(searchPipelineButton).toBeDisabled();
+
+      // "Create an ingest pipeline" option should be selected by default
+      const createIngestRadio = getByRole('radio', {
+        name: /Create an ingest pipeline Configure and ingest data into an index./,
+      });
+      expect(createIngestRadio).toBeChecked();
+
+      // "Skip ingestion pipeline" option should be disabled by default
+      const skipIngestRadio = getByRole('radio', {
+        name: /Skip ingestion pipeline Use an existing index with data ingested./,
+      });
+      expect(skipIngestRadio).not.toBeChecked();
+
+      // Clicking the "Export" button should open the export component
+      await waitFor(() =>
+        userEvent.click(getByRole('button', { name: 'Export' }))
+      );
+      expect(getByText('Export ' + workflowName)).toBeInTheDocument();
+      // Closing the "Export" opened above
+      await waitFor(() =>
+        userEvent.click(getByRole('button', { name: 'Close' }))
+      );
+
+      // Testing components in the ReactFlow workspace
+      const visualButton = getByRole('button', { name: 'Visual' });
+      expect(visualButton).toBeVisible();
+      expect(visualButton).toHaveClass('euiFilterButton-hasActiveFilters');
+      const jsonButton = getByRole('button', { name: 'JSON' });
+      expect(jsonButton).toBeVisible();
+      await waitFor(() => userEvent.click(jsonButton));
+      expect(jsonButton).toHaveClass('euiFilterButton-hasActiveFilters');
+
+      // Testing collapsible Tools panel
+      // Get the initial state of the Tools panel
+      const toolsPanelInitially = container.querySelector('#tools_panel_id');
+      expect(toolsPanelInitially).toBeVisible();
+      // Find and click the button to adjust panel sizes
+      const adjustPanelSizeButton = container.querySelector(
+        'button[aria-label="Press up or down to adjust panels size"].euiResizableButton--vertical'
+      );
+      expect(adjustPanelSizeButton).toBeInTheDocument();
+      await waitFor(() => userEvent.click(adjustPanelSizeButton!));
+      // Find the toggle button for the Tools panel
+      const toggleButton = container.querySelector(
+        'button[aria-label="Press to toggle this panel"].euiResizableToggleButton--vertical'
+      );
+      expect(toggleButton).toBeInTheDocument();
+      expect(toggleButton).toHaveClass('euiResizableToggleButton-isVisible');
+      // Collapse the Tools panel
+      await waitFor(() => userEvent.click(toggleButton!));
+      const toolsPanelAfterCollapse = container.querySelector(
+        '#tools_panel_id'
+      )!;
+      expect(toolsPanelAfterCollapse).toHaveClass(
+        'euiResizablePanel-isCollapsed'
+      );
+      // Expand the Tools panel
+      await waitFor(() => userEvent.click(toggleButton!));
+      const toolsPanelAfterExpand = container.querySelector('#tools_panel_id')!;
+      expect(toolsPanelAfterExpand).not.toHaveClass(
+        'euiResizablePanel-isCollapsed'
+      );
+
+      // Clicking the "close" button should go back to the list page
+      await waitFor(() =>
+        userEvent.click(getByRole('button', { name: 'Close' }))
+      );
+      expect(history.location.pathname).toBe('/workflows');
     });
   });
 });

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"