前端的单元测试

单元测试是什么？

单元测试就是测试程序里的一小部分，一个变量应该等于什么，一个类里的某个方法都是单元里的一部分。自己决定要测试哪一部分。

测试有哪些类型

TDD（测试驱动开发）
- 它是一种开发的方法，在写代码之前，你可以先写一个测试，因为你知道你要写的代码应该怎么样，写出让测试通过的代码可以说就是TDD方式。
BDD（行为驱动开发）
- 加入了产品的对开发者编写的代码运行结果的理解的测试模式。
个人的理解TDD,BDD不是具体的测试代码的运用，是一种定位如何进行测试的方向，是概念性的东西，不是具体的方法论。

前端为什么要做单元测试

帮助检验代码写的更规范，因为要通过测试就要求单元之间解耦，不然无法通过测试
已经发布了的代码有所改动，如果有单元测试，方便代码回归，省下全局相关功能再测试一遍的低效。
一般测试代码会先于功能代码先写。先写测试代码会考虑功能代码的实现细节，理清功能代码的实现逻辑。

哪些内容适合做单元测试

项目中的库文件，公共组件，是项目的公共引用的功能，不常被改动。一旦有改动，通过测试能及时发现问题，不会导致引用了这个公共功能的地方报错。常常有需求变动的业务代码不适合做单元测试。

如何做前端的单元测试

准备

cd ~/desktop
mkdir nodejs-test
cd nodejs-test
mkdir test
mkdir lib

安装所需要的模块，mocha 是测试框架，它可以帮助我们创建，组织还有运行测试。chai 是一个断言库，提供了几种风格的断言，可以让我们方便的在测试里做断言

npm init -y
npm install mocha --save-dev
npm install chai --save-dev

使用编辑器打开项目的目录，再编辑一下 package.json，修改一下 script 下面的 test 的值：

"test": "./node_modules/mocha/bin/mocha"

在项目的根目录下面，可以这样来运行测试：

npm test

会返回：

0 passing (2ms)

表示 0 个测试通过，一共花了 2 毫秒。

写一个测试看看
test/cart.js

const chai = require('chai')
const cart = require('../lib/cart')
const expect = chai.expect

var cartTest = new cart()

describe('Cart', function () {
  describe('subtotal', function () {
    it('单价是 10 块钱的 3 件商品小计金额应该是 30 块', function () {
      var subtotal = cartTest.subtotal(10, 3)
      expect(subtotal).to.equal(30)
    })
  })
})

lib/cart.js(功能代码)

class Cart {
  subtotal (unitPrice, quantity) {
    return unitPrice * quantity
  }
}

module.exports = Cart

运行 npm test看看

5A266483-9A17-4140-89EC-A5F52F379754.png

这代表测试通过，
试试改一个代码，令测试不通过看看

const chai = require('chai')
const cart = require('../lib/cart')
const expect = chai.expect

var cartTest = new cart()

describe('Cart', function () {
  describe('subtotal', function () {
    it('单价是 10 块钱的 3 件商品小计金额应该是 30 块', function () {
      var subtotal = cartTest.subtotal(10, 3)
      expect(subtotal).to.equal(20) //把总价格调整为20
    })
  })
})

结果：

BD71536E-FF70-4C66-8C22-345A35098837.png

显示0个用例通过

更多的mocha断言测试库用法

扩展

项目提交得github以后,可以通过测试集成工具Travis CI在后台跑项目中的测试用例.不用每次都自己手动进行命令行执行.
用法:
- 登录Travis CI的官网
- 注册一个帐号,用项目提交的gitbug帐号注册
- 注册好以后,github上面的项目都会在Travis CI列举出来,选择要持续继承的项目.每次指定的项目一旦发生提交,Travis CI就会自动执行测试用例的检测.
  
  屏幕快照 2019-08-02 下午8.34.42.png

绿色就表示此项目测试用例通过

总结

找到适合用得场景去用单元测试,单元测试不是必须,对于编写库代码,做单元测试是必要得.
mocha karma jest都是写测试工具,用哪个根据实际项目而定.
完善了单元测试得项目,可以通过测试集成工具,帮忙自动化后台去跑测试用例.