feat: Enhance file coverage reporting with comparison metrics

src/index.ts

@@ -16,7 +16,6 @@ import { generateSummaryTableHtml } from "./report/generateSummaryTableHtml.js";
 import type { JsonSummary } from "./types/JsonSummary.js";
 import { writeSummaryToCommit } from "./writeSummaryToComment.js";
 import { writeSummaryToPR } from "./writeSummaryToPR.js";
-import { aw } from "vitest/dist/chunks/reporters.C_zwCd4j.js";
 
 type GitHubSummary = typeof core.summary;
 
@@ -61,6 +60,7 @@ const run = async () => {
 		const jsonFinal = await parseVitestJsonFinal(options.jsonFinalPath);
 		const fileTable = generateFileCoverageHtml({
 			jsonSummary,
+			jsonSummaryCompare,
 			jsonFinal,
 			fileCoverageMode: options.fileCoverageMode,
 			pullChanges,

src/inputs/options.ts

@@ -8,7 +8,6 @@ import { getPullRequestNumber } from "./getPullRequestNumber";
 import { getViteConfigPath } from "./getViteConfigPath";
 import { parseCoverageThresholds } from "./parseCoverageThresholds";
 import { getCommentOn, type CommentOn } from "./getCommentOn";
-import { report } from "node:process";
 
 type Options = {
 	fileCoverageMode: FileCoverageMode;

src/report/generateFileCoverageHtml.test.ts

@@ -244,4 +244,72 @@ describe("generateFileCoverageHtml()", () => {
 			.length;
 		expect(equalSignCount).toBe(4);
 	});
+
+	it("renders a plus sign and the increased percentage for files with increased coverage", () => {
+		const jsonSummary: JsonSummary = createMockJsonSummary({
+			"file1.ts": createMockCoverageReport({
+				branches: createMockReportNumbers({ pct: 70 }),
+			}),
+		});
+
+		const jsonSummaryCompare: JsonSummary = createMockJsonSummary({
+			"file1.ts": createMockCoverageReport({
+				branches: createMockReportNumbers({ pct: 60 }),
+			}),
+		});
+		const jsonFinal: JsonFinal = {
+			...createJsonFinalEntry("src/exampleFile.ts", [
+				{ line: 1, covered: true },
+			]),
+		};
+
+		const html = generateFileCoverageHtml({
+			jsonSummary,
+			jsonSummaryCompare,
+			jsonFinal,
+			fileCoverageMode: FileCoverageMode.All,
+			pullChanges: [],
+			commitSHA: "test-sha",
+		});
+
+		expect(html).toContain("file1.ts");
+		expect(html).toContain(`${icons.increase} <em>+10.00%</em>`);
+		const equalSignCount = (html.match(new RegExp(icons.increase, "g")) || [])
+			.length;
+		expect(equalSignCount).toBe(1);
+	});
+
+	it("renders a minus sign and the decreased percentage for files with decreased coverage", () => {
+		const jsonSummary: JsonSummary = createMockJsonSummary({
+			"file1.ts": createMockCoverageReport({
+				branches: createMockReportNumbers({ pct: 70 }),
+			}),
+		});
+
+		const jsonSummaryCompare: JsonSummary = createMockJsonSummary({
+			"file1.ts": createMockCoverageReport({
+				branches: createMockReportNumbers({ pct: 80 }),
+			}),
+		});
+		const jsonFinal: JsonFinal = {
+			...createJsonFinalEntry("src/exampleFile.ts", [
+				{ line: 1, covered: true },
+			]),
+		};
+
+		const html = generateFileCoverageHtml({
+			jsonSummary,
+			jsonSummaryCompare,
+			jsonFinal,
+			fileCoverageMode: FileCoverageMode.All,
+			pullChanges: [],
+			commitSHA: "test-sha",
+		});
+
+		expect(html).toContain("file1.ts");
+		expect(html).toContain(`${icons.decrease} <em>-10.00%</em>`);
+		const equalSignCount = (html.match(new RegExp(icons.decrease, "g")) || [])
+			.length;
+		expect(equalSignCount).toBe(1);
+	});
 });

src/report/generateFileCoverageHtml.ts

@@ -9,6 +9,7 @@ import {
 	getUncoveredLinesFromStatements,
 } from "./getUncoveredLinesFromStatements";
 import { icons } from "../icons";
+import { getCompareString } from "./getCompareString";
 
 type FileCoverageInputs = {
 	jsonSummary: JsonSummary;
@@ -47,10 +48,10 @@ const generateFileCoverageHtml = ({
 		return `
       <tr>
         <td align="left"><a href="${url}">${relativeFilePath}</a></td>
-				<td align="right">${generateCoverageCell(coverageSummary, coverageSummaryCompare, "statements")}</td>
-				<td align="right">${generateCoverageCell(coverageSummary, coverageSummaryCompare, "branches")}</td>
-				<td align="right">${generateCoverageCell(coverageSummary, coverageSummaryCompare, "functions")}</td>
-				<td align="right">${generateCoverageCell(coverageSummary, coverageSummaryCompare, "lines")}</td>
+				${generateCoverageCell(coverageSummary, coverageSummaryCompare, "statements")}
+				${generateCoverageCell(coverageSummary, coverageSummaryCompare, "branches")}
+				${generateCoverageCell(coverageSummary, coverageSummaryCompare, "functions")}
+				${generateCoverageCell(coverageSummary, coverageSummaryCompare, "lines")}
         <td align="left">${createRangeURLs(uncoveredLines, url)}</td>
       </tr>`;
 	};
@@ -107,8 +108,12 @@ function generateCoverageCell(
 	summaryCompare: CoverageReport | undefined,
 	field: keyof CoverageReport,
 ): string {
-	const icon = summaryCompare ? icons.equal : "";
-	return `<td align="right">${summary[field].pct}%<br/>${icon}</td>`;
+	let diffText = "";
+	if (summaryCompare) {
+		const diff = summary[field].pct - summaryCompare[field].pct;
+		diffText = `<br/>${getCompareString(diff)}`;
+	}
+	return `<td align="right">${summary[field].pct}%${diffText}</td>`;
 }
 
 function formatGroupLine(caption: string): string {

src/report/generateSummaryTableHtml.ts

@@ -2,6 +2,7 @@ import { oneLine } from "common-tags";
 import { icons } from "../icons";
 import type { CoverageReport, ReportNumbers } from "../types/JsonSummary";
 import type { Thresholds } from "../types/Threshold";
+import { getCompareString } from "./getCompareString";
 
 function generateSummaryTableHtml(
 	jsonReport: CoverageReport,
@@ -69,17 +70,4 @@ function generateTableRow({
   `;
 }
 
-function getCompareString(percentDiff: number): string {
-	if (percentDiff === 0) {
-		return `${icons.equal} <em>±0%</em>`;
-	}
-
-	if (percentDiff > 0) {
-		return `${icons.increase} <em>+${percentDiff.toFixed(2)}%</em>`;
-	}
-
-	// The - char is already included in a negative number
-	return `${icons.decrease} <em>${percentDiff.toFixed(2)}%</em>`;
-}
-
 export { generateSummaryTableHtml };

src/report/getCompareString.ts

@@ -0,0 +1,16 @@
+import { icons } from "../icons";
+
+function getCompareString(percentDiff: number): string {
+	if (percentDiff === 0) {
+		return `${icons.equal} <em>±0%</em>`;
+	}
+
+	if (percentDiff > 0) {
+		return `${icons.increase} <em>+${percentDiff.toFixed(2)}%</em>`;
+	}
+
+	// The - char is already included in a negative number
+	return `${icons.decrease} <em>${percentDiff.toFixed(2)}%</em>`;
+}
+
+export { getCompareString };