1/*
2 * Copyright (C) 2022 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16import { LitChartPie } from '../../../../src/base-ui/chart/pie/LitChartPie';
17import { Utils } from '../../../../src/trace/component/trace/base/Utils';
18const LitChartPieData = require('../../../../src/base-ui/chart/pie/LitChartPieData');
19jest.mock('../../../../src/base-ui/chart/pie/LitChartPieData');
20
21const scrollHeight = 8000;
22const clientHeight = 1000;
23const clientWidth = 1000;
24
25const fakeWindow = {
26  scrollTop: 0,
27};
28beforeAll(() => {
29  jest.spyOn(document.documentElement, 'scrollHeight', 'get').mockImplementation(() => scrollHeight);
30  jest.spyOn(document.documentElement, 'clientHeight', 'get').mockImplementation(() => clientHeight);
31  jest.spyOn(document.documentElement, 'clientWidth', 'get').mockImplementation(() => clientWidth);
32  jest.spyOn(document.documentElement, 'scrollTop', 'get').mockImplementation(() => fakeWindow.scrollTop);
33});
34
35window.ResizeObserver =
36  window.ResizeObserver ||
37  jest.fn().mockImplementation(() => ({
38    disconnect: jest.fn(),
39    observe: jest.fn(),
40    unobserve: jest.fn(),
41  }));
42
43describe('litChartPie Test', () => {
44  it('litChartPieTest01', function () {
45    let litChartPie = new LitChartPie();
46    expect(litChartPie).not.toBeUndefined();
47  });
48
49  it('litChartPieTest03', function () {
50    Utils.uuid = jest.fn(() => {
51      return Math.floor(Math.random() * 10 + 1);
52    });
53    LitChartPieData.isPointIsCircle = jest.fn().mockResolvedValue(true);
54    document.body.innerHTML = ` <div><lit-chart-pie id='chart-pie'></lit-chart-pie></div> `;
55    let clo = document.getElementById('chart-pie') as LitChartPie;
56    clo.config = {
57      appendPadding: 20,
58      data: [
59        {
60          cpu: 1,
61          value: 345021,
62          sum: 2111136,
63          sumTimeStr: '233.99ms ',
64          min: '32.12μs ',
65          max: '3.47ms ',
66          avg: '1.19ms ',
67          count: 238,
68          ratio: '33.46',
69        },
70        {
71          cpu: 1,
72          value: 1100000,
73          sum: 111649487,
74          sumTimeStr: '113.65ms ',
75          min: '9.90μs ',
76          max: '14.07ms ',
77          avg: '697.24μs ',
78          count: 113,
79          ratio: '19.66',
80        },
81        {
82          cpu: 1,
83          value: 1411000,
84          sum: 1005403,
85          sumTimeStr: '100.75ms ',
86          min: '32.81μs ',
87          max: '25.12ms ',
88          avg: '3.73ms ',
89          count: 17,
90          ratio: '17.43',
91        },
92        {
93          cpu: 1,
94          value: 884100,
95          sum: 66958331,
96          sumTimeStr: '66.96ms ',
97          min: '16.82ms ',
98          max: '27.30ms ',
99          avg: '22.32ms ',
100          count: 31,
101          ratio: '11.58',
102        },
103        {
104          cpu: 1,
105          value: 960001,
106          sum: 6223411,
107          sumTimeStr: '62.21ms ',
108          min: '93.23μs ',
109          max: '20.34ms ',
110          avg: '6.91ms ',
111          count: 91,
112          ratio: '10.76',
113        },
114        {
115          cpu: 1,
116          value: 1517001,
117          sum: 2131,
118          sumTimeStr: '21.87ms ',
119          min: '9.90μs ',
120          max: '8.28ms ',
121          avg: '1.21ms ',
122          count: 181,
123          ratio: '3.78',
124        },
125        {
126          cpu: 1,
127          value: 1632,
128          sum: 637321,
129          sumTimeStr: '6.37ms ',
130          min: '33.85μs ',
131          max: '2.80ms ',
132          avg: '531.08μs ',
133          count: 121,
134          ratio: '21.10',
135        },
136        {
137          cpu: 1,
138          value: 103201,
139          sum: 13261,
140          sumTimeStr: '31.14ms ',
141          min: '25.00μs ',
142          max: '1.12ms ',
143          avg: '570.83μs ',
144          count: 21,
145          ratio: '0.20',
146        },
147        {
148          cpu: 1,
149          value: 12321,
150          sum: 91661,
151          sumTimeStr: '91.67μs ',
152          min: '3.67μs ',
153          max: '65.67μs ',
154          avg: '32.67μs ',
155          count: 11,
156          ratio: '0.02',
157        },
158        {
159          cpu: 1,
160          value: 113201,
161          sum: 76041,
162          sumTimeStr: '76.04μs ',
163          min: '23.04μs ',
164          max: '56.04μs ',
165          avg: '32.04μs ',
166          count: 11,
167          ratio: '0.01',
168        },
169      ],
170      angleField: 'sum',
171      colorField: 'value',
172      radius: -10,
173      label: {
174        type: 'outer',
175      },
176
177      tip: (test: any) => {
178        return `<div>
179                                <div>frequency:${test.obj.value}</div> 
180                                <div>min:${test.obj.min}</div>
181                                <div>max:${test.obj.max}</div>
182                                <div>average:${test.obj.avg}</div>
183                                <div>duration:${test.obj.sumTimeStr}</div>
184                                <div>ratio:${test.obj.ratio}%</div>
185                            </div>
186                                `;
187      },
188      angleClick: () => {},
189      interactions: [
190        {
191          type: 'element-active',
192        },
193      ],
194    };
195    let mouseOutEvent: MouseEvent = new MouseEvent('mouseout', <MouseEventInit>{ movementX: 1, movementY: 3 });
196    clo.canvas.dispatchEvent(mouseOutEvent);
197    expect(clo.config).not.toBeUndefined();
198  });
199
200  it('litChartPieTest04', function () {
201    Utils.uuid = jest.fn(() => {
202      return Math.floor(Math.random() * 10 + 1);
203    });
204    LitChartPieData.isPointIsCircle = jest.fn().mockResolvedValue(false);
205    document.body.innerHTML = `
206        <div>
207            <lit-chart-pie id='chart-pie'></lit-chart-pie>
208        </div> `;
209    let clo = document.getElementById('chart-pie') as LitChartPie;
210    clo.config = {
211      appendPadding: 3,
212      data: [
213        {
214          cpu: 4,
215          value: 1325300,
216          sum: 204992136,
217          sumTimeStr: '204.99ms ',
218          min: '12.92μs ',
219          max: '38.37ms ',
220          avg: '2.09ms ',
221          count: 188,
222          ratio: '35.46',
223        },
224        {
225          cpu: 1,
226          value: 1200000,
227          sum: 112649487,
228          sumTimeStr: '113.65ms ',
229          min: '9.90μs ',
230          max: '14.07ms ',
231          avg: '697.24μs ',
232          count: 123,
233          ratio: '19.66',
234        },
235        {
236          cpu: 1,
237          value: 1421002,
238          sum: 100750002,
239          sumTimeStr: '100.75ms ',
240          min: '32.81μs ',
241          max: '25.12ms ',
242          avg: '3.73ms ',
243          count: 22,
244          ratio: '17.43',
245        },
246        {
247          cpu: 1,
248          value: 884002,
249          sum: 66958332,
250          sumTimeStr: '66.96ms ',
251          min: '16.82ms ',
252          max: '27.30ms ',
253          avg: '22.32ms ',
254          count: 32,
255          ratio: '11.58',
256        },
257        {
258          cpu: 1,
259          value: 960020,
260          sum: 62210426,
261          sumTimeStr: '62.21ms ',
262          min: '93.23μs ',
263          max: '20.34ms ',
264          avg: '6.91ms ',
265          count: 29,
266          ratio: '10.76',
267        },
268        {
269          cpu: 1,
270          value: 1517020,
271          sum: 21867712,
272          sumTimeStr: '21.87ms ',
273          min: '9.90μs ',
274          max: '8.28ms ',
275          avg: '1.21ms ',
276          count: 28,
277          ratio: '3.78',
278        },
279        {
280          cpu: 1,
281          value: 1602000,
282          sum: 6372217,
283          sumTimeStr: '6.37ms ',
284          min: '33.85μs ',
285          max: '2.80ms ',
286          avg: '531.08μs ',
287          count: 212,
288          ratio: '1.10',
289        },
290        {
291          cpu: 1,
292          value: 1037002,
293          sum: 1141627,
294          sumTimeStr: '1.14ms ',
295          min: '25.00μs ',
296          max: '1.12ms ',
297          avg: '570.83μs ',
298          count: 22,
299          ratio: '0.20',
300        },
301        {
302          cpu: 1,
303          value: 1229200,
304          sum: 91662,
305          sumTimeStr: '91.67μs ',
306          min: '91.67μs ',
307          max: '91.67μs ',
308          avg: '91.67μs ',
309          count: 21,
310          ratio: '0.02',
311        },
312        {
313          cpu: 1,
314          value: 12100,
315          sum: 7122,
316          sumTimeStr: '76.04μs ',
317          min: '71.04μs ',
318          max: '79.04μs ',
319          avg: '98.04μs ',
320          count: 12,
321          ratio: '0.01',
322        },
323      ],
324      label: {
325        type: 'outer',
326      },
327      angleField: 'sum',
328      colorField: 'value',
329      radius: 22,
330      tip: (testObj: any) => {
331        return `<div>
332                                <div>frequency:${testObj.obj.value}</div> 
333                                <div>min:${testObj.obj.min}</div>
334                                <div>max:${testObj.obj.max}</div>
335                                <div>average:${testObj.obj.avg}</div>
336                                <div>duration:${testObj.obj.sumTimeStr}</div>
337                                <div>ratio:${testObj.obj.ratio}%</div>
338                            </div>
339                                `;
340      },
341      interactions: [
342        {
343          type: 'active',
344        },
345      ],
346      angleClick: () => {},
347    };
348    let mouseOutEvent: MouseEvent = new MouseEvent('mouseout', <MouseEventInit>{ movementX: 1, movementY: 4 });
349    clo.canvas.dispatchEvent(mouseOutEvent);
350    expect(clo.config).not.toBeUndefined();
351  });
352
353  it('litChartPieTest05', function () {
354    Utils.uuid = jest.fn(() => {
355      return Math.floor(Math.random() * 10 + 1);
356    });
357    LitChartPieData.isPointIsCircle = jest.fn().mockResolvedValue(true);
358    document.body.innerHTML = `
359        <div  width="100px" height="100px">
360            <lit-chart-pie style='width:100px height:100px' width="100px" height="100px" id='chart-pie'></lit-chart-pie>
361        </div> `;
362    let clo = document.getElementById('chart-pie') as LitChartPie;
363    jest.spyOn(clo, 'clientHeight', 'get').mockImplementation(() => clientHeight);
364    jest.spyOn(clo, 'clientWidth', 'get').mockImplementation(() => clientWidth);
365    clo.config = {
366      appendPadding: 0,
367      showChartLine: true,
368      data: [
369        {
370          cpu: 1,
371          value: 1335000,
372          sum: 234991136,
373          sumTimeStr: '204.99ms ',
374          min: '22.92μs ',
375          max: '28.37ms ',
376          avg: '1.09ms ',
377          count: 388,
378          ratio: '35.46',
379        },
380        {
381          cpu: 1,
382          value: 1730000,
383          sum: 113349487,
384          sumTimeStr: '113.65ms ',
385          min: '9.90μs ',
386          max: '14.07ms ',
387          avg: '697.24μs ',
388          count: 133,
389          ratio: '19.66',
390        },
391        {
392          cpu: 1,
393          value: 1421003,
394          sum: 100750003,
395          sumTimeStr: '100.75ms ',
396          min: '32.81μs ',
397          max: '25.12ms ',
398          avg: '3.73ms ',
399          count: 23,
400          ratio: '17.43',
401        },
402        {
403          cpu: 1,
404          value: 884300,
405          sum: 66958334,
406          sumTimeStr: '66.96ms ',
407          min: '16.82ms ',
408          max: '27.30ms ',
409          avg: '22.32ms ',
410          count: 33,
411          ratio: '11.58',
412        },
413        {
414          cpu: 1,
415          value: 960003,
416          sum: 62213416,
417          sumTimeStr: '62.21ms ',
418          min: '93.23μs ',
419          max: '20.34ms ',
420          avg: '6.91ms ',
421          count: 93,
422          ratio: '10.76',
423        },
424        {
425          cpu: 1,
426          value: 1517300,
427          sum: 214012,
428          sumTimeStr: '21.87ms ',
429          min: '9.90μs ',
430          max: '8.28ms ',
431          avg: '1.21ms ',
432          count: 38,
433          ratio: '3.78',
434        },
435        {
436          cpu: 1,
437          value: 1604003,
438          sum: 6372917,
439          sumTimeStr: '6.37ms ',
440          min: '33.85μs ',
441          max: '2.80ms ',
442          avg: '531.08μs ',
443          count: 13,
444          ratio: '1.10',
445        },
446        {
447          cpu: 1,
448          value: 1037003,
449          sum: 1141637,
450          sumTimeStr: '1.14ms ',
451          min: '25.00μs ',
452          max: '1.12ms ',
453          avg: '570.83μs ',
454          count: 23,
455          ratio: '0.20',
456        },
457        {
458          cpu: 1,
459          value: 1229300,
460          sum: 91637,
461          sumTimeStr: '91.67μs ',
462          min: '91.67μs ',
463          max: '91.67μs ',
464          avg: '91.67μs ',
465          count: 31,
466          ratio: '0.02',
467        },
468        {
469          cpu: 1,
470          value: 1133300,
471          sum: 76342,
472          sumTimeStr: '76.04μs ',
473          min: '78.04μs ',
474          max: '76.04μs ',
475          avg: '732.04μs ',
476          count: 13,
477          ratio: '0.01',
478        },
479      ],
480      tip: (obj: any) => {
481        return `<div>
482                                <div>frequency:${obj.obj.value}</div> 
483                                <div>min:${obj.obj.min}</div>
484                                <div>max:${obj.obj.max}</div>
485                                <div>average:${obj.obj.avg}</div>
486                                <div>duration:${obj.obj.sumTimeStr}</div>
487                                <div>ratio:${obj.obj.ratio}%</div>
488                            </div>
489                                `;
490      },
491      angleField: 'summary',
492      colorField: 'value',
493      radius: 32,
494      label: {
495        type: 'outer',
496      },
497      angleClick: () => {},
498      interactions: [
499        {
500          type: 'element-active',
501        },
502      ],
503    };
504    let mouseOutEvent: MouseEvent = new MouseEvent('mousemove', <MouseEventInit>{ movementX: 1, movementY: 5 });
505    clo.canvas.dispatchEvent(mouseOutEvent);
506    expect(clo.config).not.toBeUndefined();
507    clo.dataSource = [
508      {
509        cpu: 1,
510        value: 1345000,
511        sum: 244991136,
512        sumTimeStr: '204.99ms ',
513        min: '22.92μs ',
514        max: '28.37ms ',
515        avg: '1.09ms ',
516        count: 488,
517        ratio: '35.46',
518      },
519      {
520        cpu: 1,
521        value: 1740000,
522        sum: 114649487,
523        sumTimeStr: '113.65ms ',
524        min: '9.90μs ',
525        max: '14.07ms ',
526        avg: '697.24μs ',
527        count: 463,
528        ratio: '19.66',
529      },
530    ];
531    clo.centerX = 10;
532    clo.centerY = 10;
533
534    let mouseMoveEvent: MouseEvent = new MouseEvent('click', <MouseEventInit>{ movementX: 1, movementY: 2 });
535    clo.canvas.dispatchEvent(mouseMoveEvent);
536  });
537  it('litChartPieTest06', function () {
538    let litChartPie = new LitChartPie();
539    litChartPie.pieTipEL = jest.fn(() => true);
540    litChartPie.pieTipEL.style = jest.fn(() => true);
541    expect(litChartPie.showTip(1, 4, 'ab')).toBeUndefined();
542  });
543});
544