2022 年 10 月 11 日

如何進行 Angular 單元測試以及為什麼?

測試每個功能(也稱為單元)對於保證程序中的每個功能都按計劃運行至關重要。 在測試中,端到端評估特定功能與整個程序是完全不同的。 此時單元測試開始發揮作用。

Angular 是一個開源的、基於 TypeScript 的 JavaScript 框架。 由於 JavaScript 是一種用於構建在線應用程序的強大編程語言,因此了解如何在 JavaScript 中進行單元測試至關重要。 本文將探討如何進行這些測試、使用什麼以及為什麼。

什麼是角?

現代網站使用計算機語言 JavaScript (JS),它提供了許多消費者熟悉的交互元素。 Web 開發人員通常依賴於客戶端 JavaScript 框架來實現功能並保持網站和在線資產正常工作。

Angular 是一種技術,它提供了開發 Web 應用程序、輔助設計和組織底層代碼的方法。 2010 年,Google 發布了名為 AngularJS 的 JavaScript 框架。 它包含有助於開發人員創建豐富的單頁應用程序的功能。 AngularJS 後續版本的名稱縮寫為 Angular。

重要的組織已經使用 Angular 來構建應用程序,其中一些已經成為主流品牌。 如-

  • Gmail
  • YouTube電視
  • Paypal
  • Wix 網絡應用程序
  • 微軟網站
  • Upwork
  • 自由職業者

為什麼要測試 Angular 應用程序?

按功能驗證 Angular 代碼庫功能是提高代碼質量、減少生產中的缺陷和減少死代碼、最小化維護成本、更快地重構甚至升級而不會損壞整個系統的最有效方法。

最初,它可能看起來很慢,但從長遠來看它是有回報的。 在整個開發過程中,都會發現並修復錯誤。 調試過程得到增強。 如果某個特定的測試失敗,很容易準確地確定什麼沒有按計劃運行。 雖然測試驅動的開發和單元測試,特別是,似乎更複雜,利用新的 測試自動化平台 最佳實踐可以顯著簡化和自動化整個過程。

什麼是單元測試?

單元測試是自動化測試的方法之一。 單元測試完全隔離地運行應用程序的一小部分,並將它們的實際行為與預期行為進行比較。 短語“完全隔離”是指單元測試 Angular 應用程序不鏈接到外部依賴項,例如數據庫、文件系統或 HTTP 服務。 這使單元測試更加可靠和快速,因為它們將不再因外部服務的困難而失敗。

單元測試是使用代碼生成的。 您可能將單元測試視為通過與小部分交互來鍛煉您的應用程序的小程序。 每個單元測試都類似於描述或說明單元在特定情況下的運行方式。 通過執行測試套件,開發人員可以在修改代碼庫後獲得即時反饋。

為什麼要進行 Angular 單元測試?

通常,開發人員首先構建單元測試,然後是實際的程序代碼。 測試驅動開發描述了這種方法(TDD)。 在 TDD 中,需求被轉換為特定的測試用例,程序隨後被增強以通過新的角度測試。 單元測試允許更改代碼而不影響其他單元或整個程序的功能。 通過使開發人員更直接地在此階段識別故障,這節省了資源。

此外,在單元測試環境中,產品的模塊彼此隔離,並有各自的職責範圍。 在這種情況下,測試更值得信賴,因為它們是在密閉環境中進行的。 由於這種穩定性,代碼也變得可靠。

除了上面提到的事實,讓我們來看看單元測試的許多優點。

  • 單元測試有助於更快地定位和解決問題。 在開發過程中實施單元測試並在軟件生命週期內儘早開始測試的組織可以更快地發現和修復問題。
  • 您的單元測試套件可作為開發人員的安全網。 一套完整的單元測試可以作為開發人員的安全網。 通過定期執行測試,他們可以確保他們最近對代碼的更改沒有損壞任何東西。 換句話說,單元測試有助於避免回歸。
  • 單元測試可能有助於提高代碼質量。 這一項自然是從上一篇文章中繼承而來的。 因為單元測試作為安全網,開發人員在修改代碼時更有信心。 他們可以重構代碼而不用擔心破壞任何東西,從而提高代碼庫的整體質量。
  • 單元測試可以幫助改進應用程序架構。 將單元測試添加到代碼庫通常表明高質量的應用程序設計。 因此,產生可測試代碼的需要可能會激發改進的設計。 這就是為什麼 TDD(測試驅動開發)如此高效的原因。
  • 單元測試可以用作文檔。 單元測試提供瞭如何使用被測試代碼的示例。 因此,您也可以將它們視為可執行文檔或規範。
  • 識別代碼庫中的代碼異味。 難以為特定代碼生成單元測試表明代碼有異味,例如過於復雜的例程。 如果可以將單元測試添加到代碼庫中的簡單性是一個積極的指標,那麼反之亦然。

