Skip to content

Commit 6e94686

Browse files
marabesimarabesi
committed
wip: playing with report data
1 parent b998d51 commit 6e94686

File tree

4 files changed

+49
-130
lines changed

4 files changed

+49
-130
lines changed

‎cli/src/reporters/Html.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@ export class SmellsAggreagtor implements AgreggatorSmellls {
2929
const data = await read.readTeamplate();
3030

3131
const template = Handlebars.compile(data);
32-
const html = template(this.smellLists);
32+
const totalSmells = this.smellLists.reduce((previous, current) => previous + current.smells.length, 0);
33+
const html = template({ data: this.smellLists, totalSmells});
3334

3435
const output = new HtmlOutput();
3536
await output.writeTo(html, this.exportOptions);

‎cli/src/reporters/Input.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,4 @@ export class ReadHtml implements Input {
99
const data = await fs.readFile(`${__dirname}/layout/example.html`, { encoding: 'utf8' });
1010
return data;
1111
}
12-
1312
}

‎cli/src/reporters/layout/example.html‎

Lines changed: 46 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323

2424
<body class="bg-gray-50 dark:bg-gray-600">
2525
<div class="container mx-auto p-5">
26-
26+
2727
<div class="flex justify-between items-center py-5">
2828
<h1 class="text-3xl text-gray-700 dark:text-gray-400">Test smells report</h1>
2929

@@ -44,175 +44,94 @@ <h1 class="text-3xl text-gray-700 dark:text-gray-400">Test smells report</h1>
4444
<div class="grid grid-rows-1 grid-flow-col gap-4">
4545
<div
4646
class="mb-5 max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700">
47-
48-
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">4</h5>
49-
<p class="font-normal text-gray-700 dark:text-gray-400">Test smells in total</p>
47+
48+
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">{{ totalSmells }}</h5>
49+
<p class="font-normal text-gray-700 dark:text-gray-400">Test smells</p>
5050
</div>
51-
<!-- <div
51+
<div
5252
class="mb-5 max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700">
5353

54-
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">4</h5>
54+
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">{{ data.length }}</h5>
5555
<p class="font-normal text-gray-700 dark:text-gray-400">Test cases</p>
56-
</div> -->
56+
</div>
5757
</div>
5858
<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
5959
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
6060
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
6161
<tr>
6262
<th scope="col" class="px-6 py-3">
63-
Product name
64-
</th>
65-
<th scope="col" class="px-6 py-3">
66-
Color
67-
</th>
68-
<th scope="col" class="px-6 py-3">
69-
Category
63+
File name
7064
</th>
7165
<th scope="col" class="px-6 py-3">
72-
Price
66+
Language
7367
</th>
7468
<th scope="col" class="px-6 py-3">
75-
Action
69+
Smells
7670
</th>
7771
</tr>
7872
</thead>
7973
<tbody>
74+
{{#each data}}
8075
<tr
8176
class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700">
8277
<th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
83-
Apple MacBook Pro 17"
84-
</th>
85-
<td class="px-6 py-4">
86-
Silver
87-
</td>
88-
<td class="px-6 py-4">
89-
Laptop
90-
</td>
91-
<td class="px-6 py-4">
92-
$2999
93-
</td>
94-
<td class="px-6 py-4">
95-
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
96-
</td>
97-
</tr>
98-
<tr
99-
class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700">
100-
<th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
101-
Microsoft Surface Pro
78+
{{this.fileName}}
10279
</th>
10380
<td class="px-6 py-4">
104-
White
105-
</td>
106-
<td class="px-6 py-4">
107-
Laptop PC
108-
</td>
109-
<td class="px-6 py-4">
110-
$1999
81+
{{this.language}}
11182
</td>
11283
<td class="px-6 py-4">
113-
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
114-
</td>
115-
</tr>
116-
<tr
117-
class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700">
118-
<th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
119-
Magic Mouse 2
120-
</th>
121-
<td class="px-6 py-4">
122-
Black
123-
</td>
124-
<td class="px-6 py-4">
125-
Accessories
126-
</td>
127-
<td class="px-6 py-4">
128-
$99
129-
</td>
130-
<td class="px-6 py-4">
131-
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
132-
</td>
133-
</tr>
134-
<tr
135-
class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700">
136-
<th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
137-
Google Pixel Phone
138-
</th>
139-
<td class="px-6 py-4">
140-
Gray
141-
</td>
142-
<td class="px-6 py-4">
143-
Phone
144-
</td>
145-
<td class="px-6 py-4">
146-
$799
147-
</td>
148-
<td class="px-6 py-4">
149-
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
150-
</td>
151-
</tr>
152-
<tr>
153-
<th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
154-
Apple Watch 5
155-
</th>
156-
<td class="px-6 py-4">
157-
Red
158-
</td>
159-
<td class="px-6 py-4">
160-
Wearables
161-
</td>
162-
<td class="px-6 py-4">
163-
$999
164-
</td>
165-
<td class="px-6 py-4">
166-
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
84+
{{this.smells.length}}
16785
</td>
16886
</tr>
87+
{{/each}}
16988
</tbody>
17089
</table>
17190
</div>
172-
91+
17392
</div>
17493

17594
<script>
17695
var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
177-
var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
96+
var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
17897

179-
// Change the icons inside the button based on previous settings
180-
if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
181-
themeToggleLightIcon.classList.remove('hidden');
182-
} else {
183-
themeToggleDarkIcon.classList.remove('hidden');
184-
}
98+
// Change the icons inside the button based on previous settings
99+
if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
100+
themeToggleLightIcon.classList.remove('hidden');
101+
} else {
102+
themeToggleDarkIcon.classList.remove('hidden');
103+
}
185104

