您现在的位置是:首页 > 正文

js 代码覆盖率istanbul+项目git信息采集

2024-01-30 20:35:10阅读 0

说起js的代码覆盖率,大家肯定想到的是ScriptCover、JSCover、Istanbul。

  • ScriptCover:是一款chrome的扩展插件
  • JSCover: 要在浏览器中执行测试用例
  • Istanbul:主要是用于node.js环境下的覆盖率采集

需求:Browser端的js覆盖率采集,获取git相关信息,数据处理上报

调研:

  • istanbul-middleware 代码覆盖率全套,还做了html展示,在'/coverage'页面可以看
var istanbulMiddleware = require('istanbul-middleware'),
  port = 8989;

function getCoverageData() {
  //process.cwd()当前执行程序的路径
  istanbulMiddleware.hookLoader(process.cwd(), {
    verbose: true
  });
  var app = express()
  app.use('/coverage', istanbulMiddleware.createHandler({
    verbose: true,
    resetOnGet: true
  }));

  //require入口处添加钩子方法,返回已插桩代码
  require(process.cwd())

  app.use(istanbulMiddleware.createClientHandler(process.cwd(), {
    matcher: matcher
  }));
  app.listen(port);
}

function matcher(req) {
  var parsed = url.parse(req.url);
  return parsed.pathname && parsed.pathname.match(/(\.js|\.vue)$/) && !parsed.pathname.match(/jquery/);
}

 

  • babel-plugin-istanbul 是一个基于babel转码的插桩插件,可以区分线上和测试环境操作

.babelrcbabel.config.js配置如下:

module.exports = function () {
    return {
        env: {
            development: {
                plugins: [
                    [require('babel-plugin-istanbul'), { extension: ['.js', '.cjs', '.mjs', '.ts', '.tsx', '.jsx', '.vue']]
                ]
            }
        }
    };
};

可以通过window.__coverage__来获取覆盖率信息,结果解析详见https://github.com/gotwarlost/istanbul/blob/master/coverage.json.md

 

  • 获取git信息
//获取gitUrl
git remote -v
//获取git branch
git rev-parse --abbrev-ref HEAD
//获取git commitId
git rev-parse HEAD

😭😭😭😭😭git信息和window.__coverage__相隔一个银河系呀~ 长路漫漫💔

 

踩坑经历~

🔔这里我打算把数据获取这块封装一个npm包,方便业务方的接入

获取到git信息:

git信息与覆盖率信息对不上,咋怎?------把信息写死塞,后期就不请求了,在上报的时候直接读呀「拙见」

 

  • 写一个ssh的脚本文件获取( 嗯~怎么把数据传出去呢... 写入文件里面,在文件中获取!NoNoNo,直接写个js文件不是稳稳的吗?export import不香吗???)

    BUT:node_modules里面的上传js没法读取到外部的js文件(本地调试成功,发布测试失败)😭呵呵哒
     
  • 通过nodejs来获取
    require('child_process').exec

    可是可是...我们是要把这些信息汇总在客户端和window.__coverage__一起上报的,怎木办,怎木办

istanbul-middleware :看到官方的介绍是上面那样子做的,但是不知道覆盖率结果在哪里(除了window.__coverage__,还有其他方式能拿到数据吗???)

所以我做完这些还是通过window.__coverage__拿数据,运用到vue项目并不合适,只会统计那些配置js文件。

我这边只能获取到走服务端的js代码覆盖率信息,如果操作和描述有误,欢迎指出🌹🌹🌹

···经过一番摸爬滚打后,babel-plugin-istanbul给我了希望的光🌟🌟🌟

可以对vue文件进行覆盖率信息的采集,并且汇总到window.__coverage__中,让业务方手动修改babel配置,额~好麻烦呐

🔔🔔转角遇到 webpack-merge:这样我就不需要业务方手动添加babel关于istanbul的配置,只需要merge我已经写好的含有istanbul的babel配置到项目的webpack.config.js里面就好

module.exports = {
    module: {
        rules: [{
            test: /\.js$/,
            use: {
                loader: 'babel-loader',
                options: {
                    plugins: [
                        ['istanbul', {
                            "extension": ['.js', '.jsx', '.vue']
                        }]
                    ]
                }
            },
            exclude: '/node_modules/'
        }]
    }

}

业务方webpack.config.js ,只需要引入npm包里面的带有istanbul的webpack配置文件,在merge到项目里面即可

const jsCov = require('../node_modules/******')
module.exports = merge(jsCov,{})

解放双手了✌️···

由于webpack配置之前是可以直接走nodejs的,所以我在npm包的webpack配置上方通过nodejs获取到git相关信息,这样我和window更靠近一步了,BUT,咋拿出去呢

  • DefinePlugin:啊,这个只能传string,而且module.exports是require后即时执行的,exec是异步函数,git信息还没获取到呢,不好使
  • .env文件:上报的时候读不出来呀
  • fs.writeFile: 反正能执行nodejs 就写到文件塞✌️✌️✌️

🎉🎉🎉🎉🎉终于可以上报git信息+window.__coverage__,在此我初步是轮询请求接口上报的,业务方有感知,这点体验很不好,请教了小伙伴,要想做到业务方无感知就是个大工程,需要客户端配合,发现项目关闭的时候在上报信息,额~只是想法,还木有落地,哈哈哈,后续继续分享

咦~vue文件的覆盖率统计对那些vue语法无感呀,唔~任重而道远,各位大侠若有高招,那就相互切磋一下下塞,期待亲们的分享

 

网站文章