fe ? not exsit ?

初探前端单元测试

俗话说：不怕贼偷，就怕贼惦记。So，我惦记了测试良久，也该入手了。简单说一下，测试深感是一项开发的必备能力，这个整的太不接地气了，其实就是让你在开发的时候更快的知道一些漏洞和学习一些其他人代码时候做的测试帮助你了解。最通俗的举个例子，一个project，A模块很多复杂代码逻辑，小明开始入手一个迭代需求，开开心心的开发提测，突然接收到了qa爸爸妈妈的制裁，- -大家都懂得。这个时候单元测试的作用就出来了，可以迅速的提示你写的代码对之前需求有无影响。。个人的粗陋见解。Dont bb, up up up。（附：感谢一下杨w文坚哥哥的指引方向吧！）

Assert

assert 是Node的一个关于做断言测试的内置模块。大体就是一个类的一些成员方法提供参数做一些是否符合预期的判断，不符合就会由AssertionError抛出错误，符合就会pass。如果你想自定义ErrorMessage也有对应的format方法。

demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/**
 * assert
 */
const sum = (a, b) => a + b;
let expected = sum(1,2);
assert( expected === 4, 'expected value is not right');
// output: AssertionError [ERR_ASSERTION]: expected value is not right
//     assert( expected === 3, 'expected value is not right');
//if that will pass

/**
 * equal
 */
 assert.equal(1,2);
AssertionError [ERR_ASSERTION]: 1 == 2

mocha

比较知名的基于nodejs的前端测试框架，以灵活方便有趣著称，首先看一下测试脚本

1
2
3
4
5
6
7
8
var assert = require('assert');
describe('Array', function() {
describe('#indexOf()', function() {
    it('should return -1 when the value is not present', function() {
    assert.equal([1,2,3].indexOf(4), -1);
    });
});
});

如官网所言灵活方便有趣，测试的编写过程：describe 测试套件 + it 测试用例 + 断言库（目前用的node的assert模块）
提到断言库可以搭配很多库。比较主流的像偏语义化的shouldjs和chaijs。势利眼看star高的就看好chai。

再简单看一下重点异步测试和hook

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
describe('async test', function() {
    var foo  = false;
    //hook
    beforeEach(function() {
        foo = true;
    });
    // async
    it('返回成功', function(done){
        fetch('https://news-at.zhihu.com/api/4/news/latest').then(function(err, res){
            assert(typeOf(res) == 'object', '返回类型是Object');
            assert(foo, 'foo应该是true');
            done();
        });
    });
});

学习的时候遇到的一个小坑 –growl 参数在os系统桌面弹窗提醒，前提是os系统预先装好了Growl，这点
在mocha issue里也说明了。。

karma

首先明确概念，非断言库非测试框架。是angularjs团队打造，旨在给开发者创建一个开发测试环境，通过配置一些loader给予一些feedback。同样的，先跑个例子为敬。

  1. npm init 一个npm环境

  2. 写一个测试用例hello.js

    1
    2
    3
    4
    5
    describe('A spec suite', function() {
        it('contains a passing spec', function() {
            console.log("Hello Karam")
        });
    });

  3. karma init option依次为mocha、no nedd requireJs、Chrome、*.js、yes,再检查一下自己package.json里面的文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
  "name": "0526",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "karma": "^2.0.2",
    "karma-chrome-launcher": "^2.2.0",
    "karma-mocha": "^1.3.0",
    "mocha": "^5.2.0"
  }
}
  1. 至此一个karma + mocha的实例就ok了。

这里有一个隐蔽的小坑，在全局安装了karma之后node执行karma的时候始终会报一个 Error: No provider for “framework:mocha”! 类型的错误，造成这个问题的原因是我在全局安装了karma，之后在stackoverflow上观察大神操作全局装karma-cli就ok了。。

travis-ci

这也是本人入门的第一个持续集成的学习，该ci提供一个运行环境用于测试、构建、部署等。好处的话就是足够方便、定制化提供集成的服务方向。

  1. 首先登录travis-ci, 设置自己github与之关联的仓库文件，这里我把如上karma的代码仓库叫做travis-test

  2. 然后载在如上travis-test新建一个travis.yml的配置模版

    1
    2
    3
    4
    5
    6
    language: node_js
    node_js:
     - "node"
    sudo: required
    addons:
      chrome: stable

  3. travis会根据yaml的该模版执行构建 =》 npm test的命令（travis.yml的默认命令，如需执行其他命令可以用script自定义）

  4. 把travis-test push 到github上，触发travis-ci进行构建
  5. 之后去travis的构建页面查看一下日志，如果没有通过请浏览命令行查明具体原因，如果ok则会显示build: passing的徽章标志。

遇到一个chrome-lanuncher一直失败的问题，在travis的隐藏文档中有一条描述，如果你当前vm没有安装browser，可以使用一个沙箱来代替作为此测试得以解决。

总结

也是这周抽的时间断断续续看了一些，写了几个工具的demo，每周坚持下去吧。