Vue进阶(十三):MOCK

网友投稿 624 2022-05-30

简介

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

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

应用

安装mock

npm install mockjs

1

引用

在main.js中引用

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

1

2

服务注册

在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); } });

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

mock

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

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

1

2

3

方式生成模拟数据。

在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 }; } }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

当我们在页面发起了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 }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

Vue进阶(十三):MOCK

15

16

17

18

当我们想要展示大量数据时,不可能一个一个的写,那样又费时又费力,这是我们就可以根据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 }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

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

附 测试分类

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

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

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

默认日期是否为当天

当用户选择日期范围,data是否会做相应改变

...

E2E测试:按时间切割,对每个流程进行测试

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

打开主页

点击菜单跳转到详情页

输入搜索条件

点击搜索

查看搜索结果是否与预期一致

Vue web前端

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:如何使用Python-MIP解决优化问题
下一篇:ElasticSearch 全文检索— ElasticSearch概述
相关文章