element ui 使用mock接口测试

一、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
        }
      }
    }
  },