学习单元测试框架karma+mocha

时间 2019-11-06

标签学习单元测试框架 karma+mocha karma mocha 繁體版

原文原文链接

tips: 最近在学习单元测试，选择框架是自动单元测试karma+mocha。html

1、什么是单元测试？

单元测试又称模块测试，是针对程序模块（软件设计的最小单位）来进行正确性检验的测试工做。程序单元是应用的最小可测试部件。 ———维基百科前端

如图所示：
java

system：全部组件的测试；node

integration：集成测试，多个组件一块儿测试
git

component：组件的测试；github

functional：功能测试，比一个单元要大，比一个完整的组件测试要小。一般为工做在一块儿的的几个方法/函数/类。上百的测试用例容许运行几个小时。大部分功能测试是功能测试回归套件的一部分；npm

unit：单元测试,可测试代码的最小的一部分。一般是一个单一的方法，不会使用其它方法或者类。很是快；json

2、咱们为何要学习单元测试？

咱们先来谈谈咱们工做中项目中遇到的问题吧！api

我总结了如下几点：浏览器

1. 为了验证代码的正确性。

2. 保证代码的质量。

3. 高聚合，低耦合。

特地查了下知乎！！！

原文地址：www.zhihu.com/question/28…（为何要学习单元测试）

以及下面这篇。

原文地址：taobaofed.org/blog/2016/0…（karma 的前生今世）。

3、karma框架

karma是一个测试runner，它须要测试框架。

1. karma 支持多种语言；

2. karma 支持多种测试框架；

3. karma 能够模拟多种真实的浏览器环境；

4. karma 能够监听文件的变化；

5. karma 支持语法的预编译。

对于前端而言，javaScript 和 node 就够了。因此mocha 测试框架就够了。同时mocha也能够运行在浏览器上。对于mocha 而言，须要配置html，才能运行在各个浏览器上。配置mocha 相对复杂，繁琐一点，因此咱们选择框架是karma + mocha；

安装配置karma；

1. npm install karma --save-dev

（当你安装完karma 后，你就得相应的安装karma所需的插件依赖。以下图）

为了不这种复杂的操做，以及后续的karma指令方便，建议全局安装karma-cli；

npm install karma-cli -g

2.咱们能够从新配置karma插件的依赖。

karma init

1>. Which testing framework do you want to use ? (mocha)

2>. Do you want to use Require.js ? (no)

3>. Do you want to capture any browsers automatically ? (Chrome,Firefox,Safari)

4>. What is the location of your source and test files ? (test/**.js)

5>. Should any of the files included by the previous patterns be excluded ? ()

6>. Do you want Karma to watch all the files and run the tests on change ? (yes)

（配置完后，咱们能够看到package.json 会自动生成依赖，以下图，但只是生成依赖，还须要npm install 安装到本地。）

四.认识mocha，断言库chai。

Mocha是一个可以运行在Node和浏览器中的多功能的JavaScript测试框架。

Mocha 同时支持TDD和BDD 2种测试接口模式。默认是BDD 模式运行。

什么是TDD,什么是BDD?

BDD: Behavior-Driven Development (行为驱动开发)

BDD:行为驱动开发是一种敏捷软件开发的技术，它鼓励软件项目中的开发者、 QA和非技术人员或商业参与者之间的协做。主要是从用户的需求出发，强调系统行为。

TDD: Test-driven development （测试驱动开发）
TDD:测试驱动开发是敏捷开发中的一项核心实践和技术，也是一种设计方法论。TDD的原理是在开发功能代码以前，先编写单元测试用例代码，测试代码肯定须要编写什么产品代码。TDD的基本思路就是经过测试来推进整个开发的进行，但测试驱动开发并不仅是单纯的测试工做，而是把需求分析，设计，质量控制量化的过程。

断言库的选择？

should.js: BDD风格
better-assert: C语言，TDD风格
expect.js: should.js 的简化版，BDD风格
assert：node自带的断言库，TDD风格
chai: BDD/TDD双模式，同时支持should/expect/assert

mocha 默认是BDD接口模式运行，若是须要TDD模式运行；

mocha -u tdd <test.js(测试项目)>复制代码

(知乎BDD 和 TDD 的区别，youtube上一些解释)

咱们这里不过多介绍mocha 和 chai 的相关知识，你们能够关注

官方mocha中文翻译，chai api 中文文档

5、写测试用例

1. hello.js

/* test/hello.js */

var assert = require('chai').assert;
describe("karam start", function(){
    it("karma", function(){
        console.log('hello karma');
    });
});

/* 运行karma */

karma start复制代码

2. 一个简单的测试用例

需求：点击这个红色模块的时候，背景颜色为蓝色。

/* page.html */

<body>       
    <div class="slider" onclick="changeColor(this)"></div>   
</body>复制代码

/* page.js */

function changeColor(el){
      // 日常咱们只须要拿到dom对象，只须要操做一下就能够实行背景颜色的变化；
      el.style.background = 'blue'

     // 若是写测试用例呢？这部分是我我的写的单元测试的方法。（我的理解）
     // var elClassName = el.className,       
     // addClassStr = this.addClass(elClassName,'sliderBlue');   
     // el.className = addClassStr; 
}

// 单元测试用例的方法
function addClass(classNameStr,newClass){       
    if(typeof(classNameStr) === 'string'){        
        var classNameData = classNameStr.split(' ');        
        if(classNameData.length>0){           
             if(classNameData.indexOf('sliderBlue') === -1 && classNameData.indexOf('slider')>-1){       
                 return classNameStr +' '+ newClass;        
        }else{               
             return classNameStr       
         }       
     }   
 }}复制代码

有人确定会说，这种也须要些测试用例嘛？一行代码的功夫。既然咱们要学习单元测试，那就用最小的例子来分析问题。若是这个事件，咱们须要写单元测试呢？

而后咱们来看看写断言。

/* test/demo1.test.js */
import {expect} from 'chai';
import {expect} from 'chai';
import {assert} from 'chai';
var addClass = require('../src/demo1/page.js');
describe("颜色变化测试", function(){        
    it("颜色变化", function(){        
        var classTest = "slider",            
            changeClass = addClass(classTest,'sliderBlue');        
        expect(changeClass).to.be.equal('slider sliderBlue') 
        // assert 、 assert.ok 和 assert.equal 相同 ，都是==;       
         assert(changeClass == 'slider sliderBlue','slider和sliderBlue 等于 slider slderBlue')        
        assert.ok(changeClass == 'slider sliderBlue','slider sliderBlue')        
        assert.equal(changeClass,'slider sliderBlue') 
        // assert.strictEqual 是 === ;        
        assert.strictEqual(changeClass,'slider sliderBlue')   
     });
});复制代码

6、最后总结

经过学习单元测试，能够更加深入理解代码的模块化、解耦、稳定性，固然还有业务的架构，对于理解业务架构很是有帮助。简直就是活生生的api 文档。这就是咱们学习单元测试的目的。学习单元测试，能够提高业务和代码层的更深层理解和认识。

（题外话：固然并非全部的业务场景都须要用到单元测试，特别是业务常常变更的话，咱们能够把单元测试用在那些常常用到的公共方法上，保证公共方法的稳定和低耦合。）

参考的一些网站，文档：

我的项目代码：github.com/yqzyou/test…