Skip to content

Commit

Permalink
Merge pull request #8 from saimedhi/tests_5_copy2
Browse files Browse the repository at this point in the history 
Improving and expanding functionality checks for the workflow_detail page
  • Loading branch information
@saimedhi
saimedhi authored Sep 11, 2024
2 parents cd96bdc + e3252aa commit 013f0b7
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 87 deletions.
2 changes: 1 addition & 1 deletion public/pages/workflow_detail/resizable_workspace.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,7 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
</EuiFlexItem>
</EuiFlexGroup>
</EuiResizablePanel>
<EuiResizableButton data-testid="toolsPanelCollapseButton" />
<EuiResizableButton data-testid="toolsPanelSizeAdjustButton" />
<EuiResizablePanel
id={TOOLS_PANEL_ID}
mode="collapsible"
Expand Down
149 changes: 63 additions & 86 deletions public/pages/workflow_detail/workflow_detail.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,9 +48,7 @@ const renderWithRouter = (
path="/workflow/:workflowId"
render={(
props: RouteComponentProps<WorkflowDetailRouterProps>
) => {
return <WorkflowDetail setActionMenu={jest.fn()} {...props} />;
}}
) => <WorkflowDetail setActionMenu={jest.fn()} {...props} />}
/>
</Switch>
</Router>
Expand All @@ -60,16 +58,15 @@ const renderWithRouter = (
};
};

describe('WorkflowDetail', () => {
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);
Expand Down Expand Up @@ -99,93 +96,73 @@ describe('WorkflowDetail', () => {
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();

// // "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 = getByTestId('skipIngestPipelineOption');
// 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 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'
);

// Click to collapse the Tools panel
await waitFor(() => userEvent.click(toolsPanel));
// "Create an ingest pipeline" option should be selected by default
const createIngestRadio = container.querySelector('#create');
expect(createIngestRadio).toBeChecked();

// 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');
// "Skip ingestion pipeline" option should be unselected by default
const skipIngestRadio = container.querySelector('#skip');
expect(skipIngestRadio).not.toBeChecked();
});
});
});

// Click again to expand the Tools panel
await waitFor(() => userEvent.click(toolsPanel));
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');
});

// 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'
);
test('tests navigation to workflows list on Close button click', async () => {
const { getByTestId, history } = renderWithRouter(
workflowId,
workflowName,
WORKFLOW_TYPE.CUSTOM
);

// // 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(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');
});
});

0 comments on commit 013f0b7

Please sign in to comment.