Initial proof of concept

.gitignore

@@ -65,3 +65,5 @@ typings/
 
 # next.js build output
 .next
+
+exports/

index.js

@@ -1,6 +1,7 @@
 const core = require("@actions/core");
 const minimatch = require("minimatch");
 const parse = require("lcov-parse");
+const reportgen = require('./report-generator/generate-report');
 
 function run() {
   const lcovPath = core.getInput("path");
@@ -13,15 +14,50 @@ function run() {
       core.setFailed("parsing error!");
       return;
     }
-    let totalFinds = 0;
-    let totalHits = 0;
+    let totalLinesFound = 0;
+    let totalLinesHit = 0;
+    let totalFunctionsFound = 0;
+    let totalFunctionsHit = 0;
+    let totalBranchesFound = 0;
+    let totalBranchesHit = 0;
+
+    const filesTemplateData = [];
+
     data.forEach(element => {
       if (shouldCalculateCoverageForFile(element["file"], excludedFiles)) {
-        totalHits += element['lines']['hit'];
-        totalFinds += element['lines']['found'];
+        totalLinesHit += element['lines']['hit'];
+        totalLinesFound += element['lines']['found'];
+        totalFunctionsFound += element['functions']['hit'];
+        totalFunctionsHit += element['functions']['found'];
+        totalBranchesHit += element['branches']['hit'];
+        totalBranchesFound += element['branches']['found'];
       }
+
+      filesTemplateData.push({
+        path: element['file'],
+        linesHit: element['lines']['hit'],
+        linesFound: element['lines']['found'],
+        functionsHit: element['functions']['hit'],
+        functionsFound: element['functions']['found'],
+        branchesHit: element['branches']['hit'],
+        branchesFound: element['branches']['found'],
+      });
     });
-    const coverage = (totalHits / totalFinds) * 100;
+
+    const templateData = {
+      totalLinesHit,
+      totalLinesFound,
+      totalFunctionsHit,
+      totalFunctionsFound,
+      totalBranchesHit,
+      totalBranchesFound,
+      files: filesTemplateData,
+      date: new Date(Date.now()),
+    };
+
+    reportgen.generateHtml(templateData);
+
+    const coverage = (totalLinesHit / totalLinesFound) * 100;
     const isValidBuild = coverage >= minCoverage;
     if (!isValidBuild) {
       core.setFailed(`Coverage ${coverage} is below the minimum ${minCoverage} expected`);

index.test.js

@@ -78,4 +78,5 @@ test("fails when the coverage is below the given min_threshold", () => {
   } catch (err) {
     expect(err).toBeDefined();
   }
-});
+});
+

package.json

