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                         blue500: 'rgb(0, 0, 255)',
  33                         green700: 'rgb(0, 255, 0)',
  34                         yellow700: 'rgb(255, 255, 0)',
  35                         red900: 'rgb(255, 0, 0)',
  36                         grey500: 'rgb(128, 128, 128)',
  37                     }
  38                 }
  39             },
  40         };
  41
  42         [
  43             // CR Status ; Priority ; C Status ; Exit Code ; C RuntimeStatus ; Expected label ; Expected Color
  44             [CR.COMMITTED, 1, C.RUNNING, null, {}, PS.RUNNING, props.theme.customs.colors.blue500],
  45             [CR.COMMITTED, 1, C.RUNNING, null, {error: 'whoops'}, PS.FAILING, props.theme.customs.colors.red900],
  46             [CR.COMMITTED, 1, C.RUNNING, null, {warning: 'watch out!'}, PS.WARNING, props.theme.customs.colors.yellow700],
  47             [CR.FINAL, 1, C.CANCELLED, null, {}, PS.CANCELLED, props.theme.customs.colors.red900],
  48             [CR.FINAL, 1, C.COMPLETE, 137, {}, PS.FAILED, props.theme.customs.colors.red900],
  49             [CR.FINAL, 1, C.COMPLETE, 0, {}, PS.COMPLETED, props.theme.customs.colors.green700],
  50             [CR.COMMITTED, 0, C.LOCKED, null, {}, PS.ONHOLD, props.theme.customs.colors.grey500],
  51             [CR.COMMITTED, 0, C.QUEUED, null, {}, PS.ONHOLD, props.theme.customs.colors.grey500],
  52             [CR.COMMITTED, 1, C.LOCKED, null, {}, PS.QUEUED, props.theme.customs.colors.grey500],
  53             [CR.COMMITTED, 1, C.QUEUED, null, {}, PS.QUEUED, props.theme.customs.colors.grey500],
  54         ].forEach(([crState, crPrio, cState, exitCode, rs, eLabel, eColor]) => {
  55             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)}`, () => {
  56                 const containerUuid = 'zzzzz-dz642-zzzzzzzzzzzzzzz';
  57                 const store = mockStore({ resources: {
  58                     [props.uuid]: {
  59                         kind: ResourceKind.CONTAINER_REQUEST,
  60                         state: crState,
  61                         containerUuid: containerUuid,
  62                         priority: crPrio,
  63                     },
  64                     [containerUuid]: {
  65                         kind: ResourceKind.CONTAINER,
  66                         state: cState,
  67                         runtimeStatus: rs,
  68                         exitCode: exitCode,
  69                     },
  70                 }});
  71
  72                 const wrapper = mount(<Provider store={store}>
  73                         <ProcessStatus {...props} />
  74                     </Provider>);
  75
  76                 expect(wrapper.text()).toEqual(eLabel);
  77                 expect(getComputedStyle(wrapper.getDOMNode())
  78                     .getPropertyValue('color')).toEqual(eColor);
  79             });
  80         })
  81     });
  82
  83     describe('ResourceFileSize', () => {
  84         beforeEach(() => {
  85             props = {
  86                 uuid: 'UUID',
  87             };
  88         });
  89
  90         it('should render collection fileSizeTotal', () => {
  91             // given
  92             const store = mockStore({ resources: {
  93                 [props.uuid]: {
  94                     kind: ResourceKind.COLLECTION,
  95                     fileSizeTotal: 100,
  96                 }
  97             }});
  98
  99             // when
 100             const wrapper = mount(<Provider store={store}>
 101                 <ResourceFileSize {...props}></ResourceFileSize>
 102             </Provider>);
 103
 104             // then
 105             expect(wrapper.text()).toContain('100 B');
 106         });
 107
 108         it('should render 0 B as file size', () => {
 109             // given
 110             const store = mockStore({ resources: {} });
 111
 112             // when
 113             const wrapper = mount(<Provider store={store}>
 114                 <ResourceFileSize {...props}></ResourceFileSize>
 115             </Provider>);
 116
 117             // then
 118             expect(wrapper.text()).toContain('0 B');
 119         });
 120
 121         it('should render empty string for non collection resource', () => {
 122             // given
 123             const store1 = mockStore({ resources: {
 124                 [props.uuid]: {
 125                     kind: ResourceKind.PROJECT,
 126                 }
 127             }});
 128             const store2 = mockStore({ resources: {
 129                 [props.uuid]: {
 130                     kind: ResourceKind.PROJECT,
 131                 }
 132             }});
 133
 134             // when
 135             const wrapper1 = mount(<Provider store={store1}>
 136                 <ResourceFileSize {...props}></ResourceFileSize>
 137             </Provider>);
 138             const wrapper2 = mount(<Provider store={store2}>
 139                 <ResourceFileSize {...props}></ResourceFileSize>
 140             </Provider>);
 141
 142             // then
 143             expect(wrapper1.text()).toContain('');
 144             expect(wrapper2.text()).toContain('');
 145         });
 146     });
 147 });