《浏览器端测试：mocha，chai，phantomjs》

    这次我们测试的对象是上文提到的 fibonacci 函数

    此函数的定义为

    • 当 n === 0 时，返回 0；n === 1时，返回 1;
    • n > 1 时，返回 fibonacci(n) === fibonacci(n-1) + fibonacci(n-2)，如 fibonacci(10) === 55;

    知识点

    1. 学习使用测试框架 mocha 进行前端测试 :
    2. 了解全栈的断言库 chai: http://chaijs.com/
    3. 了解 headless 浏览器 phantomjs:

    lesson6 的内容都是针对后端环境中 node 的一些单元测试方案，出于应用健壮性的考量，针对前端 js 脚本的单元测试也非常重要。而前后端通吃，也是 mocha 的一大特点。

    首先，前端脚本的单元测试主要有两个困难需要解决。

    1. 运行环境应当在浏览器中，可以操纵浏览器的DOM对象，且可以随意定义执行时的 html 上下文。

    浏览器环境执行

    我们首先搭建一个测试原型，用 mocha 自带的脚手架可以自动生成。

    1. .
    2. ├── index.html       # 这是前端单元测试的入口
    3. ├── mocha.css
    4. ├── mocha.js
    5. └── tests.js         # 我们的单元测试代码将在这里编写

    其中 index.html 是单元测试的入口，tests.js 是我们的测试用例文件。

    我们直接在 index.html 插入上述示例的 fibonacci 函数以及断言库 chaijs。

    1. <div id="mocha"></div>
    3. <script>
    4.   var fibonacci = function (n) {
    5.     if (n === 0) {
    6.       return 0;
    7.     if (n === 1) {
    8.       return 1;
    9.     }
    11.   };
    12. </script>

    然后在tests.js中写入对应测试用例

    这时打开index.html，可以发现测试结果，我们完成了浏览器端的脚本测试(注意我们调用了 window 对象)

    测试反馈

    mocha没有提供一个命令行的前端脚本测试环境(因为我们的脚本文件需要运行在浏览器环境中)，因此我们使用phantomjs帮助我们搭建一个模拟环境。不重复制造轮子，这里直接使用mocha-phantomjs帮助我们在命令行运行测试。

    首先安装mocha-phantomjs

    1. npm i -g mocha-phantomjs
    1. <script>mocha.run()</script>

    改为

    这时候, 我们在命令行中运行

    1. mocha-phantomjs index.html --ssl-protocol=any --ignore-ssl-errors=true

    结果展现是不是和后端代码测试很类似 :smile:

    更进一步，我们可以直接在 package.json 的 scripts 中添加
    (package.json 通过 npm init 生成，这里不再赘述)

    1. "scripts": {
    2.   "test": "mocha-phantomjs index.html --ssl-protocol=any --ignore-ssl-errors=true"

    将mocha-phantomjs作为依赖

    直接运行

    1. npm test

    运行结果如下: