前端单元测试详解(二)__单元测试实例：JavaScript VUE/AngularJs & Jasmine

2018-01-30

1 前言

本文更多的使用JavaScript VUE的单元测试作为示例。
如果使用Google Chrome浏览器预览页面，推荐配合vue-devtools，可对VUE页面元素属性查看和修改。

2 Jasmine

jasmine-core@2.8.0__点击查看官方文档，如果用的是jasmine-1.x的，关于2.0升级说明

Jasmine不依赖于任何框架，所以适用于所有的Javascript代码。
使用一个全局函数 describe 来描述每个测试，并且可以嵌套。
describe函数有2个参数，一个是字符串用于描述，一个是函数用于测试。
在该函数中可以使用全局函数 it 来定义Specs，也就是单元测试的主要内容，使用 expect 函数来测试：

describe('A suite', function () {  // 模块 描述 + 函数
    it('is a spec', function () {  // 单元测试 描述 + 函数
        var a = true;              // 前置操作
        expect(a).toBe(true);      // 单元测试 断言
    });                            // it()还支持接收Int，设置spec超时时间
});

如果想去掉某个describe/it，无须注释掉整段代码，只需要在需要忽略的describe/it前面加上x即可忽略该describe/it，即使用xdescribe/xit。

3 Jasmine基本示例

3.1 AOP before & after

beforeAll(): 模块第一个spec之前执行，只执行一次
afterAll(): 模块最后一个spec之后执行，只执行一次
beforeEach(): 每个spec之前执行
afterEach(): 每个spec之后执行

AOP，即面向方面的编程（Aspect Oriented Programming）。比如有时候为了测试一个对象，可能需要多次创建和销毁它，所以为了避免冗余代码，使用它们是最佳选择。

3.2 常用Matcher

toBe(): 一个基本的 matcher 用来定义判断规则.

1
2

expect(a).toBe(true);          // 语义化：“expect ‘a’ to be true”，断言变量a的值为true
expect(a).not.toBe(true);      // 注意not是属性，语义化：“expect ‘a’ not to be true”，断言变量a的值不为true

toEqual(): 注意和toBe()的区别: 一个新建的Object不是（not to be）另一个新建的Object，但是它们是相等（to equal）的。

1 2	expect({}).not.toBe({}); // 断言正确 expect({}).toEqual({}); // 断言正确

toMatch(): 可以使用字符串或者正则表达式来验证，以及其他一些特殊验证，比如undefined或者boolean的判断

it("\"toMatch\"使用正则表达式判断", function() {
    var message = "foo bar baz";
    expect(message).toMatch(/bar/);
    expect(message).toMatch("bar");
    expect(message).not.toMatch(/quux/);
});

toThrow(): 可以检查函数所抛出的异常。
自定义Matcher: 使用beforeEach方法在每个测试执行前添加一个matcher

// 以NaN的检查为例
beforeEach(function () {
    this.addMatchers({
        toBeNaN: function (expected) {              // 参数expected是传入的一个期望的字面量
            var actual = this.actual;               // expect方法中传入的参数，可以通过 this.acturl 获取
            var not = this.isNot ? ' not' : '';     // 是否调用了 not 方法则可以通过 this.isNot 获取boolean值
            this.message = function () {            // 失败信息使用function: this.message()
                return 'Expected ' + actual + not + ' to be NaN ' + expected;
            };
            return isNaN(expected);
        }
    });
});

jasmine.any(): 代表一类数据传入matcher中.

1 2	expect(123).toEqual(jasmine.any(Number)); // 断言正确 expect(function () {}).toEqual(jasmine.any(Function)); // 断言正确

3.3 Spy使用

3.3.1 基本使用

Spy用来追踪函数的调用历史信息（是否被调用、调用参数列表、被请求次数等）。
Spy仅存在于定义它的describe和it方法块中，并且每次在spec执行完之后被销毁。
当在一个对象上使用spyOn方法后即可模拟调用对象上的函数，此时对所有函数的调用是不会执行实际代码的。

let foo, a = null;
beforeEach(function () {
  foo = {
    set: function (str) {
      a = str;
    }
  };
  spyOn(foo, 'set');                         // 注册一个对象中的方法
  foo.set(123);
});
it('tracks calls', function () {
  expect(foo.set).toHaveBeenCalled();        // toHaveBeenCalled() 可以检查function是否被调用过
  expect(foo.set).toHaveBeenCalledWith(123); // toHaveBeenCalledWith() 可以传入参数检查是否被调用过，支持多个？
  expect(foo.set.calls.allArgs()[0][0]).toEqual(123);  // 这里代码和我看的文章不一样，应该是版本问题
  expect(foo.set.calls.mostRecent().args[0]).toEqual(123);
  expect(a).toBeNull();                      // 可以看到foo.set(123)并未实际执行
});

