单元测试+travis&coveralls集成+npm发布

codewars 刷到了很有意思的一道题,题目给出了篱笆密码法的介绍,让你根据介绍写出对应的encodedecode方法。
刷过之后感觉非常满足,为了充实下自己的github,顺便尝试写写单元测试,我决定整理下将code发布到npm

晚上九点发布之后,第二天早上来看,发现被下载了151次!!有点小惊喜,完全不知道发生了什么,不过挺开心的,哈哈哈哈哈


项目地址 欢迎fork,star

大致步骤如下

· code
· 单元测试
· travis
· coveralls
· npm publish


Code

题目链接:
Rail Fence Cipher: Encoding and Decoding
有兴趣的同学可以自己做做看,这里对解题思路不做分析

code准备好之后,就可以开始准备构建自己的npm包了

新建目录之后,

1
$ npm init

填写对应的信息,生成package.json,这里可以随便填一点,毕竟后面肯定会改的。。

之后就是构建项目目录,项目中使用gulp对文件已经了转译压缩等工作,最终的项目目录如下

src 源文件
dist gulp的输出文件
test 对应的单元测试文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.
├── gulpfile.js
├── index.js
├── node_modules
├── package-lock.json
├── package.json
├── dist
│   ├── index.js
│   └── railFenceCipher.min.js
├── src
│   └── index.js
└── test
└── index.test.js

单元测试

这里使用mocha做单元测试,Istanbul 做覆盖率测试

mocha

安装

简单介绍下mocha的使用,首先就是安装mocha ,就是npm那一套,要注意的是为了操作的方便,请在全面环境也安装一下mocha

1
npm install --global mocha

通常,测试脚本与所要测试的源码脚本同名,但是后缀名为.test.js(表示测试)或者.spec.js(表示规格),统一放在test文件夹下,每个src的文件,都有一个**.test.js与之对应

写法

每个**.test.js文件中都应该包括一个或多个describe块,每个describe中应该有一个或者多个it

describe块称为”测试套件”(test suite),表示一组相关的测试。它是一个函数,第一个参数是测试套件的名称,第二个参数是一个实际执行的函数。
it块称为”测试用例”(test case),表示一个单独的测试,是测试的最小单位。它也是一个函数,第一个参数是测试用例的名称,第二个参数是一个实际执行的函数。

如何分组是个人习惯问题,也可以参考大型的开源项目中单元测试的写法,更有指导意义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var chai = require('chai')
var railfencecipher = require('../src/index.js')
var assert = chai.assert;
describe('rail fence cipher', function () {
it('encode', function () {
var ans = railfencecipher.encodeRailFenceCipher('WEAREDISCOVEREDFLEEATONCE', 3);
assert.equal(ans, 'WECRLTEERDSOEEFEAOCAIVDEN');
});
it('decode', function () {
var ans = railfencecipher.decodeRailFenceCipher('WECRLTEERDSOEEFEAOCAIVDEN', 3);
assert.equal(ans, 'WEAREDISCOVEREDFLEEATONCE');
});
});
断言库

所谓”断言”,就是判断源码的实际执行结果与预期结果是否一致,上面代码中的 assert.equal 就是用来判断函数输出的结果是否正确。
nodejs本身有自带的断言库assert,这里我们使用了chai的断言库,所以在使用前要

1
npm install chai --save-dev

运行

写好单元测试脚本之后,我们就可以来运行它了

1
$ mocha test/index.test.js

mocha默认运行test文件夹下的文件,因此当你执行

1
$ mocha

命令时,会默认将test目录下所有的测试脚本运行一遍

test文件夹下有目录嵌套时,需要在命令后加上 –recursive 参数,这样test目录下所有子文件夹中的测试用例都会被执行

1
$ mocha --recursive

我们项目中只有一个测试脚本,因此运行之后可以看到所有的测试用例都通过了

1
$ mocha

mochatest

查看更多 mocha 的用法

Istanbul

通过mocha进行单元测试的时候,我们常常关心我们写的测试用例是否覆盖到了代码的边边角角各种情况,这时候我们可以用Istanbul来对测试覆盖率进行检测

