DEV Community

Dian
Dian

Posted on

Mock 工具介紹 — Mockoon

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

Proxy

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

Mock

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

Rule

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
Create user with refer

Rule: Create user without refer
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
}
Enter fullscreen mode Exit fullscreen mode

搭配的Request:

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

{
  "username": "John", 
  "refer": "XDCJJU8"
}
Enter fullscreen mode Exit fullscreen mode

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

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

參考資料:
Mockoon 官網

Discussion (0)