21720: replaced theme.spacing.unit * x with theme.spacing(x) everywhere
[arvados.git] / services / workbench2 / src / views / process-panel / process-io-card.test.tsx
1 // Copyright (C) The Arvados Authors. All rights reserved.
2 //
3 // SPDX-License-Identifier: AGPL-3.0
4
5 import React from 'react';
6 import { mount, configure } from 'enzyme';
7 import { combineReducers, createStore } from "redux";
8 import { CircularProgress, MuiThemeProvider, Tab, TableBody } from "@material-ui/core";
9 import { CustomTheme } from 'common/custom-theme';
10 import Adapter from "enzyme-adapter-react-16";
11 import { Provider } from 'react-redux';
12 import { ProcessIOCard, ProcessIOCardType } from './process-io-card';
13 import { DefaultView } from "components/default-view/default-view";
14 import { DefaultVirtualCodeSnippet } from "components/default-code-snippet/default-virtual-code-snippet";
15 import { ProcessOutputCollectionFiles } from './process-output-collection-files';
16 import { MemoryRouter } from 'react-router-dom';
17
18 // Mock collection files component since it just needs to exist
19 jest.mock('views/process-panel/process-output-collection-files');
20 // Mock autosizer for the io panel virtual list
21 jest.mock('react-virtualized-auto-sizer', () => ({ children }: any) => children({ height: 600, width: 600 }));
22
23 configure({ adapter: new Adapter() });
24
25 describe('renderers', () => {
26     let store;
27
28     describe('ProcessStatus', () => {
29
30         beforeEach(() => {
31             store = createStore(combineReducers({
32                 auth: (state: any = {}, action: any) => state,
33             }));
34         });
35
36         it('shows main process input loading when raw or params null', () => {
37             // when
38             let panel = mount(
39                 <Provider store={store}>
40                     <MuiThemeProvider theme={CustomTheme}>
41                         <ProcessIOCard
42                             label={ProcessIOCardType.INPUT}
43                             process={false} // Treat as a main process, no requestingContainerUuid
44                             params={null}
45                             raw={{}}
46                         />
47                     </MuiThemeProvider>
48                 </Provider>
49                 );
50
51             // then
52             expect(panel.find(Tab).exists()).toBeFalsy();
53             expect(panel.find(CircularProgress));
54
55             // when
56             panel = mount(
57                 <Provider store={store}>
58                     <MuiThemeProvider theme={CustomTheme}>
59                         <ProcessIOCard
60                             label={ProcessIOCardType.INPUT}
61                             process={false} // Treat as a main process, no requestingContainerUuid
62                             params={[]}
63                             raw={null}
64                         />
65                     </MuiThemeProvider>
66                 </Provider>
67                 );
68
69             // then
70             expect(panel.find(Tab).exists()).toBeFalsy();
71             expect(panel.find(CircularProgress));
72         });
73
74         it('shows main process empty params and raw', () => {
75             // when
76             let panel = mount(
77                 <Provider store={store}>
78                     <MuiThemeProvider theme={CustomTheme}>
79                         <ProcessIOCard
80                             label={ProcessIOCardType.INPUT}
81                             process={false} // Treat as a main process, no requestingContainerUuid
82                             params={[]}
83                             raw={{}}
84                         />
85                     </MuiThemeProvider>
86                 </Provider>
87                 );
88
89             // then
90             expect(panel.find(CircularProgress).exists()).toBeFalsy();
91             expect(panel.find(Tab).exists()).toBeFalsy();
92             expect(panel.find(DefaultView).text()).toEqual('No parameters found');
93         });
94
95         it('shows main process with raw', () => {
96             // when
97             const raw = {some: 'data'};
98             let panel = mount(
99                 <Provider store={store}>
100                     <MuiThemeProvider theme={CustomTheme}>
101                         <ProcessIOCard
102                             label={ProcessIOCardType.INPUT}
103                             process={false} // Treat as a main process, no requestingContainerUuid
104                             params={[]}
105                             raw={raw}
106                         />
107                     </MuiThemeProvider>
108                 </Provider>
109                 );
110
111             // then
112             expect(panel.find(CircularProgress).exists()).toBeFalsy();
113             expect(panel.find(Tab).length).toBe(1);
114             expect(panel.find(DefaultVirtualCodeSnippet).text()).toContain(JSON.stringify(raw, null, 2).replace(/\n/g, ''));
115         });
116
117         it('shows main process with params', () => {
118             // when
119             const parameters = [{id: 'someId', label: 'someLabel', value: {display: 'someValue'}}];
120             let panel = mount(
121                 <Provider store={store}>
122                     <MuiThemeProvider theme={CustomTheme}>
123                         <ProcessIOCard
124                             label={ProcessIOCardType.INPUT}
125                             process={false} // Treat as a main process, no requestingContainerUuid
126                             params={parameters}
127                             raw={{}}
128                         />
129                     </MuiThemeProvider>
130                 </Provider>
131                 );
132
133             // then
134             expect(panel.find(CircularProgress).exists()).toBeFalsy();
135             expect(panel.find(Tab).length).toBe(2); // Empty raw is shown if parameters are present
136             expect(panel.find(TableBody).text()).toContain('someId');
137             expect(panel.find(TableBody).text()).toContain('someLabel');
138             expect(panel.find(TableBody).text()).toContain('someValue');
139         });
140
141         it('shows main process with output collection', () => {
142             // when
143             const outputCollection = '987654321';
144             const parameters = [{id: 'someId', label: 'someLabel', value: {display: 'someValue'}}];
145             let panel = mount(
146                 <Provider store={store}>
147                     <MuiThemeProvider theme={CustomTheme}>
148                         <ProcessIOCard
149                             label={ProcessIOCardType.OUTPUT}
150                             process={false} // Treat as a main process, no requestingContainerUuid
151                             outputUuid={outputCollection}
152                             params={parameters}
153                             raw={{}}
154                         />
155                     </MuiThemeProvider>
156                 </Provider>
157                 );
158
159             // then
160             expect(panel.find(CircularProgress).exists()).toBeFalsy();
161             expect(panel.find(Tab).length).toBe(3); // Empty raw is shown if parameters are present
162             expect(panel.find(TableBody).text()).toContain('someId');
163             expect(panel.find(TableBody).text()).toContain('someLabel');
164             expect(panel.find(TableBody).text()).toContain('someValue');
165
166             // Visit output tab
167             panel.find(Tab).at(2).simulate('click');
168             expect(panel.find(ProcessOutputCollectionFiles).prop('currentItemUuid')).toBe(outputCollection);
169         });
170
171         // Subprocess
172
173         it('shows subprocess loading', () => {
174             // when
175             const subprocess = {containerRequest: {requestingContainerUuid: 'xyz'}};
176             let panel = mount(
177                 <Provider store={store}>
178                     <MuiThemeProvider theme={CustomTheme}>
179                         <ProcessIOCard
180                             label={ProcessIOCardType.INPUT}
181                             process={subprocess} // Treat as a subprocess without outputUuid
182                             params={null}
183                             raw={null}
184                         />
185                     </MuiThemeProvider>
186                 </Provider>
187                 );
188
189             // then
190             expect(panel.find(Tab).exists()).toBeFalsy();
191             expect(panel.find(CircularProgress));
192         });
193
194         it('shows subprocess mounts', () => {
195             // when
196             const subprocess = {containerRequest: {requestingContainerUuid: 'xyz'}};
197             const sampleMount = {path: '/', pdh: 'abcdef12abcdef12abcdef12abcdef12+0'};
198             let panel = mount(
199                 <Provider store={store}>
200                     <MemoryRouter>
201                         <MuiThemeProvider theme={CustomTheme}>
202                             <ProcessIOCard
203                                 label={ProcessIOCardType.INPUT}
204                                 process={subprocess} // Treat as a subprocess without outputUuid
205                                 params={null}
206                                 raw={null}
207                                 mounts={[sampleMount]}
208                             />
209                         </MuiThemeProvider>
210                     </MemoryRouter>
211                 </Provider>
212                 );
213
214             // then
215             expect(panel.find(CircularProgress).exists()).toBeFalsy();
216             expect(panel.find(Tab).length).toBe(1); // Empty raw is hidden in subprocesses
217             expect(panel.find(TableBody).text()).toContain(sampleMount.pdh);
218
219         });
220
221         it('shows subprocess output collection', () => {
222             // when
223             const subprocess = {containerRequest: {requestingContainerUuid: 'xyz'}};
224             const outputCollection = '123456789';
225             let panel = mount(
226                 <Provider store={store}>
227                     <MuiThemeProvider theme={CustomTheme}>
228                         <ProcessIOCard
229                             label={ProcessIOCardType.OUTPUT}
230                             process={subprocess} // Treat as a subprocess with outputUuid
231                             outputUuid={outputCollection}
232                             params={null}
233                             raw={null}
234                         />
235                     </MuiThemeProvider>
236                 </Provider>
237                 );
238
239             // then
240             expect(panel.find(CircularProgress).exists()).toBeFalsy();
241             expect(panel.find(Tab).length).toBe(1); // Unloaded raw is hidden in subprocesses
242             expect(panel.find(ProcessOutputCollectionFiles).prop('currentItemUuid')).toBe(outputCollection);
243         });
244
245         it('shows empty subprocess raw', () => {
246             // when
247             const subprocess = {containerRequest: {requestingContainerUuid: 'xyz'}};
248             const outputCollection = '123456789';
249             let panel = mount(
250                 <Provider store={store}>
251                     <MuiThemeProvider theme={CustomTheme}>
252                         <ProcessIOCard
253                             label={ProcessIOCardType.OUTPUT}
254                             process={subprocess} // Treat as a subprocess with outputUuid
255                             outputUuid={outputCollection}
256                             params={null}
257                             raw={{}}
258                         />
259                     </MuiThemeProvider>
260                 </Provider>
261                 );
262
263             // then
264             expect(panel.find(CircularProgress).exists()).toBeFalsy();
265             expect(panel.find(Tab).length).toBe(2); // Empty raw is visible in subprocesses
266             expect(panel.find(Tab).first().text()).toBe('Collection');
267             expect(panel.find(ProcessOutputCollectionFiles).prop('currentItemUuid')).toBe(outputCollection);
268         });
269
270     });
271 });