44 */
55
66import React from 'react' ;
7- import { render } from '@testing-library/react' ;
7+ import { render , waitFor } from '@testing-library/react' ;
88import { Provider } from 'react-redux' ;
99import { RouteComponentProps , Route , Switch , Router } from 'react-router-dom' ;
10+ import userEvent from '@testing-library/user-event' ;
1011import { WorkflowDetail } from './workflow_detail' ;
1112import { WorkflowDetailRouterProps } from '../../pages' ;
1213import '@testing-library/jest-dom' ;
@@ -22,44 +23,51 @@ jest.mock('../../services', () => {
2223 } ;
2324} ) ;
2425
26+ jest . setTimeout ( 10000 ) ;
27+
2528const workflowId = '12345' ;
2629const workflowName = 'test_workflow' ;
2730
28- const history = createMemoryHistory ( {
29- initialEntries : [ `/workflow/${ workflowId } ] ,
30- } ) ;
31-
3231window . ResizeObserver = resizeObserverMock ;
3332
3433const 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 } , ( ) => {
58- const { getAllByText, getByText, getByRole } = renderWithRouter (
59- workflowId ,
60- workflowName ,
61- type
62- ) ;
63+ test ( `renders the WorkflowDetail page with ${ 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+ } ) ;
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4&size=40){kind=avatar}
0 commit comments