Categories
程式開發

跟我一起基于Karma搭建一个测试环境(下)


More automated

有心的小伙伴,肯定已经在我们的测试工程中的 coverage 下发现了些许端倪。lcov格式下生成的内容已经是一个可以在browser中打开的覆盖率测试报告了。

但是,每次只能手动来打开,肯定不是长久之计。攻城狮嘛,不偷懒怎么能行。

简单的分析一波 coverage/lcov-report 下的内容,都是静态资源文件。那么,我们只要增加一个静态资源服务就好了。

脑海中瞬间出现以下选型:

使用 NodeJs http 模块 的 createServer 服务借助 Express 或者 Koa 的 static 中间件 使用 Nginx 对 coverage 目录进行代理使用 webpack 的 webpack-dev-server

能坐着就不站着,能躺着绝不坐着。

方案 1 要自己从零 去实现 一个 static ,有些麻烦

方案 2 要引入 Express 和Koa 及其配套插件,为了一个静态服务 引入这么些庞然大物,得不偿失

方案 3 理由同上

既然我们之前有用过 webpack,那就要把他的能力再榨取一些。

安装 webpack-dev-server

yarn add webpack-dev-server -D

or

npm install --save-dev webpack-dev-server

抽离 karma.confi.js 中的 webpack 部分为独立的webpack.config.js文件


module.exports = {
mode: 'development,
devtool: 'source-map',
++ devServer: {
// 支持热更新
hot: true,
port: 3000,
historyApiFallback: true,
open: true,
compress: false,
// coverage/lcov-report 是 karma.confi.js 中的 instanbul 的 lcov 报告生成位置
contentBase: path.join(__dirname, 'coverage/lcov-report');
},
module: {
rules: [{
test: /.js?$/,
use: {
loader: 'babel-loader'
}
}]
}
};

注意粘贴时删除上文中的 ++, 此处表示当前行为新增内容

package.json中加入这行 script

"scripts": {
"init-karma": "karma init",
"test": "karma start ./karma.conf.js",
++"reporting": "webpack-dev-server --config webpack.config.js"
}

注意粘贴时删除上文中的 ++, 此处表示当前行为新增内容

至此可以通过执行命令看看效果了

yarn test

or

npm run test

新开一个同路径的terminal 窗口

yarn reporting

or

npm run reporting

跟我一起基于Karma搭建一个测试环境(下) 1

因为我们在webpack-dev-server中配置了hot 开关,所以覆盖率报告也出一同更新。

其实完全可以把 terminal 中的覆盖率和测试错误报告 全部用 html 展示输出,目前没有找到现成的轮子,后续考虑手动撸一个适配当前框架的karma-report-plugin

Get your own codecov for your lib

跟我一起基于Karma搭建一个测试环境(下) 2

我们在 npm 或着 github 上经常会看这种类似的小徽章。有这些徽章的项目,b格就是不一样。

那我们开始 codecov 的集成

安装 codecov 依赖

yarn add codecov -D

or

npm install --save-dev codecov

注册codecov” & 添加仓库 获取 CODECOV_TOKEN

跟我一起基于Karma搭建一个测试环境(下) 3

跟我一起基于Karma搭建一个测试环境(下) 4

这个 CODECOV_TOKEN 很重要!!!

编辑 package.json 并添加 script

"codecov": "export CODECOV_TOKEN= YOUR_CODECOV_TOKEN && codecov"

YOUR_CODECOV_TOKEN 处替换成你的 仓库专用 CODECOV_TOKEN

在 codecov.io 中,从你当的仓库的settings 中获取 Badge,并在你自己项目的 README 中添加小徽章

跟我一起基于Karma搭建一个测试环境(下) 5

此时会得到一个覆盖率为 unknown。距离成功已经不远了

跟我一起基于Karma搭建一个测试环境(下) 6

执行命令

yarn codecov

or

npm run codecov

等待 codecov 上传完成之后,刷新下你的 git 仓库页面 (或者 本地重新开启 markdown 预览),就能得到一个有 具体 rate 值的徽章了

跟我一起基于Karma搭建一个测试环境(下) 7

常见的小图标有以下几类:

ci 流程的通过情况:Git-ActionTravisCICircleCi“测试覆盖率coverallscodecov“下载量npm downloads

你还可以通过 shields” 这个网站 在 README中添加自己喜欢的图标。

别看徽章小,它背后代表的是开发者对整个开发流程规范化的重视。能成功构建、代码覆盖率高的项目,

才是良好的项目。

置于如何配置CI,我就不在这里说了。前人有好多上乘质量的文章,还有CI工具官网的hellow world。

相信这些都会对你有所帮助。

Summary

至此,基于Karma的测试环境已经初具雏形了。当然这只是前端工具链中的一个环节,在与其他环节对接的时候,还是有很多的问题需要去面对和解决的。一个工具的搭建不仅仅是简单的拼装,还要考虑模块之间的配合,考虑基于未来的拓展。

最后希望这篇文章对你有用。

Last end

搬运时间……

本系列文章相关的代码 browserify版仓库webpack版仓库

阮一峰老师写的CI的科普文传送门: git-actionsTravis CI