services/workbench2/src/views/process-panel/process-io-card.cy.js

   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 { combineReducers, createStore } from "redux";
   7 import {
   8     ThemeProvider,
   9     StyledEngineProvider,
  10 } from "@mui/material";
  11 import { CustomTheme } from 'common/custom-theme';
  12 import { Provider } from 'react-redux';
  13 import { ProcessIOCard, ProcessIOCardType } from './process-io-card';
  14 import { MemoryRouter } from 'react-router-dom';
  15
  16 describe('renderers', () => {
  17     let store;
  18
  19     describe('ProcessStatus', () => {
  20
  21         beforeEach(() => {
  22             store = createStore(combineReducers({
  23                 auth: (state = {}, action) => { return {...state, config: {} } },
  24                 collectionPanel: (state = {}, action) => state,
  25                 collectionPanelFiles: (state = {}, action) => { return {...state, item: { portableDataHash: '12345'} } },
  26             }));
  27         });
  28
  29         it('shows main process input loading when raw or params null', () => {
  30             // when
  31             cy.mount(
  32                 <Provider store={store}>
  33                     <StyledEngineProvider injectFirst>
  34                         <ThemeProvider theme={CustomTheme}>
  35                             <ProcessIOCard
  36                                 label={ProcessIOCardType.INPUT}
  37                                 process={false} // Treat as a main process, no requestingContainerUuid
  38                                 params={null}
  39                                 raw={{}}
  40                             />
  41                         </ThemeProvider>
  42                     </StyledEngineProvider>
  43                 </Provider>
  44                 );
  45
  46             // then
  47             cy.get('[data-cy=process-io-card]').within(() => {
  48                 cy.get('[data-cy=conditional-tab]').should('not.exist');
  49                 cy.get('[data-cy=process-io-circular-progress]').should('exist');
  50             });
  51
  52             // when
  53             cy.mount(
  54                 <Provider store={store}>
  55                     <StyledEngineProvider injectFirst>
  56                         <ThemeProvider theme={CustomTheme}>
  57                             <ProcessIOCard
  58                                 label={ProcessIOCardType.INPUT}
  59                                 process={false} // Treat as a main process, no requestingContainerUuid
  60                                 params={[]}
  61                                 raw={null}
  62                             />
  63                         </ThemeProvider>
  64                     </StyledEngineProvider>
  65                 </Provider>
  66                 );
  67
  68             // then
  69             cy.get('[data-cy=process-io-card]').within(() => {
  70                 cy.get('[data-cy=conditional-tab]').should('not.exist');
  71                 cy.get('[data-cy=process-io-circular-progress]').should('exist');
  72             });
  73         });
  74
  75         it('shows main process empty params and raw', () => {
  76             // when
  77             cy.mount(
  78                 <Provider store={store}>
  79                     <StyledEngineProvider injectFirst>
  80                         <ThemeProvider theme={CustomTheme}>
  81                             <ProcessIOCard
  82                                 label={ProcessIOCardType.INPUT}
  83                                 process={false} // Treat as a main process, no requestingContainerUuid
  84                                 params={[]}
  85                                 raw={{}}
  86                             />
  87                         </ThemeProvider>
  88                     </StyledEngineProvider>
  89                 </Provider>
  90                 );
  91
  92             // then
  93             cy.get('[data-cy=process-io-card]').within(() => {
  94                 cy.get('[data-cy=conditional-tab]').should('not.exist');
  95                 cy.get('[data-cy=process-io-circular-progress]').should('not.exist');
  96                 cy.get('[data-cy=default-view]').should('exist').within(() => {
  97                     cy.contains('No parameters found');
  98                 });
  99             });
 100         });
 101
 102         it('shows main process with raw', () => {
 103             // when
 104             const raw = {some: 'data'};
 105             cy.mount(
 106                 <Provider store={store}>
 107                     <StyledEngineProvider injectFirst>
 108                         <ThemeProvider theme={CustomTheme}>
 109                             <ProcessIOCard
 110                                 label={ProcessIOCardType.INPUT}
 111                                 process={false} // Treat as a main process, no requestingContainerUuid
 112                                 params={[]}
 113                                 raw={raw}
 114                             />
 115                         </ThemeProvider>
 116                     </StyledEngineProvider>
 117                 </Provider>
 118                 );
 119
 120             // then
 121             cy.get('[data-cy=process-io-card]').within(() => {
 122                 cy.get('[data-cy=conditional-tab]').should('exist');
 123                 cy.get('[data-cy=process-io-circular-progress]').should('not.exist');
 124                 cy.get('[data-cy=virtual-code-snippet]').should('exist').within(() => {
 125                     cy.contains(JSON.stringify(raw, null, 2).replace(/\n/g, ''));
 126                 });
 127             });
 128         });
 129
 130         it('shows main process with params', () => {
 131             // when
 132             const parameters = [{id: 'someId', label: 'someLabel', value: {display: 'someValue'}}];
 133             cy.mount(
 134                 <Provider store={store}>
 135                     <StyledEngineProvider injectFirst>
 136                         <ThemeProvider theme={CustomTheme}>
 137                             <ProcessIOCard
 138                                 label={ProcessIOCardType.INPUT}
 139                                 process={false} // Treat as a main process, no requestingContainerUuid
 140                                 params={parameters}
 141                                 raw={{}}
 142                             />
 143                         </ThemeProvider>
 144                     </StyledEngineProvider>
 145                 </Provider>
 146                 );
 147
 148             // then
 149             cy.get('[data-cy=process-io-card]').within(() => {
 150                 cy.get('[data-cy=process-io-circular-progress]').should('not.exist');
 151                 cy.get('[data-cy=conditional-tab]').should('have.length', 2); // Empty raw is shown if parameters are present
 152                 cy.get('tbody').should('exist').within(() => {
 153                     cy.contains('someId');
 154                     cy.contains('someLabel');
 155                     cy.contains('someValue');
 156                 });
 157             });
 158         });
 159
 160         it('shows main process with output collection', () => {
 161             // when
 162             const outputCollection = '987654321';
 163             const parameters = [{id: 'someId', label: 'someLabel', value: {display: 'someValue'}}];
 164
 165             cy.mount(
 166                 <Provider store={store}>
 167                     <StyledEngineProvider injectFirst>
 168                         <ThemeProvider theme={CustomTheme}>
 169                             <ProcessIOCard
 170                                 label={ProcessIOCardType.OUTPUT}
 171                                 process={false} // Treat as a main process, no requestingContainerUuid
 172                                 outputUuid={outputCollection}
 173                                 params={parameters}
 174                                 raw={{}}
 175                             />
 176                         </ThemeProvider>
 177                     </StyledEngineProvider>
 178                 </Provider>
 179                 );
 180
 181             // then
 182             cy.get('[data-cy=process-io-card]').within(() => {
 183                 cy.get('[data-cy=process-io-circular-progress]').should('not.exist');
 184                 cy.get('[data-cy=conditional-tab]').should('have.length', 3); // Empty raw is shown if parameters are present
 185                 cy.get('tbody').should('exist').within(() => {
 186                     cy.contains('someId');
 187                     cy.contains('someLabel');
 188                     cy.contains('someValue');
 189                 });
 190             });
 191
 192             // Visit output tab
 193             cy.get('[data-cy=conditional-tab]').contains('Collection').should('exist').click();
 194             cy.get('[data-cy=collection-files-panel]').should('exist');
 195             cy.get('[data-cy=output-uuid-display]').should('contain', outputCollection);
 196         });
 197
 198         // Subprocess
 199
 200         it('shows subprocess loading', () => {
 201             // when
 202             const subprocess = {containerRequest: {requestingContainerUuid: 'xyz'}};
 203             cy.mount(
 204                 <Provider store={store}>
 205                     <StyledEngineProvider injectFirst>
 206                         <ThemeProvider theme={CustomTheme}>
 207                             <ProcessIOCard
 208                                 label={ProcessIOCardType.INPUT}
 209                                 process={subprocess} // Treat as a subprocess without outputUuid
 210                                 params={null}
 211                                 raw={null}
 212                             />
 213                         </ThemeProvider>
 214                     </StyledEngineProvider>
 215                 </Provider>
 216                 );
 217
 218             // then
 219             cy.get('[data-cy=process-io-card]').within(() => {
 220                 cy.get('[data-cy=conditional-tab]').should('not.exist');
 221                 cy.get('[data-cy=subprocess-circular-progress]').should('exist');
 222             });
 223         });
 224
 225         it('shows subprocess mounts', () => {
 226             // when
 227             const subprocess = {containerRequest: {requestingContainerUuid: 'xyz'}};
 228             const sampleMount = {path: '/', pdh: 'abcdef12abcdef12abcdef12abcdef12+0'};
 229             cy.mount(
 230                 <Provider store={store}>
 231                     <MemoryRouter>
 232                         <StyledEngineProvider injectFirst>
 233                             <ThemeProvider theme={CustomTheme}>
 234                                 <ProcessIOCard
 235                                     label={ProcessIOCardType.INPUT}
 236                                     process={subprocess} // Treat as a subprocess without outputUuid
 237                                     params={null}
 238                                     raw={null}
 239                                     mounts={[sampleMount]}
 240                                 />
 241                             </ThemeProvider>
 242                         </StyledEngineProvider>
 243                     </MemoryRouter>
 244                 </Provider>
 245                 );
 246
 247             // then
 248             cy.get('[data-cy=process-io-card]').within(() => {
 249                 cy.get('[data-cy=subprocess-circular-progress]').should('not.exist');
 250                 cy.getAll('[data-cy=conditional-tab]').should('have.length', 1); // Empty raw is shown if parameters are present
 251                 cy.get('tbody').should('exist').within(() => {
 252                     cy.contains(sampleMount.pdh);
 253                 });
 254             });
 255         });
 256
 257         it('shows subprocess output collection', () => {
 258             // when
 259             const subprocess = {containerRequest: {requestingContainerUuid: 'xyz'}};
 260             const outputCollection = '123456789';
 261             cy.mount(
 262                 <Provider store={store}>
 263                     <StyledEngineProvider injectFirst>
 264                         <ThemeProvider theme={CustomTheme}>
 265                             <ProcessIOCard
 266                                 label={ProcessIOCardType.OUTPUT}
 267                                 process={subprocess} // Treat as a subprocess with outputUuid
 268                                 outputUuid={outputCollection}
 269                                 params={null}
 270                                 raw={null}
 271                             />
 272                         </ThemeProvider>
 273                     </StyledEngineProvider>
 274                 </Provider>
 275                 );
 276
 277             // then
 278             cy.get('[data-cy=process-io-card]').within(() => {
 279                 cy.get('[data-cy=process-io-circular-progress]').should('not.exist');
 280                 cy.get('[data-cy=conditional-tab]').should('have.length', 1); // Empty raw is shown if parameters are present
 281                 cy.get('[data-cy=output-uuid-display]').should('contain', outputCollection);
 282             });
 283         });
 284
 285         it('shows empty subprocess raw', () => {
 286             // when
 287             const subprocess = {containerRequest: {requestingContainerUuid: 'xyz'}};
 288             const outputCollection = '123456789';
 289             cy.mount(
 290                 <Provider store={store}>
 291                     <StyledEngineProvider injectFirst>
 292                         <ThemeProvider theme={CustomTheme}>
 293                             <ProcessIOCard
 294                                 label={ProcessIOCardType.OUTPUT}
 295                                 process={subprocess} // Treat as a subprocess with outputUuid
 296                                 outputUuid={outputCollection}
 297                                 params={null}
 298                                 raw={{}}
 299                             />
 300                         </ThemeProvider>
 301                     </StyledEngineProvider>
 302                 </Provider>
 303                 );
 304
 305             // then
 306             cy.get('[data-cy=process-io-card]').within(() => {
 307                 cy.get('[data-cy=process-io-circular-progress]').should('not.exist');
 308                 cy.get('[data-cy=conditional-tab]').should('have.length', 2); // Empty raw is shown if parameters are present
 309                 cy.get('[data-cy=conditional-tab]').eq(1).should('exist')
 310                 cy.get('[data-cy=output-uuid-display]').should('contain', outputCollection);
 311             });
 312         });
 313
 314     });
 315 });