services/workbench2/src/views-components/data-explorer/renderers.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 { ProcessStatus, ResourceFileSize } from './renderers';
   8 import Adapter from "enzyme-adapter-react-16";
   9 import { Provider } from 'react-redux';
  10 import configureMockStore from 'redux-mock-store'
  11 import { ResourceKind } from '../../models/resource';
  12 import { ContainerRequestState as CR } from '../../models/container-request';
  13 import { ContainerState as C } from '../../models/container';
  14 import { ProcessStatus as PS } from '../../store/processes/process';
  15
  16 const middlewares = [];
  17 const mockStore = configureMockStore(middlewares);
  18
  19 configure({ adapter: new Adapter() });
  20
  21 describe('renderers', () => {
  22     let props = null;
  23
  24     describe('ProcessStatus', () => {
  25         props = {
  26             uuid: 'zzzzz-xvhdp-zzzzzzzzzzzzzzz',
  27             theme: {
  28                 customs: {
  29                     colors: {
  30                         // Color values are arbitrary, but they should be
  31                         // representative of the colors used in the UI.
  32                         green800: 'rgb(0, 255, 0)',
  33                         red900: 'rgb(255, 0, 0)',
  34                         orange: 'rgb(240, 173, 78)',
  35                         grey600: 'rgb(128, 128, 128)',
  36                     }
  37                 },
  38                 spacing: {
  39                     unit: 8,
  40                 },
  41                 palette: {
  42                     common: {
  43                         white: 'rgb(255, 255, 255)',
  44                     },
  45                 },
  46             },
  47         };
  48
  49         [
  50             // CR Status ; Priority ; C Status ; Exit Code ; C RuntimeStatus ; Expected label ; Expected bg color ; Expected fg color
  51             [CR.COMMITTED, 1, C.RUNNING, null, {}, PS.RUNNING, props.theme.palette.common.white, props.theme.customs.colors.green800],
  52             [CR.COMMITTED, 1, C.RUNNING, null, { error: 'whoops' }, PS.FAILING, props.theme.palette.common.white, props.theme.customs.colors.red900],
  53             [CR.COMMITTED, 1, C.RUNNING, null, { warning: 'watch out!' }, PS.WARNING, props.theme.palette.common.white, props.theme.customs.colors.green800],
  54             [CR.FINAL, 1, C.CANCELLED, null, {}, PS.CANCELLED, props.theme.customs.colors.red900, props.theme.palette.common.white],
  55             [CR.FINAL, 1, C.COMPLETE, 137, {}, PS.FAILED, props.theme.customs.colors.red900, props.theme.palette.common.white],
  56             [CR.FINAL, 1, C.COMPLETE, 0, {}, PS.COMPLETED, props.theme.customs.colors.green800, props.theme.palette.common.white],
  57             [CR.COMMITTED, 0, C.LOCKED, null, {}, PS.ONHOLD, props.theme.customs.colors.grey600, props.theme.palette.common.white],
  58             [CR.COMMITTED, 0, C.QUEUED, null, {}, PS.ONHOLD, props.theme.customs.colors.grey600, props.theme.palette.common.white],
  59             [CR.COMMITTED, 1, C.LOCKED, null, {}, PS.QUEUED, props.theme.palette.common.white, props.theme.customs.colors.grey600],
  60             [CR.COMMITTED, 1, C.QUEUED, null, {}, PS.QUEUED, props.theme.palette.common.white, props.theme.customs.colors.grey600],
  61         ].forEach(([crState, crPrio, cState, exitCode, rs, eLabel, eColor, tColor]) => {
  62             it(`should render the state label '${eLabel}' and color '${eColor}' for CR state=${crState}, priority=${crPrio}, C state=${cState}, exitCode=${exitCode} and RuntimeStatus=${JSON.stringify(rs)}`, () => {
  63                 const containerUuid = 'zzzzz-dz642-zzzzzzzzzzzzzzz';
  64                 const store = mockStore({
  65                     resources: {
  66                         [props.uuid]: {
  67                             kind: ResourceKind.CONTAINER_REQUEST,
  68                             state: crState,
  69                             containerUuid: containerUuid,
  70                             priority: crPrio,
  71                         },
  72                         [containerUuid]: {
  73                             kind: ResourceKind.CONTAINER,
  74                             state: cState,
  75                             runtimeStatus: rs,
  76                             exitCode: exitCode,
  77                         },
  78                     }
  79                 });
  80
  81                 const wrapper = mount(<Provider store={store}>
  82                     <ProcessStatus {...props} />
  83                 </Provider>);
  84
  85                 expect(wrapper.text()).toEqual(eLabel);
  86                 expect(getComputedStyle(wrapper.getDOMNode())
  87                     .getPropertyValue('color')).toEqual(tColor);
  88                 expect(getComputedStyle(wrapper.getDOMNode())
  89                     .getPropertyValue('background-color')).toEqual(eColor);
  90             });
  91         })
  92     });
  93
  94     describe('ResourceFileSize', () => {
  95         beforeEach(() => {
  96             props = {
  97                 uuid: 'UUID',
  98             };
  99         });
 100
 101         it('should render collection fileSizeTotal', () => {
 102             // given
 103             const store = mockStore({
 104                 resources: {
 105                     [props.uuid]: {
 106                         kind: ResourceKind.COLLECTION,
 107                         fileSizeTotal: 100,
 108                     }
 109                 }
 110             });
 111
 112             // when
 113             const wrapper = mount(<Provider store={store}>
 114                 <ResourceFileSize {...props}></ResourceFileSize>
 115             </Provider>);
 116
 117             // then
 118             expect(wrapper.text()).toContain('100 B');
 119         });
 120
 121         it('should render 0 B as file size', () => {
 122             // given
 123             const store = mockStore({ resources: {} });
 124
 125             // when
 126             const wrapper = mount(<Provider store={store}>
 127                 <ResourceFileSize {...props}></ResourceFileSize>
 128             </Provider>);
 129
 130             // then
 131             expect(wrapper.text()).toContain('0 B');
 132         });
 133
 134         it('should render empty string for non collection resource', () => {
 135             // given
 136             const store1 = mockStore({
 137                 resources: {
 138                     [props.uuid]: {
 139                         kind: ResourceKind.PROJECT,
 140                     }
 141                 }
 142             });
 143             const store2 = mockStore({
 144                 resources: {
 145                     [props.uuid]: {
 146                         kind: ResourceKind.PROJECT,
 147                     }
 148                 }
 149             });
 150
 151             // when
 152             const wrapper1 = mount(<Provider store={store1}>
 153                 <ResourceFileSize {...props}></ResourceFileSize>
 154             </Provider>);
 155             const wrapper2 = mount(<Provider store={store2}>
 156                 <ResourceFileSize {...props}></ResourceFileSize>
 157             </Provider>);
 158
 159             // then
 160             expect(wrapper1.text()).toContain('');
 161             expect(wrapper2.text()).toContain('');
 162         });
 163     });
 164 });