通过Angular CLI来体验Angular的单元测试和端到端测试

2 年 ago

科, 雅

2 minutes

背景 –

我要用 Angular2 进行测试。

目标读者

ひとまず最短距離で体験したい

环境

Angular 2.x.x

无论如何都要试一试。

我会尝试以最短的距离进行测试，而不考虑任何困难。

# Angular CLIをインストールする
npm install -g angular-cli

# サンプルプロジェクトを作る
ng new sample-app

# テストを実行する
ng test

我成功执行了。

11 02 2017 18:45:43.190:INFO [karma]: Karma v1.2.0 server started at http://localhost:9876/
11 02 2017 18:45:43.190:INFO [launcher]: Launching browser Chrome with unlimited concurrency
11 02 2017 18:45:43.234:INFO [launcher]: Starting browser Chrome
11 02 2017 18:45:44.759:INFO [Chrome 56.0.2924 (Mac OS X 10.11.6)]: Connected on socket /#ltE8vCyepqLMUYIcAAAA with
id 70346204
Chrome 56.0.2924 (Mac OS X 10.11.6): Executed 3 of 3 SUCCESS (0.413 secs / 0.398 secs)

ng new 和 ng test 分别做了什么？

创建一个新项目

按照推荐的文件结构来创建项目的模板。以下是生成的文件集（略去了很多node_modules）。

~/sample-app (master)$ tree ./ -I node_modules
./
|-- README.md
|-- angular-cli.json
|-- e2e
|   |-- app.e2e-spec.ts
|   |-- app.po.ts
|   `-- tsconfig.json
|-- karma.conf.js
|-- package.json
|-- protractor.conf.js
|-- src
|   |-- app
|   |   |-- app.component.css
|   |   |-- app.component.html
|   |   |-- app.component.spec.ts
|   |   |-- app.component.ts
|   |   `-- app.module.ts
|   |-- assets
|   |-- environments
|   |   |-- environment.prod.ts
|   |   `-- environment.ts
|   |-- favicon.ico
|   |-- index.html
|   |-- main.ts
|   |-- polyfills.ts
|   |-- styles.css
|   |-- test.ts
|   `-- tsconfig.json
`-- tslint.json

我测试

使用 Karma 运行单元测试。对于这个例子来说，是指 app.component.spec.ts。

进行端到端测试

因为听说有一个叫e2e的命令，所以会输入这个命令。

ng e2e

我做错了什么。

1) sample-app App should display message saying app works
  - Failed: Angular could not be found on the page http://localhost:4200/. If this is not an Angular application, yo
u may need to turn off waiting for Angular. Please see https://github.com/angular/protractor/blob/master/docs/timeou
ts.md#waiting-for-angular-on-page-load

在页面http://localhost:4200/上找不到Angular。

由于有人这样说，似乎应该启动Angular应用程序并使其可访问。这也可以使用 ng serve 实现。

ng serve

确认在localhost:4200上启动后（会有类似的日志输出），再次输入e2e命令。

ng e2e

考试通过了，真开心呀。

> sample-app@0.0.0 pree2e /Users/gaaamii/sample-app
> webdriver-manager update --standalone false --gecko false

[19:07:18] I/update - chromedriver: file exists /Users/gaaamii/sample-app/node_modules/protractor/node_modules/w
ebdriver-manager/selenium/chromedriver_2.26mac64.zip
[19:07:18] I/update - chromedriver: unzipping chromedriver_2.26mac64.zip
[19:07:18] I/update - chromedriver: setting permissions to 0755 for /Users/gaaamii/sample-app/node_modules/protr
actor/node_modules/webdriver-manager/selenium/chromedriver_2.26
[19:07:18] I/update - chromedriver: v2.26 up to date

> sample-app@0.0.0 e2e /Users/gaaamii/sample-app
> protractor "./protractor.conf.js"

[19:07:19] I/direct - Using ChromeDriver directly...
[19:07:19] I/launcher - Running 1 instances of WebDriver
Spec started

  sample-app App
    ✓ should display message saying app works

Executed 1 of 1 spec SUCCESS in 0.925 sec.
[19:07:21] I/launcher - 0 instance(s) of WebDriver still running
[19:07:21] I/launcher - chrome #01 passed

All end-to-end tests pass.

详细

Testing – ts – GUIDE