Vue進階（十三）：MOCK

簡介

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

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小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。