前後端分離架構中介面測試最佳實踐
阿新 • • 發佈:2020-10-22
背景
你是否遇到過這種情況:前後端分離體系中,後端開發人員通知你介面有改動,前端程式碼需要做相應調整。but,改了啥沒有明確說明,這時候需要一個個頁面去點選,一個個按鈕去人肉測試,好不費事。
介面變動主要分兩種:
- 介面名稱變化(導致介面請求失敗);
- 介面返回的資料結構變化(添欄位或者刪欄位)。
通過編寫測試程式碼,只要輸入 npm run test
即可自動測試介面是否正常,這是本文要解決的問題。
tein
讀音:[tai-ing](test-interface,取兩個單詞前兩個字元組成),一個簡短的介面測試指令碼。本來想拿現成的測試框架 Jest 在上面修修改改,後來想了想要做的事非常簡單,程式碼全部碼好也不超過 400 行。
思路:
- 提前寫好介面返回資料的資料結構。tein 提供命令列工具
$ tein ui
,會建立一個網頁自動轉換資料結構; - 內部利用 axios 發請求判斷介面名稱是否變化,請求失敗八成是介面名字又改了;
- 介面請求成功後,將返回值再一次進行資料結構轉換,與第一步寫好的結構進行對比,判斷是否變化。
執行效果如下,有欄位修改的會以不同顏色標識出來,方便定位。
如果你的專案也需要對介面進行測試,不妨體驗一波。=> tein quick-start。
對於 outh2 請求,需要先拿到 token,之後每個請求都需要攜帶 token 進行請求,tein 也做了相應處理。具體 demo 參考 fixture-object-oauth2
有更好的處理方式,歡迎下方留言。
轉載於:https://my.oschina.net/dkvirus/blog/2998826