translate: testing.jade to line 527

This commit is contained in:
Zhimin YE (Rex) 2016-09-20 12:02:34 +01:00
parent c3894a11af
commit 6a18dbf8e3
1 changed files with 83 additions and 0 deletions

View File

@ -305,11 +305,17 @@ table(width="100%")
An optional file that supplements the SystemJS configuration in `systemjs.config.js` with An optional file that supplements the SystemJS configuration in `systemjs.config.js` with
configuration for the specific needs of the application itself. configuration for the specific needs of the application itself.
一个可有可无的文件,用来配置应用自己特殊的需求,补充`systemjs.config.js`里面的SystemJS配置。
A stock `systemjs.config.js` can't anticipate those needs. A stock `systemjs.config.js` can't anticipate those needs.
You fill the gaps here. You fill the gaps here.
原装`systemjs.config.js`无法预测这些需求。你可以在这里填补空白。
The sample version for this chapter adds the **model barrel** The sample version for this chapter adds the **model barrel**
to the SystemJs `packages` configuration. to the SystemJs `packages` configuration.
本章例子添加了**模型封装桶**到SystemJS的`packages`配置。
tr tr
td(colspan="2") td(colspan="2")
+makeExample('testing/ts/systemjs.config.extras.js', '', 'systemjs.config.extras.js')(format='.') +makeExample('testing/ts/systemjs.config.extras.js', '', 'systemjs.config.extras.js')(format='.')
@ -317,66 +323,104 @@ table(width="100%")
:marked :marked
### npm packages ### npm packages
### npm包
The sample tests are written to run in Jasmine and karma. The sample tests are written to run in Jasmine and karma.
The two "fast path" setups added the appropriate Jasmine and karma npm packages to the The two "fast path" setups added the appropriate Jasmine and karma npm packages to the
`devDependencies` section of the `package.json`. `devDependencies` section of the `package.json`.
They were installed when you ran `npm install`. They were installed when you ran `npm install`.
例子中的测试是按照能在`Jasmine`和`Karma`中运行的规格编写的。以上两种“快速途径”配置测试环境,都在`package.json`的`devDependencies`中添加了合适的`Jasmine`和`karma`的`npm`包。
你运行`npm install`时就会安装它们。
.l-hr .l-hr
a#1st-karma-test a#1st-karma-test
:marked :marked
# The first karma test # The first karma test
# 第一个`karma`测试
Start with a simple test to make sure the setup works properly. Start with a simple test to make sure the setup works properly.
编写一个简单的测试,来确认以上的配置是否工作正常。
Create a new file called `1st.spec.ts` in the application root folder, `app/` Create a new file called `1st.spec.ts` in the application root folder, `app/`
在应用的根目录`app/`创建一个新文件,名叫`1st.spec.ts`。
.alert.is-important .alert.is-important
:marked :marked
Tests written in Jasmine are called _specs_ . Tests written in Jasmine are called _specs_ .
**The filename extension must be `.spec.ts`**, **The filename extension must be `.spec.ts`**,
the convention adhered to by `karma.conf.js` and other tooling. the convention adhered to by `karma.conf.js` and other tooling.
用Jasmine编写的测试都被叫做**specs**。**文件名后缀必须是`.spec.ts`**,这是`karma.conf.js`和其他工具所坚持和遵守的规约。
:marked :marked
**Put spec files somewhere within the `app/` folder.** **Put spec files somewhere within the `app/` folder.**
The `karma.conf.js` tells karma to look for spec files there, The `karma.conf.js` tells karma to look for spec files there,
for reasons explained [below](#spec-file-location). for reasons explained [below](#spec-file-location).
**将测试配置放到`app/`文件夹下的任何位置。**
`karma.conf.js`告诉`Karma`在这个文件夹中寻找测试配置文件,原因[如下](#spec-file-location)。
Add the following code to `app/1st.spec.ts`. Add the following code to `app/1st.spec.ts`.
添加下面的代码到`app/1st.spec.ts`。
+makeExample('testing/ts/app/1st.spec.ts', '', 'app/1st.spec.ts')(format='.') +makeExample('testing/ts/app/1st.spec.ts', '', 'app/1st.spec.ts')(format='.')
:marked :marked
## Run karma ## Run karma
## 运行`Karma`
Compile and run it in karma from the command line. Compile and run it in karma from the command line.
从命令行中编译并在`Karma`中运行上面的测试配置文件。
.l-sub-section .l-sub-section
:marked :marked
The QuickStart repo adds the following command to the `scripts` section in `package.json`. The QuickStart repo adds the following command to the `scripts` section in `package.json`.
《快速起步》库在`package.json`中的`scripts`里面添加了下列命令:
code-example(format="." language="bash"). code-example(format="." language="bash").
"test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"", "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
:marked :marked
Add that to your `package.json` if it's not there already. Add that to your `package.json` if it's not there already.
如果你的`package.json`里面没有上面的命令,那么就将上面的命令添加进去。
:marked :marked
Open a terminal or command window and enter Open a terminal or command window and enter
打开一个终端或者命令窗口,输入:
code-example(format="." language="bash"). code-example(format="." language="bash").
npm test npm test
:marked :marked
The command compiles the application and test code a first time. The command compiles the application and test code a first time.
If the compile fails, the command aborts. If the compile fails, the command aborts.
上面的命令首先编译应用及其测试代码一次。如果编译出错,命令就会终止。
If it succeeds, the command re-compiles (this time in watch mode) in one process If it succeeds, the command re-compiles (this time in watch mode) in one process
and starts karma in another. and starts karma in another.
Both processes watch pertinent files and re-run when they detect changes. Both processes watch pertinent files and re-run when they detect changes.
如果编译成功,该命令则一个进程中,在监视模式下再次编译,并在另一个进程中启动`Karma`。
两个进程都监视相关文件,并在发现变化时自动再次运行。
After a few moments, karma opens a browser ... After a few moments, karma opens a browser ...
过一会儿,`Karma`便打开浏览器...
figure.image-display figure.image-display
img(src='/resources/images/devguide/testing/karma-browser.png' style="width:400px;" alt="Karma browser") img(src='/resources/images/devguide/testing/karma-browser.png' style="width:400px;" alt="Karma browser")
:marked :marked
... and starts writing to the console. ... and starts writing to the console.
... 并开始在控制台输入信息。
Hide (don't close!) the browser and focus on the console output which should look something like this. Hide (don't close!) the browser and focus on the console output which should look something like this.
隐藏(不要关闭)浏览器,查看控制台的输出,应该看起来像这样:
code-example(format="." language="bash"). code-example(format="." language="bash").
> npm test > npm test
> tsc && concurrently "tsc -w" "karma start karma.conf.js" > tsc && concurrently "tsc -w" "karma start karma.conf.js"
@ -394,16 +438,25 @@ code-example(format="." language="bash").
Both the compiler and karma continue to run. The compiler output is preceeded by `[0]`; Both the compiler and karma continue to run. The compiler output is preceeded by `[0]`;
the karma output by `[1]`. the karma output by `[1]`.
编译器和`Karma`都会持续运行。编译器的输入信息前面有`[0]``Karma`的输出前面有`[1]`。
Change the expectation from `true` to `false`. Change the expectation from `true` to `false`.
将期望从`true`变换为`false`。
The _compiler_ watcher detects the change and recompiles. The _compiler_ watcher detects the change and recompiles.
**编译器**监视器检测到这个变化并重新编译。
code-example(format="." language="bash"). code-example(format="." language="bash").
[0] 1:49:21 PM - File change detected. Starting incremental compilation... [0] 1:49:21 PM - File change detected. Starting incremental compilation...
[0] 1:49:25 PM - Compilation complete. Watching for file changes. [0] 1:49:25 PM - Compilation complete. Watching for file changes.
:marked :marked
The _karma_ watcher detects the change to the compilation output and re-runs the test. The _karma_ watcher detects the change to the compilation output and re-runs the test.
**`Karma`**监视器检测到编译器输出的变化,并重新运行测试。
code-example(format="." language="bash"). code-example(format="." language="bash").
[1] Chrome 51.0.2704: Executed 0 of 1 SUCCESS [1] Chrome 51.0.2704: Executed 0 of 1 SUCCESS
Chrome 51.0.2704 1st tests true is true FAILED Chrome 51.0.2704 1st tests true is true FAILED
@ -413,35 +466,65 @@ code-example(format="." language="bash").
:marked :marked
It failed of course. It failed of course.
正如所料,测试结果是**失败**。
Restore the expectation from `false` back to `true`. Restore the expectation from `false` back to `true`.
Both processes detect the change, re-run, and karma reports complete success. Both processes detect the change, re-run, and karma reports complete success.
将期望从`false`恢复为`true`。两个进程都检测到这个变化,自动重新运行,`Karma`报告测试成功。
.alert.is-helpful .alert.is-helpful
:marked :marked
The console log can be quite long. Keep your eye on the last line. The console log can be quite long. Keep your eye on the last line.
It says `SUCCESS` when all is well. It says `SUCCESS` when all is well.
控制台的日志可能会非常长。注意最后一样。当一切正常时,它会显示`SUCCESS`。
If it says `FAILED`, scroll up to look for the error or, if that's too painful, If it says `FAILED`, scroll up to look for the error or, if that's too painful,
pipe the console output to a file and inspect with your favorite editor. pipe the console output to a file and inspect with your favorite editor.
如果它显示`FAILED`,往上翻查看错误。如果觉得这样太麻烦,你可以将控制台的输出内容导出到一个文件中,使用你最喜欢的编辑器查看。
code-example(format="." language="json"). code-example(format="." language="json").
npm test > spec-output.txt npm test > spec-output.txt
:marked :marked
## Test debugging ## Test debugging
## 调试测试
Debug specs in the browser in the same way you debug an application. Debug specs in the browser in the same way you debug an application.
在浏览器中,像调试应用一样调试测试配置。
- Reveal the karma browser window (hidden earlier). - Reveal the karma browser window (hidden earlier).
- 显示`Karma`的浏览器窗口(之前被隐藏了)。
- Open the browser's “Developer Tools” (F12 or Ctrl-Shift-I). - Open the browser's “Developer Tools” (F12 or Ctrl-Shift-I).
- 打开浏览器的“Developer Tools”(F12或者Ctrl-Shift-I)。
- Pick the “sources” section - Pick the “sources” section
- 选择“sources”页
- Open the `1st.spec.ts` test file (Ctrl-P, then start typing the name of the file). - Open the `1st.spec.ts` test file (Ctrl-P, then start typing the name of the file).
- 打开`1st.spec.ts`测试文件Ctrl-P, 然后输入文件名字)。
- Set a breakpoint in the test - Set a breakpoint in the test
- 在测试中设置一个断点。
- Refresh the browser … and it stops at the breakpoint. - Refresh the browser … and it stops at the breakpoint.
- 刷新浏览器...然后它就会停在断点上。
figure.image-display figure.image-display
img(src='/resources/images/devguide/testing/karma-1st-spec-debug.png' style="width:700px;" alt="Karma debugging") img(src='/resources/images/devguide/testing/karma-1st-spec-debug.png' style="width:700px;" alt="Karma debugging")
a(href="#top").to-top Back to top a(href="#top").to-top Back to top
a(href="#top").to-top 回到顶部
.l-hr .l-hr
a#atp-intro a#atp-intro