Skip to content

Commit 7dcb03b

Browse files
syberssybers
committed
feat: improve table display by using fixed layout and ellipsis
1 parent ad6ec43 commit 7dcb03b

File tree

4 files changed

+80
-59
lines changed

4 files changed

+80
-59
lines changed

assets/source-file.css renamed to assets/report.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1+
#coverage-table tbody td:nth-child(1) {
2+
direction: rtl;
3+
text-overflow: ellipsis;
4+
overflow: hidden;
5+
white-space: nowrap;
6+
text-align: left;
7+
}
8+
19
.uncovered {
210
background: rgba(235, 26, 26, 0.3);
311
}

‎src/lib/reporters/html/index.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ export const generate = async (
8888
},
8989
{
9090
assets: includeAssets([
91-
"./assets/source-file.css",
91+
"./assets/report.css",
9292
"https://cdn.jsdelivr.net/npm/sorttable@1.0.2/sorttable.min.js"
9393
])
9494
}
@@ -126,8 +126,8 @@ export const generate = async (
126126
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.2/codemirror.min.js",
127127
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.2/mode/javascript/javascript.min.js",
128128
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.2/codemirror.min.css",
129-
path.join(assetsFolder, "source-file.js"),
130-
path.join(assetsFolder, "source-file.css")
129+
path.join(assetsFolder, "report.css"),
130+
path.join(assetsFolder, "source-file.js")
131131
])
132132
}
133133
);

‎src/lib/reporters/html/pages/details.ts‎