@@ -30,7 +30,8 @@
   "dependencies": {
     "@actions/core": "^1.2.5",
     "lcov-parse": "^1.0.0",
-    "minimatch": "^3.0.4"
+    "minimatch": "^3.0.4",
+    "handlebars": "^4.7.6"
   },
   "devDependencies": {
     "@vercel/ncc": "^0.24.1",

report-generator/generate-report.js

@@ -0,0 +1,42 @@
+const fs = require('fs');
+const Handlebars = require("handlebars");
+
+const roundToTwoDecimals = (num) => Math.round((num + Number.EPSILON) * 10000) / 100
+
+function generateHtml(templateData) {
+    Handlebars.registerHelper('coverage', function (hits, found) {
+        if (found === 0) {
+            // assume 0 found means 100% coverage
+            return '100.00%';
+        }
+        return `${roundToTwoDecimals(hits / found)}%`;
+    });
+
+    Handlebars.registerHelper('coverageColor', function (hits, found) {
+        if (found === 0) {
+            // assume 0 found means 100% coverage
+            return 'green';
+        }
+        if ((hits / found) <= 0.75) {
+            return 'red';
+        } else if ((hits / found) > 0.75 && (hits / found) < 1) {
+            return 'yellow';
+        } else if ((hits / found) === 1) {
+            return 'green'
+        }
+    });
+
+    Handlebars.registerHelper('prettyDate', function (date) {
+        return date.toLocaleString();
+    });
+
+    const templateString = fs.readFileSync('./report-generator/template.handlebars', 'utf-8');
+
+    const template = Handlebars.compile(templateString);
+    const page = template(templateData);
+    fs.writeFileSync('./exports/index.html', page);
+}
+
+module.exports = {
+    generateHtml
+}

report-generator/template.handlebars

@@ -0,0 +1,140 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Coverage Report</title>
+    <style>
+        * {
+            font-family: sans-serif;
+        }
+
+        body {
+            padding: 0% 5%;
+        }
+
+        .flex-container {
+            display: flex;
+            flex-flow: row wrap;
+            justify-content: space-between;
+        }
+
+        table.main-table {
+            width: 100%;
+        }
+
+        table.main-table th {
+            color: #FFF;
+            background-color: cornflowerblue;
+            font-size: larger;
+        }
+
+        td,
+        th,
+        span {
+            padding: 0.4em;
+            vertical-align: middle;
+        }
+
+        .green {
+            background-color: lightgreen;
+        }
+
+        .yellow {
+            background-color: gold;
+        }
+
+        .red {
+            background-color: red;
+        }
+
+        td.bold {
+            font-weight: 800;
+        }
+
+        td.default {
+            color: dodgerblue;
+            background-color: skyblue;
+            padding: 0.25em;
+        }
+    </style>
+</head>
+
+<body>
+    <h1>Code Coverage Report</h1>
+    <hr>
+    <div class='flex-container'>
+        <div>
+            <p><strong>Current View: </strong> top level</p>
+            <p><strong>Date: </strong> {{prettyDate date}}</p>
+            <p><strong>Legend: </strong>
+                <span class="red">low: < 75%</span>
+                        <span class="yellow">medium: >= 75% < 100%</span>
+                                <span class="green">perfect: 100%</span></p>
+        </div>
+        <div>
+            <table class="summary-table">
+                <tr>
+                    <td></td>
+                    <td>Hit</td>
+                    <td>Total</td>
+                    <td>Coverage</td>
+                </tr>
+                <tr>
+                    <td class="bold">Lines:</td>
+                    <td class="default">{{totalLinesHit}}</td>
+                    <td class="default">{{totalLinesFound}}</td>
+                    <td class="{{coverageColor totalLinesHit totalLinesFound}}">
+                        {{coverage totalLinesHit totalLinesFound}}</td>
+                </tr>
+                <tr>
+                    <td class="bold">Functions:</td>
+                    <td class="default">{{totalFunctionsHit}}</td>
+                    <td class="default">{{totalFunctionsFound}}</td>
+                    <td class="{{coverageColor totalFunctionsHit totalFunctionsFound}}">
+                        {{coverage totalFunctionsHit totalFunctionsFound}}</td>
+                </tr>
+                <tr>
+                    <td class="bold">Branches:</td>
+                    <td class="default">{{totalBranchesHit}}</td>
+                    <td class="default">{{totalBranchesFound}}</td>
+                    <td class="{{coverageColor totalBranchesHit totalBranchesFound}}">
+                        {{coverage totalBranchesHit totalBranchesFound}}</td>
+                </tr>
+            </table>
+        </div>
+    </div>
+    <hr>
+    <table class=" main-table">
+        <tr>
+            <th>Directory</th>
+            <th colspan="2">Line Coverage</th>
+            <th colspan="2">Functions</th>
+            <th colspan="2">Branches</th>
+        </tr>
+        {{#each files as |file|}}
+        <tr>
+            <td class="default">{{file.path}}</td>
+            <td class="{{coverageColor file.linesHit file.linesFound}} bold">
+                {{coverage file.linesHit file.linesFound}}
+            </td>
+            <td class="{{coverageColor file.linesHit file.linesFound}}">
+                {{file.linesHit}} / {{file.linesFound}}
+            </td>
+            <td class="{{coverageColor file.functionsHit file.functionsFound}} bold">
+                {{coverage file.functionsHit file.functionsFound}}
+            </td>
+            <td class="{{coverageColor file.functionsHit file.functionsFound}}">
+                {{file.functionsHit}} / {{file.functionsFound}}
+            </td>
+            <td class="{{coverageColor file.branchesHit file.branchesFound}} bold">
+                {{coverage file.branchesHit file.branchesFound}}
+            </td>
+            <td class="{{coverageColor file.branchesHit file.branchesFound}}">
+                {{file.branchesHit}} / {{file.branchesFound}}
+            </td>
+        </tr>
+        {{/each}}
+    </table>
+</body>
+
+</html>