Angular 深入浅出三十天：表单与测试 Day01 - 前言

何谓表单？

维基百科是这样说的：

• 表单是一种带有空格可用於书写以及能选择和勾选相似内容的文件。

• 表单可用於填写声明、请求、命令、支票、税单。

• 网页表单可以将使用者输入的资料，传送到服务器进行处理。因为网际网路的使用者会操作核取方块、无线电钮或文字栏位来填写网页上的表格，所以网页表单的形式类似档案或资料库。

• 网页表单可应用线上上的电子商务：以信用卡订购产品、要求货运，或可用於检索资料（例如，搜寻引擎上搜寻）。

以上文字与图片皆来自於维基百科（表单与网页表单）的搜寻结果。

自古以来，表单一直都是各大商业系统里举足轻重的一部分，举凡会员注册、商品寄送、税务申请、市场调查等，各式各样大大小小的表单连结你我的生活，其中更甚者，光以表单这个服务就是足以让一间公司赖以为生。

Angular 的表单制作方法

在 Angular 里，制作表单的方法主要分成以下两种方式：

• Template Driven Forms
• Reactive Forms

Template Driven Forms

Template Driven Forms 的方式很接近前端原始写法，资料的验证与限制都是使用 HTML 原生的表单机制，只是再额外加上 Angular 的资料绑定机制与范本语法来处理，只要知道有 HTML 与 Angular 的基础即可使用，浅显易懂、学习成本低，对前端新手来说较为简单且熟悉。

但随着表单的复杂度增加，後续维护难度也会越来越高，且不易於测试与重用性较差，所以一般用於较为简单的情境。

Reactive Forms

Reactive Forms 的方式是直接用资料来创建与操作表单，较为抽象且需要对 RxJS 有基本的认知，有很多相对程序新手来说较困难、较不习惯的观念要熟悉，学习成本较高。

但因其扩充性、重用性与可测试性都很好，且就算表单的复杂度增加，後续维护的难易度也不会多高，如果表单功能是你的应用程序里很关键、重要的一块，抑或是需要处理较为复杂、动态处理的表单，那麽我相当推荐使用此方式。

何谓测试？

测试，是软件工程里很重要的一环，简单地说就是用程序来验证程序/系统/软件的实际执行结果是否与预期执行结果相符。

试想，我们平常在开发功能时，如何知道我们所写出来的程序其运作结果符合我们心中所想、符合功能需求抑或者使用者需求？

我猜想，大部分开发者的流程应该是这样：

1. 开发
2. 测试
3. 除错
4. 不断重复 1 ~ 3 直到完成开发

这样的开发流程当然没什麽太大的问题，不过俗话说得好：「人非圣贤，孰能无过。」，我们自己在测试时，非常容易就会因为各种无心、有心的关系，漏掉一些测试的案例；又或者跟别人开发时，我们不能保证别人都跟我们一样在写完程序之後都会乖乖测试，所以常常会造成改 A 坏 B ，甚至会有不符合需求的情况。

那如果我们将测试的步骤交给电脑来帮我们做会怎麽样？

我的程序启蒙老师说过一句话：「电脑很听话，你让它往东它不会往西，如果程序码有错就一定是你的错，不会是电脑的错」，所以如果把测试这件事情让电脑来做，你有几个案例它就会测几个案例，你要它测几遍他就测几遍，而且执行起来的速度比我们手动还要快太多太多，一旦有错马上就会知道，如此一来，就不会发生改 A 坏 B 的情况，使我们的程序码品质变得更好。

关於前端的测试类型，我个人认为主要有以下三种：

• 单元测试 (Unit Testing)
• 整合测试 (Integration Testing)
• E2E 测试 (End-to-end Testing)

单元测试 (Unit Testing)

测试单个类别的 function 其执行结果是否符合我们的预期。

整合测试 (Integration Testing)

测试两个以上的类别实体之间的互动是否符合我们的预期。

E2E 测试 (End-to-end Testing)

模拟使用者的操作行为来测试一个完整的 story ，验证其是否符合我们的预期。

想知道更多细节的话，可以参考保哥的文章：一次搞懂单元测试、整合测试、端对端测试之间的差异

关於本系列文

我有幸参与过一些系统的制作，因此对於如何在 Angular 制作表单还算小有心得，虽然官网已经有相关的文件，网路上的资源更是多不胜数，但系统性地学习表单制作的文章与课程相对较少，再加上一般程序初学者对於 「测试」 这件事情普遍都只是 「听说」 ，可能连看都没看过，更不用提实作了。正好我也在这个部分小有研究，也惯於撰写测试甚至乐於推广，所以我会在这个系列文里把这两个单元结合，希望可以帮到大家。

需要注意的是，本系列文不适合完全不会 Angular 的朋友，如果是您是初学者、抑或是想学习 Angular 的朋友，可以先看看我的 Angular 深入浅出三十天，直到对於 Angular 的资料绑订机制与范本语法有相当程度地了解之後，再来阅读此系列文会比较好。

本系列文将从 Angular 里最简单的表单制作方式开始分享，章节安排具体会分成三个阶段：

第一个阶段

此阶段我会个别使用 Template Driven Forms 与 Reactive Forms 来分别实作静态与动态的两种表单，并且为这两种表单撰写单元测试与整合测试，最後再从几个面向来比较这两种开发表单的方式的优缺。

这个阶段会有较大量的实作，主要是为希望大家能透过实作来了解并深刻体会这两种表单开发方式的优缺，同时也能了解并熟悉撰写测试的方式，篇幅大约是整个铁人赛的一半左右。

第二个阶段

此阶段我会介绍一些 E2E 自动化测试工具，并着重在於 Cypress 这个自动化测试工具上，并且使用它来为我们在第一个阶段所撰写的表单来撰写 E2E 测试。

经过了前面的大量实作，这阶段的篇幅不会太长，因为很多测试观念上的分享在第一个阶段就已经分享给大家，这阶段主要是让大家了解并熟悉 Cypress 与 E2E 测试的开发。

第三个阶段

最後一个阶段主要会分享一些进阶的 Reactive Forms 表单开发技巧、进阶的测试撰写技巧等较为进阶的分享，希望对大家能够有更进一步的帮助。

友情连结

这次我是跟朋友一起组队参赛的，透过团队的压力更能督促我自己一定要顺利完赛（压力山大），如果以下这些文章对你有帮助，也希望大家可以花点时间阅读：

• NestJS 带你飞！
• 花30天做个Android小专案
• Python 爬虫这样学，一定是大拇指拉！
• 做一个面试官无法拒绝的sideproject，当一个全能的前端

特别友情贵宾 VVVVVIP 热情强力推荐：

• 从 JavaScript 角度学 Python