Vue进阶（十三）：MOCK

简介

mock是一个模拟数据生成器，旨在帮助前端独立于后端进行开发，帮助编写单元测试。其可模拟 Ajax 并返回模拟数据，使前端不用去调用后端的接口，方便测试。

官网： http://mockjs.com/0.1/#mock

应用

安装mock

npm install mockjs

引用

在main.js中引用

// main.js
require('./mock');

服务注册

在mock文件夹下创建index.js文件，这里就是我们注册所有mock服务的地方

// 首先引入Mock
const Mock = require('mockjs');

// 设置拦截ajax请求的相应时间
Mock.setup({
  timeout: '200-600'
});

let configArray = [];

// 使用webpack的require.context()遍历所有mock文件
const files = require.context('.', true, /\.js$/);
files.keys().forEach((key) => {
  if (key === './index.js') return;
  configArray = configArray.concat(files(key).default);
});

// 注册所有的mock服务
configArray.forEach((item) => {
  for (let [path, target] of Object.entries(item)) {
    let protocol = path.split('|');
    Mock.mock(new RegExp('^' + protocol[1]), protocol[0], target);
  }
});

mock

Mock.mock() 支持5 种参数格式以及语法规范，详情请异步MOCK官网查询，以下仅以

 Mock.mock( rurl?, rtype?, template ) )
// 或者
Mock.mock( rurl, rtype, function( options ) )

方式生成模拟数据。

在mock文件夹下随便创建一个文件demoList.js
在该文件中，我们可以按照index注册服务的格式来写我们的mock

let demoList = [{
        id: 1,
        name: 'zs',
        age: '23',
        job: '前端工程师'
    },{
        id: 2,
        name: 'ww',
        age: '24',
        job: '后端工程师'
    }]

export default {
    'get|/parameter/query':  option => {
    return {
      status: 200,
      message: 'success',
      data: demoList
    };
  }
}

当我们在页面发起了ajax请求，路径是’/parameter/query’，并且请求方式是get时，就会返回我们写好的mock数据。

我们也可以使用template返回，方式如下：

let demoList = {
    status: 200,
    message: 'success',
    data: [{
        id: 1,
        name: 'zs',
        age: '23',
        job: '前端工程师'
    },{
        id: 2,
        name: 'ww',
        age: '24',
        job: '后端工程师'
    }]
}
export default {
    'get|/parameter/query': demoList
}

当我们想要展示大量数据时，不可能一个一个的写，那样又费时又费力，这是我们就可以根据mockjs的语法规范来快速生成一系列的数据。

let demoList = {
  status: 200,
  message: 'success',
  data: {
    total: 100,
    'rows|10': [{
      id: '@guid',
      name: '@cname',
      'age|20-30': 23,
      'job|1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师']
    }]
  }
};
export default {
    'get|/parameter/query': demoList
}

这样我们就可以每次随机生成10条数据，总数为100条，其中id和name使用的占位符，age是随机取出20-30中的数字，job是随机取出其后数组中的某一项，这在mock文档里都有说明。

附 测试分类

前端的测试主要有两种，单元测试和E2E测试。

单元测试：按空间切割，对每个组件进行测试

比如，我要测试日期输入框，那么我编写的测试用例应该包括以下部分：

• 默认日期是否为当天
• 当用户选择日期范围，data是否会做相应改变
• ...

E2E测试：按时间切割，对每个流程进行测试

比如，我要测试搜索功能，那么我编写的测试用例应该模拟以下步骤：

• 打开主页
• 点击菜单跳转到详情页
• 输入搜索条件
• 点击搜索
• 查看搜索结果是否与预期一致