From 7e704d99929ebd618579c67cca08010404883bda Mon Sep 17 00:00:00 2001 From: Sai Medhini Reddy Maryada <117196660+saimedhi@users.noreply.github.com> Date: Wed, 11 Sep 2024 12:56:13 -0700 Subject: [PATCH] Improving and expanding functionality checks for the workflow_detail page (#360) * Improving and expanding functionality checks for the workflow_detail page Signed-off-by: saimedhi * Improving and expanding functionality checks for the workflow_detail page Signed-off-by: saimedhi * Improving and expanding functionality checks for the workflow_detail page Signed-off-by: saimedhi * Improving and expanding functionality checks for the workflow_detail page Signed-off-by: saimedhi * Improving and expanding functionality checks for the workflow_detail page Signed-off-by: saimedhi * Improving and expanding functionality checks for the workflow_detail page Signed-off-by: saimedhi * Improving and expanding functionality checks for the workflow_detail page Signed-off-by: saimedhi * Improving and expanding functionality checks for the workflow_detail page Signed-off-by: saimedhi --------- Signed-off-by: saimedhi Signed-off-by: Sai Medhini Reddy Maryada <117196660+saimedhi@users.noreply.github.com> --- package.json | 6 +- .../components/export_modal.tsx | 5 +- .../workflow_detail/components/header.tsx | 2 + .../workflow_detail/workflow_detail.test.tsx | 137 ++++++++++++++---- .../workflow_inputs/workflow_inputs.tsx | 3 + .../workflow_detail/workspace/workspace.tsx | 2 + yarn.lock | 5 + 7 files changed, 129 insertions(+), 31 deletions(-) diff --git a/package.json b/package.json index 9405c05b..44394399 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,8 @@ "reactflow": "^11.8.3", "yup": "^1.3.2" }, - "devDependencies": {}, + "devDependencies": { + "@testing-library/user-event": "^14.5.2" + }, "resolutions": {} -} \ No newline at end of file +} diff --git a/public/pages/workflow_detail/components/export_modal.tsx b/public/pages/workflow_detail/components/export_modal.tsx index fd5bdba3..d0e3b6ed 100644 --- a/public/pages/workflow_detail/components/export_modal.tsx +++ b/public/pages/workflow_detail/components/export_modal.tsx @@ -118,7 +118,10 @@ export function ExportModal(props: ExportModalProps) { - props.setIsExportModalOpen(false)}> + props.setIsExportModalOpen(false)} + data-testid="exportCloseButton" + > Close diff --git a/public/pages/workflow_detail/components/header.tsx b/public/pages/workflow_detail/components/header.tsx index 9060764a..0df72f1e 100644 --- a/public/pages/workflow_detail/components/header.tsx +++ b/public/pages/workflow_detail/components/header.tsx @@ -218,6 +218,7 @@ export function WorkflowDetailHeader(props: WorkflowDetailHeaderProps) { onClick={() => { setIsExportModalOpen(true); }} + data-testid="exportButton" > Export , @@ -232,6 +233,7 @@ export function WorkflowDetailHeader(props: WorkflowDetailHeaderProps) { ) ); }} + data-testid="closeButton" > Close , diff --git a/public/pages/workflow_detail/workflow_detail.test.tsx b/public/pages/workflow_detail/workflow_detail.test.tsx index 2d22781a..bbd3ebaf 100644 --- a/public/pages/workflow_detail/workflow_detail.test.tsx +++ b/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( - - - - ) => { - return ; - }} - /> - - - - ), -}); +) => { + const history = createMemoryHistory({ + initialEntries: [`/workflow/${workflowId}`], + }); -describe('WorkflowDetail', () => { + return { + ...render( + + + + + ) => } + /> + + + + ), + 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'); + }); +}); diff --git a/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx b/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx index 9f395eb8..c58641fc 100644 --- a/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx +++ b/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 >`} @@ -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 >`} diff --git a/public/pages/workflow_detail/workspace/workspace.tsx b/public/pages/workflow_detail/workspace/workspace.tsx index c9186b12..9581ad22 100644 --- a/public/pages/workflow_detail/workspace/workspace.tsx +++ b/public/pages/workflow_detail/workspace/workspace.tsx @@ -137,6 +137,7 @@ export function Workspace(props: WorkspaceProps) { size="l" hasActiveFilters={visualSelected} onClick={() => toggleSelection()} + data-testid="workspaceVisualButton" > Visual @@ -144,6 +145,7 @@ export function Workspace(props: WorkspaceProps) { size="l" hasActiveFilters={!visualSelected} onClick={() => toggleSelection()} + data-testid="workspaceJSONButton" > JSON diff --git a/yarn.lock b/yarn.lock index 8972f3bf..6fca7a37 100644 --- a/yarn.lock +++ b/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"