近期有個新專案開跑,是一個 React 的單頁應用程式 (SPA),同時也是漸進網路應用程式 (PWA)。想讓他的程式碼迭代可以有個穩定的機制去做檢查和測試。想做個筆記來記錄這次的設計~
React 持續整合
以 Kubernetes 下的 Jenkins 為建置工具
Firebase 模擬器加入整合環境
匯出 Jest 單元測試覆蓋率報告
以 Jest 設計測試腳本,錄影 Selenium 的操作
思考流程
在程式碼從推送到部署,粗略分成三個階段:分支內整合、合併前準備、合併到主線(部署)
階段一:分支內整合
第一關是初期驗證,通常是避免粗心的小出錯,例如不符合 ESLint 的規範,或是在重構單元的時候沒有注意到測試案例出現錯誤。
理論上 ESLint 和單元測試,都是可以自己先完成的步驟,然後再上傳程式到檔案庫。但偶有時會粗心或是急躁的時候,因此初期驗證的角色很重要。
單元測試過後也會彙整測試報告,協助釐清這次的功能變動,通過了解測試涵蓋範圍與遺漏測試的範圍,再進行調整。這裡值得注意的是,眾多的數據中,函數覆蓋率是需要特別關心。
階段二:合併到主線前的準備
在當開發分支已經完成功能,確認這次的變動要合併到主線,這時候就可以進行下一步的測試了。
端到端測試部分,主要是在確認修正後的程式操作正常,而且介面顯示是符合預期,例如:不同手機螢幕尺寸與縮放等級大小 (initial-scale) 的狀況下,與 CSS3 的 media 有關的柵欄系統等,能夠自動調整。
端到端測試完成後,匯出的實際操作影片,可以幫助了解不同畫面的呈現有無差異。有個付費解決方案 BrowserStack,可以測試更多平台與螢幕大小
接續下去的是人工審核,小組會議的方式確認功能實作細節,是否有淺藏問題,或是有非功能需求上的問題進行調整。
階段三:合併到主線
在當程式都經過測試、人工審核後,就可以開始部署。
由於這是一個很小的應用服務,且使用者不受影響的狀況下,可以直接部署到 Production。一般版本釋出應該是不會如此的直接 & 簡陋。
端到端測試的組成
在 Jenkins 內啟動測試伺服器,接著建置 Jest 期間以 WebDriver 連線同在 K8s 下的 Selenium Grid 去分配 Node 給予測試環境載體,並在測試過程中進行錄影。
測試伺服器
測試時,使用 craco start
啟動測試伺服器。接著啟動 Firebase 模擬器,提供落地的 Firebase 測試環境。最後以 Jest 框架規劃的測試流程,透過 WebDriver 對遠端的瀏覽器進行操作。
Firebase 模擬器
Firebase 模擬器是多個 Java 的程式組成,利用 firebase-tools 安裝與啟動。啟動後各服務會監聽一個埠號,而 Dashboard 會在 localhost:4000
,提供視覺化數據與功能設定。
在這裡要注意 Realtime Database 的規則設定是會有效的,因此權限部分也需要設定。
測試過程錄影
在 WebDriver 操作瀏覽器之前,以 VNC 方式連線到遠端的 Selenium Node。由於 Node 環境包含 X Window 桌面程式 與 VNC 伺服器,因此可以開啟介面版的瀏覽器 (非 headless),並且遠端連線。
在當 VNC 遠端桌面連上後,接著以 FFmpeg 開始進行桌面錄影。
Jest
在整合的環境中,Jest 分別是單元測試與端到端測試的框架。因此兩者配置會不同:
單元測試
Jest 配置
{
"collectCCoverageFrom": "./src",
"coverageDirectory": "output/coverage",
"setupFilesAfterEnv": {
"./src/__tests__/jest.setup.js"
},
"testEnvironment": "jest-enviornment-jsdoom-fifteen"
}
匯出的覆蓋報告
每個檔案都能個點進去查看每一行的在測試時被呼叫到的次數,以及沒有被測試到的行數。
端到端測試的 Jest 配置
{
"setupFilesAfterEnv": {
"jest-environment-selenium/dist/setup.js"
},
"testEnvironment": "./selenium_environment.js"
}
jest-environment-selenium 的 GitHub
https://github.com/applitools/jest-environment-selenium
selenium_environment.js
的部分則是為了覆寫原先 <meta charset="utf-8">jest-environment-selenium
無法更動 ChromeOpts
去啟動 WebDriver 的問題。
CRACO
Create React App (CRA) 會封裝大部分的設定,且目前沒有好的調整設定方法。如果要調整 Webpack 等設定,以往可能要先做 react-scripts eject
將所有設定檔釋出,且無法逆回這個操作。
另一種方法則是以 patch-package 去做調整 node_modules/
,但我想這應該是更不理想的方法。
CRACO 的解決方式則是在 react-scripts
向外再包覆一層設定,可以自訂設定覆蓋 react-scripts
,不需要 eject。
以 CRACO 覆寫 react-script 封裝的設定
CRACO 全稱為 [C]reate [R]eact [A]pp [C]onfiguration [O]verride。可以覆寫的範圍:
Webpack Loaders
Style
ESLint
Babel
TypeScript
Webpack Config
Jest Config
其他 CRACO 外掛
使用 craco-alias 設定 Resolve Alias
craco-alias 外掛可以整合 VS Code 中的 JavaScript IntelliSense 配置。只要設定 VS Code 中 jsconfig.json
,就可以一併套用 resolve alias 到 react-script 中的環境。
Jenkins Pipeline
最後記錄 Jenkins 執行期間的 Pipeline 過程。
參考連結
firebase-tools
https://firebase.google.com/docs/cli
jest-environment-selenium 的 GitHub
https://github.com/applitools/jest-environment-selenium
CRACO
https://github.com/gsoft-inc/craco
craco-alias
https://github.com/risenforces/craco-alias