canyon-report v0.2.4

Canyon Report

灵感来自于istanbul-report

背景

由于istanbul-report的 html 报告不支持水合，我们开发了 canyon-report，它支持水合，通过

Report.init(reportRef.current, {
    summary: summary,
    watermarks: configWatermarks,
    onViewDetailedFileCoverage(path: string) {
        console.log(path, 'path');
    },
});

将概览数据传入，会根据概览数据生成树形目录，用户可点击切换到不同目录下查看文件夹及文件覆盖率概览。

对于单个文件的覆盖率详情，我们通过onViewDetailedFileCoverage的方法，将选择的路径传出，利用 ajax 请求来调去当前文件的覆盖率数据再进行水合。

生成summary map

var libCoverage = require('istanbul-lib-coverage');
var map = libCoverage.createCoverageMap({});
var summary = libCoverage.createCoverageSummary();



// 生成summary概览数据，利用的是fc.toSummary()方法。
map.files().forEach(function(f) {
    var fc = map.fileCoverageFor(f),
        s = fc.toSummary();
    summary[f] = s;
});

console.log('summary', summary);

对比数据大小

size

summary <<< coverage

canyon-report 组件的应用场景以后是在浏览器中请求覆盖率数据，需要保证数据最小的原则 ，避免全量覆盖率数据的传输。

缺

1.缺branch 、 function的着色，可以先放着