Implementing Incremental Code Coverage for Frontend Projects Using Istanbul

The background explains that code‑coverage metrics help developers and managers assess test completeness, improve code quality, and guide project planning. While ZhaiZhai already had incremental coverage for Java back‑ends, frontend coverage was lacking, prompting the development of a custom solution for FE projects.

In the technology selection section, three popular JavaScript coverage tools—Istanbul, ScriptCover, and JsCover—are compared. Istanbul, despite limited maintenance, is the de‑facto standard and is integrated into most frontend test frameworks (jest, karma, cypress). The team therefore based their implementation on Istanbul.

The implementation is divided into five steps: instrumentation, data collection, data reporting, data reception, and report generation.

Instrumentation

Instrumentation inserts monitoring code into the source to track execution of statements, branches, and functions. Only JavaScript files are instrumented, and the process is applied in the test‑environment build to avoid affecting production bundles.

function istanbul_test() {
    console.log('istanbul_test');
}

function istanbul_test2() {
    console.log('istanbul_test2');
}

var test = false;

if (test) {
    istanbul_test();
} else {
    istanbul_test2();
}

After instrumentation, Istanbul adds a global coverage object (e.g., __cov_GpzNBZZeWVNtWXQEPAI_7w ) that records execution counts for functions, statements, and branches. The generated code is extensive and follows the pattern shown below.

var __cov_GpzNBZZeWVNtWXQEPAI_7w = (Function('return this'))();
if (!__cov_GpzNBZZeWVNtWXQEPAI_7w.__coverage__) {
   __cov_GpzNBZZeWVNtWXQEPAI_7w.__coverage__ = {};
}
__cov_GpzNBZZeWVNtWXQEPAI_7w = __cov_GpzNBZZeWVNtWXQEPAI_7w.__coverage__;
// ... many lines of coverage metadata ...
function istanbul_test() {
   __cov_GpzNBZZeWVNtWXQEPAI_7w.f['1']++;
   __cov_GpzNBZZeWVNtWXQEPAI_7w.s['2']++;
   console.log('istanbul_test');
}
function istanbul_test2() {
   __cov_GpzNBZZeWVNtWXQEPAI_7w.f['2']++;
   __cov_GpzNBZZeWVNtWXQEPAI_7w.s['4']++;
   console.log('istanbul_test2');
}
var test = false;
if (test) {
   __cov_GpzNBZZeWVNtWXQEPAI_7w.b['1'][0]++;
   __cov_GpzNBZZeWVNtWXQEPAI_7w.s['7']++;
   istanbul_test();
} else {
   __cov_GpzNBZZeWVNtWXQEPAI_7w.b['1'][1]++;
   __cov_GpzNBZZeWVNtWXQEPAI_7w.s['8']++;
   istanbul_test2();
}

The coverage data includes four main metrics: line, function, branch, and statement coverage. A global object stores counts and mapping information (path, s, b, f, fnMap, statementMap, branchMap).

path: file path
s: statement count
b: branch count
f: function count
fnMap: function location info
statementMap: statement location info
branchMap: branch location info

Data Collection

During a test session, the browser accumulates coverage data in window.__coverage__ . The following utility extracts the data, computes covered lines, and prepares a list for reporting.

getAllCoverage() {
    const coverage = window.__coverage__;
    if (coverage == undefined) return [];
    return Object.entries(coverage).reduce((prev, cur) => {
        const [key, value] = cur;
        prev.push({
            pathName: key,
            coveredLines: this.getLines(value),
            totalLines: this.getLineCoverages(value)
        });
        return prev;
    }, []);
}

getLines(data = {}) {
    const lines = [];
    const { s = {}, statementMap = {} } = data;
    Object.entries(s).forEach(([key, count]) => {
        if (count > 0) {
            const { start, end } = statementMap[key];
            for (let i = start.line; i <= end.line; i++) {
                lines.push(i);
            }
        }
    });
    return [...new Set(lines)];
}

getLineCoverages(data) {
    const lines = [];
    const { s = {}, statementMap = {} } = data;
    Object.entries(s).forEach(([key, count]) => {
        const { start, end } = statementMap[key];
        for (let i = start.line; i <= end.line; i++) {
            lines.push(i);
        }
    });
    return [...new Set(lines)];
}

Data Reporting

Coverage data is sent to a backend service every 10 seconds or when the page unloads. A webpack plugin injects a PAGE_META object into window containing project, branch, tag, and unique identifiers, which are included in the payload.

const PAGE_META = window.__PAGE_META__;
if (PAGE_META == undefined) return;
const submitData = {
    clusterName: PAGE_META.cluster,
    branchName: PAGE_META.branch,
    ipOrTagName: PAGE_META.tag,
    uniqId: this.uid,
    feClassCoverInfoList: data.map(item => ({
        ...item,
        pathName: this.handlePath(item.pathName)
    })),
    nowTimestamp: Date.now()
};

Only files that changed in the current diff are instrumented and reported, reducing data volume.

Data Reception

The backend receives the incremental reports, merges the latest data with historical records, and stores the combined result in a database. This approach ensures that only the most recent coverage information is kept while discarding superseded entries.

Report Generation

After data preprocessing, the system calculates coverage percentages for each changed file and aggregates them into a visual report. The current implementation only accounts for instrumented JavaScript lines; non‑instrumented lines are excluded from the metrics.

The coverage formula is displayed in the accompanying diagram.

Challenges Encountered

During early adoption, the team faced occasional data loss due to plugin configuration issues, latency in coverage visibility, frequent plugin upgrades, and increased compilation time caused by serial processing. Solutions included adding detailed logging, increasing reporting frequency with asynchronous handling, implementing automatic version checks, and parallelizing the build.

Conclusion

The incremental coverage solution has raised frontend coverage adoption to about 80 % across projects, enabling early detection of untested code and improving release confidence.

Future Outlook

Planned enhancements include supporting newer frameworks such as Vue 3, extending coverage to CSS/HTML, and collaborating with the open‑source community for continuous improvement.