@testomatio/reporter 1.2.2 → 1.2.3-beta-batch-upload

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/lib/fileUploader.js +1 -7
  2. package/lib/pipe/html.js +45 -82
  3. package/lib/pipe/testomatio.js +49 -18
  4. package/lib/template/template-draft.hbs +249 -0
  5. package/lib/template/testomatio.hbs +337 -1185
  6. package/lib/utils/pipe_utils.js +0 -1
  7. package/lib/xmlReader.js +4 -0
  8. package/package.json +1 -1
package/lib/template/testomatio.hbs CHANGED
@@ -1,6 +1,5 @@
1
- <!DOCTYPE html>
2
1
  <html lang='en'>
3
- <head>
2
+ <head>
4
3
  <meta charset='UTF-8' />
5
4
  <meta
6
5
  name='viewport'
@@ -26,1211 +25,364 @@
26
25
  <title>Report Testomat.io</title>
27
26
  {{/if}}
28
27
  <style>
29
- body {
30
- padding: 0;
31
- margin: 0;
32
- }
33
-
34
- header,
35
- div,
36
- p,
37
- form,
38
- input,
39
- a,
40
- span,
41
- button {
42
- box-sizing: border-box;
43
- }
44
- img {
45
- width: 100%;
46
- display: block;
47
- max-width: 100%;
48
- height: auto;
49
- }
50
- p, span {
51
- font-weight: 400;
52
- font-size: 14px;
53
- color: grey;
54
- margin: 0;
55
- }
56
- .report {
57
- padding-top: 15px;
58
- }
59
- .level_1 {
60
- margin-bottom: 20px;
61
- border-bottom: 1px solid grey;
62
- padding-bottom: 10px;
63
- }
64
- .header {
65
- display: flex;
66
- justify-content: space-between;
67
- align-items: center;
68
- }
69
- .header__point {
70
- width: 8px;
71
- height: 8px;
72
- border-radius: 50%;
73
- margin-right: 15px;
74
- }
75
- .header__point_red {
76
- background: red;
77
- }
78
- .header__block {
79
- display: flex;
80
- align-items: center;
81
- }
82
- .header__case {
83
- display: flex;
84
- align-items: center;
85
- margin-right: 15px;
86
- }
87
- .header__case p {
88
- margin-right: 7px;
89
- }
90
- .header__case span {
91
- color: black;
92
- }
93
- .header__block button {
94
- margin-left: 15px;
95
- }
96
- .header__type {
97
- background: #0d6efd;
98
- color: #FFF;
99
- border-radius: 10px;
100
- padding: 1px 5px;
101
- margin-right: 15px;
102
- }
103
- .header__case i {
104
- color: grey;
105
- margin-right: 5px;
106
- }
107
- .title {
108
- display: flex;
109
- margin-bottom: 20px;
110
- }
111
- .title p {
112
- color: black;
113
- font-size: 20px;
114
- margin-right: 5px;
115
- }
116
- .statright {
117
- display: flex;
118
- }
119
- .statdesc {
120
- display: flex;
121
- flex-direction: column;
122
- }
123
- .statdesc__row {
124
- padding: 15px 10px;
125
- display: flex;
126
- }
127
- .statdesc__row_first {
128
- width: 150px;
129
- }
130
- .statdesc__row:nth-child(odd) {
131
- background: #F4F5FF;
132
- }
133
- .statdesc__row p {
134
- font-weight: bold;
135
- }
136
- .statdesc {
137
- width: 100%;
138
- }
139
- .statstatus {
140
- display: flex;
141
- align-items: center;
142
- }
143
- .statstatus p {
144
- font-weight: bold;
145
- }
146
- .statstatus div {
147
- font-weight: bold;
148
- }
149
- .statstatus_failed div {
150
- width: 10px;
151
- height: 10px;
152
- border-radius: 50%;
153
- margin-right: 5px;
154
- }
155
- .statstatus_failed p {
156
- color: red;
157
- text-transform: uppercase;
158
- }
159
- .statstatus_failed div {
160
- background: red;
161
- }
162
- .statstatus_passed div {
163
- width: 10px;
164
- height: 10px;
165
- border-radius: 50%;
166
- margin-right: 5px;
167
- text-transform: uppercase;
168
- }
169
- .statstatus_passed div {
170
- background: green;
171
- }
172
- .statstatus_passed p {
173
- color: green;
174
- text-transform: uppercase;
175
- }
176
- .statstatus_skipped div{
177
- width: 10px;
178
- height: 10px;
179
- border-radius: 50%;
180
- margin-right: 5px;
181
- text-transform: uppercase;
182
- }
183
- .statstatus_skipped div {
184
- background: yellow;
185
- }
186
- .statstatus_skipped p {
187
- color: yellow;
188
- text-transform: uppercase;
189
- }
190
- .fa-magnifying-glass {
191
- font-size: 24px;
192
- color: gray;
193
- }
194
- .level_5 {
195
- margin-top: 20px;
196
- }
197
- .numTest {
198
- font-weight: 700;
199
- font-size: 16px;
200
- color:#0d6efd;
201
- }
202
- .testitem {
203
- border: 1px solid grey;
204
- border-radius: 10px;
205
- margin-bottom: 15px;
206
- }
207
- .testitem__top {
208
- width: 100%;
209
- display: flex;
210
- background: #e9ecef;
211
- padding: 3px 0;
212
- border-radius:10px;
213
- cursor: pointer;
214
- }
215
- .testitem__icon {
216
- display: flex;
217
- align-items: center;
218
- justify-content: center;
219
- width: 30px;
220
- margin-right: 15px;
221
- }
222
- .testitem__ico {
223
- font-size: 18px;
224
- }
225
- .testitem__name {
226
- font-weight: 700;
227
- color: black;
228
- font-size: 16px;
229
- }
230
- .testitem__body {
231
- display: flex;
232
- border-top: 1px solid grey;
233
- }
234
- .testitem__menu {
235
- display: flex;
236
- flex-direction: column;
237
- border-right: 1px solid grey;
238
- padding: 15px;
239
- }
240
- .testitem__mitem {
241
- margin-bottom: 10px;
242
- font-size: 14px;
243
- cursor: pointer;
244
- color: grey;
245
- }
246
- .testitem__mitem_active {
247
- color: green;
248
- }
249
- .testitem__case {
250
- display: flex;
251
- flex-direction: column;
252
- padding: 10px;
253
- }
254
- .testitem__title {
255
- font-size: 18px;
256
- color: black;
257
- font-weight: 700;
258
- margin-bottom: 15px;
259
- text-decoration: underline;
260
- }
261
- .testitem__block p {
262
- font-size: 14px;
263
- white-space: pre-line;
264
- }
265
- .test__empty__list {
266
- margin-bottom: 10px;
267
- color: grey;
268
- }
269
- .testitem__content {
270
- width: 92%;
271
- }
272
- /* Passed TAB*/
273
- #passedTest:not(:checked) + .btn-outline-dark {
274
- background-color: #39BD2F;
275
- }
276
- #passedTest:checked + .btn-outline-dark {
277
- background-color: #68cf61;
278
- color: white;
279
- }
280
- /* Failed TAB*/
281
- #failedTest:not(:checked) + .btn-outline-dark {
282
- background-color: #F2230C;
283
- }
284
- #failedTest:checked + .btn-outline-dark {
285
- background-color: #FA6E5E;
286
- color: white;
287
- }
288
- /* Skipped TAB*/
289
- #skippedTest:not(:checked) + .btn-outline-dark {
290
- background-color: #F2C00C;
291
- }
292
- #skippedTest:checked + .btn-outline-dark {
293
- background-color: #dfc155;
294
- }
295
- /* Pagination component styles*/
296
- .page-link {
297
- color: black;
298
- background: #f5f5f8;
299
- }
300
- .page-link:hover {
301
- color: black;
302
- }
303
- .form-select:focus {
304
- border-color: #adadad;
305
- box-shadow: 0 0 0 0.25rem rgb(67 71 78 / 25%);
306
- }
307
- .page-item.active .page-link {
308
- background: #d1d1d2;
309
- border-color: #adadad;
310
- }
311
- .noData {
312
- background: #e9ecef;
313
- text-align: center;
314
- height: 100px;
315
- padding-top: 39px;
316
- border-radius: 5px;
317
- }
28
+ body { padding: 0; margin: 0; } header, div, p, form, input, a, span, button { box-sizing: border-box; } img {
29
+ width: 100%; display: block; max-width: 100%; height: auto; } p, span{ font-weight: 400; font-size: 14px; color:
30
+ grey; margin: 0; } .report{ padding-top: 15px; } .level_1{ margin-bottom: 20px; border-bottom: 1px solid grey;
31
+ padding-bottom: 10px; } .header{ display: flex; justify-content: space-between; align-items: center; }
32
+ .header__point{ width: 8px; height: 8px; border-radius: 50%; margin-right: 15px; } .header__point_red{ background:
33
+ red; } .header__block{ display: flex; align-items: center; } .header__case{ display: flex; align-items: center;
34
+ margin-right: 15px; } .header__case p{ margin-right: 7px; } .header__case span{ color: black; } .header__block
35
+ button{ margin-left: 15px; } .header__type{ background: #0d6efd; color: #FFF; border-radius: 10px; padding: 1px
36
+ 5px; margin-right: 15px; } .header__case i{ color: grey; margin-right: 5px; } .title{ display: flex;
37
+ margin-bottom: 20px; } .title p{ color: black; font-size: 20px; margin-right: 5px; } .statright{ display: flex; }
38
+ .statdesc{ display: flex; flex-direction: column; } .statdesc__row{ padding: 15px 10px; display: flex; }
39
+ .statdesc__row_first{ width: 150px; } .statdesc__row:nth-child(odd){ background: #F4F5FF; } .statdesc__row p{
40
+ font-weight: bold; } .statdesc{ width: 100%; } .statstatus{ display: flex; align-items: center; } .statstatus p{
41
+ font-weight: bold; } .statstatus div{ font-weight: bold; } .statstatus_failed div{ width: 10px; height: 10px;
42
+ border-radius: 50%; margin-right: 5px; } .statstatus_failed p{ color: red; text-transform: uppercase; }
43
+ .statstatus_failed div{ background: red; } .statstatus_passed div{ width: 10px; height: 10px; border-radius: 50%;
44
+ margin-right: 5px; text-transform: uppercase; } .statstatus_passed div { background: green; } .statstatus_passed p
45
+ { color: green; text-transform: uppercase; } .statstatus_skipped div{ width: 10px; height: 10px; border-radius:
46
+ 50%; margin-right: 5px; text-transform: uppercase; } .statstatus_skipped div { background: yellow; }
47
+ .statstatus_skipped p { color: yellow; text-transform: uppercase; } .fa-magnifying-glass{ font-size: 24px; color:
48
+ gray; } .level_5{ margin-top: 20px; } .numTest{ font-weight: 700; font-size: 16px; color:#0d6efd; } .testitem{
49
+ border: 1px solid grey; border-radius: 10px; margin-bottom: 15px; } .testitem__top{ width: 100%; display: flex;
50
+ background: #e9ecef; padding: 3px 0; border-radius:10px; cursor: pointer; } .testitem__icon{ display: flex;
51
+ align-items: center; justify-content: center; width: 30px; margin-right: 15px; } .testitem__ico{ font-size: 18px;
52
+ } .testitem__name{ font-weight: 700; color: black; font-size: 16px; } .testitem__body{ display: flex; border-top:
53
+ 1px solid grey; } .testitem__menu{ display: flex; flex-direction: column; border-right: 1px solid grey; padding:
54
+ 15px; } .testitem__mitem{ margin-bottom: 10px; font-size: 14px; cursor: pointer; color: grey; }
55
+ .testitem__mitem_active{ color: green; } .testitem__case{ display: flex; flex-direction: column; padding: 10px; }
56
+ .testitem__title{ font-size: 18px; color: black; font-weight: 700; margin-bottom: 15px; text-decoration:
57
+ underline; } .testitem__block p{ font-size: 14px; white-space: pre-line; } .test__empty__list { margin-bottom:
58
+ 10px; color: grey; } /* Passed TAB*/ #passedTest:not(:checked) + .btn-outline-dark { background-color: #39BD2F; }
59
+ #passedTest:checked + .btn-outline-dark { background-color: #68cf61; color: white; } /* Failed TAB*/
60
+ #failedTest:not(:checked) + .btn-outline-dark { background-color: #F2230C; } #failedTest:checked +
61
+ .btn-outline-dark { background-color: #FA6E5E; color: white; } /* Skipped TAB*/ #skippedTest:not(:checked) +
62
+ .btn-outline-dark { background-color: #F2C00C; } #skippedTest:checked + .btn-outline-dark { background-color:
63
+ #dfc155; }
318
64
  </style>
319
- </head>
65
+ </head>
320
66
 
321
- <body class='bg-gray-50 pt-6 px-4 lg:pt-4 lg:px-40 h-full;'>
67
+ <body class='bg-gray-50 pt-6 px-4 lg:pt-4 lg:px-40 h-full;'>
322
68
  <section class='report' id='report'>
323
- <div class='container'>
324
- <!-- top -->
325
- <div class='row level_1'>
326
- <div class='col-12'>
327
- <div class='header'>
328
- <div class='header__block'>
329
- {{#if runId}}
330
- <div class='header__case'>
331
- <p>Run</p>
332
- <span><strong>#</strong>{{runId}}</span>
333
- </div>
334
- {{/if}}
335
- <p class='header__type'>
336
- <i class='fa-solid fa-face-smile'></i>
337
- automated job
338
- </p>
339
- </div>
340
- <div class='header__block'>
341
- {{#if runUrl}}
342
- <a href='{{runUrl}}' target='_blank' class='btn btn-primary'>
343
- Full Report
344
- </a>
345
- {{else}}
346
- <button class='btn btn-primary' disabled>
347
- Full Report
348
- </button>
349
- {{/if}}
350
- </div>
351
- </div>
69
+ <div class='container'>
70
+ <!-- top -->
71
+ <div class='row level_1'>
72
+ <div class='col-12'>
73
+ <div class='header'>
74
+ <div class='header__block'>
75
+ {{#if runId}}
76
+ <div class='header__case'>
77
+ <p>Run</p>
78
+ <span><strong>#</strong>{{runId}}</span>
79
+ </div>
80
+ {{/if}}
81
+ <p class='header__type'>
82
+ <i class='fa-solid fa-face-smile'></i>
83
+ automated job
84
+ </p>
85
+ </div>
86
+ <div class='header__block'>
87
+ {{#if runUrl}}
88
+ <a href='{{runUrl}}' target='_blank' class='btn btn-primary'>
89
+ Full Report
90
+ </a>
91
+ {{else}}
92
+ <button class='btn btn-primary' disabled>
93
+ Full Report
94
+ </button>
95
+ {{/if}}
96
+ </div>
352
97
  </div>
353
- </div>
354
- <!-- top -->
98
+ </div>
99
+ </div>
100
+ <!-- top -->
355
101
 
356
- <div class='row level_2'>
357
- <div class='col-12'>
358
- <div class='title'>
359
- <p>Testomatio Run Information</p>
360
- </div>
361
- </div>
102
+ <div class='row level_2'>
103
+ <div class='col-12'>
104
+ <div class='title'>
105
+ <p>Testomatio Run Information</p>
362
106
  </div>
107
+ </div>
108
+ </div>
363
109
 
364
- <!-- Schedule and information -->
365
- <div class='row level_3'>
366
- <div class='col-6'>
367
- <div class='statleft'>
368
- <div id='graff'></div>
369
- </div>
110
+ <!-- Schedule and information -->
111
+ <div class='row level_3'>
112
+ <div class='col-6'>
113
+ <div class='statleft'>
114
+ <div id='graff'></div>
115
+ </div>
116
+ </div>
117
+ <div class='col-6'>
118
+ <div class='statright'>
119
+ <div class='statdesc'>
120
+ <!-- 1 -->
121
+ <div class='statdesc__row'>
122
+ <div class='statdesc__row_first'>
123
+ <p>Status</p>
124
+ </div>
125
+ <div class='statstatus statstatus_{{status}}'>
126
+ <div></div>
127
+ <p>{{status}}</p>
128
+ </div>
370
129
  </div>
371
- <div class='col-6'>
372
- <div class='statright'>
373
- <div class='statdesc'>
374
- <!-- 1 -->
375
- <div class='statdesc__row'>
376
- <div class='statdesc__row_first'>
377
- <p>Status</p>
378
- </div>
379
- <div class='statstatus statstatus_{{status}}'>
380
- <div></div>
381
- <p>{{status}}</p>
382
- </div>
383
- </div>
384
- <!-- 1 -->
385
- <!-- 1 -->
386
- <div class='statdesc__row'>
387
- <div class='statdesc__row_first'>
388
- <p>Execution Duration</p>
389
- </div>
390
- <span>{{executionTime}}</span>
391
- </div>
392
- <!-- 1 -->
393
- <!-- 1 -->
394
- <div class='statdesc__row'>
395
- <div class='statdesc__row_first'>
396
- <p>Tests</p>
397
- </div>
398
- <span>{{tests.length}}</span>
399
- </div>
400
- <!-- 1 -->
401
- <!-- 1 -->
402
- <div class='statdesc__row'>
403
- <div class='statdesc__row_first'>
404
- <p>Start Execution Date</p>
405
- </div>
406
- <span>{{executionDate}}</span>
407
- </div>
408
- <!-- 1 -->
130
+ <!-- 1 -->
131
+ <!-- 1 -->
132
+ <div class='statdesc__row'>
133
+ <div class='statdesc__row_first'>
134
+ <p>Execution Duration</p>
135
+ </div>
136
+ <span>{{executionTime}}</span>
137
+ </div>
138
+ <!-- 1 -->
139
+ <!-- 1 -->
140
+ <div class='statdesc__row'>
141
+ <div class='statdesc__row_first'>
142
+ <p>Tests</p>
143
+ </div>
144
+ <span>{{tests.length}}</span>
409
145
  </div>
146
+ <!-- 1 -->
147
+ <!-- 1 -->
148
+ <div class='statdesc__row'>
149
+ <div class='statdesc__row_first'>
150
+ <p>Start Execution Date</p>
151
+ </div>
152
+ <span>{{executionDate}}</span>
410
153
  </div>
154
+ <!-- 1 -->
155
+ </div>
411
156
  </div>
157
+ </div>
158
+ </div>
159
+ <!-- Schedule and information -->
160
+ <div class='row level_4'>
161
+ <div class='col-6'>
162
+ <div class='input-group'>
163
+ <div class='input-group-prepend'>
164
+ <span class='input-group-text' id='basic-addon1'>
165
+ <i class='fa-solid fa-magnifying-glass'></i>
166
+ </span>
167
+ </div>
168
+ <input
169
+ type='text'
170
+ class='form-control inputSearch'
171
+ placeholder='Search'
172
+ aria-label='Search'
173
+ aria-describedby='basic-addon1'
174
+ />
412
175
  </div>
413
- <!-- Schedule and information -->
414
- <div class='row level_4'>
415
- <div class='col-6'>
416
- <div class='input-group'>
417
- <div class='input-group-prepend'>
418
- <span class='input-group-text' id='basic-addon1'>
419
- <i class='fa-solid fa-magnifying-glass'></i>
420
- </span>
421
- </div>
422
- <input
423
- type='text'
424
- class='form-control inputSearch'
425
- placeholder='Search'
426
- aria-label='Search'
427
- aria-describedby='basic-addon1'
428
- />
429
- </div>
430
- </div>
431
-
432
- <div class='col-6 d-flex justify-content-end'>
433
- <div class='btn-group menuTests' role='group' aria-label='Basic radio toggle button group'>
434
-
435
- <input
436
- type='radio'
437
- class='btn-check'
438
- name='groupTest'
439
- id='allTest'
440
- autocomplete='off'
441
- category='all'
442
- checked
443
- />
444
- <label class='btn btn-outline-dark' for='allTest'>All
445
- <span class='numTest' name='numTest' lcategory='all'>0</span>
446
- </label>
447
-
448
- <input
449
- type='radio'
450
- class='btn-check'
451
- name='groupTest'
452
- id='passedTest'
453
- autocomplete='off'
454
- category='passed'
455
- />
456
- <label class='btn btn-outline-dark' for='passedTest'>Passed
457
- <span class='numTest' name='numTest' lcategory='passed'>0</span>
458
- </label>
459
-
460
- <input
461
- type='radio'
462
- class='btn-check'
463
- name='groupTest'
464
- id='failedTest'
465
- autocomplete='off'
466
- category='failed'
467
- />
468
- <label class='btn btn-outline-dark' for='failedTest'>Failed
469
- <span class='numTest' name='numTest' lcategory='failed'>0</span>
470
- </label>
176
+ </div>
177
+
178
+ <div class='col-6 d-flex justify-content-end'>
179
+ <div class='btn-group menuTests' role='group' aria-label='Basic radio toggle button group'>
180
+
181
+ <input
182
+ type='radio'
183
+ class='btn-check'
184
+ name='groupTest'
185
+ id='allTest'
186
+ autocomplete='off'
187
+ category='all'
188
+ checked
189
+ />
190
+ <label class='btn btn-outline-dark' for='allTest'>All
191
+ <span class='numTest' name='numTest' lcategory='all'>0</span></label>
192
+
193
+ <input
194
+ type='radio'
195
+ class='btn-check'
196
+ name='groupTest'
197
+ id='passedTest'
198
+ autocomplete='off'
199
+ category='passed'
200
+ />
201
+ <label class='btn btn-outline-dark' for='passedTest'>Passed
202
+ <span class='numTest' name='numTest' lcategory='passed'>0</span></label>
203
+
204
+ <input
205
+ type='radio'
206
+ class='btn-check'
207
+ name='groupTest'
208
+ id='failedTest'
209
+ autocomplete='off'
210
+ category='failed'
211
+ />
212
+ <label class='btn btn-outline-dark' for='failedTest'>Failed
213
+ <span class='numTest' name='numTest' lcategory='failed'>0</span></label>
214
+
215
+ <input
216
+ type='radio'
217
+ class='btn-check'
218
+ name='groupTest'
219
+ id='skippedTest'
220
+ autocomplete='off'
221
+ category='skipped'
222
+ />
223
+ <label class='btn btn-outline-dark' for='skippedTest'>Skipped
224
+ <span class='numTest' name='numTest' lcategory='skipped'>0</span></label>
471
225
 
472
- <input
473
- type='radio'
474
- class='btn-check'
475
- name='groupTest'
476
- id='skippedTest'
477
- autocomplete='off'
478
- category='skipped'
479
- />
480
- <label class='btn btn-outline-dark' for='skippedTest'>Skipped
481
- <span class='numTest' name='numTest' lcategory='skipped'>0</span>
482
- </label>
483
-
484
- </div>
485
- </div>
486
226
  </div>
227
+ </div>
228
+ </div>
487
229
 
488
- <div class="row level_5">
489
- <div class="col-12">
490
- {{#if tests.length}}
491
- <!-- TOP pagination & select components -->
492
- <div class="mt-5 mb-3 d-flex justify-content-between" style="height: 40px;">
493
- <nav id="pagination">
494
- <ul class="pagination">
495
- </ul>
496
- </nav>
497
- {{ selectComponent }}
498
- </div>
499
- <!-- Test data section -->
500
- <div class="testWrapp">
501
- {{#each tests}}
502
-
503
- <div class="testitem d-none" name="testitem" type="dummy" category="false">
504
-
505
- <div class="testitem__top">
506
- <div class="testitem__icon">
507
- <i class="fa-solid fa-chevron-right testitem__ico testitem__ico_right"></i>
508
- <i class="fa-solid fa-chevron-down d-none testitem__ico testitem__ico_down"></i>
509
- </div>
510
- <p class="testitem__name">Test</p>
511
- </div>
512
-
513
- <div class="testitem__body d-none">
514
-
515
- <div class='testitem__menu'>
516
- <span type='steps' class='testitem__mitem testitem__mitem_active'>Steps
517
- <i class='fa-solid fa-arrow-right'></i></span>
518
- <span type='status' class='testitem__mitem'>Status
519
- <i class='fa-solid fa-arrow-right'></i></span>
520
- <span type='message' class='testitem__mitem'>Message
521
- <i class='fa-solid fa-arrow-right'></i></span>
522
- <span type='files' class='testitem__mitem'>Files <i class='fa-solid fa-arrow-right'></i></span>
523
- </div>
524
-
525
- <div class="testitem__content">
526
- <!-- 1 -->
527
- <div class="testitem__case" type="steps">
528
- <p class="testitem__title">Steps</p>
529
- <div class="testitem__block">
530
- <span>...</span>
531
- </div>
532
- </div>
533
- <!-- 1 -->
230
+ <div class='row level_5'>
231
+ <div class='col-12'>
232
+ {{#if tests.length}}
233
+ <div class='testWrapp'>
234
+ {{#each tests}}
534
235
 
535
- <!-- 2 -->
536
- <div class='testitem__case d-none' type='status'>
537
- <p class='testitem__title'>Status</p>
538
- <div class='testitem__block'>
539
- <span>...</span>
540
- </div>
541
- </div>
542
- <!-- 2 -->
236
+ <div class='testitem d-none' name='testitem' type='dummy' category='false'>
543
237
 
544
- <!-- 3 -->
545
- <div class='testitem__case d-none' type='message'>
546
- <p class='testitem__title'>Message</p>
547
- <div class='testitem__block'>
548
- <span>...</span>
549
- </div>
550
- </div>
551
- <!-- 3 -->
238
+ <div class='testitem__top'>
239
+ <div class='testitem__icon'>
240
+ <i class='fa-solid fa-chevron-right testitem__ico testitem__ico_right'></i>
241
+ <i class='fa-solid fa-chevron-down d-none testitem__ico testitem__ico_down'></i>
242
+ </div>
243
+ <p class='testitem__name'>Test</p>
244
+ </div>
552
245
 
553
- <!-- 4 -->
554
- <div class='testitem__case d-none' type='files'>
555
- <p class='testitem__title'>Files</p>
556
- <div class='testitem__block'>
557
- <span>...</span>
558
- </div>
559
- </div>
560
- <!-- 4 -->
561
- </div>
562
- </div>
563
- </div>
564
- {{/each}}
246
+ <div class='testitem__body d-none'>
247
+
248
+ <div class='testitem__menu'>
249
+ <span type='steps' class='testitem__mitem testitem__mitem_active'>Steps
250
+ <i class='fa-solid fa-arrow-right'></i></span>
251
+ <span type='status' class='testitem__mitem'>Status
252
+ <i class='fa-solid fa-arrow-right'></i></span>
253
+ <span type='message' class='testitem__mitem'>Message
254
+ <i class='fa-solid fa-arrow-right'></i></span>
255
+ <span type='files' class='testitem__mitem'>Files <i class='fa-solid fa-arrow-right'></i></span>
256
+ </div>
257
+
258
+ <div class='testitem__content'>
259
+
260
+ <!-- 1 -->
261
+ <div class='testitem__case' type='steps'>
262
+ <p class='testitem__title'>Steps</p>
263
+ <div class='testitem__block'>
264
+ <span>...</span>
265
+ </div>
266
+ </div>
267
+ <!-- 1 -->
268
+
269
+ <!-- 2 -->
270
+ <div class='testitem__case d-none' type='status'>
271
+ <p class='testitem__title'>Status</p>
272
+ <div class='testitem__block'>
273
+ <span>...</span>
274
+ </div>
275
+ </div>
276
+ <!-- 2 -->
277
+
278
+ <!-- 3 -->
279
+ <div class='testitem__case d-none' type='message'>
280
+ <p class='testitem__title'>Message</p>
281
+ <div class='testitem__block'>
282
+ <span>...</span>
283
+ </div>
284
+ </div>
285
+ <!-- 3 -->
286
+
287
+ <!-- 4 -->
288
+ <div class='testitem__case d-none' type='files'>
289
+ <p class='testitem__title'>Files</p>
290
+ <div class='testitem__block'>
291
+ <span>...</span>
292
+ </div>
565
293
  </div>
566
- <!-- BOTTOM pagination & select components -->
567
- <nav class="mt-2">
568
- <ul class="pagination">
569
- </ul>
570
- </nav>
571
- {{else}}
572
- <!-- No tests found section -->
573
- {{ emptyDataComponent }}
574
- {{/if}}
294
+ <!-- 4 -->
295
+ </div>
296
+ </div>
297
+ </div>
298
+ {{/each}}
299
+ </div>
300
+ {{else}}
301
+ <div class='row'>
302
+ <div class='col-12 test__empty__list'>
303
+ <p>No tests found to display 😔</p>
575
304
  </div>
576
- </div>
577
-
305
+ </div>
306
+ {{/if}}
307
+ </div>
578
308
  </div>
579
- </section>
580
-
581
- <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
582
- <script type="text/javascript">
583
- // Load google charts
584
- google.charts.load('current', {'packages':['corechart']});
585
- google.charts.setOnLoadCallback(drawChart);
586
-
587
- // Draw the chart and set the chart values
588
- function drawChart() {
589
- let data = {};
590
- const passedTests = {{getTestsByStatus tests "PASSED"}};
591
- const failedTests = {{getTestsByStatus tests "FAILED"}};
592
- const skippedTests = {{getTestsByStatus tests "SKIPPED"}};
593
-
594
- if (passedTests === 0 && failedTests === 0 && skippedTests === 0) {
595
- data = google.visualization.arrayToDataTable([
596
- ['Task', 'Tests'],
597
- ['No Tests', 1]
598
- ])
599
- }
600
- else {
601
- data = google.visualization.arrayToDataTable([
602
- ['Task', 'Tests'],
603
- ['No Tests', 0],
604
- ['Passed', passedTests],
605
- ['Failed', failedTests],
606
- ['Skipped', skippedTests],
607
- ]);
608
- }
609
- // Optional: add a title and set the width and height of the chart
610
- const options = {
611
- 'title':'',
612
- 'width':550,
613
- 'height':300,
614
- 'colors': ['#939992', '#39BD2F', '#F2230C', '#F2C00C']
615
- };
616
- // Display the chart inside the <div> element with id="piechart"
617
- const chart = new google.visualization.PieChart(document.getElementById('graff'));
618
- chart.draw(data, options);
619
- }
620
-
621
- // processing and adding test data to the template
622
- function addOneTest(category,testData = {}){
623
- const { suite_title, title, steps, message, files } = testData;
624
- // collapse - expand block
625
- const clone = createClone(category, suite_title, title);
626
- const testitem__top = clone.querySelector('.testitem__top');
627
-
628
- setTestItemContent(clone, steps, category, message, files);
629
- addCollapseExpandListener(testitem__top);
630
- initializeMenu(clone);
631
- }
632
-
633
- function createClone(category, suite_title, title) {
634
- const page = document.querySelector('.report');
635
- const wrapp = page.querySelector('.testWrapp');
636
- const dummy = wrapp.querySelector('div[name="testitem"][type="dummy"]');
637
- const clone = dummy.cloneNode(true);
638
-
639
- clone.setAttribute('type', 'clone');
640
- clone.setAttribute('category', category);
641
- clone.classList.remove('d-none');
642
- wrapp.append(clone);
643
-
644
- const testitem__name = clone.querySelector('.testitem__name');
645
- testitem__name.innerHTML = suite_title ? suite_title + " - " + title : title;
646
-
647
- return clone;
648
- }
649
-
650
- function setTestItemContent(clone, steps, category, message, files) {
651
- const body = clone.querySelector('.testitem__body');
652
-
653
- let content = body.querySelector('.testitem__content'),
654
- content_error = content.querySelector('div[type="steps"]').querySelector('span'),
655
- content_status = content.querySelector('div[type="status"]').querySelector('span'),
656
- content_message = content.querySelector('div[type="message"]').querySelector('span'),
657
- content_files = content.querySelector('div[type="files"]').querySelector('span');
658
-
659
- content_error.innerHTML = steps;
660
- content_status.innerHTML = category.toUpperCase();
661
- content_message.innerHTML = message;
662
- //if no file - empty message, else - files
663
- (files.includes("This test has no files"))
664
- ? content_files.innerHTML = files
665
- : addFilesToContent(content_files, files);
666
- }
667
-
668
- function addFilesToContent(content_files, files) {
669
- const filesList = document.createElement('div');
670
-
671
- filesList.classList.add('d-flex', 'flex-wrap', 'flex-column');
672
- content_files.innerHTML = "";
673
-
674
- if (Array.isArray(files) && files.length > 0) {
675
- for (let i = 0; i < files.length; i += 2) {
676
- const filePairContainer = document.createElement('div');
677
- filePairContainer.classList.add('d-flex', 'mb-3', 'justify-content-around');
678
-
679
- for (let j = i; j < i + 2 && j < files.length; j++) {
680
- const file = files[j];
681
- const fileItemContainer = createFileItemContainer(file);
682
- filePairContainer.appendChild(fileItemContainer);
683
- }
684
-
685
- filesList.appendChild(filePairContainer);
686
- }
687
-
688
- content_files.appendChild(filesList);
689
- }
690
- }
691
-
692
- function createFileItemContainer(file) {
693
- let fileIcon;
694
-
695
- const filepath = file?.path || file;
696
- const fileName = createFileName(file);
697
- const fileItemContainer = document.createElement('div');
698
- const fileExtension = filepath.split('.').pop().toLowerCase();
699
-
700
- fileItemContainer.classList.add('d-flex', 'flex-column', 'align-items-center', 'mr-3');
701
-
702
- switch (fileExtension) {
703
- case 'jpg':
704
- case 'jpeg':
705
- case 'png':
706
- case 'gif':
707
- fileIcon = createImagePreview(file);
708
- break;
709
- case 'zip':
710
- const svgZipCode =
711
- `<?xml version="1.0" encoding="iso-8859-1"?>
712
- <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
713
- viewBox="0 0 512 512" xml:space="preserve">
714
- <path style="fill:#FDCC77;" d="M511.344,274.266C511.77,268.231,512,262.143,512,256C512,114.615,397.385,0,256,0S0,114.615,0,256
715
- c0,117.769,79.53,216.949,187.809,246.801L511.344,274.266z"/>
716
- <path style="fill:#FCB433;" d="M511.344,274.266L314.991,77.913L119.096,434.087l68.714,68.714C209.522,508.787,232.385,512,256,512
717
- C391.243,512,501.976,407.125,511.344,274.266z"/>
718
- <polygon style="fill:#FFFFFF;" points="278.328,333.913 255.711,77.913 119.096,77.913 119.096,311.652 "/>
719
- <polygon style="fill:#E8E6E6;" points="392.904,311.652 392.904,155.826 337.252,133.565 314.991,77.913 255.711,77.913
720
- 256.067,333.913 "/>
721
- <polygon style="fill:#FFFFFF;" points="314.991,155.826 314.991,77.913 392.904,155.826 "/>
722
- <rect x="119.096" y="311.652" style="fill:#9E7120;" width="273.809" height="122.435"/>
723
- <g>
724
- <path style="fill:#FFFFFF;" d="M210.927,388.691h28.759v10.671h-46.771v-8.627l28.38-33.677H193.9v-10.671h45.332v8.627
725
- L210.927,388.691z"/>
726
- <path style="fill:#FFFFFF;" d="M249.075,399.362v-52.975h13.471v52.975H249.075z"/>
727
- <path style="fill:#FFFFFF;" d="M298.118,346.387c13.546,0,21.341,6.659,21.341,18.465c0,12.412-7.796,19.601-21.341,19.601h-9.612
728
- v14.909h-13.471v-52.975L298.118,346.387L298.118,346.387z M288.505,373.858h8.93c5.904,0,9.307-2.952,9.307-8.552
729
- c0-5.525-3.405-8.324-9.307-8.324h-8.93V373.858z"/>
730
- </g>
731
- </svg>`;
732
- fileIcon = createFileIcon(file,svgZipCode);
733
- break;
734
- case 'mp4':
735
- case 'avi':
736
- case 'mov':
737
- case 'webm':
738
- const svgVideoCode =
739
- `<?xml version="1.0" encoding="iso-8859-1"?>
740
- <svg height="150px" width="150px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
741
- viewBox="0 0 503.467 503.467" xml:space="preserve">
742
- <g transform="translate(5 1)">
743
- <path style="fill:#F2EDDA;" d="M460.067,122.733v341.333c0,18.773-15.36,34.133-34.133,34.133h-358.4
744
- c-18.773,0-34.133-15.36-34.133-34.133V37.4c0-18.773,15.36-34.133,34.133-34.133H340.6V88.6c0,18.773,15.36,34.133,34.133,34.133
745
- H460.067z"/>
746
- <path style="fill:#FFD0A1;" d="M460.067,122.733h-85.333c-18.773,0-34.133-15.36-34.133-34.133V3.267L460.067,122.733z"/>
747
- <path style="fill:#80D6FA;" d="M246.733,191c61.44,0,110.933,49.493,110.933,110.933s-49.493,110.933-110.933,110.933
748
- c-61.44,0-110.933-49.493-110.933-110.933S185.293,191,246.733,191L246.733,191z"/>
749
- <polygon style="fill:#ECF4F7;" points="280.867,301.933 221.133,336.067 221.133,267.8 "/>
750
- </g>
751
- <path style="fill:#51565F;" d="M430.933,503.467h-358.4c-21.333,0-38.4-17.067-38.4-38.4V38.4C34.133,17.067,51.2,0,72.533,0H345.6
752
- c0.853,0,2.56,0.853,3.413,0.853l85.333,85.333c1.707,1.707,1.707,4.267,0,5.973c-1.707,1.707-4.267,1.707-5.973,0l-84.48-84.48
753
- H72.533c-16.213,0-29.867,13.653-29.867,29.867v426.667c0,16.213,13.653,29.867,29.867,29.867h358.4
754
- c16.213,0,29.867-13.653,29.867-29.867V127.147h-81.067c-21.333,0-38.4-17.067-38.4-38.4V46.08c0-2.56,1.707-4.267,4.267-4.267
755
- s4.267,1.707,4.267,4.267v42.667c0,16.213,13.653,29.867,29.867,29.867h85.333c2.56,0,4.267,1.707,4.267,4.267v341.333
756
- C469.333,486.4,452.267,503.467,430.933,503.467z M251.733,418.133c-63.147,0-115.2-52.053-115.2-115.2s52.053-115.2,115.2-115.2
757
- s115.2,52.053,115.2,115.2S314.88,418.133,251.733,418.133z M251.733,196.267c-58.88,0-106.667,47.787-106.667,106.667
758
- S192.853,409.6,251.733,409.6S358.4,361.813,358.4,302.933S310.613,196.267,251.733,196.267z M226.133,341.333
759
- c-0.853,0-1.707,0-2.56-0.853c-1.707-0.853-1.707-2.56-1.707-3.413V268.8c0-1.707,0.853-2.56,1.707-3.413
760
- c1.707-0.853,2.56-0.853,4.267,0l59.733,34.133c1.707,0.853,2.56,2.56,2.56,3.413s-0.853,2.56-2.56,3.413L227.84,340.48
761
- C227.84,341.333,226.987,341.333,226.133,341.333z M230.4,276.48v53.76l46.933-26.453L230.4,276.48z"/>
762
- </svg>`;
763
- fileIcon = createFileIcon(file, svgVideoCode);
764
- break;
765
- default:
766
- const svgFileCode =
767
- `<?xml version="1.0" encoding="iso-8859-1"?>
768
- <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
769
- viewBox="0 0 512 512" xml:space="preserve">
770
- <polygon style="fill:#72C6EF;" points="384,448 128,448 128,64 288,64 288,160 384,160 "/>
771
- <path style="fill:#00384E;" d="M310.624,0H64v512h384V137.376L310.624,0z M320,54.624L393.376,128H320V54.624z M96,480V32h192v128
772
- h128v320H96z"/>
773
- <g>
774
- <rect x="176" y="368" style="fill:#00384D;" width="160" height="32"/>
775
- <rect x="176" y="304" style="fill:#00384D;" width="160" height="32"/>
776
- <rect x="176" y="240" style="fill:#00384D;" width="160" height="32"/>
777
- </g>
778
- </svg>`;
779
- fileIcon = createFileIcon(file, svgFileCode);
780
- }
781
-
782
- fileItemContainer.appendChild(fileIcon);
783
- fileItemContainer.appendChild(fileName);
784
-
785
- return fileItemContainer;
786
- }
787
-
788
- function createImagePreview(file) {
789
- //TODO: consider using "../${file}", maybe we should get full paths when generating artifacts in Mocha!
790
- const filepath = file?.path || `../${file}`;
791
- const imagePreview = document.createElement('img');
792
- // component styles
793
- imagePreview.src = filepath;
794
- imagePreview.alt = 'Image Preview';
795
- imagePreview.style.maxWidth = '200px';
796
- imagePreview.style.height = '150px';
797
- imagePreview.style.cursor = 'pointer';
798
-
799
- imagePreview.addEventListener('click', () => {
800
- window.open(filepath, '_blank');
801
- });
802
-
803
- return imagePreview;
804
- }
805
-
806
- function createFileIcon(file, svg) {
807
- //TODO: consider using "../${file}", maybe we should get full paths when generating artifacts in Mocha!
808
- const filepath = file?.path || `../${file}`;
809
- const fileIcon = document.createElement('div');
810
- // component styles
811
- fileIcon.innerHTML = svg;
812
- fileIcon.style.width = '150px';
813
- fileIcon.style.height = '150px';
814
- fileIcon.style.cursor = 'pointer';
815
-
816
- fileIcon.addEventListener('click', () => {
817
- window.open(filepath, '_blank');
818
- });
819
-
820
- return fileIcon;
821
- }
822
-
823
- function createFileName(file) {
824
- //TODO: consider using "../${file}", maybe we should get full paths when generating artifacts in Mocha!
825
- const filepath = file?.path || `../${file}`;
826
- const fileName = document.createElement('div');
827
- // component styles
828
- fileName.style.fontSize = '14px';
829
- fileName.style.marginTop = '10px';
830
- fileName.style.cursor = 'pointer';
831
309
 
832
- fileName.textContent = filepath.split('/').pop();
833
-
834
- fileName.addEventListener('click', () => {
835
- window.open(filepath, '_blank');
836
- });
837
-
838
- return fileName;
839
- }
840
-
841
- function addCollapseExpandListener(testitem__top) {
842
- testitem__top.addEventListener("click", function () {
843
- collapse_expand(testitem__top);
844
- });
845
- }
846
-
847
- function collapse_expand(top) {
848
- const block = top.closest('.testitem');
849
- const icon = top.querySelector('.testitem__icon');
850
- const testitem__ico_right = icon.querySelector('.testitem__ico_right');
851
- const testitem__ico_down = icon.querySelector('.testitem__ico_down');
852
- const body = block.querySelector('.testitem__body');
853
-
854
- if (body.classList.contains('d-none')) {
855
- body.classList.remove('d-none');
856
- testitem__ico_right.classList.add('d-none');
857
- testitem__ico_down.classList.remove('d-none');
858
- }
859
- else {
860
- body.classList.add('d-none');
861
- testitem__ico_down.classList.add('d-none');
862
- testitem__ico_right.classList.remove('d-none');
863
- }
864
- }
865
-
866
- function initializeMenu(clone) {
867
- const menu = clone.querySelector('.testitem__menu');
868
- const item = menu.querySelectorAll('.testitem__mitem');
869
-
870
- for (let i = 0; i < item.length; i++) {
871
- item[i].addEventListener('click', function () {
872
- show_content(item[i])
873
- })
874
- }
875
- }
876
-
877
- function show_content(elem) {
878
- removeAddActive(elem);
879
-
880
- const body = elem.closest('.testitem__body');
881
- const content = body.querySelector('.testitem__content');
882
- const blocks = content.querySelectorAll('.testitem__case');
883
-
884
- for (let i = 0; i < blocks.length; i++) {
885
- blocks[i].classList.add('d-none');
886
- }
887
-
888
- const type = elem.getAttribute('type');
889
- const show_elem = content.querySelector('div[type="' + type + '"]');
890
-
891
- show_elem.classList.remove('d-none');
892
- }
893
-
894
- function removeAddActive(elem) {
895
- const menu = elem.closest('.testitem__menu');
896
- const item = menu.querySelectorAll('.testitem__mitem');
897
-
898
- for (let i = 0; i < item.length; i++) {
899
- item[i].classList.remove('testitem__mitem_active');
900
- }
901
- elem.classList.add('testitem__mitem_active');
902
- }
903
-
904
- // GET test data
905
- const testEntries = {{{ pageDispleyElements tests }}};
906
- const allEntries = testEntries['totalTests'];
907
-
908
- if (allEntries.length === 0) {
909
- const searchEl = document.querySelector('.input-group');
910
- const radioEl = document.querySelector('.menuTests');
911
-
912
- searchEl.classList.add('d-none')
913
- radioEl.classList.add('d-none')
914
- }
915
- else {
916
- function search(array, testEntries) {
917
- const handleSearch = (input) => {
918
- const value = input.value.trim().toLowerCase();
919
- const select = document.querySelector('.form-select');
920
- const pagination = document.querySelectorAll('nav');
921
-
922
- if (value) {
923
- select.classList.add('d-none');
924
- pagination.forEach(item => item.classList.add('d-none'));
925
- }
926
- else {
927
- select.classList.remove('d-none');
928
- pagination.forEach(item => item.classList.remove('d-none'));
929
-
930
- remove(array);
931
-
932
- const paginationCount = select.value;
933
- const category = select.getAttribute('status');
934
-
935
- if (testEntries[category][paginationCount][0]) {
936
- add(testEntries[category][paginationCount][0]);
937
- }
938
- }
939
-
940
- remove(array);
941
-
942
- const filteredTests = array.filter(test => test.title.toLowerCase().includes(value) || test.suite_title.toLowerCase().includes(value));
943
-
944
- const existingNoDataElement = document.querySelector('.noResults');
945
-
946
- if (filteredTests.length === 0) {
947
- if (!existingNoDataElement) {
948
- const testElement = document.createElement('div');
949
- testElement.classList.add('noData', 'noResults');
950
- testElement.innerHTML = 'NO SEARCH RESULTS';
951
- document.querySelector('.testWrapp').appendChild(testElement);
952
- }
953
- }
954
- else {
955
- const paginationCount = select.value;
956
- const category = select.getAttribute('status');
957
-
958
- if (existingNoDataElement) {
959
- existingNoDataElement.remove();
960
- }
961
-
962
- if (testEntries[category][paginationCount][0]) {
963
- add(filteredTests);
964
- if (!value) {
965
- remove(filteredTests);
966
- add(testEntries[category][paginationCount][0]);
967
- }
968
- }
969
- else {
970
- if (value) {
971
- add(filteredTests);
972
- }
973
- else {
974
- if (!existingNoDataElement) {
975
- const testElement = document.createElement('div');
976
-
977
- select.classList.add('d-none');
978
- testElement.classList.add('noData', 'noResults');
979
- testElement.innerHTML = 'NO RESULTS';
980
- document.querySelector('.testWrapp').appendChild(testElement);
981
- }
982
- }
983
- }
984
- }
985
- };
986
-
987
- const inputSearch = document.querySelector('.report .inputSearch');
988
- inputSearch.addEventListener('input', () => handleSearch(inputSearch));
989
- }
990
-
991
- function radioMenuStart(){
992
- function showBlockForCat(input){
993
- const searchEl = document.querySelector('.input-group'),
994
- element = document.querySelector('.form-select')
995
- let category = 'all';
996
-
997
- remove(testEntries[category][0][0]);
998
-
999
- category = input.getAttribute('category');
1000
- element.setAttribute('status', category);
1001
-
1002
- const pagination = document.querySelectorAll('nav');
1003
- pagination.forEach(item => item.classList.add('d-none'));
1004
-
1005
- let inputEl = document.querySelector('.inputSearch');
1006
- inputEl.value = '';
1007
-
1008
- pagination.forEach(item => item.classList.remove('d-none'));
1009
-
1010
- displayPagination(testEntries,element.value,category);
1011
-
1012
- if(testEntries[category][0][0]){
1013
- element.classList.remove('d-none');
1014
- const existingNoDataElement = document.querySelector('.noResults');
1015
-
1016
- if (existingNoDataElement) {
1017
- existingNoDataElement.remove();
1018
- }
1019
-
1020
- searchEl.classList.remove('d-none');
1021
- add(testEntries[category][element.value][0]);
1022
- }
1023
- else {
1024
- element.classList.add('d-none');
1025
- const existingNoDataElement = document.querySelector('.noResults');
1026
-
1027
- if (existingNoDataElement) {
1028
- existingNoDataElement.remove();
1029
- }
1030
-
1031
- const testElement = document.createElement('div');
1032
- testElement.classList.add('noData');
1033
- testElement.classList.add('noResults');
1034
- testElement.innerHTML = 'NO RESULTS';
1035
- searchEl.classList.add('d-none');
1036
-
1037
- const testWrapp = document.querySelector('.testWrapp');
1038
- testWrapp.appendChild(testElement);
1039
- }
1040
- }
1041
-
1042
- const page = document.querySelector('.report');
1043
- const menuTests = page.querySelector('.menuTests');
1044
- const items = menuTests.querySelectorAll('input[name="groupTest"]');
1045
-
1046
- for(let i=0; i<items.length; i++){
1047
- items[i].addEventListener('change',function(){
1048
- showBlockForCat(items[i])
1049
- })
1050
- }
1051
- }
1052
-
1053
- radioMenuStart();
1054
-
1055
- search(allEntries, testEntries);
1056
-
1057
- const radioCount = (allEntries) => {
1058
- const allRadio = document.querySelectorAll('.numTest');
1059
-
1060
- allRadio.forEach((radio) => {
1061
- const attribute = radio.getAttribute('lcategory');
1062
-
1063
- switch (attribute) {
1064
- case 'all':
1065
- radio.innerHTML = allEntries.length;
1066
- break;
1067
- case 'passed':
1068
- const passedCount = allEntries.filter(test => test.status === 'passed').length;
1069
- radio.innerHTML = passedCount;
1070
- break;
1071
- case 'failed':
1072
- const failedCount = allEntries.filter(test => test.status === 'failed').length;
1073
- radio.innerHTML = failedCount;
1074
- break;
1075
- case 'skipped':
1076
- const skippedCount = allEntries.filter(test => test.status === 'skipped').length;
1077
- radio.innerHTML = skippedCount;
1078
- break;
1079
- default: // no default action for now
1080
- }
1081
- });
1082
- }
1083
-
1084
- radioCount(allEntries);
1085
-
1086
- function removeTest(category) {
1087
- const page = document.querySelector('.report');
1088
- const wrapp = page.querySelector('.testWrapp');
1089
- const clones = wrapp.querySelectorAll('div[name="testitem"][type="clone"]');
1090
-
1091
- clones.forEach((clone) => {
1092
- if (clone.getAttribute('category') === category) clone.remove();
1093
- });
1094
- }
1095
-
1096
- const add = (array) => {
1097
- for (let i = 0; i < array.length; i++) {
1098
- const status = array[i].status;
1099
- addOneTest(status, array[i]);
1100
- }
1101
- }
1102
-
1103
- const remove = (array) => {
1104
- for (let i = 0; i < array.length; i++) {
1105
- const status = array[i].status;
1106
- removeTest(status, array[i]);
1107
- }
1108
- }
1109
-
1110
- add(testEntries['all'][0][0]);
1111
-
1112
- const selectElement = document.querySelector('.form-select');
1113
-
1114
- selectElement.setAttribute('status', 'all');
1115
-
1116
- selectElement.addEventListener('change', function() {
1117
- let value = 0;
1118
- const category = selectElement.getAttribute('status');
1119
-
1120
- remove(testEntries[category][value][0]);
1121
- value = parseInt(this.value);
1122
- add(testEntries[category][value][0]);
1123
-
1124
- displayPagination(testEntries, value, category);
1125
- });
1126
-
1127
- const displayPagination = (testEntries, index, category) => {
1128
- let totalPages = testEntries[category][index].length;
1129
- let currentPage = 1;
1130
-
1131
- function createPagination() {
1132
- const paginationContainers = document.querySelectorAll('.pagination');
1133
- paginationContainers.forEach((paginationContainer) => {
1134
- paginationContainer.innerHTML = '';
1135
-
1136
- let startPage = 1;
1137
- let endPage = totalPages;
1138
- if (totalPages > 10) {
1139
- if (currentPage > 5) {
1140
- startPage = currentPage - 1;
1141
- endPage = currentPage + 1;
1142
- }
1143
- else {
1144
- endPage = 5;
1145
- }
1146
- }
1147
-
1148
- if (startPage > 1) {
1149
- const startEllipsis = document.createElement('li');
1150
-
1151
- startEllipsis.classList.add('page-item');
1152
- startEllipsis.innerHTML = '<a class="page-link" href="#pagination">...</a>';
1153
- startEllipsis.addEventListener('click', () => {
1154
- remove(testEntries[category][index][currentPage - 1]);
1155
- currentPage = 1;
1156
- add(testEntries[category][index][currentPage - 1]);
1157
- createPagination();
1158
- });
1159
-
1160
- paginationContainer.appendChild(startEllipsis);
1161
- }
1162
-
1163
- for (let i = startPage; i <= endPage; i++) {
1164
- if (i <= totalPages) {
1165
- const pageButton = document.createElement('li');
1166
- pageButton.classList.add('page-item');
1167
-
1168
- if (i === currentPage) {
1169
- pageButton.classList.add('active');
1170
- }
1171
-
1172
- pageButton.innerHTML = `<a class="page-link" href="#pagination">${i}</a>`;
1173
- pageButton.addEventListener('click', () => {
1174
- remove(testEntries[category][index][currentPage - 1]);
1175
- currentPage = i;
1176
- add(testEntries[category][index][currentPage - 1]);
1177
- createPagination();
1178
- });
1179
-
1180
- paginationContainer.appendChild(pageButton);
1181
- }
1182
- }
1183
-
1184
- if (endPage < totalPages) {
1185
- const endEllipsis = document.createElement('li');
1186
-
1187
- endEllipsis.classList.add('page-item');
1188
- endEllipsis.innerHTML = '<a class="page-link" href="#pagination">...</a>';
1189
- endEllipsis.addEventListener('click', () => {
1190
- remove(testEntries[category][index][currentPage - 1]);
1191
- currentPage = totalPages;
1192
- add(testEntries[category][index][currentPage - 1]);
1193
- createPagination();
1194
- });
1195
-
1196
- paginationContainer.appendChild(endEllipsis);
1197
- }
1198
-
1199
- if (currentPage > 1) {
1200
- const prevButton = document.createElement('li');
1201
-
1202
- prevButton.classList.add('page-item');
1203
- prevButton.innerHTML = '<a class="page-link" href="#pagination">Previous</a>';
1204
- prevButton.addEventListener('click', () => {
1205
- remove(testEntries[category][index][currentPage - 1]);
1206
- currentPage--;
1207
- add(testEntries[category][index][currentPage - 1]);
1208
- createPagination();
1209
- });
1210
-
1211
- paginationContainer.insertBefore(prevButton, paginationContainer.firstChild);
1212
- }
1213
- if (currentPage < totalPages) {
1214
- const nextButton = document.createElement('li');
1215
-
1216
- nextButton.classList.add('page-item');
1217
- nextButton.innerHTML = '<a class="page-link" href="#pagination">Next</a>';
1218
- nextButton.addEventListener('click', () => {
1219
- remove(testEntries[category][index][currentPage - 1]);
1220
- currentPage++;
1221
- add(testEntries[category][index][currentPage - 1]);
1222
- createPagination();
1223
- });
1224
-
1225
- paginationContainer.appendChild(nextButton);
1226
- }
1227
- });
1228
- }
1229
- createPagination();
1230
- }
1231
- displayPagination(testEntries, 0, 'all');
1232
- }
310
+ </div>
311
+ </section>
1233
312
 
313
+ <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
314
+ <script type='text/javascript'>
315
+ // Load google charts google.charts.load('current', {'packages':['corechart']});
316
+ google.charts.setOnLoadCallback(drawChart); // Draw the chart and set the chart values function drawChart() { let
317
+ data = {}; const passedTests =
318
+ {{getTestsByStatus tests 'PASSED'}}; const failedTests =
319
+ {{getTestsByStatus tests 'FAILED'}}; const skippedTests =
320
+ {{getTestsByStatus tests 'SKIPPED'}}; if (passedTests === 0 && failedTests === 0 && skippedTests === 0) { data =
321
+ google.visualization.arrayToDataTable([ ['Task', 'Tests'], ['No Tests', 1] ]) } else { data =
322
+ google.visualization.arrayToDataTable([ ['Task', 'Tests'], ['No Tests', 0], ['Passed', passedTests], ['Failed',
323
+ failedTests], ['Skipped', skippedTests], ]); } // Optional: add a title and set the width and height of the chart
324
+ const options = { 'title':'', 'width':550, 'height':300, 'colors': ['#939992', '#39BD2F', '#F2230C', '#F2C00C'] };
325
+ // Display the chart inside the <div> element with id="piechart" const chart = new
326
+ google.visualization.PieChart(document.getElementById('graff')); chart.draw(data, options); } // processing and
327
+ adding test data to the template function addOneTest(category,testData = {}){ const { suite_title, title, steps,
328
+ message, files } = testData; // radio btn test's count function incrementCount(element) { let count =
329
+ parseInt(element.textContent); count++; element.textContent = count; } function addCountToRadio(page,category){
330
+ const menuTests = page.querySelector('.menuTests'); const all =
331
+ menuTests.querySelector('span[name="numTest"][lcategory="all"]'); incrementCount(all); const elemCat =
332
+ menuTests.querySelector('span[name="numTest"][lcategory="' + category + '"]'); if (elemCat) {
333
+ incrementCount(elemCat); } } // collapse - expand block function collapse_expand(top){ const block =
334
+ top.closest('.testitem'); const icon = top.querySelector('.testitem__icon'); const testitem__ico_right =
335
+ icon.querySelector('.testitem__ico_right'); const testitem__ico_down = icon.querySelector('.testitem__ico_down');
336
+ const body = block.querySelector('.testitem__body'); if(body.classList.contains('d-none')){
337
+ body.classList.remove('d-none'); testitem__ico_right.classList.add('d-none');
338
+ testitem__ico_down.classList.remove('d-none'); } else{ body.classList.add('d-none');
339
+ testitem__ico_down.classList.add('d-none'); testitem__ico_right.classList.remove('d-none'); } } function
340
+ menu(clone){ function removeAddActive(elem){ const menu = elem.closest('.testitem__menu'); const item =
341
+ menu.querySelectorAll('.testitem__mitem'); for(let i=0; i<item.length; i++){
342
+ item[i].classList.remove('testitem__mitem_active'); } elem.classList.add('testitem__mitem_active'); } function
343
+ show_content(elem){ removeAddActive(elem); const body = elem.closest('.testitem__body'); const content =
344
+ body.querySelector('.testitem__content'); const blocks = content.querySelectorAll('.testitem__case'); for(let i=0;
345
+ i<blocks.length; i++){ blocks[i].classList.add('d-none'); } const type = elem.getAttribute('type'); const
346
+ show_elem = content.querySelector('div[type="'+type+'"]'); show_elem.classList.remove('d-none'); } const menu =
347
+ clone.querySelector('.testitem__menu'); const item = menu.querySelectorAll('.testitem__mitem'); for(let i=0;
348
+ i<item.length; i++){ item[i].addEventListener('click',function(){ show_content(item[i]) }) } } const page =
349
+ document.querySelector('.report'); const wrapp = page.querySelector('.testWrapp'); const dummy =
350
+ wrapp.querySelector('div[name="testitem"][type="dummy"]'); const clone = dummy.cloneNode(true);
351
+ clone.setAttribute('type','clone'); clone.setAttribute('category',category); clone.classList.remove('d-none');
352
+ wrapp.append(clone); const testitem__name = clone.querySelector('.testitem__name'); const fullTestName =
353
+ suite_title ? suite_title + " - " + title : title; testitem__name.textContent = fullTestName; const body =
354
+ clone.querySelector('.testitem__body'); let content = body.querySelector('.testitem__content'); let content_error
355
+ = content.querySelector('div[type="steps"]').querySelector('span'); content_error.innerHTML = steps; let
356
+ content_status = content.querySelector('div[type="status"]').querySelector('span'); content_status.innerHTML =
357
+ category; let content_message = content.querySelector('div[type="message"]').querySelector('span');
358
+ content_message.innerHTML = message; let content_files =
359
+ content.querySelector('div[type="files"]').querySelector('span'); if (files.includes("This test has no files")) {
360
+ content_files.innerHTML = files; } if (!files.includes("This test has no files")) { const filesList =
361
+ document.createElement('ul'); content_files.innerHTML = ""; if (Array.isArray(files) && files.length > 0) {
362
+ files.forEach((file) => { const listItem = document.createElement('li'); const fileLink =
363
+ document.createElement('a'); fileLink.href = file.path; fileLink.target = '_blank'; fileLink.textContent =
364
+ file.path; listItem.appendChild(fileLink); filesList.appendChild(listItem); });
365
+ content_files.appendChild(filesList); } } const testitem__top = clone.querySelector('.testitem__top');
366
+ testitem__top.addEventListener("click", function(){ collapse_expand(testitem__top); }); menu(clone);
367
+ addCountToRadio(page,category); } function radioMenuStart(){ function showBlockForCat(input){ const page =
368
+ input.closest('.report'); const wrapp = page.querySelector('.testWrapp'); const clone =
369
+ wrapp.querySelectorAll('div[name="testitem"][type="clone"]'); for(let i=0; i<clone.length; i++){
370
+ clone[i].classList.add('d-none'); } const category = input.getAttribute('category'); if(category == 'all'){
371
+ for(let i=0; i<clone.length; i++){ clone[i].classList.remove('d-none'); } } else{ for(let i=0; i<clone.length;
372
+ i++){ if(clone[i].getAttribute('category') == category){ clone[i].classList.remove('d-none'); } } } } const page =
373
+ document.querySelector('.report'); const menuTests = page.querySelector('.menuTests'); const items =
374
+ menuTests.querySelectorAll('input[name="groupTest"]'); for(let i=0; i<items.length; i++){
375
+ items[i].addEventListener('change',function(){ showBlockForCat(items[i]) }) } } radioMenuStart(); function
376
+ search(){ function searchBlock(input){ const value = input.value; const page = input.closest('.report'); const
377
+ wrapp = page.querySelector('.testWrapp'); const clone =
378
+ wrapp.querySelectorAll('div[name="testitem"][type="clone"]'); for(let i=0; i<clone.length; i++){
379
+ clone[i].classList.add('d-none'); } for(let i=0; i<clone.length; i++){ let testitem__name =
380
+ clone[i].querySelector('.testitem__name'); let nameInBlock = testitem__name.textContent;
381
+ if(nameInBlock.includes(value)){ clone[i].classList.remove('d-none'); } } } const page =
382
+ document.querySelector('.report'); const inputSearch = page.querySelector('.inputSearch');
383
+ inputSearch.addEventListener('input',function(){ searchBlock(inputSearch) }) } search(); const executedTests =
384
+ {{{json tests}}}; for (let i = 0; i < executedTests.length; i++) { const status = executedTests[i].status;
385
+ addOneTest(status, executedTests[i]); }
1234
386
  </script>
1235
- </body>
387
+ </body>
1236
388
  </html>