From 7d84a153804ca5a305a376823a17931b0615a741 Mon Sep 17 00:00:00 2001 From: saimedhi Date: Tue, 10 Sep 2024 04:49:41 -0700 Subject: [PATCH 1/8] Improving and expanding functionality checks for the workflow_detail page Signed-off-by: saimedhi --- package.json | 6 +- .../workflow_detail/workflow_detail.test.tsx | 150 ++++++++++++++---- yarn.lock | 5 + 3 files changed, 125 insertions(+), 36 deletions(-) diff --git a/package.json b/package.json index 48e918c3..31ab2856 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,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/workflow_detail.test.tsx b/public/pages/workflow_detail/workflow_detail.test.tsx index 070bbba0..27a19655 100644 --- a/public/pages/workflow_detail/workflow_detail.test.tsx +++ b/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( - - - - ) => { - return ; - }} - /> - - - - ), -}); +) => { + const history = createMemoryHistory({ + initialEntries: [`/workflow/${workflowId}`], + }); + + return { + ...render( + + + + + ) => { + return ; + }} + /> + + + + ), + 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'); }); }); }); diff --git a/yarn.lock b/yarn.lock index 93aa70c0..e6bd5793 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" From 169a8c4632ce6b0992f675d8489074aa12a5bfc1 Mon Sep 17 00:00:00 2001 From: saimedhi Date: Tue, 10 Sep 2024 05:32:10 -0700 Subject: [PATCH 2/8] Improving and expanding functionality checks for the workflow_detail page Signed-off-by: saimedhi --- public/pages/workflow_detail/workflow_detail.test.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/public/pages/workflow_detail/workflow_detail.test.tsx b/public/pages/workflow_detail/workflow_detail.test.tsx index 27a19655..b426902d 100644 --- a/public/pages/workflow_detail/workflow_detail.test.tsx +++ b/public/pages/workflow_detail/workflow_detail.test.tsx @@ -23,6 +23,8 @@ jest.mock('../../services', () => { }; }); +jest.setTimeout(10000); + const workflowId = '12345'; const workflowName = 'test_workflow'; From 202de88249f7d8955b20f588d5d4fc8c8ccc2dce Mon Sep 17 00:00:00 2001 From: saimedhi Date: Tue, 10 Sep 2024 20:05:27 -0700 Subject: [PATCH 3/8] Improving and expanding functionality checks for the workflow_detail page Signed-off-by: saimedhi --- public/pages/workflow_detail/resizable_workspace.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/public/pages/workflow_detail/resizable_workspace.tsx b/public/pages/workflow_detail/resizable_workspace.tsx index 5f68e2f7..f08744f8 100644 --- a/public/pages/workflow_detail/resizable_workspace.tsx +++ b/public/pages/workflow_detail/resizable_workspace.tsx @@ -237,7 +237,7 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) { - + Date: Tue, 10 Sep 2024 20:13:24 -0700 Subject: [PATCH 4/8] Improving and expanding functionality checks for the workflow_detail page Signed-off-by: saimedhi --- .../components/export_modal.tsx | 5 +- .../workflow_detail/components/header.tsx | 2 + .../workflow_detail/workflow_detail.test.tsx | 114 ++++++++++-------- .../workflow_inputs/workflow_inputs.tsx | 13 +- .../workflow_detail/workspace/workspace.tsx | 2 + 5 files changed, 83 insertions(+), 53 deletions(-) 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 b426902d..8ebe9246 100644 --- a/public/pages/workflow_detail/workflow_detail.test.tsx +++ b/public/pages/workflow_detail/workflow_detail.test.tsx @@ -68,6 +68,7 @@ describe('WorkflowDetail', () => { getByText, getByRole, container, + getByTestId, history, } = renderWithRouter(workflowId, workflowName, type); @@ -94,83 +95,96 @@ describe('WorkflowDetail', () => { expect(getByRole('tab', { name: 'Resources' })).toBeInTheDocument(); // "Run ingestion" button should be enabled by default - const runIngestionButton = getByRole('button', { name: 'Run ingestion' }); + const runIngestionButton = getByTestId('runIngestionButton'); expect(runIngestionButton).toBeInTheDocument(); expect(runIngestionButton).toBeEnabled(); // "Search pipeline >" button should be disabled by default - const searchPipelineButton = getByRole('button', { - name: 'Search pipeline >', - }); + const searchPipelineButton = getByTestId('searchPipelineButton'); 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(); + // // "Create an ingest pipeline" option should be selected by default + // const createIngestRadio = getByLabelText('createIngestPipelineOption'); + // 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(); + // // "Skip ingestion pipeline" option should be disabled by default + // const skipIngestRadio = getByTestId('skipIngestPipelineOption'); + // expect(skipIngestRadio).not.toBeChecked(); // Clicking the "Export" button should open the export component - await waitFor(() => - userEvent.click(getByRole('button', { name: 'Export' })) - ); + await waitFor(() => userEvent.click(getByTestId('exportButton'))); expect(getByText('Export ' + workflowName)).toBeInTheDocument(); // Closing the "Export" opened above - await waitFor(() => - userEvent.click(getByRole('button', { name: 'Close' })) - ); + await waitFor(() => userEvent.click(getByTestId('exportCloseButton'))); // Testing components in the ReactFlow workspace - const visualButton = getByRole('button', { name: 'Visual' }); + const visualButton = getByTestId('workspaceVisualButton'); expect(visualButton).toBeVisible(); expect(visualButton).toHaveClass('euiFilterButton-hasActiveFilters'); - const jsonButton = getByRole('button', { name: 'JSON' }); + const jsonButton = getByTestId('workspaceJSONButton'); 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( + const toolsPanel = getByTestId('toolsPanelCollapseButton'); // Assuming the collapse button has the 'toolsPanelCollapseButton' test id + + const toolsPanelContainer = getByTestId('toolsPanelId'); // Assuming the Tools panel has a test ID 'toolsPanel' + + // Initial state: Tools panel should be open and not collapsed + expect(getByText('Tools')).toBeVisible(); + expect(toolsPanelContainer).not.toHaveClass( 'euiResizablePanel-isCollapsed' ); - // Expand the Tools panel - await waitFor(() => userEvent.click(toggleButton!)); - const toolsPanelAfterExpand = container.querySelector('#tools_panel_id')!; - expect(toolsPanelAfterExpand).not.toHaveClass( + + // Click to collapse the Tools panel + await waitFor(() => userEvent.click(toolsPanel)); + + // After collapsing, the Tools panel should not be visible and should have the collapsed class + // expect(getByText('Tools')).not.toBeVisible(); + expect(toolsPanelContainer).toHaveClass('euiResizablePanel-isCollapsed'); + + // Click again to expand the Tools panel + await waitFor(() => userEvent.click(toolsPanel)); + + // After expanding, the Tools panel should be visible and should not have the collapsed class + expect(getByText('Tools')).toBeVisible(); + expect(toolsPanelContainer).not.toHaveClass( 'euiResizablePanel-isCollapsed' ); + // // 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 = getByTestId('toolsPanelCollapseButton'); + // 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' })) - ); + 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 952ab5a7..64898856 100644 --- a/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx +++ b/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx @@ -655,7 +655,10 @@ export function WorkflowInputs(props: WorkflowInputsProps) { id: INGEST_OPTION.CREATE, label: ( - + Create an ingest pipeline @@ -668,7 +671,10 @@ export function WorkflowInputs(props: WorkflowInputsProps) { id: INGEST_OPTION.SKIP, label: ( - + Skip ingestion pipeline @@ -753,6 +759,7 @@ export function WorkflowInputs(props: WorkflowInputsProps) { onClick={() => { setSelectedStep(STEP.SEARCH); }} + data-testid="searchPipelineButton" > {`Search pipeline >`} @@ -765,6 +772,7 @@ export function WorkflowInputs(props: WorkflowInputsProps) { onClick={() => { validateAndRunIngestion(); }} + data-testid="runIngestionButton" disabled={!ingestTemplatesDifferent} isLoading={isRunningIngest} > @@ -777,6 +785,7 @@ export function WorkflowInputs(props: WorkflowInputsProps) { onClick={() => { setSelectedStep(STEP.SEARCH); }} + data-testid="searchPipelineButton" disabled={ingestTemplatesDifferent || isRunningIngest} > {`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 From 46cb43ff10bd4a2450b09ff4218df2931b5111c9 Mon Sep 17 00:00:00 2001 From: saimedhi Date: Wed, 11 Sep 2024 10:12:17 -0700 Subject: [PATCH 5/8] Improving and expanding functionality checks for the workflow_detail page Signed-off-by: saimedhi --- package.json | 6 +- .../components/export_modal.tsx | 5 +- .../workflow_detail/components/header.tsx | 2 + .../workflow_detail/resizable_workspace.tsx | 2 +- .../workflow_detail/workflow_detail.test.tsx | 137 +++++++++++++----- .../workflow_inputs/workflow_inputs.tsx | 3 + .../workflow_detail/workspace/workspace.tsx | 2 + yarn.lock | 5 + 8 files changed, 123 insertions(+), 39 deletions(-) diff --git a/package.json b/package.json index 48e918c3..31ab2856 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,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/resizable_workspace.tsx b/public/pages/workflow_detail/resizable_workspace.tsx index 5f68e2f7..e590ae59 100644 --- a/public/pages/workflow_detail/resizable_workspace.tsx +++ b/public/pages/workflow_detail/resizable_workspace.tsx @@ -237,7 +237,7 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) { - + { }; }); +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}`], + }); + + return { + ...render( + + + + + ) => { + return ; + }} + /> + + + + ), + history, + }; +}; -describe('WorkflowDetail', () => { +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 page with ${type} type`, async () => { + const { + getAllByText, + getByText, + getByRole, + container, + getByTestId, + history, + } = renderWithRouter(workflowId, workflowName, type); expect(getAllByText(workflowName).length).toBeGreaterThan(0); expect(getAllByText('Create an ingest pipeline').length).toBeGreaterThan( @@ -88,6 +93,68 @@ 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 disabled by default + const skipIngestRadio = container.querySelector('#skip'); + expect(skipIngestRadio).not.toBeChecked(); + + // Clicking the "Export" button should open the export component + await waitFor(() => userEvent.click(getByTestId('exportButton'))); + expect(getByText('Export ' + workflowName)).toBeInTheDocument(); + // Closing the "Export" opened above + await waitFor(() => userEvent.click(getByTestId('exportCloseButton'))); + + // Testing components in the ReactFlow workspace + 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'); + + // Testing collapsible Tools panel + const toolsPanelInitially = container.querySelector('#tools_panel_id'); + expect(toolsPanelInitially).toBeVisible(); + + const toggleButton = toolsPanelInitially?.querySelector( + 'button[type="button"]' + ); + expect(toggleButton).toBeInTheDocument(); + await waitFor(() => userEvent.click(toggleButton!)); + + // Testing Tools panel after collapse + const toolsPanelAfterCollapse = container.querySelector( + '#tools_panel_id' + )!; + expect(toolsPanelAfterCollapse).toHaveClass( + 'euiResizablePanel-isCollapsed' + ); + + // Testing Tools panel after expand + await waitFor(() => userEvent.click(toggleButton!)); + const toolsPanelAfterExpand = container.querySelector('#tools_panel_id')!; + expect(toolsPanelAfterExpand).not.toHaveClass( + 'euiResizablePanel-isCollapsed' + ); + + // Clicking the WorkflowDetail Page "close" button should go back to the list page + 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 952ab5a7..cc1275ab 100644 --- a/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx +++ b/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx @@ -753,6 +753,7 @@ export function WorkflowInputs(props: WorkflowInputsProps) { onClick={() => { setSelectedStep(STEP.SEARCH); }} + data-testid="searchPipelineButton" > {`Search pipeline >`} @@ -765,6 +766,7 @@ export function WorkflowInputs(props: WorkflowInputsProps) { onClick={() => { validateAndRunIngestion(); }} + data-testid="runIngestionButton" disabled={!ingestTemplatesDifferent} isLoading={isRunningIngest} > @@ -777,6 +779,7 @@ export function WorkflowInputs(props: WorkflowInputsProps) { onClick={() => { setSelectedStep(STEP.SEARCH); }} + data-testid="searchPipelineButton" disabled={ingestTemplatesDifferent || isRunningIngest} > {`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 93aa70c0..e6bd5793 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" From 3e02ebfe1f7059e5d6970dd2e5a37be0c6b3b451 Mon Sep 17 00:00:00 2001 From: saimedhi Date: Wed, 11 Sep 2024 11:36:30 -0700 Subject: [PATCH 6/8] Improving and expanding functionality checks for the workflow_detail page Signed-off-by: saimedhi --- .../workflow_detail/workflow_detail.test.tsx | 106 ++++++++++-------- 1 file changed, 57 insertions(+), 49 deletions(-) diff --git a/public/pages/workflow_detail/workflow_detail.test.tsx b/public/pages/workflow_detail/workflow_detail.test.tsx index c49a7073..bbd3ebaf 100644 --- a/public/pages/workflow_detail/workflow_detail.test.tsx +++ b/public/pages/workflow_detail/workflow_detail.test.tsx @@ -48,9 +48,7 @@ const renderWithRouter = ( path="/workflow/:workflowId" render={( props: RouteComponentProps - ) => { - return ; - }} + ) => } /> @@ -62,14 +60,13 @@ const renderWithRouter = ( describe('WorkflowDetail Page with create ingestion option', () => { Object.values(WORKFLOW_TYPE).forEach((type) => { - test(`renders the page with ${type} type`, async () => { + test(`renders the WorkflowDetail page with ${type} type`, async () => { const { getAllByText, getByText, getByRole, container, getByTestId, - history, } = renderWithRouter(workflowId, workflowName, type); expect(getAllByText(workflowName).length).toBeGreaterThan(0); @@ -99,7 +96,7 @@ describe('WorkflowDetail Page with create ingestion option', () => { expect(runIngestionButton).toBeInTheDocument(); expect(runIngestionButton).toBeEnabled(); - // "Search pipeline >" button should be disabled by default + // "Search pipeline" button should be disabled by default const searchPipelineButton = getByTestId('searchPipelineButton'); expect(searchPipelineButton).toBeInTheDocument(); expect(searchPipelineButton).toBeDisabled(); @@ -108,53 +105,64 @@ describe('WorkflowDetail Page with create ingestion option', () => { const createIngestRadio = container.querySelector('#create'); expect(createIngestRadio).toBeChecked(); - // "Skip ingestion pipeline" option should be disabled by default + // "Skip ingestion pipeline" option should be unselected by default const skipIngestRadio = container.querySelector('#skip'); expect(skipIngestRadio).not.toBeChecked(); + }); + }); +}); - // Clicking the "Export" button should open the export component - await waitFor(() => userEvent.click(getByTestId('exportButton'))); - expect(getByText('Export ' + workflowName)).toBeInTheDocument(); - // Closing the "Export" opened above - await waitFor(() => userEvent.click(getByTestId('exportCloseButton'))); - - // Testing components in the ReactFlow workspace - 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'); - - // Testing collapsible Tools panel - const toolsPanelInitially = container.querySelector('#tools_panel_id'); - expect(toolsPanelInitially).toBeVisible(); - - const toggleButton = toolsPanelInitially?.querySelector( - 'button[type="button"]' - ); - expect(toggleButton).toBeInTheDocument(); - await waitFor(() => userEvent.click(toggleButton!)); - - // Testing Tools panel after collapse - const toolsPanelAfterCollapse = container.querySelector( - '#tools_panel_id' - )!; - expect(toolsPanelAfterCollapse).toHaveClass( - 'euiResizablePanel-isCollapsed' - ); +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'); + }); - // Testing Tools panel after expand - await waitFor(() => userEvent.click(toggleButton!)); - const toolsPanelAfterExpand = container.querySelector('#tools_panel_id')!; - expect(toolsPanelAfterExpand).not.toHaveClass( - 'euiResizablePanel-isCollapsed' - ); + test('tests navigation to workflows list on Close button click', async () => { + const { getByTestId, history } = renderWithRouter( + workflowId, + workflowName, + WORKFLOW_TYPE.CUSTOM + ); - // Clicking the WorkflowDetail Page "close" button should go back to the list page - await waitFor(() => userEvent.click(getByTestId('closeButton'))); - expect(history.location.pathname).toBe('/workflows'); - }); + // The WorkflowDetail Page Close button should navigate back to the workflows list + await waitFor(() => userEvent.click(getByTestId('closeButton'))); + expect(history.location.pathname).toBe('/workflows'); }); }); From 6d4ad3295511330697fea837d267eaec74eaf9a4 Mon Sep 17 00:00:00 2001 From: saimedhi Date: Wed, 11 Sep 2024 11:58:23 -0700 Subject: [PATCH 7/8] Improving and expanding functionality checks for the workflow_detail page Signed-off-by: saimedhi --- public/pages/workflow_detail/resizable_workspace.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/public/pages/workflow_detail/resizable_workspace.tsx b/public/pages/workflow_detail/resizable_workspace.tsx index 73f54b56..5f68e2f7 100644 --- a/public/pages/workflow_detail/resizable_workspace.tsx +++ b/public/pages/workflow_detail/resizable_workspace.tsx @@ -237,7 +237,7 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) { - + Date: Wed, 11 Sep 2024 12:03:18 -0700 Subject: [PATCH 8/8] Improving and expanding functionality checks for the workflow_detail page Signed-off-by: saimedhi --- .../workflow_inputs/workflow_inputs.tsx | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx b/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx index 1dc58483..aa21fb45 100644 --- a/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx +++ b/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx @@ -686,10 +686,7 @@ export function WorkflowInputs(props: WorkflowInputsProps) { id: INGEST_OPTION.CREATE, label: ( - + Create an ingest pipeline @@ -702,10 +699,7 @@ export function WorkflowInputs(props: WorkflowInputsProps) { id: INGEST_OPTION.SKIP, label: ( - + Skip ingestion pipeline