· 行覆盖率(line coverage):是否每一行都执行了?
· 函数覆盖率(function coverage):是否每个函数都调用了?
· 分支覆盖率(branch coverage):是否每个if代码块都执行了?
· 语句覆盖率(statement coverage):是否每个语句都执行了?

安装
1
$ npm install istanbul --save-dev
使用

我们在使用Istanbul的时候,不需要写额外的代码。由于我们的测试框架使用了mocha,因此我们只需要执行

1
$ istanbul cover _mocha

就可以拿到我们测试覆盖率的结果,命令会将所有的测试用例运行一遍我们可以看到terminal中的返回结果

istanbultest

运行之后会生成一个coverage文件夹,lcov-report 目录下有一个index.html,在浏览器中打开后会告诉你测试的结果,如果测试覆盖率没有打到100%,会将没有测试到的代码标出

coveragehtml

查看更多 istanbul 的用法

travis-ci

我们经常在开源项目中看到这个badge,感觉非常高大上,为了让自己的npm包看起来更高端,更可靠,我们也来配置一下

build

通常我们都会使用Travis-CI
Travis-CI是在线的,分布式的持续集成服务,它会同步你在GitHub上托管的项目,每当你Commit Push之后,就会在几分钟内开始按照你的要求测试部署你的项目。

在项目中配置

首先要在项目的根目录下新建一个.travis.yml文件,加入项目的基本信息,具体写法可以看这里

nodejs的项目配置项很简单,如下图

1
2
3
4
5
language: node_js
node_js:
- "v6.9.1"
npm:
- "5.3.0"

登陆travis

使用github账号登陆travis,将需要持续集成的项目(repo)勾选进去

这样再次push的时候,travis就会自动运行测试脚本,测试通过之后,我们就可以看到上面提到的badge

travispage

配置badge到项目的README.md

点击这个badge,复制弹窗里的链接,在README.md中使用对应的markdown语句标记后,就可以看到了

我的项目中,对应的markdown长这样

1
[![build](https://travis-ci.org/rjdangcc/railFenceCipher.svg?branch=1.1.5)]()

coveralls

除了build外,我们还可以添加测试覆盖率的badge,给人的感觉就是靠谱

我们可以使用coveralls的服务,打开 coveralls官网并登陆,将项目勾选上

安装

之前我们已经安装了Istanbul,这里只要安装coveralls,以及配合mocha使用的插件

1
$ npm install --save-dev coveralls mocha-lcov-reporter

配置

此外,我们需要在package.json中,将 npm test 的内容修改一下

1
istanbul cover ./node_modules/mocha/bin/_mocha --report lcovonly -- -R spec && cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js && rm -rf ./coverage

配置好之后,在本地运行npm test会报错,建议在本地执行

1
$ istanbul cover _mocha

之所以要配置npm test,是因为git push之后 travis 会执行 npm test 命令,会在测试结束之后将对应的覆盖率信息通知到coverallscoveralls来更新的我们项目的 coverage badge

travistest

复制badge链接

push之后,登陆coveralls,进入对应的项目,拉到最下面 点击EMBED,复制markdown里的代码,直接粘贴到README.md中,就可以展示你最新代码的测试覆盖率badge了

covbadge

这样我们基本的准备工作就完成了,接下来就要准备npm publish

npm publish

在本地测试无误之后,修改package.json中的相应信息,尽量把各类信息补充完整
在每次 publish 前都要记得修改 version , 假设我们这次更新后的版本号为 2.0.0

依次执行

1
2
$ git tag 2.0.0
$ git push --tag

注册 npm

登陆npm官网进行注册,注册之后要验证邮箱,否则无法成功 publish

注册成功后在本地登陆npm,这里要注意如果你之前修改的npm源的地址,一定要切换回npm官方的源地址再进行操作

登陆&发布

1
$ npm login

输入你的Username以及password,邮箱

1
$ npm publish

发布成功后,在npm官网上就可以搜到你刚刚发布的npm包了, 项目的简介就是README.md中的内容

参考

mochajs
istanbul
travis-ci
coveralls
测试框架 Mocha 实例教程
代码覆盖率工具 Istanbul 入门教程
JS 单元测试代码覆盖率和持续集成

0%