一、简介
mock是一个模拟数据生成器，旨在帮助前端独立于后端进行开发，编写单元测试。其可模拟 Ajax 并返回模拟数据，使前端不用去调用后端的接口，方便测试。
官网： http://mockjs.com/0.1/#mock
二、应用
2.1 安装 mock
npm install mockjs
2.2 引用
在main.js中引用
// main.jsrequire('./mock');
复制代码
2.3 服务注册
在mock文件夹下创建index.js文件，这里就是注册所有mock服务的地方。
// 首先引入Mockconst 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); }});
复制代码
2.4 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 是否会做相应改变
...
比如，要测试搜索功能，那么编写的测试用例应模拟以下步骤：
打开主页
点击菜单跳转到详情页
输入搜索条件
点击搜索
查看搜索结果是否与预期一致
评论