3.3.2 Spy.calls

calls.any(): 被Spy的函数一旦被调用过，则返回true，否则为false；
calls.count(): 返回被Spy的函数的被调用次数；
calls.argsFor(index): 返回被Spy的函数的调用参数，以index来指定参数；
calls.allArgs():返回被Spy的函数的所有调用参数；
calls.all(): 返回calls的上下文，这将返回当前calls的整个实例数据；
calls.mostRecent(): 返回calls中追踪的最近一次的请求数据；
calls.first(): 返回calls中追踪的第一次请求的数据；
object: 当调用all()，mostRecent()，first()方法时，返回对象的object属性返回的是当前上下文对象；
calls.reset(): 重置Spy的所有追踪数据；

3.3.3 Spy.and

注意: 这些调用将不会对变量产生作用，所以 a 仍为null。如果需要调用产生实际的作用:

and.CallThrough(): 需要执行实际的代码。
and.returnValue(): 强制指定函数的返回值。
and.CallFake(): 传入一个function作为参数去代替原本的function。

1	spyOn(foo, 'set').and.callThrough();

Spy中的and还有一些function的作用如下：

and.throwError()：模拟异常的抛出。
and.stub()：恢复到原始的spyOn()方法

3.3.4 Spy其他创建方式

甚至在没有function的时候可以使用Jasmine的 createSpy 和 createSpyObj 创建一个spy：

const foo = jasmine.createSpy('foo');
const obj = jasmine.createSpyObj('obj', [set, do]);
foo(123);
obj.set(123);
obj.do();

其效果相当于spyOn使用在了已存在的function上。

3.4 时间控制

概念：上面的方法都在程序顺序执行的前提下执行，但

以及 ```setInterval()``` 两个方法会使代码分离在时间轴上。所以Jasmine提供了 Clock 类来模拟时间，以获取 ```setTimeout()``` 的不同状态。


```javascript
  let clock;
  beforeEach(function () {
    clock = jasmine.clock();      // 获得一个jasmine提供的Clock，注意这里是function，官方文档缺少'()'
  });
  it('set time', function () {
    clock.withMock(() => {        // 运行一个mocked Clock
      let str = 0;
      setInterval(function () {   // 这里调用 setInterval() 或 setTimeout()并不会立即执行str++
        str++;                    // 只有当tick调用且满足条件，才执行str++
      }, 100);
      expect(str).toEqual(0);     // 断言正确
      clock.tick(50);             // 时间前进50毫秒
      expect(str).toEqual(0);     // 断言正确
      clock.tick(101);
      expect(str).toEqual(1);     // 断言正确
      clock.tick(205);
      expect(str).toEqual(3);     // 断言正确
    });
  });

Clock提供的function：

- ```tick()```：接收参数：毫秒值。推进时间。
- ```mockDate()```：接收参数：Date。指定时间，默认当前。
- ```install()```：创建mocked Clock
- ```uninstall()```：关闭mocked Clock
#### 3.5 异步
Javascript最大的特色之一就是异步，之前介绍的方法如果存在异步调用，大部分测试时可能会不通过。因此，需要等异步回调之后再进行测试。   
##### 3.5.1 通过默认 done()
- Jasmine-1.x的 ```runs()``` 、```waits()```、```waitsFor()``` 已经被移除。
- 2.x起提供了类似Mocha/chai的done，支持调用```beforeEach()``` , ```it()``` , 和```afterEach()``` 的时候，可以带一个可选的参数done ，当有参数时spec执行完成之后必须调用```done()```来告诉Jasmine异步操作已经完成。
- 默认Jasmine的超时时间是5s，可以通过全局的```jasmine.DEFAULT_TIMEOUT_INTERVAL``` 设置。 
```js
describe("Jasmine 异步测试演示", function () {
  var value;
  beforeEach(function (done) {    // 传入了done
    setTimeout(function () {
      value = 0;
      done();                     // 必须在结束是调用，否则将超时错误
    }, 1);
  });
  it("支持异步执行", function (done) {
    value++;
    expect(value).toBeGreaterThan(0);
    done();                      // 外层的it，例如这里，如果没有调用，会影响‘5秒钟‘中的it超时
  });
  describe("5秒钟", function () {
    var originalTimeout;
    beforeEach(function () {
      originalTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL;   // 这里只是做了保存默认值操作
      jasmine.DEFAULT_TIMEOUT_INTERVAL = 6000;
    });
    it("takes a long time", function (done) {
      setTimeout(function () {
        done();
      }, 5000);
    });
    afterEach(function () {
      jasmine.DEFAULT_TIMEOUT_INTERVAL = originalTimeout;
    });
  });
});

