Angular 入门教程系列：42：单元测试与端到端测试
Angular Cli提供ng test和ng e2e进行单元测试，在这篇文章中首先通过具体的示例来直观感受一下使用方式。
事前准备
环境准备
liumiaocn:~ liumiao$ npm -v
6.4.1
liumiaocn:~ liumiao$ node -v
v10.15.3
liumiaocn:~ liumiao$ ng --version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 8.3.8
Node: 10.15.3
OS: darwin x64
Angular:
...
Package Version
------------------------------------------------------
@angular-devkit/architect 0.803.8
@angular-devkit/core 8.3.8
@angular-devkit/schematics 8.3.8
@schematics/angular 8.3.8
@schematics/update 0.803.8
rxjs 6.4.0
liumiaocn:~ liumiao$
demo工程准备
使用如下2步即可完成demo工程的准备
- 步骤1: 执行ng new demo --style less命令创建名为demo的工程
- 步骤2: cd demo && npm install && npm run build 安装依赖并进行构建
单元测试
执行单元测试
ng test实际上是Angular提供的单元测试方法，其背后是Jasmine、Karma与Angular提供的测试功能比如TestBed等。而在Angluar Cli所生成的应用框架中这些都已经配置完毕，比如关于Karma，在demo工程的根目录你可以找到一个名为karma.conf.js的文件，这个就是Karma的配置文件。
执行命令：ng test
liumiaocn:demo liumiao$ ng test
30% building 16/16 modules 0 active29 10 2019 06:33:33.649:WARN [karma]: No captured browser, open http://localhost:9876/
29 10 2019 06:33:33.804:INFO [karma-server]: Karma v4.1.0 server started at http://0.0.0.0:9876/
29 10 2019 06:33:33.804:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
29 10 2019 06:33:33.809:INFO [launcher]: Starting browser Chrome
29 10 2019 06:33:37.451:WARN [karma]: No captured browser, open http://localhost:9876/
29 10 2019 06:33:37.553:INFO [Chrome 77.0.3865 (Mac OS X 10.14.0)]: Connected on socket QzwGiVlFPVmqt6QKAAAA with id 77767428
Chrome 77.0.3865 (Mac OS X 10.14.0): Executed 3 of 3 SUCCESS (0.368 secs / 0.314 secs)
TOTAL: 3 SUCCESS
TOTAL: 3 SUCCESS
通过ng test执行可以看到上述的执行日志，缺省在9876端口通过Karma打开Chrome的浏览器显示实时的测试结果
这种方式的好处就是可以检测测试文件的变化，并可以通过选择所需要的测试用例进行手工执行，在写单体测试用例等阶段非常有用。当然也可通过设定karma的设定文件或者通过ng test进行参数的传递，比如可以通过指定single-run为true（缺省状态下为false），结合无头方式的Chrome等，即可实现将前端框架的单体测试加入到持续集成实践之中。在后续的内容中将进一步展开。
获取单元测试覆盖率
通过如下命令可以获取单元测试的覆盖率
执行命令: ng test --code-coverage
liumiaocn:demo liumiao$ ng test --code-coverage
30% building 12/12 modules 0 active29 10 2019 06:43:49.486:WARN [karma]: No captured browser, open http://localhost:9876/
29 10 2019 06:43:49.628:INFO [karma-server]: Karma v4.1.0 server started at http://0.0.0.0:9876/
29 10 2019 06:43:49.629:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
29 10 2019 06:43:49.631:INFO [launcher]: Starting browser Chrome
29 10 2019 06:43:54.228:WARN [karma]: No captured browser, open http://localhost:9876/
29 10 2019 06:43:54.363:INFO [Chrome 78.0.3904 (Mac OS X 10.14.0)]: Connected on socket 3ZmfRRKlLYvWCOsnAAAA with id 22498255
Chrome 78.0.3904 (Mac OS X 10.14.0): Executed 3 of 3 SUCCESS (0.364 secs / 0.309 secs)
TOTAL: 3 SUCCESS
TOTAL: 3 SUCCESS
TOTAL: 3 SUCCESS
=============================== Coverage summary ===============================
Statements : 100% ( 6/6 )
Branches : 100% ( 0/0 )
Functions : 100% ( 1/1 )
Lines : 100% ( 5/5 )
================================================================================
可以看到在命令执行的目录，生成了一个名为coverage的目录，其目录结构和文件信息如下所示：
liumiaocn:demo liumiao$ ls
README.md browserslist e2e node_modules package.json tsconfig.app.json tsconfig.spec.json
angular.json coverage karma.conf.js package-lock.json src tsconfig.json tslint.json
liumiaocn:demo liumiao$ tree coverage/
coverage/
└── demo
├── base.css
├── block-navigation.js
├── index.html
├── lcov.info
├── prettify.css
├── prettify.js
├── sort-arrow-sprite.png
├── sorter.js
└── src
├── app
│ ├── app.component.ts.html
│ └── index.html
├── index.html
├── polyfills.ts.html
└── test.ts.html
3 directories, 13 files
liumiaocn:demo liumiao$
通过lcov.info则可以看到覆盖率的基本信息，这个文件诸如SonarQube之类的工具都可以进行解析，从而进行整体覆盖率的分析，类似与Java中的JaCoCo。
liumiaocn:demo liumiao$ cat coverage/demo/lcov.info
TN:
SF:/Users/liumiao/Desktop/demo/src/polyfills.ts
FNF:0
FNH:0
LF:0
LH:0
BRF:0
BRH:0
end_of_record
TN:
SF:/Users/liumiao/Desktop/demo/src/test.ts
FNF:0
FNH:0
DA:13,1
DA:18,1
DA:20,1
LF:3
LH:3
BRF:0
BRH:0
end_of_record
TN:
SF:/Users/liumiao/Desktop/demo/src/app/app.component.ts
FN:3,(anonymous_0)
FNF:1
FNH:1
FNDA:3,(anonymous_0)
DA:8,1
DA:9,3
LF:2
LH:2
BRF:0
BRH:0
end_of_record
liumiaocn:demo liumiao$
而index.html则记录的测试执行的结果信息
确认某一个文件的覆盖率的详细信息
端到端测试
ng e2e是Angular提供的端到端的测试方法，其背后是Jasmine与Protractor。通过执行ng e2e即可执行，在Angluar Cli生成的demo工程的根目下有Protractor的配置文件等，缺省已经设定完毕可以直接使用。
liumiaocn:demo liumiao$ tree e2e
e2e
├── protractor.conf.js
├── src
│ ├── app.e2e-spec.ts
│ └── app.po.ts
└── tsconfig.json
1 directory, 4 files
liumiaocn:demo liumiao$
执行命令：ng e2e
执行日志如下所示：
liumiaocn:demo liumiao$ ng e2e
[07:21:48] I/file_manager - creating folder /Users/liumiao/Desktop/demo/node_modules/protractor/node_modules/webdriver-manager/selenium
[07:21:48] I/config_source - curl -o/Users/liumiao/Desktop/demo/node_modules/protractor/node_modules/webdriver-manager/selenium/chrome-response.xml https://chromedriver.storage.googleapis.com/
[07:21:50] I/downloader - curl -o/Users/liumiao/Desktop/demo/node_modules/protractor/node_modules/webdriver-manager/selenium/chromedriver_78.0.3904.70.zip https://chromedriver.storage.googleapis.com/78.0.3904.70/chromedriver_mac64.zip
[07:21:52] I/update - chromedriver: unzipping chromedriver_78.0.3904.70.zip
[07:21:52] I/update - chromedriver: setting permissions to 0755 for /Users/liumiao/Desktop/demo/node_modules/protractor/node_modules/webdriver-manager/selenium/chromedriver_78.0.3904.70
10% building 3/3 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: 404s will fallback to //index.html
chunk {main} main.js, main.js.map (main) 49.4 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 264 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 9.86 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 4.08 MB [initial] [rendered]
Date: 2019-10-28T23:22:00.662Z - Hash: 5b344b0380a15663b9d3 - Time: 6030ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ ｢wdm｣: Compiled successfully.
[07:22:01] I/launcher - Running 1 instances of WebDriver
[07:22:01] I/direct - Using ChromeDriver directly...
Jasmine started
[07:22:04] W/element - more than one element found for locator By(css selector, app-root .content span) - the first result will be used
workspace-project App
✓ should display welcome message
Executed 1 of 1 spec SUCCESS in 0.772 sec.
[07:22:04] I/launcher - 0 instance(s) of WebDriver still running
[07:22:04] I/launcher - chrome #01 passed
liumiaocn:demo liumiao$
从上面的执行日志以及执行的过程可以清楚地确认到，Protractor也是通过selenium来进行的测试，最终通过chromedriver来实现的，在执行的开始阶段也确认了这一内容。