跟我一起基于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因为我们在webpack-dev-server中配置了hot 开关，所以覆盖率报告也出一同更新。
其实完全可以把 terminal 中的覆盖率和测试错误报告 全部用 html 展示输出，目前没有找到现成的轮子，后续考虑手动撸一个适配当前框架的karma-report-plugin
Get your own codecov for your lib
我们在 npm 或着 github 上经常会看这种类似的小徽章。有这些徽章的项目，b格就是不一样。
那我们开始 codecov 的集成
- 安装 codecov 依赖
yarn add codecov -D
or
npm install --save-dev codecov- 注册codecov & 添加仓库 获取 CODECOV_TOKEN
这个 CODECOV_TOKEN 很重要！！！
- 编辑 package.json 并添加 script
"codecov": "export CODECOV_TOKEN= YOUR_CODECOV_TOKEN && codecov"YOUR_CODECOV_TOKEN 处替换成你的 仓库专用 CODECOV_TOKEN
- 在 codecov.io 中，从你当的仓库的settings 中获取 Badge，并在你自己项目的 README 中添加小徽章
此时会得到一个覆盖率为 unknown。距离成功已经不远了
- 执行命令
yarn codecov
or
npm run codecov等待 codecov 上传完成之后，刷新下你的 git 仓库页面 (或者 本地重新开启 markdown 预览),就能得到一个有 具体 rate 值的徽章了
常见的小图标有以下几类：
- ci 流程的通过情况：
- Git-Action
- TravisCI
- CircleCi
- 测试覆盖率
- coveralls
- codecov
- 下载量
- npm downloads
你还可以通过 shields 这个网站 在 README中添加自己喜欢的图标。
别看徽章小，它背后代表的是开发者对整个开发流程规范化的重视。能成功构建、代码覆盖率高的项目，
才是良好的项目。
置于如何配置CI，我就不在这里说了。前人有好多上乘质量的文章，还有CI工具官网的hellow world。
相信这些都会对你有所帮助。
Summary
至此，基于Karma的测试环境已经初具雏形了。当然这只是前端工具链中的一个环节，在与其他环节对接的时候，还是有很多的问题需要去面对和解决的。一个工具的搭建不仅仅是简单的拼装，还要考虑模块之间的配合，考虑基于未来的拓展。
最后希望这篇文章对你有用。
Last end
搬运时间......
本系列文章相关的代码 browserify版仓库 webpack版仓库
阮一峰老师写的CI的科普文传送门: git-actions Travis CI
- 发表于:
- 本文为 InfoQ 中文站特供稿件
- 首发地址：https://www.infoq.cn/article/14fc847fb0a06a73df8ee3035
- 如有侵权，请联系 cloudcommunity@tencent.com 删除。
相关快讯
扫码
添加站长 进交流群
领取专属 10元无门槛券
私享最新 技术干货
腾讯云开发者
