@testomatio/reporter 1.2.1 → 1.2.2-beta-html-pagination-feature

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.
@@ -1,5 +1,6 @@
1
+ <!DOCTYPE html>
1
2
  <html lang='en'>
2
- <head>
3
+ <head>
3
4
  <meta charset='UTF-8' />
4
5
  <meta
5
6
  name='viewport'
@@ -25,364 +26,1201 @@
25
26
  <title>Report Testomat.io</title>
26
27
  {{/if}}
27
28
  <style>
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; }
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
+ /* Passed TAB*/
270
+ #passedTest:not(:checked) + .btn-outline-dark {
271
+ background-color: #39BD2F;
272
+ }
273
+ #passedTest:checked + .btn-outline-dark {
274
+ background-color: #68cf61;
275
+ color: white;
276
+ }
277
+ /* Failed TAB*/
278
+ #failedTest:not(:checked) + .btn-outline-dark {
279
+ background-color: #F2230C;
280
+ }
281
+ #failedTest:checked + .btn-outline-dark {
282
+ background-color: #FA6E5E;
283
+ color: white;
284
+ }
285
+ /* Skipped TAB*/
286
+ #skippedTest:not(:checked) + .btn-outline-dark {
287
+ background-color: #F2C00C;
288
+ }
289
+ #skippedTest:checked + .btn-outline-dark {
290
+ background-color: #dfc155;
291
+ }
292
+ /* Pagination component styles*/
293
+ .page-link {
294
+ color: black;
295
+ background: #f5f5f8;
296
+ }
297
+ .page-link:hover {
298
+ color: black;
299
+ }
300
+ .form-select:focus {
301
+ border-color: #adadad;
302
+ box-shadow: 0 0 0 0.25rem rgb(67 71 78 / 25%);
303
+ }
304
+ .page-item.active .page-link {
305
+ background: #d1d1d2;
306
+ border-color: #adadad;
307
+ }
308
+ .noData {
309
+ background: #e9ecef;
310
+ text-align: center;
311
+ height: 100px;
312
+ padding-top: 39px;
313
+ border-radius: 5px;
314
+ }
64
315
  </style>
65
- </head>
316
+ </head>
66
317
 
