ortoni-report 2.0.3 → 2.0.5

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.
@@ -0,0 +1,132 @@
1
+ <div class="content sidebar">
2
+ {{#if showProject}}
3
+ {{#each groupedResults}}
4
+ <details class="box">
5
+ <summary class="is-size-5 has-icon-right">
6
+ <div class="icon-text">
7
+ <span class="icon has-text-info">
8
+ <svg class="image is-16x16" height="512" viewBox="0 0 32 32" width="512"
9
+ xmlns="http://www.w3.org/2000/svg">
10
+ <g data-name="Layer 2">
11
+ <path
12
+ d="M11.612 30.945a3.986 3.986 0 01-2.829-1.17l-5.209-5.208a4.006 4.006 0 010-5.657l3.955-3.954a1 1 0 011.414 1.414l-3.955 3.954a2.003 2.003 0 000 2.829l5.21 5.208a2.004 2.004 0 002.828 0l7.235-7.234a2.003 2.003 0 000-2.828l-4.63-4.63a1 1 0 011.414-1.414l4.63 4.63a4.006 4.006 0 010 5.657l-7.235 7.233a3.988 3.988 0 01-2.828 1.17z"
13
+ fill="#232323" />
14
+ <path
15
+ d="M15.662 20.038a.997.997 0 01-.707-.293l-4.63-4.63a4.006 4.006 0 010-5.656l7.235-7.234a4.004 4.004 0 015.657 0l5.209 5.208a4.006 4.006 0 010 5.657l-3.955 3.954a1 1 0 01-1.414-1.414l3.955-3.954a2.003 2.003 0 000-2.829l-5.21-5.208a2.002 2.002 0 00-2.828 0l-7.235 7.234a2.003 2.003 0 000 2.828l4.63 4.63a1 1 0 01-.707 1.707z"
16
+ fill="#7fbde7" />
17
+ </g>
18
+ </svg>
19
+ </span>
20
+ <span>{{@key}}</span>
21
+ </div>
22
+ </summary>
23
+ <ul class="mt-4 mb-4">
24
+ {{#each this}}
25
+ <details class="mt-2 mb-2">
26
+ <summary class="is-size-5 is-capitalized">
27
+ <div class="icon-text">
28
+ <span class="icon has-text-info">
29
+ <svg class="image is-16x16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
30
+ <path
31
+ d="M181.344 42.656v394.671C181.344 478.562 214.781 512 256 512c41.25 0 74.672-33.438 74.672-74.673V42.656H181.344z"
32
+ fill="#e6e9ed" />
33
+ <path
34
+ d="M352 32c0 17.672-14.312 32-32 32H192c-17.656 0-32-14.328-32-32s14.344-32 32-32h128c17.688 0 32 14.328 32 32z"
35
+ fill="#ccd1d9" />
36
+ <path
37
+ d="M181.344 192v245.327C181.344 478.562 214.781 512 256 512c41.25 0 74.672-33.438 74.672-74.673V192H181.344z"
38
+ fill="#a0d468" />
39
+ <g fill="#434a54">
40
+ <path
41
+ d="M245.344 266.655c0-5.89-4.781-10.655-10.672-10.655h-53.328v21.328h53.328c5.89 0 10.672-4.781 10.672-10.673zM234.672 319.999h-53.328v21.328h53.328c5.891 0 10.672-4.781 10.672-10.671s-4.782-10.657-10.672-10.657zM245.344 202.656c0-5.891-4.781-10.656-10.672-10.656h-53.328v21.328h53.328c5.89 0 10.672-4.781 10.672-10.672z" />
42
+ </g>
43
+ </svg>
44
+ </span>
45
+ <span>{{@key}}</span>
46
+ </div>
47
+ </summary>
48
+ <ul class="mt-4 mb-4">
49
+ {{#each this}}
50
+ <details class="mt-2 mb-2">
51
+ <summary class="is-capitalized is-size-6">{{@key}}</summary>
52
+ <ul class="mt-4 mb-4">
53
+ {{#each this}}
54
+ <li class="media {{#if (eq status 'skipped')}}is-hidden{{/if}}" data-suite-name="{{suite}}"
55
+ data-test-duration="{{duration}}" data-test-tags="{{joinWithSpace testTags}}"
56
+ data-project-name="{{projectName}}" data-test-id="{{index}}"
57
+ data-test-status="{{status}} {{retry}}">
58
+ {{> testStatus}}
59
+ </li>
60
+ {{/each}}
61
+ </ul>
62
+ </details>
63
+ {{/each}}
64
+ </ul>
65
+ </details>
66
+ {{/each}}
67
+ </ul>
68
+ </details>
69
+ {{/each}}
70
+ {{else}}
71
+ {{#each groupedResults}}
72
+ <details class="box">
73
+ <summary class="is-size-5 has-icon-right">
74
+ <div class="icon-text">
75
+ <span class="icon has-text-info">
76
+ <svg class="image is-16x16" height="512" viewBox="0 0 32 32" width="512"
77
+ xmlns="http://www.w3.org/2000/svg">
78
+ <g data-name="Layer 2">
79
+ <path
80
+ d="M11.612 30.945a3.986 3.986 0 01-2.829-1.17l-5.209-5.208a4.006 4.006 0 010-5.657l3.955-3.954a1 1 0 011.414 1.414l-3.955 3.954a2.003 2.003 0 000 2.829l5.21 5.208a2.004 2.004 0 002.828 0l7.235-7.234a2.003 2.003 0 000-2.828l-4.63-4.63a1 1 0 011.414-1.414l4.63 4.63a4.006 4.006 0 010 5.657l-7.235 7.233a3.988 3.988 0 01-2.828 1.17z"
81
+ fill="#232323" />
82
+ <path
83
+ d="M15.662 20.038a.997.997 0 01-.707-.293l-4.63-4.63a4.006 4.006 0 010-5.656l7.235-7.234a4.004 4.004 0 015.657 0l5.209 5.208a4.006 4.006 0 010 5.657l-3.955 3.954a1 1 0 01-1.414-1.414l3.955-3.954a2.003 2.003 0 000-2.829l-5.21-5.208a2.002 2.002 0 00-2.828 0l-7.235 7.234a2.003 2.003 0 000 2.828l4.63 4.63a1 1 0 01-.707 1.707z"
84
+ fill="#7fbde7" />
85
+ </g>
86
+ </svg>
87
+ </span>
88
+ <span>{{@key}}</span>
89
+ </div>
90
+ </summary>
91
+ <ul class="mt-4 mb-4">
92
+ {{#each this}}
93
+ <details class="mt-2 mb-2">
94
+ <summary class="is-size-5 is-capitalized">
95
+ <div class="icon-text">
96
+ <span class="icon has-text-info">
97
+ <svg class="image is-16x16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
98
+ <path
99
+ d="M181.344 42.656v394.671C181.344 478.562 214.781 512 256 512c41.25 0 74.672-33.438 74.672-74.673V42.656H181.344z"
100
+ fill="#e6e9ed" />
101
+ <path
102
+ d="M352 32c0 17.672-14.312 32-32 32H192c-17.656 0-32-14.328-32-32s14.344-32 32-32h128c17.688 0 32 14.328 32 32z"
103
+ fill="#ccd1d9" />
104
+ <path
105
+ d="M181.344 192v245.327C181.344 478.562 214.781 512 256 512c41.25 0 74.672-33.438 74.672-74.673V192H181.344z"
106
+ fill="#a0d468" />
107
+ <g fill="#434a54">
108
+ <path
109
+ d="M245.344 266.655c0-5.89-4.781-10.655-10.672-10.655h-53.328v21.328h53.328c5.89 0 10.672-4.781 10.672-10.673zM234.672 319.999h-53.328v21.328h53.328c5.891 0 10.672-4.781 10.672-10.671s-4.782-10.657-10.672-10.657zM245.344 202.656c0-5.891-4.781-10.656-10.672-10.656h-53.328v21.328h53.328c5.89 0 10.672-4.781 10.672-10.672z" />
110
+ </g>
111
+ </svg>
112
+ </span>
113
+ <span>{{@key}}</span>
114
+ </div>
115
+ </summary>
116
+ <ul class="mt-4 mb-4">
117
+ {{#each this}}
118
+ <li class="media {{#if (eq status 'skipped')}}is-hidden{{/if}}" data-suite-name="{{suite}}"
119
+ data-test-duration="{{duration}}" data-test-tags="{{joinWithSpace testTags}}"
120
+ data-project-name="{{projectName}}" data-test-id="{{index}}"
121
+ data-test-status="{{status}} {{retry}}">
122
+ {{> testStatus}}
123
+ </li>
124
+ {{/each}}
125
+ </ul>
126
+ </details>
127
+ {{/each}}
128
+ </ul>
129
+ </details>
130
+ {{/each}}
131
+ {{/if}}
132
+ </div>
@@ -1,14 +1,8 @@
1
1
  {{#if (gr statusCount) }}
2
- <div class="column is-one-third">
3
- <div class="card is-clickable has-background-{{bg}} filter" data-status="{{status}}">
4
- <header class="card-header has-text-centered">
5
- <p class="card-header-title has-text-white">{{statusHeader}}</p>
6
- </header>
7
- <div class="card-content">
8
- <div class="content">
9
- <p class="has-text-centered has-text-white">{{statusCount}}</p>
10
- </div>
11
- </div>
2
+ <div class="column is-one-sixth">
3
+ <div class="box has-background-{{bg}} filter" data-status="{{status}}">
4
+ <p class="has-text-white is-size-6">{{statusHeader}}</p>
5
+ <p class="has-text-white is-size-4">{{statusCount}}</p>
12
6
  </div>
13
7
  </div>
14
- {{/if}}
8
+ {{/if}}
@@ -17,7 +17,7 @@
17
17
  {{#each projects}}
18
18
  <div class="dropdown-item">
19
19
  <label class="checkbox is-capitalized">
20
- <input type="checkbox" data-filter-type="project" value="{{this}}"> {{this}}
20
+ <input name="{{this}}" type="checkbox" data-filter-type="project" value="{{this}}"> {{this}}
21
21
  </label>
22
22
  </div>
23
23
  {{/each}}
@@ -25,11 +25,10 @@
25
25
  {{#each allTags}}
26
26
  <div class="dropdown-item">
27
27
  <label class="checkbox">
28
- <input type="checkbox" data-filter-type="test-tags" value="{{this}}"> {{this}}
28
+ <input name="{{this}}" type="checkbox" data-filter-type="test-tags" value="{{this}}"> {{this}}
29
29
  </label>
30
30
  </div>
31
31
  {{/each}}
32
- <hr class="dropdown-divider" />
33
32
  </div>
34
33
  </div>
35
34
  </div>
@@ -1,46 +1,209 @@
1
1
  <header class="has-text-centered title is-4">Suite</header>
2
- <div class="columns">
2
+
3
+ <div class="columns is-multiline">
3
4
  <div class="column is-half">
4
- <div class="content">
5
- {{#if authorName}}
6
- <p class="is-flex is-align-items-center mb-2">
7
- <span class="icon has-text-link is-small mr-2">
8
- <i class="fa-solid fa-user-tie"></i>
9
- </span>
10
- <span class="is-size-6">{{authorName}}</span>
11
- </p>
12
- {{/if}}
13
- {{#if testType}}
14
- <p class="is-flex is-align-items-center mb-2">
15
- <span class="icon has-text-primary is-small mr-2">
16
- <i class="fas fa-code-branch" style="color: thistle;"></i>
17
- </span>
18
- <span class="is-size-6">{{testType}}</span>
19
- </p>
20
- {{/if}}
21
- <p class="is-flex is-align-items-center mb-2">
22
- <span class="icon has-text-primary is-small mr-2">
23
- <i class="fas fa-stopwatch" style="color: peachpuff;"></i>
24
- </span>
25
- <span class="is-size-6">{{totalDuration}}</span>
26
- </p>
27
- <p class="is-flex is-align-items-center mb-2">
28
- <span class="icon has-text-success is-small mr-2">
5
+ <div class="field">
6
+ <label class="label" for="Success Rate">Success Rate</label>
7
+ <p class="is-flex is-align-items-center">
8
+ <span class="icon has-text-success mr-2">
29
9
  <i class="fas fa-chart-pie"></i>
30
10
  </span>
31
- <span class="is-size-6 has-text-weight-bold">{{successRate}} %</span>
11
+ <span class="is-size-5 has-text-weight-bold">{{successRate}} %</span>
32
12
  </p>
33
- <p class="is-flex is-align-items-center mb-2">
34
- <span class="icon has-text-info is-small mr-2">
13
+ </div>
14
+ <div class="field">
15
+ <label class="label" for="Last Run">Last Run</label>
16
+ <p class="is-flex is-align-items-center">
17
+ <span class="icon has-text-info mr-2">
35
18
  <i class="fas fa-calendar-alt"></i>
36
19
  </span>
37
- <span class="is-size-6">{{lastRunDate}}</span>
20
+ <span class="is-size-5">{{lastRunDate}}</span>
21
+ </p>
22
+ </div>
23
+ <div class="field">
24
+ <label class="label" for="Duration">Duration</label>
25
+ <p class="is-flex is-align-items-center">
26
+ <span class="icon has-text-warning mr-2">
27
+ <i class="fas fa-stopwatch"></i>
28
+ </span>
29
+ <span class="is-size-5">{{totalDuration}}</span>
38
30
  </p>
39
31
  </div>
40
32
  </div>
33
+ {{#if (or authorName testType)}}
41
34
  <div class="column is-half">
35
+ <div class="content">
36
+ {{#if authorName}}
37
+ <div class="field">
38
+ <label class="label" for="Tester">Tester</label>
39
+ <p class="is-flex is-align-items-center">
40
+ <span class="icon has-text-info mr-2">
41
+ <i class="fas fa-user-tie"></i>
42
+ </span>
43
+ <span class="is-size-5">{{authorName}}</span>
44
+ </p>
45
+ </div>
46
+ {{/if}}
47
+
48
+ {{#if testType}}
49
+ <div class="field">
50
+ <label class="label" for="testType">Test Type</label>
51
+ <p class="is-flex is-align-items-center">
52
+ <span class="icon has-text-primary mr-2">
53
+ <i class="fas fa-code-branch"></i>
54
+ </span>
55
+ <span class="is-size-5">{{testType}}</span>
56
+ </p>
57
+ </div>
58
+ {{/if}}
59
+ </div>
60
+ </div>
61
+ {{/if}}
62
+ </div>
63
+ <div class="columns">
64
+ <div class="column is-half">
65
+ <h2 class="is-4 has-text-weight-bold">Summary</h2>
66
+ <hr class="has-background-primary">
42
67
  <div class="chart-container">
43
68
  <canvas id="testChart"></canvas>
44
69
  </div>
45
70
  </div>
71
+ <div class="column is-half">
72
+ <h2 class="is-4 has-text-weight-bold">Projects</h2>
73
+ <hr class="has-background-primary">
74
+ <div class="chart-container">
75
+ <canvas id="projectChart"></canvas>
76
+ </div>
77
+ </div>
78
+ </div>
79
+ <div class="columns">
80
+ <div class="column">
81
+ <h2 class="is-4 has-text-weight-bold">Each Projects</h2>
82
+ <hr class="has-background-primary">
83
+ <div class="chart-container">
84
+ <canvas id="projectbarChart"></canvas>
85
+ </div>
86
+ </div>
87
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
88
+ <script>
89
+ const overallChart = document.getElementById('testChart');
90
+ new Chart(overallChart, {
91
+ type: "doughnut",
92
+ data: {
93
+ labels: ['Passed', 'Failed', 'Skipped', 'Flaky'],
94
+ datasets: [{
95
+ data: [{{ passCount }}, {{ failCount }}, {{ skipCount }}, {{ flakyCount }}],
96
+ backgroundColor: ['#28a745', '#ff6685', '#66d1ff', '#ffb70f']}]
97
+ },
98
+ options: {
99
+ responsive: true,
100
+ maintainAspectRatio: false,
101
+ plugins: {
102
+ legend: {
103
+ position: 'bottom',
104
+ labels: {
105
+ filter: function (legendItem, chartData) {
106
+ const value = chartData.datasets[0].data[legendItem.index];
107
+ return value !== 0;
108
+ }
109
+ }
110
+ },
111
+ tooltip: {
112
+ callbacks: {
113
+ label: function (tooltipItem) {
114
+ const total = tooltipItem.dataset.data.reduce((a, b) => a + b, 0);
115
+ const value = tooltipItem.raw;
116
+ const percentage = ((value / total) * 100).toFixed(2);
117
+ return `${tooltipItem.label}: ${value} tests (${percentage}%)`;
118
+ }
119
+ }
120
+ }
121
+ }
122
+ }
123
+ });
124
+ const projectChart = document.getElementById('projectChart');
125
+ const projectbarChart = document.getElementById('projectbarChart');
126
+
127
+ const projectNames = {{{ json projectNames }}};
128
+ const totalTests = {{{ json totalTests }}};
129
+ function generateRandomColor() {
130
+ const letters = '0123456789ABCDEF';
131
+ let color = '#';
132
+ for (let i = 0; i < 6; i++) {
133
+ color += letters[Math.floor(Math.random() * 16)];
134
+ }
135
+ return color;
136
+ }
137
+ const backgroundColors = totalTests.map(() => generateRandomColor());
138
+ new Chart(projectChart, {
139
+ type: 'doughnut',
140
+ data: {
141
+ labels: projectNames,
142
+ datasets: [{
143
+ data: totalTests,
144
+ backgroundColor: backgroundColors
145
+ }]
146
+ },
147
+ options: {
148
+ responsive: true,
149
+ maintainAspectRatio: false,
150
+ plugins: {
151
+ legend: {
152
+ position: 'bottom'
153
+ },
154
+ tooltip: {
155
+ callbacks: {
156
+ label: function (tooltipItem) {
157
+ return tooltipItem.label + ': ' + tooltipItem.raw + ' tests';
158
+ }
159
+ }
160
+ }
161
+ }
162
+ }
163
+ });
164
+ const passedTests = {{ json passedTests }};
165
+ const failedTests = {{ json failedTests }};
166
+ const skippedTests = {{ json skippedTests }};
167
+ const retryTests = {{ json retryTests }};
168
+ new Chart(projectbarChart, {
169
+ type: 'bar',
170
+ data: {
171
+ labels: projectNames,
172
+ datasets: [
173
+ {
174
+ label: 'Passed',
175
+ data: passedTests,
176
+ backgroundColor: '#28a745',
177
+ },
178
+ {
179
+ label: 'Failed',
180
+ data: failedTests,
181
+ backgroundColor: '#ff6685',
182
+ },
183
+ {
184
+ label: 'Skipped',
185
+ data: skippedTests,
186
+ backgroundColor: '#66d1ff',
187
+ },
188
+ {
189
+ label: 'Flaky',
190
+ data: retryTests,
191
+ backgroundColor: '#ffb70f',
192
+ }
193
+ ]
194
+ },
195
+ options: {
196
+ responsive: true,
197
+ maintainAspectRatio: false,
198
+ scales: {
199
+ x: {
200
+ beginAtZero: true
201
+ },
202
+ y: {
203
+ beginAtZero: true
204
+ }
205
+ }
206
+ }
207
+ });
208
+ </script>
46
209
  </div>
package/package.json CHANGED
@@ -1,10 +1,7 @@
1
1
  {
2
2
  "name": "ortoni-report",
3
- "version": "2.0.3",
3
+ "version": "2.0.5",
4
4
  "description": "Playwright Report By LetCode with Koushik",
5
- "bin": {
6
- "ortoni-report": "./dist/cli/cli.js"
7
- },
8
5
  "scripts": {
9
6
  "tsc": "tsc",
10
7
  "build": "tsup",
@@ -35,13 +32,15 @@
35
32
  "homepage": "https://github.com/ortoniKC/ortoni-report#readme",
36
33
  "devDependencies": {
37
34
  "@playwright/test": "^1.44.1",
35
+ "@types/express": "^5.0.0",
38
36
  "@types/node": "^22.0.2",
39
- "colors": "^1.4.0",
40
- "commander": "^12.1.0",
37
+ "@types/ws": "^8.5.12",
38
+ "ansi-to-html": "^0.7.2",
39
+ "express": "^4.21.1",
41
40
  "handlebars": "^4.7.8",
42
41
  "tsup": "^6.5.0",
43
42
  "typescript": "^4.9.4",
44
- "parcel": "^2.12.0"
43
+ "ws": "^8.18.0"
45
44
  },
46
45
  "main": "dist/ortoni-report.js",
47
46
  "module": "dist/ortoni-report.mjs",