Finally, it’s time to use unit tests

I think many people have the same doubts as me, it seems that there are so many front-end projects, page functions are so complex, it is impossible to test every component, because the components themselves are also quite complex. Until recently, I wrote a global component whose main function was to restrict the input field to valid text by checking for matches with the RegExp. Test. To facilitate the component itself, the default value of the RegExp is arranged according to the most common input specification in the project, because this is a global component. I was worried about regex matching, so I thought maybe this small feature could be unit tested (there are other features of the component, but my unit tests will focus on this one) so that it wouldn’t seem too complicated to start with

The component looks like this

The code is as follows, omitting the irrelevant logic

<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: // This is set to false so that sub-components of the el-input component can inherit values passed in by non-props and listeners: {content: {type: String, default: 'illegal input,}, reg: {type: the RegExp, default: (a) = > / ^ ((\ d [1-9]?) | 0) (\ \ d {1, 2})? 100 ($| ^ \. 0} {1, 2)? $/, }, }, methods: { getErrorClass(v) { let r = ! this.reg.test(v); return r ? 'errflag' : ''; ,}}}; </script>Copy the code

This is how it works

</PopoverInput content=" v-model="scope.row.name"></PopoverInput>Copy the code

There are two main things that this component needs to confirm,

  1. Values within a certain range are valid
  2. Incorrect input box has corresponding class:’ errFlag ‘
You can write test cases according to the above criteria
  1. First add a js file with the suffix.spec.js to the directory ‘your project name tests\unit’ folder. For example, mine is called popoverInput.spec.js. It doesn’t matter what the name is
  2. Then go to vue-test-utils and see the framework documentation that VUE provides for unit testing?
  3. Then you can look at the following example
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']); }}); });Copy the code

Mount, setPros, find, classes are vue – test – utils framework provides methods

In the for loop above, components with class ‘el-input’ add the “errFlag” class to each of these values if they do not meet the requirements.

(Photoshop test cases are definitely not enough, there are other use cases in real world scenarios.)