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                         orange: 'rgb(240, 173, 78)',
  37                         grey500: 'rgb(128, 128, 128)',
  38                     }
  39                 },
  40                 spacing: {
  41                     unit: 8,
  42                 },
  43                 palette: {
  44                     common: {
  45                         white: 'rgb(255, 255, 255)',
  46                     },
  47                 },
  48             },
  49         };
  50
  51         [
  52             // CR Status ; Priority ; C Status ; Exit Code ; C RuntimeStatus ; Expected label ; Expected Color
  53             [CR.COMMITTED, 1, C.RUNNING, null, {}, PS.RUNNING, props.theme.customs.colors.blue500],
  54             [CR.COMMITTED, 1, C.RUNNING, null, {error: 'whoops'}, PS.FAILING, props.theme.customs.colors.orange],
  55             [CR.COMMITTED, 1, C.RUNNING, null, {warning: 'watch out!'}, PS.WARNING, props.theme.customs.colors.yellow700],
  56             [CR.FINAL, 1, C.CANCELLED, null, {}, PS.CANCELLED, props.theme.customs.colors.red900],
  57             [CR.FINAL, 1, C.COMPLETE, 137, {}, PS.FAILED, props.theme.customs.colors.red900],
  58             [CR.FINAL, 1, C.COMPLETE, 0, {}, PS.COMPLETED, props.theme.customs.colors.green700],
  59             [CR.COMMITTED, 0, C.LOCKED, null, {}, PS.ONHOLD, props.theme.customs.colors.grey500],
  60             [CR.COMMITTED, 0, C.QUEUED, null, {}, PS.ONHOLD, props.theme.customs.colors.grey500],
  61             [CR.COMMITTED, 1, C.LOCKED, null, {}, PS.QUEUED, props.theme.customs.colors.grey500],
  62             [CR.COMMITTED, 1, C.QUEUED, null, {}, PS.QUEUED, props.theme.customs.colors.grey500],
  63         ].forEach(([crState, crPrio, cState, exitCode, rs, eLabel, eColor]) => {
  64             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)}`, () => {
  65                 const containerUuid = 'zzzzz-dz642-zzzzzzzzzzzzzzz';
  66                 const store = mockStore({ resources: {
  67                     [props.uuid]: {
  68                         kind: ResourceKind.CONTAINER_REQUEST,
  69                         state: crState,
  70                         containerUuid: containerUuid,
  71                         priority: crPrio,
  72                     },
  73                     [containerUuid]: {
  74                         kind: ResourceKind.CONTAINER,
  75                         state: cState,
  76                         runtimeStatus: rs,
  77                         exitCode: exitCode,
  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(props.theme.palette.common.white);
  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({ resources: {
 104                 [props.uuid]: {
 105                     kind: ResourceKind.COLLECTION,
 106                     fileSizeTotal: 100,
 107                 }
 108             }});
 109
 110             // when
 111             const wrapper = mount(<Provider store={store}>
 112                 <ResourceFileSize {...props}></ResourceFileSize>
 113             </Provider>);
 114
 115             // then
 116             expect(wrapper.text()).toContain('100 B');
 117         });
 118
 119         it('should render 0 B as file size', () => {
 120             // given
 121             const store = mockStore({ resources: {} });
 122
 123             // when
 124             const wrapper = mount(<Provider store={store}>
 125                 <ResourceFileSize {...props}></ResourceFileSize>
 126             </Provider>);
 127
 128             // then
 129             expect(wrapper.text()).toContain('0 B');
 130         });
 131
 132         it('should render empty string for non collection resource', () => {
 133             // given
 134             const store1 = mockStore({ resources: {
 135                 [props.uuid]: {
 136                     kind: ResourceKind.PROJECT,
 137                 }
 138             }});
 139             const store2 = mockStore({ resources: {
 140                 [props.uuid]: {
 141                     kind: ResourceKind.PROJECT,
 142                 }
 143             }});
 144
 145             // when
 146             const wrapper1 = mount(<Provider store={store1}>
 147                 <ResourceFileSize {...props}></ResourceFileSize>
 148             </Provider>);
 149             const wrapper2 = mount(<Provider store={store2}>
 150                 <ResourceFileSize {...props}></ResourceFileSize>
 151             </Provider>);
 152
 153             // then
 154             expect(wrapper1.text()).toContain('');
 155             expect(wrapper2.text()).toContain('');
 156         });
 157     });
 158 });