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

发表于:2021-6-10 09:25

字体: | 上一篇 | 下一篇 | 我要投稿

 作者:SukiYu    来源:掘金

分享:
  我想很多人都有像我一样的疑惑,似乎前端项目这么多,页面功能这么复杂,不可能每个组件都测试到,因为组件本身也挺复杂的。直到我最近写了一个全局组件,里面最主要的功能就是限制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这些测试用例肯定不够的,真实场景中还有其他用例)

  本文内容不用于商业目的,如涉及知识产权问题,请权利人联系51Testing小编(021-64471599-8017),我们将立即处理
精选软件测试好文,快来阅读吧~

关注51Testing

联系我们

快捷面板 站点地图 联系我们 广告服务 关于我们 站长统计 发展历程

法律顾问:上海兰迪律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2024
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪ICP备05003035号

沪公网安备 31010102002173号