3.5.1 通过jasmine-ajax插件

jasmine-ajax插件用来模拟测试ajax。注意这是个单独的文件，需要额外引用。
这是官方文档_示例，插件示例是 XMLHttpRequest 配合 spy 使用的示例。
原理同样是通过 mock 返回的数据。

4 VUE示例

4.1 生成vue实例

import Vue from 'vue';                   // 引用vue
import app from '../../src/app.vue';     // 引用要测试的组件
describe('titleA', () => {
  it('titleB', () => {
    const vm = new Vue(app).$mount();    // 方式一：这里将app生成vue实例，并使用 $mount() 模拟挂载状态
    const Constructor = Vue.extend(app);                 // 方式二：Vue.extend()将组件挂载Vue构造器上
    const vm = new Constructor({ propsData }).$mount();  // propsData加入props数据
    const vm = new Component({ propsData }).$mount();    // 方式三：传入propsData
    ...                                  // 设置vm的属性、或调用方法，以及断言代码
  });
});

4.2 filter测试

vue代码

<template>
    <h1>{{title | upperCase}}</h1>
</template>
<script>
...
    filters: {
        upperCase(str) {
            return str.toUpperCase();
        }
    }
...
</script>

测试代码

describe('titleA', () => {
  it('upperCase过滤器能把app转换为APP', () => {
    // vue 组件export出来的是个对象，我们直接用这个对象的属性和方发就能调用到要测试的filter，而不需要创建Vue实例 
    let appStr =  app.filters.upperCase('app');
    expect(appStr).toEqual('APP');
  });
})

4.3 异步更新DOM测试

使用Vue.nextTick来查看异步数据更新后dom是否变化.
依赖 DOM 更新结果的断言必须在 Vue.nextTick 回调中进行.

测试代码

describe('test app.vue', () => {
    it('数据更新后，视图应该改变', done => {                        // done在这里非必须?
        let vm = new Vue(app).$mount();
        vm.title = 'APP';                                        // 挂载后改变title
        Vue.nextTick(() => {
            let title = vm.$el.getElementsByTagName('h1')[0]
            expect(title.textContent).toEqual('APP')
            done();                                              // 执行done()，结束spec。
        })
    });
});

4.4 组件有用户交互(模拟点击/输入)

vue代码

<template>
  <div>
    <span>{{ msg }}</span>
    <el-input v-model="input"></el-input>
    <el-button type="primary" @click="handleChange">Change</el-button>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        msg: '',
        input: 'hello world'
      }
    },
    methods: {
      handleChange () {
        this.msg = this.input;
      }
    }
  }
</script>

测试代码

/* eslint-disable */
import Vue from 'vue'
import MyComponent from '@components/MyComponent'
import ElementUI from 'element-ui';                     // 这里需要引入Element-UI
Vue.use(ElementUI);
describe('MyComponent', () => {
  const Constructor = Vue.extend(MyComponent);
  const myComponent = new Constructor().$mount();
  it('msg should in page', () => {
    myComponent.input = 'test input';                   // 赋值输入
    const button = myComponent.$el.querySelector('button');
    const clickEvent = new window.Event('click');
    button.dispatchEvent(clickEvent);
    myComponent._watcher.run();                         // 需要手动监听更新
    expect(myComponent.$el.textContent).toContain('test input');
  })
})

4.5 拦截其他依赖(Mock)

有时候我们还会遇到需要拦截mock，拦截vuex的情况。这时候就需要引入:inject-loader，可以对组件内部的任何模块依赖进行内容替换，不仅是 api 模块还可以是子 component。

vue代码

<template>
  <div class="msg">{{ msg }}</div>
</template>
<script>
// 这里需要被拦截
import getData from 'src/lib/apis/getData'
export default {
  data () {
    return {
      msg: getData.getData()
    }
  }
}
</script>

测试代码

/* eslint-disable */
import Vue from 'vue'
const getData = () => {
  return 'hello world'
}
// 这里使用loader之后没办法使用@components等resolve配置
const MyModuleInjector = require('!!vue-loader?inject!./MyComponent.vue');   // 行内写法
const MyComponent = MyModuleInjector({     // mock整个getData模块
  'src/lib/apis/getData': { getData },
});
import ElementUI from 'element-ui';
Vue.use(ElementUI);
describe('MyComponent', () => {
  const Constructor = Vue.extend(MyComponent);
  const myComponent = new Constructor().$mount();
  it('msg should in page', () => {
    expect(myComponent.$el.textContent).toContain('hello world');
  })
})

4.6 其他依赖注入

如 Mock的Component、store、router等。

const store = new Vuex.Store({
  state: {},
  actions: {
   ...
  },
});
const Component = Vue.extend({ ...ComponentAwithMock, store, router });   // 注入Mock后的store

