iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
Modern Web

今天我想來在 Angular 應用程式上加上測試保護 系列

測試是應用程式開發過程中必要做的事情之一,而 Angular 在整個開發過程中,可以利用 Jamsine + Karma 或是 Jest 等框架來撰寫與執行單元測試,也可以搭配 Cypress 或 Playwright 等端對端測試框架來進行 E2E 測試,Angular CLI 皆提供了完整的解決方案。這系列會介紹如何在 Angular 應用程式中,撰寫單元測試與 E2E 測試

鐵人鍊成 | 共 30 篇文章 | 9 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day 1 - 序言

應用程式的測試 測試是應用程式開發過程中必要做的事情之一,無論是使用工人化測試或自動化測試,應該不會有人會把未經過測試的應用系統直接上線至正式環境中吧。 在應用...

2022-09-16 ‧ 由 阿壹 分享
DAY 2

Day 2 - 單元測試 - 初探

前言 單元測試是在應用程式中粒度最小的測試程式,這一系列文章的一開始就先來了解什麼是單元測試。 什麼是單元測試 在開發應用程式時,常會將不同職責的實作邏輯放置於...

2022-09-17 ‧ 由 阿壹 分享
DAY 3

Day 3 - 單元測試 - Angular 測試初探

前言 前一篇大致說明了什麼是單元測試,今天就來介紹在測試 Angular 應用程式專案中,所使用的 Jasmine 以及 Karma 兩個框架。 利用 Jasm...

2022-09-18 ‧ 由 阿壹 分享
DAY 4

Day 4 - 單元測試 - 利用 Jasmine 撰寫測試案例

前言 先前兩篇介紹完了單元測試與 Angular 的測試框架,這篇開始會實際透過撰寫 Angular 服務的單元測試程式來說明 Jasmine 的常用語法。 範...

2022-09-19 ‧ 由 阿壹 分享
DAY 5

Day 5 - 單元測試 - 利用 Jasmine 驗證目標程式

前言 上一篇介紹了利用 it 與 describe 方法來撰寫與組織測試案例,今天會繼續完成下面的測試程式,看如何利用 Jasmine 提供的語法驗證目標程式...

2022-09-20 ‧ 由 阿壹 分享
DAY 6

Day 6 - 單元測試 - 測試 Angular 服務

前言 前幾篇透過 Angular 管道元件大致說明了如何利用 Jasmine 來撰寫測試案例。然而除了管道之外,Angular 應用程式還有元件 (Compon...

2022-09-21 ‧ 由 阿壹 分享
DAY 7

Day 7 - 單元測試 - 測試使用 HttpClient 的 Angular 服務

前言 上一篇說明了如何撰寫 Angular 服務的測試程式。在實務上,我們常會在 Angular 服務中,利用 HttpClient 來請求後端服務,來取得與處...

2022-09-22 ‧ 由 阿壹 分享
DAY 8

Day 8 - 單元測試 - 測試 Angular 元件 - 頁面顯示驗證

前言 先前已經針對 Angular 的管道 (Pipe) 與服務 (Server) 撰寫單元測試程式,接下來會陸陸續續說明如何撰寫 Angular 元件 (Co...

2022-09-23 ‧ 由 阿壹 分享
DAY 9

Day 9 - 單元測試 - 測試 Angular 元件 - 資料繫結測試

前言 上一篇針對頁面上固定顯示部份進行測試,但現實的需求總是複雜的,依應用程式取得的資料顯示是較常實作的需求,這一篇就來說明在這種情境下要如何撰寫測試程式。 範...

2022-09-24 ‧ 由 阿壹 分享
DAY 10

Day 10 - 單元測試 - 測試 Angular 元件 - 建立相依的假服務

前言 上一篇說明了如何撰寫在資料繫結情境的單元測試,這一篇我們把要設定給元件屬性的資料,改成透過 Angular 服務跟後端程式取得,來了解如何撰寫這種情境的測...

2022-09-25 ‧ 由 阿壹 分享