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