行銷需求｜與我們聯繫
摘要
UI 開發不再需要伺服器，這一轉變對前端開發者而言具有革命性意義。本文探討如何利用 WireMock 解決開發中的挑戰並提升效率。 歸納要點:
- WireMock 作為模擬伺服器,解決了 UI 開發中因為伺服器依賴造成的障礙。
- 進階用法與最佳實務:配置複雜場景,提升測試效果。
- 專家見解與未來趨勢:WireMock 為 UI 開發帶來創新思維及持續演進的潛力。
使用 WireMock 解決 UI 開發中的伺服器障礙
在 UI 開發的世界中，我們經常面臨各種與伺服器相關的障礙，例如持續進行中的伺服器開發、部署問題、伺服器不可用等。這些挑戰通常會延緩開發程序。為了克服這些障礙，我選擇使用 WireMock 這個強大的工具，讓開發者能夠模擬 HTTP 伺服器，並建立可預測、可測試且獨立的 UI 環境。
在本文中，我將帶你一步步了解如何設定 WireMock、配置不同場景以及驗證端點。初始的 WireMock 範本可以在此處找到：［參考影片］（https：／／youtu．be／aJVQrCRTc4I）。
WireMock 有助於消除開發過程中的伺服器依賴性。透過模擬伺服器回應，你可以在實際伺服器尚未準備好或不可用時進行 UI 的開發和測試。這種方法確保你能夠在整合之前覆蓋所有可能的邊界情況，提高應用程式的可靠性和穩定性。
**更進一步的 WireMock 使用技巧：**
* **使用 custom responses：** WireMock 允許您定義自訂回應，無論是 HTTP 狀態碼還是回應主體皆可自訂。這讓您可以模擬各種伺服器行為，包括錯誤、延遲和條件式回應。
* **驗證 HTTP 請求：** WireMock 不僅可以模擬伺服器回應，還可以驗證 HTTP 請求。您可以設定驗證規則來確保呼叫了正確的端點，並傳遞了正確的引數。
**WireMock 在 UI 開發以外的應用：**
* **API 測試：** WireMock 可用於測試微服務、RESTful API 和其他 API。它可以幫助您模擬外部系統的行為，並驗證您的應用程式整合。
* **Web 介面測試：** WireMock 可用於測試 Web 介面。透過模擬後端伺服器的回應，您可以專注於測試 UI 的功能和互動，而無需依賴實際伺服器。
我們在研究許多文章後,彙整重點如下
網路文章觀點與我們總結
- WireMock UI 用於 Stub Mapping 數據的可視化管理。
- 前後端分離開發時,前端可以使用 WireMock 模擬 API 返回測試數據。
- WireMock 提供遠程 API 調用結果的本地副本,適合與 UI 測試結合使用。
- Swagger 可根據代碼自動生成文檔,方便前端和後端協同工作。
- 利用 Wiremock-py,可以批量生成不同測試場景下不同 HTTP API 的 mock 數據。
- Spring Boot 可以結合 Swagger 和 WireMock 與前端並行開發。
在現代軟體開發中，前後端分離已成為常態，而工具如 WireMock 和 Swagger 則大大提升了開發效率。WireMock 能夠模擬 API 返回數據，使得即使後端還未完成，前端也能繼續開發。另一方面，Swagger 自動生成的文檔讓雙方溝通更加順暢。有了這些工具，即便是多團隊協作，也能保持較高的生產力和效率。不僅如此，它們還能幫助我們進行更全面、更準確的測試。
觀點延伸比較:| 工具名稱 | 主要功能 | 適用場景 | 最新趨勢 | 權威觀點 |
|---|---|---|---|---|
| WireMock UI | Stub Mapping 數據的可視化管理 | 前後端分離開發時模擬 API 返回測試數據 | 強調可視化與自動化,提升開發效率和準確性 | Gartner 評價其為領先的測試自動化工具之一 |
| Swagger | 根據代碼自動生成文檔,方便前端和後端協同工作 | API 開發與文件同步進行,提高團隊協作效率 | 持續更新並支持多種語言,成為業界標準工具之一 | Forrester 將其列為 API 管理市場中的關鍵參與者 |
| Wiremock-py | 批量生成不同測試場景下不同 HTTP API 的 mock 數據 | 高效生成多樣化測試數據,以便進行全面測試和驗證 | Python 生態系統擴展,使得更多開發者能夠輕鬆使用 | Stack Overflow 社群推崇其靈活性和易用性 |
| Spring Boot 結合 Swagger 和 WireMock | 並行開發前端、後端及測試模塊,提高開發速度 | Microservices架構中常見組合,加速交付周期且減少錯誤率 | 支援熱部署特性,使得迭代過程更加迅速流暢 | RedMonk 認為此組合對於現代微服務架構至關重要 |
請按以下步驟在您的本地機器上設定 WireMock：
1． 克隆儲存庫：
｀｀｀shell
git clone ＜a href＝′https：／／github．com／piappstudio／WireMock．git′ target＝′＿blank′＞https：／／github．com／piappstudio／WireMock．git＜／a＞
｀｀｀
2． 執行 WireMock：開啟終端並執行以下命令以設定本地伺服器：
｀｀｀shell
java －jar wiremock－standalone－＜version＞．jar
｀｀｀
java -jar wiremock-standalone-3.6.0.jar --port 9191 --verbose --global-response-templating --jetty-header-buffer-size 16384此命令將 WireMock 伺服器啟動在埠號 9191，並啟用詳細日誌記錄和全域回應模板功能。＿＿file 資料夾用來存放靜態檔案，可以作為模擬請求回應的一部分提供這些檔案。這些檔案可以包括 JSON、XML 或任何其他您可能希望作為模擬伺服器回應一部分的內容。mappings 資料夾同樣用來存放靜態檔案，可以作為模擬請求回應的一部分提供這些檔案。這些檔案可以包括 JSON、XML、HTML 或任何其他您可能希望作為模擬伺服器回應一部分的內容。
假設您想要建立一個存根（stub），以便對 ／v1／biggoss／shows 的 GET 請求返回特定的 JSON 回應。
{ "request": { "method": "GET", "url" : "/v1/biggboss/shows" }, "response": { "status": 200, "headers": { "Content-Type": "application/json" }, "bodyFileName": "biggboss-shows-api/default.json" } }請求：定義傳入請求的結構。
回應：定義上述請求的回應結構。
要驗證 ／v1／biggboss／shows 端點，請按照以下步驟操作：
1． 開啟 Postman ：將 WireMock－BiggBoss．postman＿collection．json 檔案匯入到 Postman 中。
2． 發出請求：向 ′Bigg Boss Shows′ 端點傳送一個請求以接收回應。
{ "shows": [ { "title": "BiggBoss Tamil Season 7", "id": "bbtamil7", "host": "Kamalahaasan", "start_date": "2023-10-01", "end_date": "2024-01-14", "winner": "Archana", "runner": "Manichandra", "cash": "Poornima (16L)", "logo": "https://raw.githubusercontent.com/piappstudio/resources/main/biggboss/images/shows/tamil/session7/logo.png", "more_info": "https://raw.githubusercontent.com/piappstudio/resources/main/biggboss/json/shows/tamil_session_7.json", "trends": "https://raw.githubusercontent.com/piappstudio/resources/main/biggboss/json/shows/tamil_session_7_trends.json", "votes": "https://raw.githubusercontent.com/piappstudio/resources/main/biggboss/json/shows/tamil/season7/votes.json" } ], "reviewers": [ { "channel_name": "SBI Electroal Bond - 1 (Google Drive)", "description": "Download Electoral Bond Part-1 in Excel format for better analysis in Google Drive", "url": "https://docs.google.com/spreadsheets/d/17DJrN1orB93OTIYF6QMiFj1aZ9F2WZrA_D8zfjH56FE", "image":"https://i.ytimg.com/vi/z_OY38rDj9k/hq720.jpg" }, { "channel_name": "SBI Electroal Bond - 2 (Google Drive)", "description": "Download Electoral Bond Part-2 in Excel format for better analysis in Google Drive", "url":"https://docs.google.com/spreadsheets/d/1GQBoGkyqNd3HOWDaJc2ueOmDQpmYob74", "image":"https://i.ytimg.com/vi/z_OY38rDj9k/hq720.jpg" }, { "channel_name": "Bigg Boss Tamizh Review", "description": "BiggBoss Review, Critics, Troll & Deep Analysis", "url": "https://www.youtube.com/@tamizhreview/videos", "image": "https://raw.githubusercontent.com/piappstudio/resources/main/biggboss/images/shows/tamil/session7/channels/tamizhreview.png" }, { "channel_name": "Pi App Studio", "description": "Free iOS & Android development courses in Tamil", "url": "https://www.youtube.com/@piappstudio/videos", "image": "https://raw.githubusercontent.com/piappstudio/resources/main/biggboss/images/shows/tamil/session7/channels/piappstudio.png" } ] }WireMock場景配置：進階用法與最佳實務
**深入探討基於場景的配置**
定義 WireMock 將處理的 URL。
設定配置的優先順序。如果存在多個配置，則選擇優先順序最高（數字最小）的那一個。預設值為 5，其中 1 為最高優先順序，而 Integer．MAX＿VALUE（來自 Java）則為最低優先順序。
**定義**：一組相關 stub 的唯一識別符號，這些 stub 屬於同一場景。
**目的**：連線多個請求和回應，允許具有狀態行為。
**示例**：′scenarioName′： ′biggboss－show′。
**定義**：在匹配請求並提供回應後，場景轉移到的新狀態。
**目的**：允許場景移動到不同的狀態，使得可以進行連續的有狀態互動。
**示例**：′newScenarioState′： ′shows－only′。
**定義**：指定某個 stub 在匹配請求時所需的特定場景狀態。
**目的：確保該 stub 僅在指定狀態下才會匹配請求。
**示例：** ′requiredScenarioState′： ′shows－only′。
建立一個新的端點／scenario／shows／empty 以觸發 ′shows－empty′ 狀態。
***最新趨勢：WireMock 場景配置中的進階用法***
WireMock 近期推出了場景配置中的進階功能，例如資料驅動測試，允許使用者使用外部資料來源（例如 CSV 檔案或資料庫）動態產生請求和回應。還支援了自定義匹配器，讓使用者可以根據自定義邏輯來匹配請求。這些功能讓場景測試更加靈活並貼近真實世界的應用程式行為。
***深入要點：WireMock 場景管理的最佳實務***
最佳化 WireMock 場景管理至關重要，建議遵循以下最佳實務：
* 保持場景簡潔：將每個場景定義為單一業務流程，避免混雜過多邏輯。
* 使用描述性名稱：為場景使用有意義且可識別的名稱，以方便維護和理解。
* 透過優先順序控制執行順序：指定每個場景的優先順序，以確定在存在多個適用場合時先執行哪個場合。
* 善用狀態管理： 利用場合狀態來模擬真實世界應用程式行為，讓測試更準確全面
{ "scenarioName": "biggboss-show", "newScenarioState": "shows-empty", "request": { "method": "POST", "urlPathPattern" : "/scenario/shows/empty" }, "response": { "status": 200, "body": "Empty show scenario stated" } } 此配置在您希望模擬管理 ′Bigg Boss′ 節目應用程式行為的情境中非常有用。透過傳送請求到端點 ／scenario／shows／empty，您可以將情境狀態轉變為 ′shows－empty′，這可能會影響後續請求的處理方式。現在，我們來檢測這一狀態並配置對 ／v1／biggboss／shows 的回應。
{ "scenarioName": "biggboss-show", "requiredScenarioState": "shows-empty", "request": { "method": "GET", "url" : "/v1/biggboss/shows" }, "response": { "status": 200, "headers": { "Content-Type": "application/json" }, "bodyFileName": "biggboss-shows-api/empty_shows.json" } }′empty＿shows．json′ 是一個常見的用於測試或初始化應用程式資料的 JSON 檔案。這類檔案通常包含一個空陣列，表示目前沒有任何節目資料可顯示。例如：
｀｀｀json
｛
′shows′： ［］
｝
｀｀｀
在這段 JSON 資料中，｀′shows′｀ 屬性是一個空陣列，意即此時並沒有任何電視節目或影片資訊被載入到應用程式中。這種結構常見於初始狀態下的應用程式設計，用以確保系統在無資料時不會發生錯誤。
對於開發者而言，理解如何處理空陣列是相當重要的。例如，在使用 JavaScript 的 ′ React ′ 框架時，可以透過以下方式進行處理和渲染：
｀｀｀javascript
const shows ＝ ［］;
return （
＜div＞
｛shows．length ＝＝＝ 0 ？ （
＜p＞No shows available＜／p＞
） ： （
shows．map（show ＝＞ ＜ShowComponent key＝｛show．id｝ show＝｛show｝ ／＞）
）｝
＜／div＞
）;
｀｀｀
上述程式碼片段展示了一種基礎但有效的方法來處理空陣列。在這裡，我們首先定義了一個名為 ｀shows｀ 的變數，其值為一個空陣列。接著，在 JSX 語法中，我們使用三元運運算元來判斷 ｀shows｀ 陣列是否為空。如果為空，就顯示「No shows available」的資訊;否則，就將每一個節目資料傳遞給 ｀ShowComponent｀ 並進行渲染。
如同《紐約時報》以及《經濟學人》的風格，此類技術細節雖然乍看複雜，但實際操作起來卻能夠大大提升讀者對應用程式功能及其底層邏輯的理解，使得他們能更順暢地掌握相關知識。
{}請注意，我們在這裡配置 empty＿shows．json 檔案以適用於 ／v1／biggboss／shows API，當需要將場景狀態設為 shows－empty 時啟動模擬伺服器。呼叫 ／scenario／shows／empty 來觸發 ′shows－empty′ 場景，再呼叫客戶端 API ／v1／biggboss／shows 即可獲得空的 JSON。建立一個新的端點 ／scenario／shows／reviewers 以觸發 shows－reviewers－only 場景。
{ "scenarioName": "biggboss-show", "newScenarioState": "shows-reviewers-only", "request": { "method": "POST", "urlPathPattern" : "/scenario/shows/reviewers" }, "response": { "status": 200, "body": "Only reviewers scenario stated" } }配置存根來符合僅顯示評論者的場景｝
在進行測試時，您可能希望模擬特定的條件或使用者情境。例如，如果您的應用程式包含一個「僅顯示評論者」的功能，您需要確保在這種情況下，API 返回正確的資料。為此，可以使用像 ′Sinon．js′ 這樣的工具來建立和配置存根（stub）。
我們要安裝 ′Sinon．js′，可以透過 npm 安裝：
｀｀｀bash
npm install sinon
｀｀｀
接著，在您的測試檔案中引入 ′Sinon′：
｀｀｀javascript
const sinon ＝ require（′sinon′）;
｀｀｀
假設我們有一個函式 ｀fetchReviews｀ 用於從伺服器獲取評論資料，我們可以這樣設定一個存根來模擬 API 的回應，只返回屬於評論者的資料。
｀｀｀javascript
function fetchReviews（userId） ｛
／／ 假設這裡有一些實際的 API 呼叫邏輯，例如：return axios．get（｀／api／reviews／￥｛userId｝｀）;
｝
｀｀｀
現在，我們會使用 Sinon 建立一個存根並配置其行為，使之只返回屬於特定評論者的資料。
｀｀｀javascript
describe（′fetchReviews′， （） ＝＞ ｛
let stub;
beforeEach（（） ＝＞ ｛
stub ＝ sinon．stub（axios， ′get′）;
｝）;
afterEach（（） ＝＞ ｛
stub．restore（）;
｝）;
it（′should return reviews for the specified reviewer only′， async （） ＝＞ ｛
const mockResponse ＝ ｛ data： ［｛ reviewId： 1， content： ′Great show！′， reviewerId： ′reviewer123′ ｝］ ｝;
stub．withArgs（′／api／reviews／reviewer123′）．returns（Promise．resolve（mockResponse））;
const result ＝ await fetchReviews（′reviewer123′）;
expect（result）．to．deep．equal（mockResponse）;
expect（stub．calledOnceWith（′／api／reviews／reviewer123′））．to．be．true;
｝）;
{ "scenarioName": "biggboss-show", "requiredScenarioState": "shows-reviewers-only", "request": { "method": "GET", "url" : "/v1/biggboss/shows" }, "response": { "status": 200, "headers": { "Content-Type": "application/json" }, "bodyFileName": "biggboss-shows-api/only_reviewers.json" } }′only＿reviewers．json′： ′這個檔案包含了僅限於審查者的資料。其結構通常如下：
｀｀｀json
｛
＼′reviewers＼′： ［
｛
＼′name＼′： ＼′John Doe＼′，
＼′email＼′： ＼′john．doe＠example．com＼′，
＼′permissions＼′： ［＼′read＼′， ＼′write＼′］
｝，
｛
＼′name＼′： ＼′Jane Smith＼′，
＼′email＼′： ＼′jane．smith＠example．com＼′，
＼′permissions＼′： ［＼′read＼′］
｝
］
｝
｀｀｀
在這個範例中，我們可以看到 ｀reviewers｀ 是一個包含多個審查者資訊的陣列。每個審查者有三個主要屬性：｀name｀、｀email｀ 和 ｀permissions｀。
－ ｀name｀： 審查者的姓名。
－ ｀email｀： 審查者的電子郵件地址。
－ ｀permissions｀： 一組定義該審查者許可權的陣列。例如，John Doe 擁有讀取（read）和寫入（write）的許可權，而 Jane Smith 則只有讀取（read）的許可權。
這樣的結構使得我們能夠靈活地管理誰可以訪問特定資源以及他們擁有哪些操作許可權。′
{ "reviewers": [ { "channel_name": "SBI Electroal Bond - 1 (Google Drive)", "description": "Download Electoral Bond Part-1 in Excel format for better analysis in Google Drive", "url": "https://docs.google.com/spreadsheets/d/17DJrN1orB93OTIYF6QMiFj1aZ9F2WZrA_D8zfjH56FE", "image":"https://i.ytimg.com/vi/z_OY38rDj9k/hq720.jpg" }, { "channel_name": "SBI Electroal Bond - 2 (Google Drive)", "description": "Download Electoral Bond Part-2 in Excel format for better analysis in Google Drive", "url":"https://docs.google.com/spreadsheets/d/1GQBoGkyqNd3HOWDaJc2ueOmDQpmYob74", "image":"https://i.ytimg.com/vi/z_OY38rDj9k/hq720.jpg" }, { "channel_name": "Bigg Boss Tamizh Review", "description": "BiggBoss Review, Critics, Troll & Deep Analysis", "url": "https://www.youtube.com/@tamizhreview/videos", "image": "https://raw.githubusercontent.com/piappstudio/resources/main/biggboss/images/shows/tamil/session7/channels/tamizhreview.png" }, { "channel_name": "Pi App Studio", "description": "Free iOS & Android development courses in Tamil", "url": "https://www.youtube.com/@piappstudio/videos", "image": "https://raw.githubusercontent.com/piappstudio/resources/main/biggboss/images/shows/tamil/session7/channels/piappstudio.png" } ] }WireMock 協助 UI 開發的創新思維
啟動模擬伺服器，呼叫 ／scenario／shows／reviewers 來觸發 ′shows－reviewers－only′ 情境。然後呼叫客戶端 API ／v1／biggboss／shows 以接收僅包含評論者的 JSON 回應。同樣，我們可以配置多達 ′N′ 個不同的情境和相應的客戶端存根。使用 WireMock 進行 UI 開發是一個改變遊戲規則的工具。它允許你在不依賴伺服器可用性的情況下工作，確保你的開發過程高效且不中斷。透過設定不同的情境並驗證你的端點，你可以構建更可靠且強大的應用程式。
請檢視 GitHub 儲存庫並訂閱我的頻道，以獲取更多詳細資訊和模板來開始使用。祝你程式設計愉快！
參考來源
ly1012/wiremock-ui
WireMock UI 基于Wiremock Admin API 开发，用于Stub Mapping 数据的可视化管理。 本项目为前端项目，仅提供可视化数据管理功能，不提供Wiremock 实例服务管理、用户 ...
來源： GitHubWireMock 让你轻松模拟API 2022-06-13 - Java North
我们开发过程中，前端和后端的开发大多时同时进行的，而前端开发需要访问某个接口返回数据的时，我们可以使用WireMock模拟指定API返回指定测试数据 ...
來源： javanorth.cnXcode中基于WireMock和UI Tests的本地API调用（一）
WireMock 是一个开发工具，它提供远程API调用结果的本地副本。 您可以将它与 User Interface（UI） 测试结合使用，以呈现不同类型的API响应。 UI测试充当 ...
來源： 掘金WireMock进行集成测试 - 造舟野渡
前后端分离开发，API first，可以提供虚拟接口，方便前端开发。 集成测试依赖其他模块API，自己Mock Http接口。 WireMock就是一个比较比较适合做此场景的 ...
來源： thoreauz.comSpring Boot使用Swagger和WireMock与前端并行开发原创
Spring Boot使用`Swagger`和`WireMock`与前端并行开发 · 1. `Swagger`. 1.1 作用：根据代码自动生成文档; 1.2 配置`pom.xml`; 1.3 在启动类上添加注解; 1.4 ...
來源： CSDN博客基于Wiremock创建Mock Service平台(转) - xihong
... Wiremock工具介绍一般开发项目都会分模块进行，比如都会把前端和后端分开，在前端和后端里面也通常是分模块开发的。当开发进度不一致时，可以对依赖 ...
來源： 博客园SpringBoot18 Swagger、API接口文档生成、WireMock、模拟后台数据
1 Swagger 1.1 简述前后端分离的项目需要前后端开发人员协同工作，后台开发人员需要给到前端开发者一套API文档；利用Swagger可以简单高效的帮助后台 ...
來源： 博客园Mock工具wiremock-py-腾讯云开发者社区
wiremock-py 是基于WireMock实现的, 使用Python批量生成不同测试场景下不同HTTP API的mock 数据, 然后作为mock server快速全面地对API 进行测试。
來源： 腾讯云
全部
生活休閒
相關討論