学习单元测试框架karma+mocha

最新推荐文章于 2023-02-10 10:05:18 发布

Vincent8080

最新推荐文章于 2023-02-10 10:05:18 发布

阅读量227

点赞数

文章标签：测试 javascript json ViewUI

原文链接：https://juejin.im/post/5b99f2cff265da0a857a62f4

版权

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

一、什么是单元测试？

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

如图所示：

system：所有组件的测试；

integration：集成测试，多个组件一起测试

component：组件的测试；

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

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

二、我们为什么要学习单元测试？

我们先来谈谈我们工作中项目中遇到的问题吧！

我总结了以下几点：

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

2. 保证代码的质量。

3. 高聚合，低耦合。

特意查了下知乎！！！

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

以及下面这篇。

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

三、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 中文文档

五、写测试用例

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')   
     });
});复制代码