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