如何在 Angular 中進行單元測試並測試 Angular 組件

在為組件設計測試時,請確保考慮所有這些行為。

  • 在 HTML DOM 結構中,它們可以呈現模板。
  • 它們可以通過 Inputs 從其父組件接收數據,並通過 Outputs 輸出數據。
  • 他們可以應對多種情況。
  • 他們可以與零售商或服務機構進行溝通。
  • 他們可以綁定數據並使其對用戶可編輯。

設置測試床

Angular 提供了用於測試的 TestBed,它建立了一個可以輕鬆驗證和驗證組件和服務的環境。 它就像一個標準的 Angular 模塊,所有聲明的功能都被編譯。 利用 beforeEach 方法避免在每個測試中重複代碼。

測試 DOM

大多數時候,組件函數實現反映模板的邏輯。 使用 DebugElement 的 query 和 queryAll 方法,我們可以訪問 DOM 樹:

  • 查詢返回符合條件的第一個元素。
  • queryAll 返回匹配條目的數組 

觸發事件處理程序

測試有兩種選擇。 第一個選項是直接執行該功能,而推薦的第二個選項是實現對該按鈕的單擊。 使用 DebugElement 的觸發事件處理程序屬性可以很容易地做到這一點。 它包含兩個參數:事件的名稱及其特徵。

角度單元測試工具

茉莉花: Jasmine 測試框架可用於測試 JavaScript 代碼。 具體來說,它是 BDD(行為驅動開發)的框架。 由於其簡單的語法以及它不需要 DOM 或依賴其他框架的事實,Jasmine 開箱即用很容易使用。 Jasmine 是 Angular 手冊推薦的默認測試框架。 Angular CLI 會自動配置 Jasmine,因此您無需單獨安裝它。

因果報應: Angular 的默認測試框架是 Karma。 AngularJs 團隊開發它是因為他們在 角度測試 使用當時可用的工具。 Karma 使您能夠在實際的 Web 瀏覽器和設備(例如平板電腦和手機)上測試您的應用程序。 它的適應性也很強,因為它與其他測試框架兼容。 Angular 的默認框架是 Jasmine(我們稍後會討論),但您可以使用 Mocha、QUnit 或其他方式更改它。 此外,與 Travis、Jenkins、CircleCI 和 Semaphore 等持續集成系統的集成也很簡單。

量角器: Protractor 是 Angular 應用程序的端到端測試工具。 它在真實瀏覽器中執行您的測試並複制用戶與您的應用程序的交互。

角 CLI: Angular CLI(命令行界面)是一種可用於構建、開發和測試 Angular 應用程序的工具。

角度單元測試 最佳實踐

以下是執行角度單元測試時要遵循的一些事項:

  • 測試應該快速直接,需要更快地執行測試用例,因為這實現了單元測試的目的。 如果 Angular 測試用例過於遲緩,開發人員將不會經常實施它們——此外,單元測試用例越簡單,測試結果就越精確。
  • 測試用例不應該重複實現的邏輯。
  • 如果不接觸自然生產環境(真實的工作設備),測試結果將既不可預測也不精確。 只要代碼保持不變,測試用例的行為就應該是確定性的。 為了使測試保持確定性,質量保證人員必須在實際的瀏覽器和設備上進行,而不是在模擬器和模擬器上進行。
  • 在沙盒環境中始終如一地執行單元測試,消除任何外部依賴項。
  • 在測試服務依賴項時使用來自 Jasmine 框架的間諜。
  • 在測試組件時,最好使用 debugElement(它為主要的運行時環境提供抽象)而不是本機元素來訪問 DOM。
  • 如果您的應用位於服務器上,請使用 By.css 而不是 queryselector,因為後者僅適用於瀏覽器。
  • 確保至少覆蓋了 80% 的代碼。
  • 為測試用例實施有效的命名方案

結論

單元測試是自動化測試的必要形式; 一些專家甚至認為這是最重要的。 這代表所有編程語言和平台,包括 JavaScript。 無論您是在後端、前端框架中使用 JavaScript,還是在編寫原生 JavaScript,都需要進行單元測試。

每種測試都有多種工具可用。 選擇一個小工具,例如 HeadSpin,它可以提供最大的優勢並滿足您對各種測試的預算。

關於作者 

凱里馬托斯


{“電子郵件”:“電子郵件地址無效”,“ URL”:“網站地址無效”,“必填”:“必填字段缺失”}