终于有机会使用一次单元测试了

lsekfe

我想很多人都有像我一样的疑惑，似乎前端项目这么多，页面功能这么复杂，不可能每个组件都测试到，因为组件本身也挺复杂的。直到我最近写了一个全局组件，里面最主要的功能就是限制input框输入合法的文本，检测方式就是用正则RegExp.test是否匹配，为了方便这个组件本身按照项目中最常见的输入规范安排了正则的默认值，因为这个是个全局组件，我担心正则的匹配会有问题，所以想到了或许这么一个小功能可以用单元测试来测（组件还有其他功能，但我的单元测试只会关注这一个）这样看起来，单元测试也不会复杂到让人难以下手。
　　组件是这样的
　　代码如下,省略了无关逻辑：
　　<template>
　　  <div class="popoverinput">
　　    <el-tooltip :content="content" :disabled="!getErrorClass($attrs.value)">
　　      <el-input
　　        v-bind="$attrs"
　　        v-on="$listeners"
　　        :class="getErrorClass($attrs.value)"
　　      ></el-input>
　　    </el-tooltip>
　　  </div>
　　</template>
　　<script>
　　export default {
　　  name: 'PopoverInput',
　　  inheritAttrs: false, //这里设置为false是为了el-input这个组件内部的子组件能够继承非props和listener传进来的值
　　  props: {
　　    content: {
　　      type: String,
　　      default: '输入不合法',
　　    },
　　    reg: {
　　      type: RegExp,
　　      default: () => /^(([1-9]\d?)|0)(\.\d{1,2})?$|^100(\.0{1,2})?$/,
　　    },
　　  },
　　  methods: {
　　    getErrorClass(v) {
　　      let r = !this.reg.test(v);
　　      return r ? 'errflag' : '';
　　    },
　　  },
　　};
　　</script>


　　使用是这样使用的：
　　<PopoverInput content="你想要的提示语" v-model="scope.row.name"></PopoverInput>

　　这个组件主要要确认两件事情，
　　1.在某个范围内的数值是有效的。
　　2.不正确的时候input框有对应的class:'errflag'。
　　按照上面的判断标准可以写出测试用例了
　　1.首先在目录 '你的项目名称tests\unit'文件夹加入以后缀名为.spec.js的js文件。例如我的就叫popoverInput.spec.js，叫什么名字不重要，我主要是对应要测试的组件而已。
　　2.然后去到vue-test-utils看看vue提供给单元测试的框架文档？
　　3.然后就可以看看下面的例子了。
　　import { expect } from 'chai';
　　import { mount } from '@vue/test-utils';
　　import PopoverInput from '@/components/PopoverInput.vue';
　　describe('PopoverInput.vue', async () => {
　　  it('test input valid', async () => {
　　    const compo = mount(PopoverInput);
　　    for (let i = -200; i <= 200; i = i + 0.001) {
　　      let value = i;
　　      await compo.setProps({ value: value });
　　      let err = await compo.find('el-input').classes();
　　      let str = String(value);
　　      let len = str.split('').filter((item) => item === '.').length;
　　      let decimalLen = str.indexOf('.') > -1 && str.split('.')[1].length;
　　      let ind = str.indexOf('.');
　　      if (
　　        value >= 0 &&
　　        value <= 100 &&
　　        len <= 2 &&
　　        (ind === -1 || (ind > -1 && decimalLen > 0 && decimalLen <= 2))
　　      )
　　        expect(err).not.to.has.members(['errflag']);
　　      else expect(err).to.has.members(['errflag']);
　　    }
　　  });
　　});


　　mount,setPros,find,.classes都是vue-test-utils框架提供的方法。
　　上面的for循环就是一个个检测这些数值不符合要求的时候，class为'el-input'的组件会加上"errFlag"这个类。
　　（ps这些测试用例肯定不够的，真实场景中还有其他用例）

千里

单元测试显得高大上一些