引入
mock（模擬）: 是在專案測試中，對專案外部或不容易獲取的物件/介面，用一個虛擬的物件/介面來模擬，以便測試。
背景
前後端分離
- 前後端僅僅通過非同步介面(AJAX/JSONP)來程式設計
- 前後端都各自有自己的開發流程，構建工具，測試集合
- 關注點分離，前後端變得相對獨立並鬆耦合
開發流程
- 後臺編寫和維護介面文件，在 API 變化時更新介面文件
- 後臺根據介面文件進行介面開發
- 前端根據介面文件進行開發
- 開發完成後聯調和提交測試
面臨問題
- 沒有統一的文件編寫規範，導致文件越來越亂，無法維護和閱讀
- 開發中的介面增刪改等變動，需要較大的溝通成本
- 對於一個新需求，前端開發的介面呼叫和自測依賴後臺開發完畢
- 將介面的風險後置，耽誤專案時間
解決方法
- 介面文件伺服器 — 解決介面文件編輯和維護的問題
- mock 資料 — 解決前端開發依賴真實後臺介面的問題
介面文件伺服器
功能
介面編輯功能
- 型別1：根據介面描述語法書寫介面，並儲存為文字檔案，然後使用生成工具生成線上接文件（HTML）
— 也有一些類似 Markdown 的介面文件編輯器，參見：[There Are Four API Design Editors To Choose From Now][There Are Four API Design Editors To Choose From Now]。
- 型別2：提供線上的介面編輯平臺，進行可互動的介面編輯
介面檢視功能
- 提供友好的介面文件檢視功能
用法
- 後臺開發人員進行介面文件編寫
— 定義介面路徑、介面上傳欄位、介面返回欄位、欄位含義、欄位型別、欄位取值 - 前端開發人員檢視介面文件
優點
- 統一管理和維護介面文件
— 提供了介面匯入、介面模組化、介面版本化、視覺化編輯等功能 - 介面文件規範，可讀性強，減少前後端介面溝通成本
前端 mock 方法回顧
前端開發過程中，使用 mock 資料來模擬介面的返回，對開發的程式碼進行業務邏輯測試。解決開發過程中對後臺介面的依賴。
硬編碼資料
將 mock 資料寫在程式碼中。
示例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// $.ajax({ // url: ‘https://cntchen.github.io/userInfo’, // type: 'GET', // success: function(dt) { var dt = { "isSuccess": true, "errMsg": "This is error.", "data": { "userName": "Cntchen", "about": "FE" }, }; if (dt.isSuccess) { render(dt.data); } else { console.log(dt.errMsg); } // }, // fail: function() {} // }); |
優點
- 可以快速修改測試資料
痛點
- 無法模擬非同步的網路請求，無法測試網路異常
- 骯程式碼，聯調前需要做較多改動，增加最終上真實環境的切換成本
— 新增網路請求，修改介面、新增錯誤控制邏輯 - 介面文件變化需要手動更新
請求攔截 & mock 資料
hijack（劫持）介面的網路請求，將請求的返回替換為程式碼中的 mock 資料。
例項
The jQuery Mockjax Plugin provides a simple and extremely flexible interface for mocking or simulating ajax requests and responses
優點
- 可以模擬非同步的網路請求
- 可以快速修改測試資料
痛點
- 依賴特定的框架，如
Jquery - 增加最終上真實環境的切換成本
- 介面文件變換需要手動更新
本地 mock 伺服器
將 mock 資料儲存為本地檔案。在前端除錯的構建流中，用 node 開本地 mock 伺服器，請求介面指向本地 mock 伺服器，本地 mock 伺服器 response mock 檔案。
mock 檔案
|
1 2 3 4 5 |
.mock ├── userInfo.json ├── userStars.json ├── blogs.json └── following.json |
介面呼叫
https://github.com/CntChen/userInfo –> localhost:port/userInfo
優點
- 對程式碼改動較小，聯調測試只需要改動介面 url
- 可以快速修改測試資料
痛點
- json 檔案非常多
- 介面文件變化需要手動更新
代理伺服器
map local
- 介面請求的返回對映為本地 mock 資料
https://github.com/CntChen/userInfo–>localPath/userInfo
- 編輯對映規則
map remote
- 介面請求的返回對映為另一個遠端介面的呼叫
rewrite
- 修改介面呼叫的 request 或 response，新增/刪除/修改 HTTP request line/response line/headers/body
- 解決跨域問題
使用 map 後，介面呼叫的 response 不帶 CORS headers，跨域請求在瀏覽器端會報錯。需要重寫介面返回的 header，新增 CORS 的欄位。
優點
- 前端直接請求真實介面，無需修改程式碼
- 可以修改介面返回資料
痛點
- 需要處理跨域問題
- 一個變更需要代理伺服器進行多處改動，配置效率低下
- 不支援 HTTP method 的區分
— CORS 的 preflight 請求(OPTION)也會返回資料 - 需要有遠端介面或本地 mock 檔案，與使用本地 mock 檔案相同的痛點
mock 平臺
介面文件伺服器
使用介面文件伺服器來定義介面資料結構
mock伺服器
mock 伺服器根據介面文件自動生成 mock 資料，實現了介面文件即API
優點
- 介面文件自動生成和更新 mock 資料
- 前端程式碼聯調時改動小
缺點
- 可能存在跨域問題
業界實踐
公司實踐
沒有找到公司級別的框架，除了阿里的 RAP。可能原因：
- 非關鍵性、開創性技術，沒有太多研究價值
- 許多大公司是小團隊作戰，沒有統一的 mock 平臺
- 已經有一些穩定的介面，並不存在後臺介面沒有開發完成的問題
— 而我們想探究的問題是：前後端同時開發時的 mock
github 開源庫
A powerful high-level API design language for web APIs.
一種使用類markdown語法的介面編寫語言，使用[json-schema][json-schema]和[mson][mson]作為介面欄位描述。有完善的工具鏈進行介面檔案 Edit，Test，Mock，Parse，Converter等。
Swagger是一種 Rest API 的簡單但強大的表示方式，標準的，語言無關，這種表示方式不但人可讀，而且機器可讀。可以作為 Rest API 的互動式文件，也可以作為 Rest API 的形式化的介面描述，生成客戶端和服務端的程式碼。 –[Swagger：Rest API的描述語言][Swagger：Rest API的描述語言]
定義了一套介面文件編寫語法，然後可以自動生成介面文件。相關專案: Swagger Editor ，用於編寫 API 文件。Swagger UI restful 介面文件線上自動生成與功能測試軟體。點選檢視Swagger-UI線上示例。
WireMock is a simulator for HTTP-based APIs. Some might consider it a service virtualization tool or a mock server. It supports testing of edge cases and failure modes that the real API won’t reliably produce.
商業化方案
其他實踐
總結
對於前後端分離開發方式，已經有比較成熟的 mock 平臺，主要解決了2個問題：
- 介面文件的編輯和維護
- 介面 mock 資料的自動生成和更新
後記
預研時間比較有限，有一些新的 mock 模式或優秀的 mock 平臺沒有覆蓋到，歡迎補充。
筆者所在公司選用的平臺是 RAP，後續會整理一篇 RAP 實踐方面的文章。
問題來了：你開發中的 mock 方式是什麼？
References
- 圖解基於node.js實現前後端分離
http://yalishizhude.github.io/2016/04/19/front-back-separation/
[圖解基於node.js實現前後端分離]:http://yalishizhude.github.io/2016/04/19/front-back-separation/
- TestDouble(介紹 mock 相關的概念)
http://martinfowler.com/bliki/TestDouble.html
[mock 相關的概念]:http://martinfowler.com/bliki/TestDouble.html
- There Are Four API Design Editors To Choose From Now
https://apievangelist.com/2014/11/21/there-are-four-api-design-editors-to-choose-from-now/
[There Are Four API Design Editors To Choose From Now]:https://apievangelist.com/2014/11/21/there-are-four-api-design-editors-to-choose-from-now/
- 聯調之痛–契約測試
http://www.ituring.com.cn/article/42460
[聯調之痛]:http://www.ituring.com.cn/article/42460
- Swagger：Rest API的描述語言
https://zhuanlan.zhihu.com/p/21353795
[Swagger：Rest API的描述語言]:https://zhuanlan.zhihu.com/p/21353795
- Swagger – 前後端分離後的契約
http://www.cnblogs.com/whitewolf/p/4686154.html
[Swagger – 前後端分離後的契約]:http://www.cnblogs.com/whitewolf/p/4686154.html
- Swagger UI教程 API 文件神器 搭配Node使用
http://www.jianshu.com/p/d6626e6bd72c#
[Swagger UI教程 API 文件神器 搭配Node使用]:http://www.jianshu.com/p/d6626e6bd72c#