vue2 单元测试表单验证和接口请求

1、i-view 的表单验证

代码

public handleSubmit(): void {
    (this.$refs["formItem"] as objAny).validate((valid: boolean) => {
      if (valid) {
        this.submitData();
      }
    });
  }

单元测试：

import { shallowMount, createLocalVue } from "@vue/test-utils";
import pageContentVue from "./add-first-come.vue";
import i18n from "@/config/i18n";
import ViewUI from "view-design";
import Vuex from "vuex";
import VueRouter from "vue-router";
const localVue = createLocalVue();
  localVue.use(ViewUI);
  localVue.use(Vuex);
  localVue.use(VueRouter);

const getWrapper = () => {
  
  // 创建一个 form 表单组件(很重要。。。。。。。。。。。。)
  const Form = {
    render: jest.fn(),
    methods: {
      validate: (cb:any) => {cb(true)}
    }
  }
  const router = new VueRouter();
  
  const wrapper = shallowMount(pageContentVue, {
    propsData: {},
    localVue,
    router,
    mocks: {
    },
    stubs: {Form}  // 插入单元测试对象中(很重要。。。。。。。。。。。。)
  });
  const vm: any = wrapper.vm;
  return {
    wrapper: wrapper,
    vm: vm,
  };
};

describe("检测所有方法", () => {
  let { vm } = getWrapper();
  it("检测方法：handleSubmit", () => {
    vm.handleSubmit();
  });
})

2、ajax 请求

代码：

<script lang="ts">
import {
  addOrdingalStrategy,
  updataOrdingalStrategy,
  getOrdingalStrategyUsePage,
} from "@/api/api-operation-service";



/**
   * 提交
   */
  async submitData(): Promise<void> {
    this.loading = true;
    let ret = await this.subFunction(this.formInline);
    if (ret.status === this.$config.apiStatus) {
      this.$Message.success(i18n.t("operationSucess"));
    }
    this.loading = false;
  }


</script>

单元测试：

import ..................

// 模似请求
const mockAjax = jest.mock("Axios", () => {
  post: Promise.resolve("value");
});
import axios from "axios";
import { objAny } from "@/common/common-interface";
jest.mock("axios");
jest.mock("axios", () => {

// 模似请求返回
  const expectedResponse = { status: 0,data:{ status: 0, data: [[{ stationPkId: 1 }]]} };
  return () => new Promise((resolve) => resolve(expectedResponse));
})


其它..........



describe("检测所有方法", () => {
  let { vm } = getWrapper();
  it("检测请求方法：submitData", async() => {
    const doAjax = mockAjax.fn(() => vm.submitData());
    await doAjax();
    expect(vm.loading).toEqual(false);

  });
})

3、本地存取

import............


function storageMock() {
    let storage:any = {};

    return {
      setItem: function(key:string, value:string) {
        storage[key] = value || '';
      },
      getItem: function(key:string) {
        return  key in storage ? storage[key] : null;
      },
      removeItem: function(key:string) {
        delete storage[key];
      },
      get length() {
        return Object.keys(storage).length;
      },
      key: function(i:any) {
        const keys = Object.keys(storage);
        return keys[i] || null;
      }
    };
  }


............

it("检测方法： init", () => {
    var win:any = window;
    // 存取方法注册进 win
    win.localStorage = storageMock();
    win.sessionStorage  = storageMock();

    vm.init();
    expect(vm.disabled).toEqual(false);
    
// 先手动存进去
    win.sessionStorage.setItem(vm.$route.path, JSON.stringify({strategyPkId: 1,strategyName: 1,strategyType:1,strategyValue: 1,countUse :10}))
    vm.init(); // init 里取出来
    expect(vm.formInline.strategyPkId).toEqual(1);
    expect(vm.formInline.strategyName).toEqual(1);
    expect(vm.formInline.strategyType).toEqual('1');
    expect(vm.formInline.strategyValue).toEqual(1);
    expect(vm.disabled).toEqual(true);
  })