Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improving and expanding functionality checks for the workflow_detail page #8

Merged
merged 3 commits into from
Sep 11, 2024
Merged

Improving and expanding functionality checks for the workflow_detail page #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
46cb43f
Improving and expanding functionality checks for the workflow_detail …
saimedhi Sep 11, 2024
3e02ebf
Improving and expanding functionality checks for the workflow_detail …
saimedhi Sep 11, 2024
e3252aa
Merge branch 'tests_5' into tests_5_copy2
saimedhi Sep 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion public/pages/workflow_detail/resizable_workspace.tsx
View file
Open in desktop
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
Open in desktop
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');
});
});
Loading