一、简介
mock
是一个模拟数据生成器,旨在帮助前端独立于后端进行开发,编写单元测试。其可模拟 Ajax
并返回模拟数据,使前端不用去调用后端的接口,方便测试。
二、应用
2.1 安装 mock
npm install mockjs
2.2 引用
在main.js
中引用
// main.js
require('./mock');
2.3 服务注册
在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);
}
});
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是否会做相应改变
- ...
- E2E测试:按时间切割,对每个流程进行测试。
比如,要测试搜索功能,那么编写的测试用例应模拟以下步骤:
- 打开主页
- 点击菜单跳转到详情页
- 输入搜索条件
- 点击搜索
- 查看搜索结果是否与预期一致