Mock 工具介紹 — Mockoon

Mockoon 是一款具有 UI 隨裝即的 Mock API 工具。本身就包含了 Proxy 及 Mock 的功能，在做前端測試時是很方便的工具。

Proxy

在開發新功能時，需要 Mockoon 的只有新 API 而已，所以 Mockoon 本身帶有 Proxy 功能就是很方便的工具。
點擊右上 [齒輪] 可以開啟 Proxy mode 設定介面。只要不是我們要 mock 的目標就是丟回原本的 server 處理。

Mock 回傳內容除了可以在 UI 上直接輸入預期要回傳的內容，當回傳的內容很大時，也可以使用讀取本地檔案的方式回傳回容。回傳檔案的功能特別適合前端的 JS/CSS 還在開發階段時使用。

Mock 的 Rule 的條件可以用 Request 的 Query string、Body、Header、Router params 或是 Request Number 設定提供很大的彈性。

Rule 的比對方式是只要合符就不會再往下比對，所以在設定多組 Rule 時應該將條件較嚴格的 Rule 放在條件寬鬆的 Rule 之前。

例如我想要在 Create user 時依據有沒有使用 refer code 來回傳不同的內容，就可以設定兩組不同的 Rule 回傳不同的內容。

Rule: Create user with refer

Rule: Create user without refer

Create user with refer 應該排在 Create user without refer 之前，直接用滑鼠拖拉就可以改變順序

Templating
透過 Templating 可以將 Response 中指定的段落用 Request 的內容取代做出動態改變回傳內容，也可以改回傳本地檔案的檔案路徑。
下面範例為，用 Request 中的 username 及 refer 替換掉 Response 內容的做法。

{
  "data": {
    "index": 0,
    "username": {{body 'username'}},
    "refer": {{body 'refer' ''}}
  },
  "error_code": 0
}

搭配的Request：

POST /api/v1/users
Content-Type: application/json

{
  "username": "John", 
  "refer": "XDCJJU8"
}

Templating 套用在讀取本地端檔案
使用 url 讀取對應的本地端檔案，在原本 url 中檔案名稱的位置上加上 :jsFile 並在 File 的路徑中使用 {{urlParam 'jsFileF'}} 改變讀取的檔案路徑。

結語
Mockoon 在設定上十分簡單，功能也相完整，很值得前端的開發者導入開發流程之中。

參考資料：
Mockoon 官網