186-
var themeToggleBtn = document.getElementById('theme-toggle');
105+
var themeToggleBtn = document.getElementById('theme-toggle');
187106

188-
themeToggleBtn.addEventListener('click', function () {
107+
themeToggleBtn.addEventListener('click', function () {
189108

190-
// toggle icons inside button
191-
themeToggleDarkIcon.classList.toggle('hidden');
192-
themeToggleLightIcon.classList.toggle('hidden');
109+
// toggle icons inside button
110+
themeToggleDarkIcon.classList.toggle('hidden');
111+
themeToggleLightIcon.classList.toggle('hidden');
193112

194-
// if set via local storage previously
195-
if (localStorage.getItem('color-theme')) {
196-
if (localStorage.getItem('color-theme') === 'light') {
197-
document.documentElement.classList.add('dark');
198-
localStorage.setItem('color-theme', 'dark');
199-
} else {
200-
document.documentElement.classList.remove('dark');
201-
localStorage.setItem('color-theme', 'light');
202-
}
113+
// if set via local storage previously
114+
if (localStorage.getItem('color-theme')) {
115+
if (localStorage.getItem('color-theme') === 'light') {
116+
document.documentElement.classList.add('dark');
117+
localStorage.setItem('color-theme', 'dark');
118+
} else {
119+
document.documentElement.classList.remove('dark');
120+
localStorage.setItem('color-theme', 'light');
121+
}
203122

204-
// if NOT set via local storage previously
123+
// if NOT set via local storage previously
124+
} else {
125+
if (document.documentElement.classList.contains('dark')) {
126+
document.documentElement.classList.remove('dark');
127+
localStorage.setItem('color-theme', 'light');
205128
} else {
206-
if (document.documentElement.classList.contains('dark')) {
207-
document.documentElement.classList.remove('dark');
208-
localStorage.setItem('color-theme', 'light');
209-
} else {
210-
document.documentElement.classList.add('dark');
211-
localStorage.setItem('color-theme', 'dark');
212-
}
129+
document.documentElement.classList.add('dark');
130+
localStorage.setItem('color-theme', 'dark');
213131
}
132+
}
214133

215-
});
134+
});
216135
</script>
217136
</body>
218137

‎cli/test/reporter-html.test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import sinon from 'sinon';
2-
import { ExportOptions, SmellsAggreagtor, SmellsList } from "../src/reporters/Html";
2+
import { ExportOptions, SmellsAggreagtor, SmellsList } from '../src/reporters/Html';
33
import { HtmlOutput } from '../src/reporters/Output';
44
import { ReadHtml } from '../src/reporters/Input';
55

0 commit comments

Comments
 (0)