在项目的开发过程中,我们经常需要去测试我们的代码,以保证代码能在各种情况下正常运行,测试可以人工测试,也可以用代码来测试,下面就来接触下用代码来测试。
Assert
Assert,翻译过来就是断言,可以用来判断真伪。
比如
console.assert(1 === 1)
复制代码
这句话的意思就是我断言1 === 1
,这个断言当然是真的,那么运行时不会产生反应,反之如果断言出错,就会产生反应。
但是这个断言功能太弱鸡了,一点都不好用,遇到稍微复杂些的断言就很麻烦,例如判断一个数组的长度,所以我们需要引入一个断言库。
chai.js
chai.js是一个断言库,可以让我们使用更加自然的语言去做断言,chai.js
有 3 种表达方式,分别为should
、expect
和assert
,我个人更喜欢expect
,它更符合自然语言的语法。
//expect 的使用方式
expect(foo).to.be.a('string');
expect(foo).to.equal('bar');
expect(foo).to.have.lengthOf(3);
expect(tea).to.have.property('flavors')
.with.lengthOf(3);
复制代码
安装
npm i -D chai
使用
这个举一个小例子,拿一个很简单的自定义 button
组件来说,这个组件就一个功能,接受一个颜色参数,并将这个颜色参数设置为button
的类,button
组件代码如下:
<template>
<button :class="color" @click="$emit('click')">
<slot></slot>
</button>
</template>
<script>
export default {
props: {
color: {
type: String
}
}
};
</script>
复制代码
JS 代码如下:
import Vue from 'vue';
import Button from './button';
Vue.component('t-button', Button);
new Vue({
el: '#app',
data: {
counter: 0
}
});
复制代码
那么在使用这个组件的时候,传入一个颜色参数,那么期待的结果就是在页面生成一个class
为这个颜色参数的 button
。
<div id="app">
<t-button color='black' @click="counter += 1">按钮</t-button>
</div>
复制代码
那么该如何用 chai
来测试这段代码的运行是否正确呢?
首先引入 chai
import chai from 'chai';
const expect = chai.expect;
复制代码
然后利用 JS
生成一个 button
,然后检查它的 class
。
{
let div = document.createElement('div');
document.body.appendChild(div);
const Constructor = Vue.extend(Button);
const vm = new Constructor({
propsData: {
color: 'red'
}
}).$mount(div);
const element = vm.$el;
//我断言这个生成的 button 有一个类名叫 'red' 为真
expect(element.classList.contains('red')).to.eq(true);
vm.$el.remove();
vm.$destroy();
}
复制代码
为保证断言代码的正确,一般第一次故意写一个假断言,用来测试断言出错的时候会报错。例如
expect(element.classList.contains('black')).to.eq(true);
复制代码
那么就会出现断言错误。
后面再将断言改为预期的结果,。
断言函数的执行与否
如果在使用这个 button
组件的同时绑定一个函数,那么该如何检查模拟点击时,该函数执行情况呢?
<div id="app">
<t-button color='black' @click="counter += 1">按钮</t-button>
<p>你点击了{{counter}}次</p>
</div>
复制代码
这里我们就需要 mock 了。
chai-spies
安装
npm i -D chai-spies
使用
首先先引入。
import spies from 'chai-spies';
chai.use(spies);
复制代码
再断言
{
const Constructor = Vue.extend(Button);
const vm = new Constructor({
propsData: {
color: 'red'
}
}).$mount();
//生成一个间谍函数
let spy = chai.spy(() => {});
//让这个间谍函数代替原来的函数,如果 click 触发了就执行这个间谍函数
vm.$on('click', spy);
//模拟点击
vm.$el.click();
//期待间谍函数被调用了
expect(spy).to.have.been.called();
vm.$destroy();
}
复制代码
这样这个测试用例通过之后,就可确保当按钮被点击之后,绑定的函数能够执行。
后记
这里利用 chai
和 chai-spies
做了两个简单的测试,以保证 button
组件能够正常发挥作用。 但本次测试时,写一个测试用例就需要打开浏览器看运行情况,下次考虑用窗口展示测试结果。