Skip to content

Commit d669c10

Browse files
opensearch-trigger-bot[bot]saimedhi
opensearch-trigger-bot[bot]
and
saimedhi
authored
Improving and expanding functionality checks for the workflow_detail page (#360) (#366)
* Improving and expanding functionality checks for the workflow_detail page Signed-off-by: saimedhi <saimedhi@amazon.com> * Improving and expanding functionality checks for the workflow_detail page Signed-off-by: saimedhi <saimedhi@amazon.com> * Improving and expanding functionality checks for the workflow_detail page Signed-off-by: saimedhi <saimedhi@amazon.com> * Improving and expanding functionality checks for the workflow_detail page Signed-off-by: saimedhi <saimedhi@amazon.com> * Improving and expanding functionality checks for the workflow_detail page Signed-off-by: saimedhi <saimedhi@amazon.com> * Improving and expanding functionality checks for the workflow_detail page Signed-off-by: saimedhi <saimedhi@amazon.com> * Improving and expanding functionality checks for the workflow_detail page Signed-off-by: saimedhi <saimedhi@amazon.com> * Improving and expanding functionality checks for the workflow_detail page Signed-off-by: saimedhi <saimedhi@amazon.com> --------- Signed-off-by: saimedhi <saimedhi@amazon.com> Signed-off-by: Sai Medhini Reddy Maryada <117196660+saimedhi@users.noreply.github.com> (cherry picked from commit 7e704d9) Co-authored-by: Sai Medhini Reddy Maryada <117196660+saimedhi@users.noreply.github.com>
1 parent 88061ef commit d669c10

File tree

7 files changed

+129
-31
lines changed

7 files changed

+129
-31
lines changed

‎package.json

+4-2
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,8 @@
3434
"reactflow": "^11.8.3",
3535
"yup": "^1.3.2"
3636
},
37-
"devDependencies": {},
37+
"devDependencies": {
38+
"@testing-library/user-event": "^14.5.2"
39+
},
3840
"resolutions": {}
39-
}
41+
}

‎public/pages/workflow_detail/components/export_modal.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,10 @@ export function ExportModal(props: ExportModalProps) {
118118
</EuiFlexGroup>
119119
</EuiModalBody>
120120
<EuiModalFooter>
121-
<EuiSmallButtonEmpty onClick={() => props.setIsExportModalOpen(false)}>
121+
<EuiSmallButtonEmpty
122+
onClick={() => props.setIsExportModalOpen(false)}
123+
data-testid="exportCloseButton"
124+
>
122125
Close
123126
</EuiSmallButtonEmpty>
124127
</EuiModalFooter>

‎public/pages/workflow_detail/components/header.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -218,6 +218,7 @@ export function WorkflowDetailHeader(props: WorkflowDetailHeaderProps) {
218218
onClick={() => {
219219
setIsExportModalOpen(true);
220220
}}
221+
data-testid="exportButton"
221222
>
222223
Export
223224
</EuiSmallButton>,
@@ -232,6 +233,7 @@ export function WorkflowDetailHeader(props: WorkflowDetailHeaderProps) {
232233
)
233234
);
234235
}}
236+
data-testid="closeButton"
235237
>
236238
Close
237239
</EuiSmallButtonEmpty>,

‎public/pages/workflow_detail/workflow_detail.test.tsx

+109-28
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,10 @@
44
*/
55

66
import React from 'react';
7-
import { render } from '@testing-library/react';
7+
import { render, waitFor } from '@testing-library/react';
88
import { Provider } from 'react-redux';
99
import { RouteComponentProps, Route, Switch, Router } from 'react-router-dom';
10+
import userEvent from '@testing-library/user-event';
1011
import { WorkflowDetail } from './workflow_detail';
1112
import { WorkflowDetailRouterProps } from '../../pages';
1213
import '@testing-library/jest-dom';
@@ -22,44 +23,51 @@ jest.mock('../../services', () => {
2223
};
2324
});
2425

26+
jest.setTimeout(10000);
27+
2528
const workflowId = '12345';
2629
const workflowName = 'test_workflow';
2730

