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

关注
发布于: 2020 年 08 月 18 日
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
﻿