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

用户头像
Jack Q
关注
发布于: 2020 年 08 月 18 日
跟我一起基于Karma搭建一个测试环境(下)

More automated

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

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

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



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

  1. 使用 NodeJs http 模块 的 createServer 服务

  2. 借助 Express 或者 Koa 的 static 中间件

  3. 使用 Nginx 对 coverage 目录进行代理

  4. 使用 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 值的徽章了



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

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



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

才是良好的项目。



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

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

Summary

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

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

Last end

搬运时间......

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

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



发布于: 2020 年 08 月 18 日 阅读数: 330
用户头像

Jack Q

关注

还未添加个人签名 2018.06.20 加入

还未添加个人简介

评论

发布
暂无评论
跟我一起基于Karma搭建一个测试环境(下)