28-
const history = createMemoryHistory({
29-
initialEntries: [`/workflow/${workflowId}`],
30-
});
31-
3231
window.ResizeObserver = resizeObserverMock;
3332

3433
const renderWithRouter = (
3534
workflowId: string,
3635
workflowName: string,
3736
workflowType: WORKFLOW_TYPE
38-
) => ({
39-
...render(
40-
<Provider store={mockStore(workflowId, workflowName, workflowType)}>
41-
<Router history={history}>
42-
<Switch>
43-
<Route
44-
path="/workflow/:workflowId"
45-
render={(props: RouteComponentProps<WorkflowDetailRouterProps>) => {
46-
return <WorkflowDetail setActionMenu={jest.fn()} {...props} />;
47-
}}
48-
/>
49-
</Switch>
50-
</Router>
51-
</Provider>
52-
),
53-
});
37+
) => {
38+
const history = createMemoryHistory({
39+
initialEntries: [`/workflow/${workflowId}`],
40+
});
5441

55-
describe('WorkflowDetail', () => {
42+
return {
43+
...render(
44+
<Provider store={mockStore(workflowId, workflowName, workflowType)}>
45+
<Router history={history}>
46+
<Switch>
47+
<Route
48+
path="/workflow/:workflowId"
49+
render={(
50+
props: RouteComponentProps<WorkflowDetailRouterProps>
51+
) => <WorkflowDetail setActionMenu={jest.fn()} {...props} />}
52+
/>
53+
</Switch>
54+
</Router>
55+
</Provider>
56+
),
57+
history,
58+
};
59+
};
60+
61+
describe('WorkflowDetail Page with create ingestion option', () => {
5662
Object.values(WORKFLOW_TYPE).forEach((type) => {
57-
test(`renders the page with ${type} type`, () => {
58-
const { getAllByText, getByText, getByRole } = renderWithRouter(
59-
workflowId,
60-
workflowName,
61-
type
62-
);
63+
test(`renders the WorkflowDetail page with ${type} type`, async () => {
64+
const {
65+
getAllByText,
66+
getByText,
67+
getByRole,
68+
container,
69+
getByTestId,
70+
} = renderWithRouter(workflowId, workflowName, type);
6371

6472
expect(getAllByText(workflowName).length).toBeGreaterThan(0);
6573
expect(getAllByText('Create an ingest pipeline').length).toBeGreaterThan(
@@ -82,6 +90,79 @@ describe('WorkflowDetail', () => {
8290
expect(getByRole('tab', { name: 'Run queries' })).toBeInTheDocument();
8391
expect(getByRole('tab', { name: 'Errors' })).toBeInTheDocument();
8492
expect(getByRole('tab', { name: 'Resources' })).toBeInTheDocument();
93+
94+
// "Run ingestion" button should be enabled by default
95+
const runIngestionButton = getByTestId('runIngestionButton');
96+
expect(runIngestionButton).toBeInTheDocument();
97+
expect(runIngestionButton).toBeEnabled();
98+
99+
// "Search pipeline" button should be disabled by default
100+
const searchPipelineButton = getByTestId('searchPipelineButton');
101+
expect(searchPipelineButton).toBeInTheDocument();
102+
expect(searchPipelineButton).toBeDisabled();
103+
104+
// "Create an ingest pipeline" option should be selected by default
105+
const createIngestRadio = container.querySelector('#create');
106+
expect(createIngestRadio).toBeChecked();
107+
108+
// "Skip ingestion pipeline" option should be unselected by default
109+
const skipIngestRadio = container.querySelector('#skip');
110+
expect(skipIngestRadio).not.toBeChecked();
85111
});
86112
});
87113
});
114+
115+
describe('WorkflowDetail Page Functionality (Custom Workflow)', () => {
116+
test('tests Export button, Tools panel toggling, and Workspace preview', async () => {
117+
const { getByText, container, getByTestId } = renderWithRouter(
118+
workflowId,
119+
workflowName,
120+
WORKFLOW_TYPE.CUSTOM
121+
);
122+
123+
// Export button opens the export component
124+
await waitFor(() => userEvent.click(getByTestId('exportButton')));
125+
expect(getByText(`Export ${workflowName}`)).toBeInTheDocument();
126+
127+
// Close the export component
128+
await waitFor(() => userEvent.click(getByTestId('exportCloseButton')));
129+
130+
// Check workspace buttons (Visual and JSON)
131+
const visualButton = getByTestId('workspaceVisualButton');
132+
expect(visualButton).toBeVisible();
133+
expect(visualButton).toHaveClass('euiFilterButton-hasActiveFilters');
134+
const jsonButton = getByTestId('workspaceJSONButton');
135+
expect(jsonButton).toBeVisible();
136+
await waitFor(() => userEvent.click(jsonButton));
137+
expect(jsonButton).toHaveClass('euiFilterButton-hasActiveFilters');
138+
139+
// Tools panel should collapse and expand on toggle
140+
const toolsPanel = container.querySelector('#tools_panel_id');
141+
expect(toolsPanel).toBeVisible();
142+
143+
const toggleButton = toolsPanel?.querySelector('button[type="button"]');
144+
expect(toggleButton).toBeInTheDocument();
145+
await waitFor(() => userEvent.click(toggleButton!));
146+
147+
// Tools panel after collapsing
148+
const collapsedToolsPanel = container.querySelector('#tools_panel_id');
149+
expect(collapsedToolsPanel).toHaveClass('euiResizablePanel-isCollapsed');
150+
151+
// Tools panel after expanding
152+
await waitFor(() => userEvent.click(toggleButton!));
153+
const expandedToolsPanel = container.querySelector('#tools_panel_id');
154+
expect(expandedToolsPanel).not.toHaveClass('euiResizablePanel-isCollapsed');
155+
});
156+
157+
test('tests navigation to workflows list on Close button click', async () => {
158+
const { getByTestId, history } = renderWithRouter(
159+
workflowId,
160+
workflowName,
161+
WORKFLOW_TYPE.CUSTOM
162+
);
163+
164+
// The WorkflowDetail Page Close button should navigate back to the workflows list
165+
await waitFor(() => userEvent.click(getByTestId('closeButton')));
166+
expect(history.location.pathname).toBe('/workflows');
167+
});
168+
});

‎public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -816,6 +816,7 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
816816
onClick={() => {
817817
setSelectedStep(STEP.SEARCH);
818818
}}
819+
data-testid="searchPipelineButton"
819820
>
820821
{`Search pipeline >`}
821822
</EuiSmallButton>
@@ -849,6 +850,7 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
849850
onClick={() => {
850851
validateAndRunIngestion();
851852
}}
853+
data-testid="runIngestionButton"
852854
disabled={ingestRunButtonDisabled}
853855
isLoading={isRunningIngest}
854856
>
@@ -861,6 +863,7 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
861863
onClick={() => {
862864
setSelectedStep(STEP.SEARCH);
863865
}}
866+
data-testid="searchPipelineButton"
864867
disabled={ingestToSearchButtonDisabled}
865868
>
866869
{`Search pipeline >`}

‎public/pages/workflow_detail/workspace/workspace.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -137,13 +137,15 @@ export function Workspace(props: WorkspaceProps) {
137137
size="l"
138138
hasActiveFilters={visualSelected}
139139
onClick={() => toggleSelection()}
140+
data-testid="workspaceVisualButton"
140141
>
141142
Visual
142143
</EuiFilterButton>
143144
<EuiFilterButton
144145
size="l"
145146
hasActiveFilters={!visualSelected}
146147
onClick={() => toggleSelection()}
148+
data-testid="workspaceJSONButton"
147149
>
148150
JSON
149151
</EuiFilterButton>

‎yarn.lock

+5
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,11 @@
6868
classcat "^5.0.3"
6969
zustand "^4.4.1"
7070

71+
"@testing-library/user-event@^14.5.2":
72+
version "14.5.2"
73+
resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.5.2.tgz#db7257d727c891905947bd1c1a99da20e03c2ebd"
74+
integrity sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==
75+
7176
"@types/d3-array@*":
7277
version "3.0.8"
7378
resolved "https://registry.yarnpkg.com/@types/d3-array/-/d3-array-3.0.8.tgz#a5d0687a12b48142c6f124d5e3796054e91bcea5"

0 commit comments

Comments
 (0)