Merge branch '21773-keep-service-discovery'
[arvados.git] / 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 { GroupMembersCount, 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 import { MuiThemeProvider } from '@material-ui/core';
16 import { CustomTheme } from 'common/custom-theme';
17 import { InlinePulser} from 'components/loading/inline-pulser';
18 import { ErrorIcon } from "components/icon/icon";
19
20 const middlewares = [];
21 const mockStore = configureMockStore(middlewares);
22
23 configure({ adapter: new Adapter() });
24
25 describe('renderers', () => {
26     let props: any = null;
27
28     describe('ProcessStatus', () => {
29         props = {
30             uuid: 'zzzzz-xvhdp-zzzzzzzzzzzzzzz',
31             theme: {
32                 customs: {
33                     colors: {
34                         // Color values are arbitrary, but they should be
35                         // representative of the colors used in the UI.
36                         green800: 'rgb(0, 255, 0)',
37                         red900: 'rgb(255, 0, 0)',
38                         orange: 'rgb(240, 173, 78)',
39                         grey600: 'rgb(128, 128, 128)',
40                     }
41                 },
42                 spacing: {
43                     unit: 8,
44                 },
45                 palette: {
46                     common: {
47                         white: 'rgb(255, 255, 255)',
48                     },
49                 },
50             },
51         };
52
53         [
54             // CR Status ; Priority ; C Status ; Exit Code ; C RuntimeStatus ; Expected label ; Expected bg color ; Expected fg color
55             [CR.COMMITTED, 1, C.RUNNING, null, {}, PS.RUNNING, props.theme.palette.common.white, props.theme.customs.colors.green800],
56             [CR.COMMITTED, 1, C.RUNNING, null, { error: 'whoops' }, PS.FAILING, props.theme.palette.common.white, props.theme.customs.colors.red900],
57             [CR.COMMITTED, 1, C.RUNNING, null, { warning: 'watch out!' }, PS.WARNING, props.theme.palette.common.white, props.theme.customs.colors.green800],
58             [CR.FINAL, 1, C.CANCELLED, null, {}, PS.CANCELLED, props.theme.customs.colors.red900, props.theme.palette.common.white],
59             [CR.FINAL, 1, C.COMPLETE, 137, {}, PS.FAILED, props.theme.customs.colors.red900, props.theme.palette.common.white],
60             [CR.FINAL, 1, C.COMPLETE, 0, {}, PS.COMPLETED, props.theme.customs.colors.green800, props.theme.palette.common.white],
61             [CR.COMMITTED, 0, C.LOCKED, null, {}, PS.ONHOLD, props.theme.customs.colors.grey600, props.theme.palette.common.white],
62             [CR.COMMITTED, 0, C.QUEUED, null, {}, PS.ONHOLD, props.theme.customs.colors.grey600, props.theme.palette.common.white],
63             [CR.COMMITTED, 1, C.LOCKED, null, {}, PS.QUEUED, props.theme.palette.common.white, props.theme.customs.colors.grey600],
64             [CR.COMMITTED, 1, C.QUEUED, null, {}, PS.QUEUED, props.theme.palette.common.white, props.theme.customs.colors.grey600],
65         ].forEach(([crState, crPrio, cState, exitCode, rs, eLabel, eColor, tColor]) => {
66             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)}`, () => {
67                 const containerUuid = 'zzzzz-dz642-zzzzzzzzzzzzzzz';
68                 const store = mockStore({
69                     resources: {
70                         [props.uuid]: {
71                             kind: ResourceKind.CONTAINER_REQUEST,
72                             state: crState,
73                             containerUuid: containerUuid,
74                             priority: crPrio,
75                         },
76                         [containerUuid]: {
77                             kind: ResourceKind.CONTAINER,
78                             state: cState,
79                             runtimeStatus: rs,
80                             exitCode: exitCode,
81                         },
82                     }
83                 });
84
85                 const wrapper = mount(<Provider store={store}>
86                     <ProcessStatus {...props} />
87                 </Provider>);
88
89                 expect(wrapper.text()).toEqual(eLabel);
90                 expect(getComputedStyle(wrapper.getDOMNode())
91                     .getPropertyValue('color')).toEqual(tColor);
92                 expect(getComputedStyle(wrapper.getDOMNode())
93                     .getPropertyValue('background-color')).toEqual(eColor);
94             });
95         })
96     });
97
98     describe('ResourceFileSize', () => {
99         beforeEach(() => {
100             props = {
101                 uuid: 'UUID',
102             };
103         });
104
105         it('should render collection fileSizeTotal', () => {
106             // given
107             const store = mockStore({
108                 resources: {
109                     [props.uuid]: {
110                         kind: ResourceKind.COLLECTION,
111                         fileSizeTotal: 100,
112                     }
113                 }
114             });
115
116             // when
117             const wrapper = mount(<Provider store={store}>
118                 <ResourceFileSize {...props}></ResourceFileSize>
119             </Provider>);
120
121             // then
122             expect(wrapper.text()).toContain('100 B');
123         });
124
125         it('should render 0 B as file size', () => {
126             // given
127             const store = mockStore({ resources: {} });
128
129             // when
130             const wrapper = mount(<Provider store={store}>
131                 <ResourceFileSize {...props}></ResourceFileSize>
132             </Provider>);
133
134             // then
135             expect(wrapper.text()).toContain('0 B');
136         });
137
138         it('should render empty string for non collection resource', () => {
139             // given
140             const store1 = mockStore({
141                 resources: {
142                     [props.uuid]: {
143                         kind: ResourceKind.PROJECT,
144                     }
145                 }
146             });
147             const store2 = mockStore({
148                 resources: {
149                     [props.uuid]: {
150                         kind: ResourceKind.PROJECT,
151                     }
152                 }
153             });
154
155             // when
156             const wrapper1 = mount(<Provider store={store1}>
157                 <ResourceFileSize {...props}></ResourceFileSize>
158             </Provider>);
159             const wrapper2 = mount(<Provider store={store2}>
160                 <ResourceFileSize {...props}></ResourceFileSize>
161             </Provider>);
162
163             // then
164             expect(wrapper1.text()).toContain('');
165             expect(wrapper2.text()).toContain('');
166         });
167     });
168
169     describe('GroupMembersCount', () => {
170         let fakeGroup;
171         beforeEach(() => {
172             props = {
173                 uuid: 'zzzzz-j7d0g-000000000000000',
174             };
175             fakeGroup = {
176                 "canManage": true,
177                 "canWrite": true,
178                 "createdAt": "2020-09-24T22:52:57.546521000Z",
179                 "deleteAt": null,
180                 "description": "Test Group",
181                 "etag": "0000000000000000000000000",
182                 "frozenByUuid": null,
183                 "groupClass": "role",
184                 "href": `/groups/${props.uuid}`,
185                 "isTrashed": false,
186                 "kind": ResourceKind.GROUP,
187                 "modifiedAt": "2020-09-24T22:52:57.545669000Z",
188                 "modifiedByUserUuid": "zzzzz-tpzed-000000000000000",
189                 "name": "System group",
190                 "ownerUuid": "zzzzz-tpzed-000000000000000",
191                 "properties": {},
192                 "trashAt": null,
193                 "uuid": props.uuid,
194                 "writableBy": [
195                     "zzzzz-tpzed-000000000000000",
196                 ]
197             };
198         });
199
200         it('shows loading group count when no memberCount', () => {
201             // Given
202             const store = mockStore({resources: {
203                 [props.uuid]: fakeGroup,
204             }});
205
206             const wrapper = mount(<Provider store={store}>
207                 <MuiThemeProvider theme={CustomTheme}>
208                     <GroupMembersCount {...props} />
209                 </MuiThemeProvider>
210             </Provider>);
211
212             expect(wrapper.find(InlinePulser)).toHaveLength(1);
213         });
214
215         it('shows group count when memberCount present', () => {
216             // Given
217             const store = mockStore({resources: {
218                 [props.uuid]: {
219                     ...fakeGroup,
220                     "memberCount": 765,
221                 }
222             }});
223
224             const wrapper = mount(<Provider store={store}>
225                 <MuiThemeProvider theme={CustomTheme}>
226                     <GroupMembersCount {...props} />
227                 </MuiThemeProvider>
228             </Provider>);
229
230             expect(wrapper.text()).toBe("765");
231         });
232
233         it('shows group count error icon when memberCount is null', () => {
234             // Given
235             const store = mockStore({resources: {
236                 [props.uuid]: {
237                     ...fakeGroup,
238                     "memberCount": null,
239                 }
240             }});
241
242             const wrapper = mount(<Provider store={store}>
243                 <MuiThemeProvider theme={CustomTheme}>
244                     <GroupMembersCount {...props} />
245                 </MuiThemeProvider>
246             </Provider>);
247
248             expect(wrapper.find(ErrorIcon)).toHaveLength(1);
249         });
250
251     });
252
253 });