67
- <body class='bg-gray-50 pt-6 px-4 lg:pt-4 lg:px-40 h-full;'>
318
+ <body class='bg-gray-50 pt-6 px-4 lg:pt-4 lg:px-40 h-full;'>
68
319
  <section class='report' id='report'>
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>
320
+ <div class='container'>
321
+ <!-- top -->
322
+ <div class='row level_1'>
323
+ <div class='col-12'>
324
+ <div class='header'>
325
+ <div class='header__block'>
326
+ {{#if runId}}
327
+ <div class='header__case'>
328
+ <p>Run</p>
329
+ <span><strong>#</strong>{{runId}}</span>
330
+ </div>
331
+ {{/if}}
332
+ <p class='header__type'>
333
+ <i class='fa-solid fa-face-smile'></i>
334
+ automated job
335
+ </p>
336
+ </div>
337
+ <div class='header__block'>
338
+ {{#if runUrl}}
339
+ <a href='{{runUrl}}' target='_blank' class='btn btn-primary'>
340
+ Full Report
341
+ </a>
342
+ {{else}}
343
+ <button class='btn btn-primary' disabled>
344
+ Full Report
345
+ </button>
346
+ {{/if}}
347
+ </div>
348
+ </div>
97
349
  </div>
98
- </div>
99
- </div>
100
- <!-- top -->
101
-
102
- <div class='row level_2'>
103
- <div class='col-12'>
104
- <div class='title'>
105
- <p>Testomatio Run Information</p>
106
350
  </div>
107
- </div>
108
- </div>
351
+ <!-- top -->
109
352
 
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>
353
+ <div class='row level_2'>
354
+ <div class='col-12'>
355
+ <div class='title'>
356
+ <p>Testomatio Run Information</p>
129
357
  </div>
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>
358
+ </div>
359
+ </div>
360
+
361
+ <!-- Schedule and information -->
362
+ <div class='row level_3'>
363
+ <div class='col-6'>
364
+ <div class='statleft'>
365
+ <div id='graff'></div>
366
+ </div>
137
367
  </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>
368
+ <div class='col-6'>
369
+ <div class='statright'>
370
+ <div class='statdesc'>
371
+ <!-- 1 -->
372
+ <div class='statdesc__row'>
373
+ <div class='statdesc__row_first'>
374
+ <p>Status</p>
375
+ </div>
376
+ <div class='statstatus statstatus_{{status}}'>
377
+ <div></div>
378
+ <p>{{status}}</p>
379
+ </div>
380
+ </div>
381
+ <!-- 1 -->
382
+ <!-- 1 -->
383
+ <div class='statdesc__row'>
384
+ <div class='statdesc__row_first'>
385
+ <p>Execution Duration</p>
386
+ </div>
387
+ <span>{{executionTime}}</span>
388
+ </div>
389
+ <!-- 1 -->
390
+ <!-- 1 -->
391
+ <div class='statdesc__row'>
392
+ <div class='statdesc__row_first'>
393
+ <p>Tests</p>
394
+ </div>
395
+ <span>{{tests.length}}</span>
396
+ </div>
397
+ <!-- 1 -->
398
+ <!-- 1 -->
399
+ <div class='statdesc__row'>
400
+ <div class='statdesc__row_first'>
401
+ <p>Start Execution Date</p>
402
+ </div>
403
+ <span>{{executionDate}}</span>
404
+ </div>
405
+ <!-- 1 -->
145
406
  </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>
153
407
  </div>
154
- <!-- 1 -->
155
- </div>
156
408
  </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
- />
175
409
  </div>
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>
410
+ <!-- Schedule and information -->
411
+ <div class='row level_4'>
412
+ <div class='col-6'>
413
+ <div class='input-group'>
414
+ <div class='input-group-prepend'>
415
+ <span class='input-group-text' id='basic-addon1'>
416
+ <i class='fa-solid fa-magnifying-glass'></i>
417
+ </span>
418
+ </div>
419
+ <input
420
+ type='text'
421
+ class='form-control inputSearch'
422
+ placeholder='Search'
423
+ aria-label='Search'
424
+ aria-describedby='basic-addon1'
425
+ />
426
+ </div>
427
+ </div>
225
428
 
226
- </div>
227
- </div>
228
- </div>
429
+ <div class='col-6 d-flex justify-content-end'>
430
+ <div class='btn-group menuTests' role='group' aria-label='Basic radio toggle button group'>
431
+
432
+ <input
433
+ type='radio'
434
+ class='btn-check'
435
+ name='groupTest'
436
+ id='allTest'
437
+ autocomplete='off'
438
+ category='all'
439
+ checked
440
+ />
441
+ <label class='btn btn-outline-dark' for='allTest'>All
442
+ <span class='numTest' name='numTest' lcategory='all'>0</span>
443
+ </label>
444
+
445
+ <input
446
+ type='radio'
447
+ class='btn-check'
448
+ name='groupTest'
449
+ id='passedTest'
450
+ autocomplete='off'
451
+ category='passed'
452
+ />
453
+ <label class='btn btn-outline-dark' for='passedTest'>Passed
454
+ <span class='numTest' name='numTest' lcategory='passed'>0</span>
455
+ </label>
229
456
 
230
- <div class='row level_5'>
231
- <div class='col-12'>
232
- {{#if tests.length}}
233
- <div class='testWrapp'>
234
- {{#each tests}}
457
+ <input
458
+ type='radio'
459
+ class='btn-check'
460
+ name='groupTest'
461
+ id='failedTest'
462
+ autocomplete='off'
463
+ category='failed'
464
+ />
465
+ <label class='btn btn-outline-dark' for='failedTest'>Failed
466
+ <span class='numTest' name='numTest' lcategory='failed'>0</span>
467
+ </label>
235
468
 
236
- <div class='testitem d-none' name='testitem' type='dummy' category='false'>
469
+ <input
470
+ type='radio'
471
+ class='btn-check'
472
+ name='groupTest'
473
+ id='skippedTest'
474
+ autocomplete='off'
475
+ category='skipped'
476
+ />
477
+ <label class='btn btn-outline-dark' for='skippedTest'>Skipped
478
+ <span class='numTest' name='numTest' lcategory='skipped'>0</span>
479
+ </label>
237
480
 
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
481
  </div>
482
+ </div>
483
+ </div>
245
484
 
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>
293
- </div>
294
- <!-- 4 -->
295
- </div>
485
+ <div class="row level_5">
486
+ <div class="col-12">
487
+ {{#if tests.length}}
488
+ <!-- TOP pagination & select components -->
489
+ <div class="mt-5 mb-3 d-flex justify-content-between" style="height: 40px;">
490
+ <nav id="pagination">
491
+ <ul class="pagination">
492
+ </ul>
493
+ </nav>
494
+ {{ selectComponent }}
296
495
  </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>
496
+ <!-- Test data section -->
497
+ <div class="testWrapp">
498
+ {{#each tests}}
499
+
500
+ <div class="testitem d-none" name="testitem" type="dummy" category="false">
501
+
502
+ <div class="testitem__top">
503
+ <div class="testitem__icon">
504
+ <i class="fa-solid fa-chevron-right testitem__ico testitem__ico_right"></i>
505
+ <i class="fa-solid fa-chevron-down d-none testitem__ico testitem__ico_down"></i>
506
+ </div>
507
+ <p class="testitem__name">Test</p>
508
+ </div>
509
+
510
+ <div class="testitem__body d-none">
511
+
512
+ <div class='testitem__menu'>
513
+ <span type='steps' class='testitem__mitem testitem__mitem_active'>Steps
514
+ <i class='fa-solid fa-arrow-right'></i></span>
515
+ <span type='status' class='testitem__mitem'>Status
516
+ <i class='fa-solid fa-arrow-right'></i></span>
517
+ <span type='message' class='testitem__mitem'>Message
518
+ <i class='fa-solid fa-arrow-right'></i></span>
519
+ <span type='files' class='testitem__mitem'>Files <i class='fa-solid fa-arrow-right'></i></span>
520
+ </div>
521
+
522
+ <div class="testitem__content">
523
+ <!-- 1 -->
524
+ <div class="testitem__case" type="steps">
525
+ <p class="testitem__title">Steps</p>
526
+ <div class="testitem__block">
527
+ <span>...</span>
528
+ </div>
529
+ </div>
530
+ <!-- 1 -->
531
+
532
+ <!-- 2 -->
533
+ <div class='testitem__case d-none' type='status'>
534
+ <p class='testitem__title'>Status</p>
535
+ <div class='testitem__block'>
536
+ <span>...</span>
537
+ </div>
538
+ </div>
539
+ <!-- 2 -->
540
+
541
+ <!-- 3 -->
542
+ <div class='testitem__case d-none' type='message'>
543
+ <p class='testitem__title'>Message</p>
544
+ <div class='testitem__block'>
545
+ <span>...</span>
546
+ </div>
547
+ </div>
548
+ <!-- 3 -->
549
+
550
+ <!-- 4 -->
551
+ <div class='testitem__case d-none' type='files'>
552
+ <p class='testitem__title'>Files</p>
553
+ <div class='testitem__block'>
554
+ <span>...</span>
555
+ </div>
556
+ </div>
557
+ <!-- 4 -->
558
+ </div>
559
+ </div>
560
+ </div>
561
+ {{/each}}
562
+ </div>
563
+ <!-- BOTTOM pagination & select components -->
564
+ <nav class="mt-2">
565
+ <ul class="pagination">
566
+ </ul>
567
+ </nav>
568
+ {{else}}
569
+ <!-- No tests found section -->
570
+ {{ emptyDataComponent }}
571
+ {{/if}}
304
572
  </div>
305
- </div>
306
- {{/if}}
307
- </div>
308
- </div>
573
+ </div>
309
574
 
310
- </div>
575
+ </div>
311
576
  </section>
312
577
 
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]); }
578
+ <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
579
+ <script type="text/javascript">
580
+ // Load google charts
581
+ google.charts.load('current', {'packages':['corechart']});
582
+ google.charts.setOnLoadCallback(drawChart);
583
+
584
+ // Draw the chart and set the chart values
585
+ function drawChart() {
586
+ let data = {};
587
+ const passedTests = {{getTestsByStatus tests "PASSED"}};
588
+ const failedTests = {{getTestsByStatus tests "FAILED"}};
589
+ const skippedTests = {{getTestsByStatus tests "SKIPPED"}};
590
+
591
+ if (passedTests === 0 && failedTests === 0 && skippedTests === 0) {
592
+ data = google.visualization.arrayToDataTable([
593
+ ['Task', 'Tests'],
594
+ ['No Tests', 1]
595
+ ])
596
+ }
597
+ else {
598
+ data = google.visualization.arrayToDataTable([
599
+ ['Task', 'Tests'],
600
+ ['No Tests', 0],
601
+ ['Passed', passedTests],
602
+ ['Failed', failedTests],
603
+ ['Skipped', skippedTests],
604
+ ]);
605
+ }
606
+ // Optional: add a title and set the width and height of the chart
607
+ const options = {
608
+ 'title':'',
609
+ 'width':550,
610
+ 'height':300,
611
+ 'colors': ['#939992', '#39BD2F', '#F2230C', '#F2C00C']
612
+ };
613
+ // Display the chart inside the <div> element with id="piechart"
614
+ const chart = new google.visualization.PieChart(document.getElementById('graff'));
615
+ chart.draw(data, options);
616
+ }
617
+
618
+ // processing and adding test data to the template
619
+ function addOneTest(category,testData = {}){
620
+ const { suite_title, title, steps, message, files } = testData;
621
+ // collapse - expand block
622
+ const clone = createClone(category, suite_title, title);
623
+ const testitem__top = clone.querySelector('.testitem__top');
624
+
625
+ setTestItemContent(clone, steps, category, message, files);
626
+ addCollapseExpandListener(testitem__top);
627
+ initializeMenu(clone);
628
+ }
629
+
630
+ function createClone(category, suite_title, title) {
631
+ const page = document.querySelector('.report');
632
+ const wrapp = page.querySelector('.testWrapp');
633
+ const dummy = wrapp.querySelector('div[name="testitem"][type="dummy"]');
634
+ const clone = dummy.cloneNode(true);
635
+
636
+ clone.setAttribute('type', 'clone');
637
+ clone.setAttribute('category', category);
638
+ clone.classList.remove('d-none');
639
+ wrapp.append(clone);
640
+
641
+ const testitem__name = clone.querySelector('.testitem__name');
642
+ testitem__name.innerHTML = suite_title ? suite_title + " - " + title : title;
643
+
644
+ return clone;
645
+ }
646
+
647
+ function setTestItemContent(clone, steps, category, message, files) {
648
+ const body = clone.querySelector('.testitem__body');
649
+
650
+ let content = body.querySelector('.testitem__content'),
651
+ content_error = content.querySelector('div[type="steps"]').querySelector('span'),
652
+ content_status = content.querySelector('div[type="status"]').querySelector('span'),
653
+ content_message = content.querySelector('div[type="message"]').querySelector('span'),
654
+ content_files = content.querySelector('div[type="files"]').querySelector('span');
655
+
656
+ content_error.innerHTML = steps;
657
+ content_status.innerHTML = category;
658
+ content_message.innerHTML = message;
659
+ //if no file - empty message, else - files
660
+ (files.includes("This test has no files"))
661
+ ? content_files.innerHTML = files
662
+ : addFilesToContent(content_files, files);
663
+ }
664
+
665
+ function addFilesToContent(content_files, files) {
666
+ const filesList = document.createElement('div');
667
+
668
+ filesList.classList.add('d-flex', 'flex-wrap', 'flex-column');
669
+ content_files.innerHTML = "";
670
+
671
+ if (Array.isArray(files) && files.length > 0) {
672
+ for (let i = 0; i < files.length; i += 2) {
673
+ const filePairContainer = document.createElement('div');
674
+ filePairContainer.classList.add('d-flex', 'mb-3', 'justify-content-around');
675
+
676
+ for (let j = i; j < i + 2 && j < files.length; j++) {
677
+ const file = files[j];
678
+ const fileItemContainer = createFileItemContainer(file);
679
+ filePairContainer.appendChild(fileItemContainer);
680
+ }
681
+
682
+ filesList.appendChild(filePairContainer);
683
+ }
684
+
685
+ content_files.appendChild(filesList);
686
+ }
687
+ }
688
+
689
+ function createFileItemContainer(file) {
690
+ let fileIcon;
691
+ const fileName = createFileName(file),
692
+ fileItemContainer = document.createElement('div');
693
+
694
+ const fileExtension = file.path.split('.').pop().toLowerCase();
695
+
696
+ fileItemContainer.classList.add('d-flex', 'flex-column', 'align-items-center', 'mr-3');
697
+
698
+ switch (fileExtension) {
699
+ case 'jpg':
700
+ case 'jpeg':
701
+ case 'png':
702
+ case 'gif':
703
+ fileIcon = createImagePreview(file);
704
+ break;
705
+ case 'zip':
706
+ const svgZipCode =
707
+ `<?xml version="1.0" encoding="iso-8859-1"?>
708
+ <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
709
+ viewBox="0 0 512 512" xml:space="preserve">
710
+ <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
711
+ c0,117.769,79.53,216.949,187.809,246.801L511.344,274.266z"/>
712
+ <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
713
+ C391.243,512,501.976,407.125,511.344,274.266z"/>
714
+ <polygon style="fill:#FFFFFF;" points="278.328,333.913 255.711,77.913 119.096,77.913 119.096,311.652 "/>
715
+ <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
716
+ 256.067,333.913 "/>
717
+ <polygon style="fill:#FFFFFF;" points="314.991,155.826 314.991,77.913 392.904,155.826 "/>
718
+ <rect x="119.096" y="311.652" style="fill:#9E7120;" width="273.809" height="122.435"/>
719
+ <g>
720
+ <path style="fill:#FFFFFF;" d="M210.927,388.691h28.759v10.671h-46.771v-8.627l28.38-33.677H193.9v-10.671h45.332v8.627
721
+ L210.927,388.691z"/>
722
+ <path style="fill:#FFFFFF;" d="M249.075,399.362v-52.975h13.471v52.975H249.075z"/>
723
+ <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
724
+ 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
725
+ c0-5.525-3.405-8.324-9.307-8.324h-8.93V373.858z"/>
726
+ </g>
727
+ </svg>`;
728
+ fileIcon = createFileIcon(file,svgZipCode);
729
+ break;
730
+ case 'mp4':
731
+ case 'avi':
732
+ case 'mov':
733
+ case 'webm':
734
+ const svgVideoCode =
735
+ `<?xml version="1.0" encoding="iso-8859-1"?>
736
+ <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"
737
+ viewBox="0 0 503.467 503.467" xml:space="preserve">
738
+ <g transform="translate(5 1)">
739
+ <path style="fill:#F2EDDA;" d="M460.067,122.733v341.333c0,18.773-15.36,34.133-34.133,34.133h-358.4
740
+ 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
741
+ H460.067z"/>
742
+ <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"/>
743
+ <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
744
+ c-61.44,0-110.933-49.493-110.933-110.933S185.293,191,246.733,191L246.733,191z"/>
745
+ <polygon style="fill:#ECF4F7;" points="280.867,301.933 221.133,336.067 221.133,267.8 "/>
746
+ </g>
747
+ <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
748
+ 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
749
+ 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
750
+ 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
751
+ 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
752
+ 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
753
+ 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
754
+ 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
755
+ 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
756
+ 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
757
+ C227.84,341.333,226.987,341.333,226.133,341.333z M230.4,276.48v53.76l46.933-26.453L230.4,276.48z"/>
758
+ </svg>`;
759
+ fileIcon = createFileIcon(file, svgVideoCode);
760
+ break;
761
+ default:
762
+ const svgFileCode =
763
+ `<?xml version="1.0" encoding="iso-8859-1"?>
764
+ <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
765
+ viewBox="0 0 512 512" xml:space="preserve">
766
+ <polygon style="fill:#72C6EF;" points="384,448 128,448 128,64 288,64 288,160 384,160 "/>
767
+ <path style="fill:#00384E;" d="M310.624,0H64v512h384V137.376L310.624,0z M320,54.624L393.376,128H320V54.624z M96,480V32h192v128
768
+ h128v320H96z"/>
769
+ <g>
770
+ <rect x="176" y="368" style="fill:#00384D;" width="160" height="32"/>
771
+ <rect x="176" y="304" style="fill:#00384D;" width="160" height="32"/>
772
+ <rect x="176" y="240" style="fill:#00384D;" width="160" height="32"/>
773
+ </g>
774
+ </svg>`;
775
+ fileIcon = createFileIcon(file, svgFileCode);
776
+ }
777
+
778
+ fileItemContainer.appendChild(fileIcon);
779
+ fileItemContainer.appendChild(fileName);
780
+
781
+ return fileItemContainer;
782
+ }
783
+
784
+ function createImagePreview(file) {
785
+ const imagePreview = document.createElement('img');
786
+ // component styles
787
+ imagePreview.src = file.path;
788
+ imagePreview.alt = 'Image Preview';
789
+ imagePreview.style.maxWidth = '150px';
790
+ imagePreview.style.height = '200px';
791
+ imagePreview.style.cursor = 'pointer';
792
+
793
+ imagePreview.addEventListener('click', () => {
794
+ window.open(file.path, '_blank');
795
+ });
796
+
797
+ return imagePreview;
798
+ }
799
+
800
+ function createFileIcon(file, svg) {
801
+ const fileIcon = document.createElement('div');
802
+ // component styles
803
+ fileIcon.innerHTML = svg;
804
+ fileIcon.style.width = '150px';
805
+ fileIcon.style.height = '150px';
806
+ fileIcon.style.cursor = 'pointer';
807
+
808
+ fileIcon.addEventListener('click', () => {
809
+ window.open(file.path, '_blank');
810
+ });
811
+
812
+ return fileIcon;
813
+ }
814
+
815
+ function createFileName(file) {
816
+ const fileName = document.createElement('div');
817
+ // component styles
818
+ fileName.style.fontSize = '14px';
819
+ fileName.style.marginTop = '10px';
820
+ fileName.style.cursor = 'pointer';
821
+
822
+ fileName.textContent = file.path.split('/').pop().split('.').slice(0, -1).join('.');
823
+
824
+ fileName.addEventListener('click', () => {
825
+ window.open(file.path, '_blank');
826
+ });
827
+
828
+ return fileName;
829
+ }
830
+
831
+ function addCollapseExpandListener(testitem__top) {
832
+ testitem__top.addEventListener("click", function () {
833
+ collapse_expand(testitem__top);
834
+ });
835
+ }
836
+
837
+ function collapse_expand(top) {
838
+ const block = top.closest('.testitem');
839
+ const icon = top.querySelector('.testitem__icon');
840
+ const testitem__ico_right = icon.querySelector('.testitem__ico_right');
841
+ const testitem__ico_down = icon.querySelector('.testitem__ico_down');
842
+ const body = block.querySelector('.testitem__body');
843
+
844
+ if (body.classList.contains('d-none')) {
845
+ body.classList.remove('d-none');
846
+ testitem__ico_right.classList.add('d-none');
847
+ testitem__ico_down.classList.remove('d-none');
848
+ }
849
+ else {
850
+ body.classList.add('d-none');
851
+ testitem__ico_down.classList.add('d-none');
852
+ testitem__ico_right.classList.remove('d-none');
853
+ }
854
+ }
855
+
856
+ function initializeMenu(clone) {
857
+ const menu = clone.querySelector('.testitem__menu');
858
+ const item = menu.querySelectorAll('.testitem__mitem');
859
+
860
+ for (let i = 0; i < item.length; i++) {
861
+ item[i].addEventListener('click', function () {
862
+ show_content(item[i])
863
+ })
864
+ }
865
+ }
866
+
867
+ function show_content(elem) {
868
+ removeAddActive(elem);
869
+
870
+ const body = elem.closest('.testitem__body');
871
+ const content = body.querySelector('.testitem__content');
872
+ const blocks = content.querySelectorAll('.testitem__case');
873
+
874
+ for (let i = 0; i < blocks.length; i++) {
875
+ blocks[i].classList.add('d-none');
876
+ }
877
+
878
+ const type = elem.getAttribute('type');
879
+ const show_elem = content.querySelector('div[type="' + type + '"]');
880
+
881
+ show_elem.classList.remove('d-none');
882
+ }
883
+
884
+ function removeAddActive(elem) {
885
+ const menu = elem.closest('.testitem__menu');
886
+ const item = menu.querySelectorAll('.testitem__mitem');
887
+
888
+ for (let i = 0; i < item.length; i++) {
889
+ item[i].classList.remove('testitem__mitem_active');
890
+ }
891
+ elem.classList.add('testitem__mitem_active');
892
+ }
893
+
894
+ // GET test data
895
+ const testEntries = {{{ pageDispleyElements tests }}};
896
+ const allEntries = testEntries['totalTests'];
897
+
898
+ if (allEntries.length === 0) {
899
+ const searchEl = document.querySelector('.input-group');
900
+ const radioEl = document.querySelector('.menuTests');
901
+
902
+ searchEl.classList.add('d-none')
903
+ radioEl.classList.add('d-none')
904
+ }
905
+ else {
906
+ function search(array, testEntries) {
907
+ const handleSearch = (input) => {
908
+ const value = input.value.trim().toLowerCase();
909
+ const select = document.querySelector('.form-select');
910
+ const pagination = document.querySelectorAll('nav');
911
+
912
+ if (value) {
913
+ select.classList.add('d-none');
914
+ pagination.forEach(item => item.classList.add('d-none'));
915
+ }
916
+ else {
917
+ select.classList.remove('d-none');
918
+ pagination.forEach(item => item.classList.remove('d-none'));
919
+
920
+ remove(array);
921
+
922
+ const paginationCount = select.value;
923
+ const category = select.getAttribute('status');
924
+
925
+ if (testEntries[category][paginationCount][0]) {
926
+ add(testEntries[category][paginationCount][0]);
927
+ }
928
+ }
929
+
930
+ remove(array);
931
+
932
+ const filteredTests = array.filter(test => test.title.toLowerCase().includes(value) || test.suite_title.toLowerCase().includes(value));
933
+
934
+ const existingNoDataElement = document.querySelector('.noResults');
935
+
936
+ if (filteredTests.length === 0) {
937
+ if (!existingNoDataElement) {
938
+ const testElement = document.createElement('div');
939
+ testElement.classList.add('noData', 'noResults');
940
+ testElement.innerHTML = 'NO SEARCH RESULTS';
941
+ document.querySelector('.testWrapp').appendChild(testElement);
942
+ }
943
+ }
944
+ else {
945
+ const paginationCount = select.value;
946
+ const category = select.getAttribute('status');
947
+
948
+ if (existingNoDataElement) {
949
+ existingNoDataElement.remove();
950
+ }
951
+
952
+ if (testEntries[category][paginationCount][0]) {
953
+ add(filteredTests);
954
+ if (!value) {
955
+ remove(filteredTests);
956
+ add(testEntries[category][paginationCount][0]);
957
+ }
958
+ }
959
+ else {
960
+ if (value) {
961
+ add(filteredTests);
962
+ }
963
+ else {
964
+ if (!existingNoDataElement) {
965
+ const testElement = document.createElement('div');
966
+
967
+ select.classList.add('d-none');
968
+ testElement.classList.add('noData', 'noResults');
969
+ testElement.innerHTML = 'NO RESULTS';
970
+ document.querySelector('.testWrapp').appendChild(testElement);
971
+ }
972
+ }
973
+ }
974
+ }
975
+ };
976
+
977
+ const inputSearch = document.querySelector('.report .inputSearch');
978
+ inputSearch.addEventListener('input', () => handleSearch(inputSearch));
979
+ }
980
+
981
+ function radioMenuStart(){
982
+ function showBlockForCat(input){
983
+ const searchEl = document.querySelector('.input-group'),
984
+ element = document.querySelector('.form-select')
985
+ let category = 'all';
986
+
987
+ remove(testEntries[category][0][0]);
988
+
989
+ category = input.getAttribute('category');
990
+ element.setAttribute('status', category);
991
+
992
+ const pagination = document.querySelectorAll('nav');
993
+ pagination.forEach(item => item.classList.add('d-none'));
994
+
995
+ let inputEl = document.querySelector('.inputSearch');
996
+ inputEl.value = '';
997
+
998
+ pagination.forEach(item => item.classList.remove('d-none'));
999
+
1000
+ displayPagination(testEntries,element.value,category);
1001
+
1002
+ if(testEntries[category][0][0]){
1003
+ element.classList.remove('d-none');
1004
+ const existingNoDataElement = document.querySelector('.noResults');
1005
+
1006
+ if (existingNoDataElement) {
1007
+ existingNoDataElement.remove();
1008
+ }
1009
+
1010
+ searchEl.classList.remove('d-none');
1011
+ add(testEntries[category][element.value][0]);
1012
+ }
1013
+ else {
1014
+ element.classList.add('d-none');
1015
+ const existingNoDataElement = document.querySelector('.noResults');
1016
+
1017
+ if (existingNoDataElement) {
1018
+ existingNoDataElement.remove();
1019
+ }
1020
+
1021
+ const testElement = document.createElement('div');
1022
+ testElement.classList.add('noData');
1023
+ testElement.classList.add('noResults');
1024
+ testElement.innerHTML = 'NO RESULTS';
1025
+ searchEl.classList.add('d-none');
1026
+
1027
+ const testWrapp = document.querySelector('.testWrapp');
1028
+ testWrapp.appendChild(testElement);
1029
+ }
1030
+ }
1031
+
1032
+ const page = document.querySelector('.report');
1033
+ const menuTests = page.querySelector('.menuTests');
1034
+ const items = menuTests.querySelectorAll('input[name="groupTest"]');
1035
+
1036
+ for(let i=0; i<items.length; i++){
1037
+ items[i].addEventListener('change',function(){
1038
+ showBlockForCat(items[i])
1039
+ })
1040
+ }
1041
+ }
1042
+
1043
+ radioMenuStart();
1044
+
1045
+ search(allEntries, testEntries);
1046
+
1047
+ const radioCount = (allEntries) => {
1048
+ const allRadio = document.querySelectorAll('.numTest');
1049
+
1050
+ allRadio.forEach((radio) => {
1051
+ const attribute = radio.getAttribute('lcategory');
1052
+
1053
+ switch (attribute) {
1054
+ case 'all':
1055
+ radio.innerHTML = allEntries.length;
1056
+ break;
1057
+ case 'passed':
1058
+ const passedCount = allEntries.filter(test => test.status === 'passed').length;
1059
+ radio.innerHTML = passedCount;
1060
+ break;
1061
+ case 'failed':
1062
+ const failedCount = allEntries.filter(test => test.status === 'failed').length;
1063
+ radio.innerHTML = failedCount;
1064
+ break;
1065
+ case 'skipped':
1066
+ const skippedCount = allEntries.filter(test => test.status === 'skipped').length;
1067
+ radio.innerHTML = skippedCount;
1068
+ break;
1069
+ default: // no default action for now
1070
+ }
1071
+ });
1072
+ }
1073
+
1074
+ radioCount(allEntries);
1075
+
1076
+ function removeTest(category) {
1077
+ const page = document.querySelector('.report');
1078
+ const wrapp = page.querySelector('.testWrapp');
1079
+ const clones = wrapp.querySelectorAll('div[name="testitem"][type="clone"]');
1080
+
1081
+ clones.forEach((clone) => {
1082
+ if (clone.getAttribute('category') === category) clone.remove();
1083
+ });
1084
+ }
1085
+
1086
+ const add = (array) => {
1087
+ for (let i = 0; i < array.length; i++) {
1088
+ const status = array[i].status;
1089
+ addOneTest(status, array[i]);
1090
+ }
1091
+ }
1092
+
1093
+ const remove = (array) => {
1094
+ for (let i = 0; i < array.length; i++) {
1095
+ const status = array[i].status;
1096
+ removeTest(status, array[i]);
1097
+ }
1098
+ }
1099
+
1100
+ add(testEntries['all'][0][0]);
1101
+
1102
+ const selectElement = document.querySelector('.form-select');
1103
+
1104
+ selectElement.setAttribute('status', 'all');
1105
+
1106
+ selectElement.addEventListener('change', function() {
1107
+ let value = 0;
1108
+ const category = selectElement.getAttribute('status');
1109
+
1110
+ remove(testEntries[category][value][0]);
1111
+ value = parseInt(this.value);
1112
+ add(testEntries[category][value][0]);
1113
+
1114
+ displayPagination(testEntries, value, category);
1115
+ });
1116
+
1117
+ const displayPagination = (testEntries, index, category) => {
1118
+ let totalPages = testEntries[category][index].length;
1119
+ let currentPage = 1;
1120
+
1121
+ function createPagination() {
1122
+ const paginationContainers = document.querySelectorAll('.pagination');
1123
+ paginationContainers.forEach((paginationContainer) => {
1124
+ paginationContainer.innerHTML = '';
1125
+
1126
+ let startPage = 1;
1127
+ let endPage = totalPages;
1128
+ if (totalPages > 10) {
1129
+ if (currentPage > 5) {
1130
+ startPage = currentPage - 1;
1131
+ endPage = currentPage + 1;
1132
+ }
1133
+ else {
1134
+ endPage = 5;
1135
+ }
1136
+ }
1137
+
1138
+ if (startPage > 1) {
1139
+ const startEllipsis = document.createElement('li');
1140
+
1141
+ startEllipsis.classList.add('page-item');
1142
+ startEllipsis.innerHTML = '<a class="page-link" href="#pagination">...</a>';
1143
+ startEllipsis.addEventListener('click', () => {
1144
+ remove(testEntries[category][index][currentPage - 1]);
1145
+ currentPage = 1;
1146
+ add(testEntries[category][index][currentPage - 1]);
1147
+ createPagination();
1148
+ });
1149
+
1150
+ paginationContainer.appendChild(startEllipsis);
1151
+ }
1152
+
1153
+ for (let i = startPage; i <= endPage; i++) {
1154
+ if (i <= totalPages) {
1155
+ const pageButton = document.createElement('li');
1156
+ pageButton.classList.add('page-item');
1157
+
1158
+ if (i === currentPage) {
1159
+ pageButton.classList.add('active');
1160
+ }
1161
+
1162
+ pageButton.innerHTML = `<a class="page-link" href="#pagination">${i}</a>`;
1163
+ pageButton.addEventListener('click', () => {
1164
+ remove(testEntries[category][index][currentPage - 1]);
1165
+ currentPage = i;
1166
+ add(testEntries[category][index][currentPage - 1]);
1167
+ createPagination();
1168
+ });
1169
+
1170
+ paginationContainer.appendChild(pageButton);
1171
+ }
1172
+ }
1173
+
1174
+ if (endPage < totalPages) {
1175
+ const endEllipsis = document.createElement('li');
1176
+
1177
+ endEllipsis.classList.add('page-item');
1178
+ endEllipsis.innerHTML = '<a class="page-link" href="#pagination">...</a>';
1179
+ endEllipsis.addEventListener('click', () => {
1180
+ remove(testEntries[category][index][currentPage - 1]);
1181
+ currentPage = totalPages;
1182
+ add(testEntries[category][index][currentPage - 1]);
1183
+ createPagination();
1184
+ });
1185
+
1186
+ paginationContainer.appendChild(endEllipsis);
1187
+ }
1188
+
1189
+ if (currentPage > 1) {
1190
+ const prevButton = document.createElement('li');
1191
+
1192
+ prevButton.classList.add('page-item');
1193
+ prevButton.innerHTML = '<a class="page-link" href="#pagination">Previous</a>';
1194
+ prevButton.addEventListener('click', () => {
1195
+ remove(testEntries[category][index][currentPage - 1]);
1196
+ currentPage--;
1197
+ add(testEntries[category][index][currentPage - 1]);
1198
+ createPagination();
1199
+ });
1200
+
1201
+ paginationContainer.insertBefore(prevButton, paginationContainer.firstChild);
1202
+ }
1203
+ if (currentPage < totalPages) {
1204
+ const nextButton = document.createElement('li');
1205
+
1206
+ nextButton.classList.add('page-item');
1207
+ nextButton.innerHTML = '<a class="page-link" href="#pagination">Next</a>';
1208
+ nextButton.addEventListener('click', () => {
1209
+ remove(testEntries[category][index][currentPage - 1]);
1210
+ currentPage++;
1211
+ add(testEntries[category][index][currentPage - 1]);
1212
+ createPagination();
1213
+ });
1214
+
1215
+ paginationContainer.appendChild(nextButton);
1216
+ }
1217
+ });
1218
+ }
1219
+ createPagination();
1220
+ }
1221
+ displayPagination(testEntries, 0, 'all');
1222
+ }
1223
+
386
1224
  </script>
387
- </body>
1225
+ </body>
388
1226
  </html>