# 【學習筆記】Angular 深入淺出三十天：表單與測試

每日閱讀：
+ [Angular 深入淺出三十天：表單與測試 系列](https://ithelp.ithome.com.tw/users/20090728/ironman/3881)
+ [用30天深入Angular 5的世界 系列](https://ithelp.ithome.com.tw/users/20107113/ironman/1240)

---

[TOC]

---

## Day01 - 前言：在測試前，先來談談 Angular 表單

在 Angular 中，表單機制是不可或缺的一環，而製作表單的方式可分為兩種：

+ Template Driven Forms 範本驅動表單
+ Reactive Forms 響應式表單

### Template Driven Forms

+ HTML 原生的表單機制
+ 非同步處理
+ 需引入 FormsModule
+ 只能進行 E2E 測試
+ 重用性差，維護成本較高

### Reactive Forms

+ 以資料流的方式建構表單
+ 可降低表單與 template 之間的相依性
+ 同步處理
+ 需引入 ReactiveFormsModule
+ 重用性、擴充性、可測試性較佳

> 延伸閱讀：[[功能介紹-10] Reactive Forms (Model-Driven Forms) ](https://ithelp.ithome.com.tw/articles/10195280)

### 所以，什麼是測試？

在軟體開發中，流程不外乎是「開發、測試、修復」。如果仰賴人工測試，仍可能會遺漏一些未設想過的情境，一旦專案變得更龐大複雜，後續維護也會更加困難，這時就凸顯「寫測試」的重要性。

而測試類型又可分為以下三種：

+ 單元測試（Unit Testing）：以程式碼的最小單位 function 進行測試
+ 整合測試（Integration Testing）：針對模組與模組之間的互動行為進行測試
+ 端對端測試（End-to-end Testing）：模擬使用者的操作行為，對真實系統進行測試

> 延伸閱讀：[一次搞懂單元測試、整合測試、端對端測試之間的差異](https://blog.miniasp.com/post/2019/02/18/Unit-testing-Integration-testing-e2e-testing)

---

## Day02 - Template Driven Forms 實作

接著以 Template Driven Forms 方式實作一個登入系統，可參考：[Leo 的程式碼範例](https://stackblitz.com/edit/angular-template-driven-forms-sample-login?file=src/app/app.component.ts)。

### 需求規格

+ 帳號
+ 必填欄位
+ 格式為 Email Address
+ 使用正規表示法 `/^\b[\w\.-]+@[\w\.-]+\.\w{2,4}\b$/gi` 檢驗
+ 密碼
+ 必填欄位
+ 動態檢查
+ 驗證有誤時，按鈕狀態為 disabled

### 範例補充

+ `required`
+ HTML 的原生屬性
+ 在 `<inpit>` 加上此屬性，即被視為必填欄位
+ `pattern`
+ HTML 的原生屬性
+ 檢查欄位格式，可搭配「正規表達式」進行檢查
+ `minlength ＆ maxlength`
+ HTML 的原生屬性
+ 檢核字數長度
+ `disabled`
+ 使 `<button>` 按鈕無效
+ 例如：`[disabled]="form.invalid"`
+ 表單物件 NgModel、NgForm
+ 使用時須引入 `FormsModule`
+ 可搭配 ValidationErrors 顯示對應錯誤訊息

> 延伸閱讀：[官網教學-建構範本驅動表單](https://angular.tw/guide/forms)

---

## Day03 - Reactive Forms 實作

同樣以 Reactive Forms 方式實作一個登入系統，可參考：[Leo 的程式碼範例](https://stackblitz.com/edit/angular-template-driven-forms-sample-login?file=src/app/app.component.ts)。

### 表單物件

+ 表單物件包含：FormBuilder、FormGroup、FormControl
+ 這三種均繼承 AbstractControl 抽象類別
+ 使用時須引入 `FormsModule` 和 `ReactiveFormsModule`
+ 可搭配 `ValidationErrors` 顯示對應錯誤訊息

初始化表單範例如下：

ngOnInit(): void {
  // FormGroup
  this.formGroup = this.formBuilder.group({
    // FormControl
    account: [
      'value',
      [
        Validators.required,
        Validators.pattern(/^\b[\w\.-]+@[\w\.-]+\.\w{2,4}\b$/gi)
      ]
    ],
    // FormControl
    password: [
      'value',
      [
        Validators.required,
        Validators.minLength(8), 
        Validators.maxLength(16),
      ],
    ],
  });
}

### FormControl 屬性

+ `pristine`：代表該欄位沒有被輸入過值
+ `touched`：代表該欄位曾經被 focus 碰過
+ `dirty`：代表該欄位曾經被輸入過值，與 pristine 相反

> 延伸閱讀：
> [官網教學-建構響應式表單](https://angular.tw/guide/reactive-forms)、[AbstractControl](https://angular.tw/api/forms/AbstractControl)、[響應式表單 API 彙總](https://angular.tw/guide/reactive-forms#reactive-forms-api)

---

## Day04 - 認識 Angular 測試框架：Jasmine & Karma

### 初探 Jasmine & Karma

Angular 內建的單元測試組合為 Jasmine & Karma：

+ [Jasmine](https://jasmine.github.io/)：JavaScript 單元測試框架
+ [Karma](https://karma-runner.github.io/latest/index.html)：一款基於 Node.js 的 JavaScript 測試執行過程管理工具（Test Runner），能夠快速建構測試環境

### 檔案架構

+ 測試檔案命名方式： `xxx.spec.js`
+ `it`：測試案例（Test Case）
+ `describe`：測試集合（Test Suite）
+ 作用域（Scoping）

> 延伸閱讀：
> [Angular 官方文件：測試](https://angular.tw/guide/testing)

---

## Day05 -