测试驱动开发Vuejs(三)设置Data和断言样式

十月初 Vuejs官方团队发布了测试套件 vue-test-utils github 地址 / 官方网站本文主要是参考官方的指南和一个国外的视频教程第三节

watch test

现在我们的测试，每次修改都需要手动运行 npm test 。我们可以像开发那样，watch 测试文件的变化，自动刷新测试结果。

增加 npm scripts

{
// package.json
// ...
 "scripts": {
    "test": "mocha-webpack --webpack-config webpack.config.js --require test/setup.js test/*.spec.js",
    "watch": "mocha-webpack --webpack-config webpack.config.js --watch --require test/setup.js test/*.spec.js"
  }
  // ...
}  

运行 npm run watch 之后，可以看到，每次修改counter.spec.js 都会刷新测试结果

增加 “减法”

我们的组件只有”加” ，现在增加”减”

//counter.spec.js
// ...
   it ('increments the count when the button is click', () => {
        expect(wrapper.vm.count).toBe(0);
        wrapper.find('.increase').trigger('click');
        expect(wrapper.vm.count).toBe(1);
    })
    it ('decrements the count when the button is click', () => {
        expect(wrapper.vm.count).toBe(0);
        wrapper.find('.increase').trigger('click');
        expect(wrapper.vm.count).toBe(1);
        wrapper.find('.decrease').trigger('click');
        expect(wrapper.vm.count).toBe(0);
    })
// ...

// Counter.vue
<template>
    <div>
        <button class="decrease" @click="count > 0 ? count-- : 0">-</button>
        <span class="count">8</span>
        <button class="increase" @click="count++">+</button>
    </div>
</template>
// ...

四个测试都通过了，随着测试的增加，每次都将所有的测试跑一遍，显然是费力的。因为我们只想执行正在关注的这一条测试。使用mocha only就可以了。不过在提交git的时候，记得要移除 only。

//counter.spec.js
// ...
    it.only('decrements the count when the button is click', () => {
        expect(wrapper.vm.count).toBe(0);
        wrapper.find('.increase').trigger('click');
        expect(wrapper.vm.count).toBe(1);
        wrapper.find('.decrease').trigger('click');
        expect(wrapper.vm.count).toBe(0);
    })
// ...

现在只会测试这一条了。

设置data

为了测试减法我们先进行了加法。如果要测试的状态很复杂，这显然是费时费力的。所以我们可以直接设置data

vue-test-utils 提供了 setData 方法

//counter.spec.js
// ...
   it.only('decrements the count when the button is click', () => {
      
        wrapper.setData({count: 5})
        wrapper.find('.decrease').trigger('click');
        expect(wrapper.vm.count).toBe(4);
    })
// ...

顺利通过测试

对 style 进行断言

现在我们增加一点交互效果，只有count 大于0 的时候才显示减号按钮。

使用 vue 的 v-show 指令和 vue-test-utils 的 hasStyle

增加一条测试

//counter.spec.js
// ...
    it('decrements the count when the button is click', () => {
        wrapper.setData({count: 5})
        wrapper.find('.decrease').trigger('click');
        expect(wrapper.vm.count).toBe(4);
    })
    
   it.only('never gose below 0 ', () => {
        expect(wrapper.vm.count).toBe(0);
        expect(wrapper.find('.decrease').hasStyle('display', 'none')).toBe(true)
        wrapper.find('.increase').trigger('click');
        expect(wrapper.vm.count).toBe(1);
        expect(wrapper.find('.decrease').hasStyle('display', 'none')).toBe(false)        
    })
// ...
// Counter.vue
<template>
    <div>
        <button class="decrease" @click="count > 0 ? count-- : 0" v-show="count">-</button>
        <span class="count">8</span>
        <button class="increase" @click="count++">+</button>
    </div>
</template>

此外 vue-test-utils 还提供了 is setProps setMethods hasClass hasAttribute 等众多方法

原教程地址

https://laracasts.com/series/testing-vue/episodes/3

Written on October 20, 2017