一、mock简介
mock原是python的第三方库
python3以后mock模块已经整合到了unittest测试框架中,不用再单独安装
二、mock作用
1. 解决依赖问题:当我们测试一个接口或者功能模块的时候,如果这个接口或者功能模块依赖其他接口或其他模块,那么如果所依赖的接口或功能模块未开发完毕,那么我们就可以
使用mock模拟被依赖接口,完成目标接口的测试
2. 单元测试:如果某个功能未开发完成,我们又要进行测试用例的代码编写,我们也可以先模拟这个功能进行测试
3. 模拟复杂业务的接口:实际工作中如果我们在测试一个接口功能时,如果这个接口依赖一个非常复杂的接口业务,那么我们完全可以使用mock来模拟这个复杂的业务接口,其实
这个和解决接口依赖是一样的原理
4.前后端联调:如果你是一个前端页面开发,现在需要开发一个功能:根据后台返回的状态展示不同的页面,那么你就需要调用后台的接口,但是后台接口还未开发完成,是不是你就停止这部分工作呢?答案是否定的,你完全可以借助mock来模拟后台这个接口返回你想要的数据
三、mock安装
在 node 下运行
npm install mockjs
四、mock实例
在mian.js中引入 :
if (process.env.NODE_ENV === 'production') {
const { mockXHR } = require('../mock')
mockXHR()
}
接下来我们有个列表页面如下:
那么首先 列表页的接口数据 获取:
先导入接口:
import { fetchList } from '@/api/app'
接口如下:
getList() {
this.listLoading = true
fetchList(this.listQuery).then(response => {
this.list = response.data.items
this.total = response.data.total
// Just to simulate the time of the request
setTimeout(() => {
this.listLoading = false
}, 1.5 * 1000)
})
},
接口请求封装的如下:
import request from '@/utils/request'
export function fetchList(query) {
return request({
url: '/vue-element/app/list',
method: 'get',
params: query
})
}
在项目的根目录下 建立mock/index.js文件,内容如下:
const Mock = require('mockjs')
const { param2Obj } = require('./utils')
const app = require('./app')
const mocks = [
...app,
]
// for front mock
// please use it cautiously, it will redefine XMLHttpRequest,
// which will cause many of your third-party libraries to be invalidated(like progress event).
function mockXHR() {
// mock patch
// https://github.com/nuysoft/Mock/issues/300
Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
Mock.XHR.prototype.send = function() {
if (this.custom.xhr) {
this.custom.xhr.withCredentials = this.withCredentials || false
if (this.responseType) {
this.custom.xhr.responseType = this.responseType
}
}
this.proxy_send(...arguments)
}
function XHR2ExpressReqWrap(respond) {
return function(options) {
let result = null
if (respond instanceof Function) {
const { body, type, url } = options
// https://expressjs.com/en/4x/api.html#req
result = respond({
method: type,
body: JSON.parse(body),
query: param2Obj(url)
})
} else {
result = respond
}
return Mock.mock(result)
}
}
for (const i of mocks) {
Mock.mock(new RegExp(i.url), i.type || 'get', XHR2ExpressReqWrap(i.response))
}
}
module.exports = {
mocks,
mockXHR
}
好了,以上准备工作完成了,我们在根目录下创建mock/app.js文件,让我们构造100条列表数据,代码如下:
const Mock = require('mockjs')
const List = []
const count = 100
for (let i = 0; i < count; i++) {
List.push(Mock.mock({
id: '@increment',
timestamp: +Mock.Random.date('T'),
author: '@first',
reviewer: '@first',
name: '@title(5, 7)',
domain: '@title(1, 2)',
fromapp: '@title(1, 2)',
cdcompany: '@title(1, 2)',
}))
}
module.exports = [
{
url: '/vue-element/app/list',
type: 'get',
response: config => {
const { importance, type, title, page = 1, limit = 20, sort } = config.query
let mockList = List.filter(item => {
if (name && item.name !== name) return false
if (domain && item.domain.indexOf(domain) < 0) return false
return true
})
if (sort === '-id') {
mockList = mockList.reverse()
}
const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))
return {
code: 20000,
data: {
total: mockList.length,
items: pageList
}
}
}
},