5 AngularJS示例

以下代码出自Github_jsprodotcom/source

说明：源代码中scenario.js文件即为详解一中的e2e测试代码，运行 test/e2e/runner.html 来查看结果。

5.1 测试Controller和Factory

App代码示例

var todoApp = angular.module('todoApp',[]);
todoApp.controller('TodoController', function($scope, notesFactory) {
  ...
});
todoApp.factory('notesFactory', function() {     // 需要被Mock的notesFactory
  return {
    put: function(note) {
      localStorage.setItem(...);
    },
    get: function() {
      var notes = [];
      var keys = Object.keys(localStorage);
      for(var i = 0; i < keys.length; i++) {
        notes.push(localStorage.getItem(keys[i]));
      }
      return notes;
    }
  };
});

测试代码一：测试TodoController

describe('TodoController Test', function() {
  beforeEach(module('todoApp'));                  // 引入模块
  var mockService = {                             // 用于 Mock notesFactory
    notes: ['note1', 'note2'], 
    get: function() {
      return ...;
    },
    put: function(content) {
      this.notes.push(content);
    }
  };
  it('TEST 1',
    inject(function($rootScope, $controller) {    // 由 AngularJS 自动注入 $rootScope, $controller
      var scope = $rootScope.$new();              // 获得 scope 
      var ctrl = $controller('TodoController', {$scope: scope, notesFactory:mockService});  // 注入
      ...
      expect(scope.notes.length).toBe(2);         // 断言
    })
  );
});

测试代码二：测试notesFactory

describe('notesFactory tests', function() {
  var factory;
  beforeEach(function() {
    module('todoApp');
    inject(function(notesFactory) {     // 注入notesFactory
      factory = notesFactory;
    });
    var store = {                       // Mock localStorage，用于替换系统外部localStorage服务
      todo1: 'test1',
      todo2: 'test2',
      todo3: 'test3'
    };
    spyOn(localStorage, 'getItem').andCallFake(function(key) {    // Mock localStorage.getItem()
      return store[key];
    });
    spyOn(localStorage, 'setItem').andCallFake(function(key, value) {
      return store[key] = value + '';
    });
    spyOn(localStorage, 'clear').andCallFake(function() {
      store = {};
    });
    spyOn(Object, 'keys').andCallFake(function(value) {          // Mock Object.keys()
      var keys=[];
      for(var key in store) {
        keys.push(key);
      }
      return keys;
    });
  });
  it('检查是否包含get()、put()', function() {
    expect(angular.isFunction(factory.get)).toBe(true);        // 检查是否包含get()
    expect(angular.isFunction(factory.put)).toBe(true);        // 检查是否包含put()
  });
  it('验证get()', function() {
    var result = factory.get();
    expect(result.length).toBe(3);
  });
  it('验证put()', function() {
    factory.put('Angular is awesome');
    var result = factory.get();
    expect(result.length).toBe(4);
  });
});

5.2 测试Filter

App代码示例

todoApp.filter('truncate', function() {          // {{note | truncate:20}}
  return function(input,length) {
    return (input.length > length ? input.substring(0, length) : input );
  };
});

测试代码

describe('filter tests', function() {
  beforeEach(module('todoApp'));
  it('测试truncateFilter',
    inject(function(truncateFilter) {            // 注入 truncate Filter ，在Filter名后添加’Filter‘
      expect(truncateFilter('abcdefghijkl', 10).length).toBe(10);
    })
  );
});

5.3 测试Directive

App代码示例

todoApp.directive('customColor', function() {    // 绑定这个指令的元素添加一个背景色，custom-color=”rgb(128,128,128)”
  return {
    restrict: 'A',
    link: function(scope, elem, attrs) {
      elem.css({'background-color': attrs.customColor});
    }
  };
});

测试代码

describe('directive tests', function() {
    beforeEach(module('todoApp'));
  it('测试customColor',
    inject(function($compile, $rootScope) {
      const elem = angular.element(
        "<span custom-color=\"rgb(128, 128, 128)\">sample</span>");       // 创建一个元素为我们所用
      scope = $rootScope.$new();
      $compile(elem)(scope);                                              // 完成实际的编译
      expect(elem.css("background-color")).toEqual('rgb(128, 128, 128)');
     })
  );
});

5 参考文章

关于前端开发谈谈单元测试
 为什么要单元测试？
Jasmine入门（结合示例讲解）
Javascript测试框架Jasmine（六）：异步代码测试
 VUE官网_单元测试
 Vue 的单元测试探索（一）
Vue单元测试case写法
 五个值得尝试的前端开发工具
 Angular （二） Jasmine单元测试和端到端测试
 unit-and-e2e-testing-in-angularjs