Lines changed: 41 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import path from "node:path";
2+
13
type Annotation = {
24
file: string;
35
line: number;
@@ -26,39 +28,43 @@ export const generateDetailsPage = ({
2628
const percentageCoverage = percentage.toFixed(2) + "%";
2729
const isValid = percentage >= threshold;
2830

29-
return `<div style="margin-top: 3em;" class="ui container">
30-
<h1 class="ui header">
31-
<a href="/index.html">TypeScript coverage report</a>
32-
</h1>
33-
<table class="ui table celled">
34-
<thead>
35-
<tr>
36-
<th>Filename</th>
37-
<th>Percent</th>
38-
<th>Threshold</th>
39-
<th>Total</th>
40-
<th>Covered</th>
41-
<th>Uncovered</th>
42-
</tr>
43-
</thead>
44-
<tbody>
45-
<tr class="${isValid ? "positive" : "negative"}">
46-
<td>${filename}</td>
47-
<td>${percentageCoverage}</td>
48-
<td>${threshold}%</td>
49-
<td>${totalCount}</td>
50-
<td>${correctCount}</td>
51-
<td>${totalCount - correctCount}</td>
52-
</tr>
53-
</tbody>
54-
</table>
55-
<textarea
56-
id="editor"
57-
readonly
58-
style="margin-top: 3em;"
59-
>${sourceCode}</textarea>
60-
<pre id="annotations" style="display: none;">
61-
${JSON.stringify(annotations)}
62-
</pre>
63-
</section>`;
31+
const relativePathToIndex = path.relative(`${filename}.html`, "index.html");
32+
33+
return `
34+
<div style="margin-top: 3em;" class="ui container">
35+
<h1 class="ui header">
36+
<a href="${relativePathToIndex}">TypeScript coverage report</a>
37+
</h1>
38+
<table class="ui table celled fixed">
39+
<thead>
40+
<tr>
41+
<th class="ten wide">Filename</th>
42+
<th>Percent</th>
43+
<th>Threshold</th>
44+
<th>Total</th>
45+
<th>Covered</th>
46+
<th>Uncovered</th>
47+
</tr>
48+
</thead>
49+
<tbody>
50+
<tr class="${isValid ? "positive" : "negative"}">
51+
<td>${filename}</td>
52+
<td>${percentageCoverage}</td>
53+
<td>${threshold}%</td>
54+
<td>${totalCount}</td>
55+
<td>${correctCount}</td>
56+
<td>${totalCount - correctCount}</td>
57+
</tr>
58+
</tbody>
59+
</table>
60+
<textarea
61+
id="editor"
62+
readonly
63+
style="margin-top: 3em;"
64+
>${sourceCode}</textarea>
65+
<pre id="annotations" style="display: none;">
66+
${JSON.stringify(annotations)}
67+
</pre>
68+
</div>
69+
`;
6470
};

‎src/lib/reporters/html/pages/summary.ts‎

Lines changed: 28 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
1+
import path from "node:path";
12
import { CoverageData } from "../../../getCoverage";
23

3-
const reportHeaders = ["Percent", "Threshold", "Total", "Covered", "Uncovered"];
4-
5-
const headers = ["Filename", "Percent", "Total", "Covered", "Uncovered"];
6-
74
type GenerateSummaryPageContext = Omit<CoverageData, "anys"> & {
85
threshold: number;
96
};
@@ -22,27 +19,35 @@ export const generateSummaryPage = ({
2219
<div style="margin-top: 3em;" class="ui container">
2320
<h1 class="ui header">TypeScript coverage report</h1>
2421
<h2 class="ui header">Summary</h2>
25-
<table class="ui table celled">
22+
<table class="ui table celled fixed">
2623
<thead>
2724
<tr>
28-
${reportHeaders.map((header) => `<th>${header}</th>`).join("\n")}
25+
<th>Percent</th>
26+
<th>Threshold</th>
27+
<th>Total</th>
28+
<th>Covered</th>
29+
<th>Uncovered</th>
2930
</tr>
3031
</thead>
3132
<tbody>
3233
<tr class="${isSummaryValid ? "positive" : "negative"}">
33-
<td data-label="Percent">${percentage.toFixed(2) + "%"}</td>
34-
<td data-label="Threshold">${threshold}%</td>
35-
<td data-label="Total">${total}</td>
36-
<td data-label="Covered">${covered}</td>
37-
<td data-label="Uncovered">${uncovered}</td>
34+
<td>${percentage.toFixed(2) + "%"}</td>
35+
<td>${threshold}%</td>
36+
<td>${total}</td>
37+
<td>${covered}</td>
38+
<td>${uncovered}</td>
3839
</tr>
3940
</tbody>
4041
</table>
4142
<h2 class="ui header">Files</h2>
42-
<table style="margin-top: 2em" class="ui table celled sortable">
43+
<table style="margin-top: 2em" id="coverage-table" class="ui table celled fixed sortable">
4344
<thead>
4445
<tr>
45-
${headers.map((header) => `<th>${header}</th>`).join("\n")}
46+
<th class="ten wide">Filename</th>
47+
<th>Percent</th>
48+
<th>Total</th>
49+
<th>Covered</th>
50+
<th>Uncovered</th>
4651
</tr>
4752
</thead>
4853
<tbody>
@@ -53,16 +58,18 @@ export const generateSummaryPage = ({
5358
const percentageCoverage = percentage.toFixed(2) + "%";
5459
const isValid = percentage >= threshold;
5560
61+
const pathToFile = path.join("files", `${filename}.html`);
62+
5663
return `
5764
<tr class="${isValid ? "positive" : "negative"}">
58-
<td>
59-
<a style="color: inherit;" href="/files/${filename}.html">${filename}</a>
60-
</td>
61-
<td>${percentageCoverage}</td>
62-
<td>${totalCount}</td>
63-
<td>${correctCount}</td>
64-
<td>${totalCount - correctCount}</td>
65-
</tr>`;
65+
<td title="${filename}">
66+
<a style="color: inherit;" href="${pathToFile}">${filename}</a>
67+
</td>
68+
<td>${percentageCoverage}</td>
69+
<td>${totalCount}</td>
70+
<td>${correctCount}</td>
71+
<td>${totalCount - correctCount}</td>
72+
</tr>`;
6673
})
6774
.join("\n")}
6875
</tbody>

0 commit comments

Comments
 (0)