353 lines
13 KiB
Plaintext
353 lines
13 KiB
Plaintext
include ../_util-fns
|
||
|
||
:marked
|
||
We’ll write our tests with the [Jasmine test framework](http://jasmine.github.io/2.3/introduction.html).
|
||
We’ll start by getting *some* tests to work - *any* tests at all.
|
||
|
||
我们将使用[Jasmine测试框架](http://jasmine.github.io/2.3/introduction.html)来编写测试。
|
||
先从让*某些*测试跑起来开始 —— *任何一个*测试都可以。
|
||
|
||
We will learn
|
||
|
||
我们会学到：
|
||
|
||
- basic Jasmine testing skills
|
||
|
||
- Jasmine测试的基础技能
|
||
|
||
- to run our tests in the browser
|
||
|
||
- 在浏览器里运行我们的测试
|
||
|
||
- to write simple Jasmine tests in TypeScript
|
||
|
||
- 用TypeScript编写简单的Jasmine测试
|
||
|
||
- to debug a test in the browser
|
||
|
||
- 在浏览器里调试一个测试
|
||
|
||
**Create a new project folder** perhaps called `angular2-unit-testing`.
|
||
|
||
**新建一个项目目录**，命名为`angular2-unit-testing`。
|
||
|
||
.l-main-section
|
||
:marked
|
||
## Install npm packages locally
|
||
|
||
## 本地安装npm包
|
||
|
||
Next follow all of the steps prescribed in “Install npm packages locally” of the
|
||
[QuickStart](../quickstart.html).
|
||
|
||
接下来，完成[“快速起步”](../quickstart.html)一章中“本地安装npm包”的每一步。
|
||
|
||
We’ll also add the Jasmine package via `npm`:
|
||
|
||
然后我们通过`npm`添加Jasmine包：
|
||
|
||
pre.prettyprint.lang-bash
|
||
code npm install jasmine-core --save-dev --save-exact
|
||
|
||
.alert.is-important
|
||
:marked
|
||
Be sure to install `jasmine-core` , not `jasmine`!
|
||
|
||
请确保安装的是`jasmine-core`，而不是`jasmine`！
|
||
|
||
:marked
|
||
**Create a sub-folder `src` ** for our tests and then **cd into it**.
|
||
|
||
为这次测试**新建一个子目录`src`**，然后**cd进去**。
|
||
|
||
We are going to **display and control our tests in the browser**.
|
||
|
||
我们将会**在浏览器里显示和控制这些测试**。
|
||
|
||
.l-sub-section
|
||
:marked
|
||
The browser is nice during development of a few tests. It’s not the best venue for working with a lot of tests and it won’t do at all for build automation.
|
||
We’ll switch to the karma test-runner when the time comes. But the browser will do for now.
|
||
|
||
在我们开发某些测试的过程中，浏览器很有帮助。如果要写很多测试，它并不是最佳选择，更不用说用到自动化构建中了。
|
||
等那时候我们就会切换到Karma测试运行器(test-runner)。但目前还是先用浏览器吧。
|
||
|
||
:marked
|
||
Create a new file called`unit-tests.html` and enter the following:
|
||
|
||
新建一个名叫`unit-tests.html`的文件，并输入如下内容：
|
||
|
||
+makeExample('testing/ts/unit-tests-0.html', 'no-script', 'unit-tests.html')
|
||
|
||
:marked
|
||
In the head we have three Jasmine scripts and one Jasmine css file. That’s the foundation for running any tests.
|
||
|
||
在`head`标记中有三个Jasmine脚本和一个Jasmine css文件。它们是运行任何测试的基础。
|
||
|
||
We’ll write our first test with inline JavaScript inside the body tag:
|
||
|
||
然后在`body`标记中，我们以内联JavaScript的形式编写第一个测试：
|
||
|
||
+makeExample('testing/ts/unit-tests-0.html', 'body')(format='.')
|
||
|
||
:marked
|
||
Now open `unit-tests.html` in a browser and see the Jasmine HTML test output:
|
||
|
||
现在，在浏览器中打开`unit-tests.html`，就能看到HTML格式的Jasmine测试结果：
|
||
|
||
figure.image-display
|
||
img(src='/resources/images/devguide/jasmine-testing-101/jasmine-1-spec-0-failures.png' style="height:170px;" alt="Jasmine HTML test output")
|
||
|
||
:marked
|
||
It doesn’t get much simpler than that!
|
||
|
||
这已经简单得不能再简单了。
|
||
|
||
.l-main-section
|
||
:marked
|
||
## First TypeScript Test
|
||
|
||
## 第一个TypeScript测试
|
||
|
||
Perhaps too simple. We won’t write our entire test suite inside one HTML file.
|
||
Let’s **extract** that line of test code to a **new file in `src` called `1st.spec.ts` ** .
|
||
|
||
也许简单得过头了。我们不会在HTML文件中编写测试套件。我们来把这些测试代码**提取**到**`src`目录下的新文件`1st.spec.ts`中**。
|
||
|
||
.l-sub-section
|
||
:marked
|
||
Among Jasmine developers, a test is known as a “spec” and test filenames include the word “spec”. We’ll stick with that convention.
|
||
|
||
在Jasmine开发者中，测试通常被叫做“规约(spec)”，而且测试文件的名字也会包含单词“spec”。我们也将遵循这个规则。
|
||
|
||
:marked
|
||
The test we wrote is valid TypeScript because any JavaScript is valid TypeScript. But let’s make it more modern with an arrow function:
|
||
|
||
我们写的这个测试也是一个有效的TypeScript，因为所有JavaScript都是有效的TypeScript。但TypeScript允许我们使用箭头函数来让它显得更有现代感：
|
||
|
||
+makeExample('testing/ts/1st.spec.ts', 'it', '1st.spec.ts')
|
||
|
||
:marked
|
||
Now modify `unit-tests.html` to load the script:
|
||
|
||
现在修改`unit-tests.html`以加载此脚本：
|
||
|
||
+makeExample('testing/ts/unit-tests-1.html', 'script')
|
||
|
||
:marked
|
||
Hold on! We wrote a TypeScript file but we’re loading a JavaScript file?
|
||
|
||
等等！我们刚写的明明是TypeScript文件，为何这里要加载JavaScript文件？
|
||
|
||
That’s a reminder that we need to compile our TypeScript test files as we do our TypeScript application files. Do that next.
|
||
|
||
这是提醒我们要编译TypeScript测试文件，就像编译应用程序中的TypeScript文件那样。接下来我们就做这个。
|
||
|
||
.l-main-section
|
||
:marked
|
||
## Prepare for TypeScript
|
||
|
||
## 为TypeScript做准备
|
||
|
||
As we’ve seen before, we first have to tell the compiler how to compile our TypeScript files with
|
||
a ** `tsconfig.json` **.
|
||
|
||
和以前见过的一样，我们必须用**`tsconfig.json`**文件告诉编译器如何编译我们的TypeScript文件。
|
||
|
||
We can copy one from the quickstart we wrote previously and paste it into our src sub-folder.
|
||
It should look something like this:
|
||
|
||
我们可以从“快速起步”中拷贝一个写好的，粘贴到src子目录下，就像这样：
|
||
|
||
+makeExample('testing/ts/tsconfig.1.json', null, 'tsconfig.json')
|
||
|
||
:marked
|
||
## Compile and Run
|
||
|
||
## 编译和运行
|
||
|
||
Compile in the terminal window using the npm script command
|
||
|
||
在终端窗口，使用npm脚本命令进行编译：
|
||
|
||
pre.prettyprint.lang-bash
|
||
code npm run tsc
|
||
|
||
.alert.is-helpful
|
||
:marked
|
||
Our editor and the compiler may complain that they don’t know
|
||
what `it` and `expect` are because they lack the typing files that describe Jasmine.
|
||
We can ignore those annoying complaints for now as they are harmless.
|
||
|
||
我们的编辑器和编译器可能会抱怨说它们不认识`it`和`expect`，这是因为它们缺少Jasmine的类型定义文件。
|
||
先暂且忽略这些抱怨，它们目前没有危害。
|
||
|
||
:marked
|
||
If we reload the browser, we should see the same Jasmine test-runner output as before.
|
||
|
||
如果刷新浏览器，我们就会看到跟以前一样的Jasmine测试运行器输出。
|
||
|
||
We’ll be evolving these tests rapidly and it would be nice to have the browser refresh automatically as we make changes and recompile.
|
||
|
||
我们希望这些测试能快速进化，如果浏览器能在我们做出修改和重新编译时自动刷新就好了。
|
||
|
||
Let’s launch with **live-server** in a second terminal window:
|
||
|
||
没问题，让我们在另一个终端窗口中启动**live-server**：
|
||
|
||
pre.prettyprint.lang-bash
|
||
code npm start
|
||
|
||
:marked
|
||
Now reload `unit-tests.html` in the browser
|
||
|
||
在浏览器中刷新一下`unit-tests.html`
|
||
|
||
We should get the same Jasmine test-runner output as before.
|
||
|
||
我们应该能看到跟以前一样的Jasmine测试运行器输出。
|
||
|
||
.l-main-section
|
||
:marked
|
||
## Add a describe and another test
|
||
|
||
## 添加一个describe和其它测试
|
||
|
||
We can’t tell what file produced these test results. We only have one file at the moment but soon we’ll write more.
|
||
|
||
我们并不知道是哪个文件生成了这些测试结果。虽然目前我们只有一个文件但很快就会写更多文件。
|
||
|
||
We should wrap this test into something that identifies the file. In Jasmine that “something” is a `describe` function.
|
||
Every test file should have at least one `describe` that identifies the file holding the test(s).
|
||
|
||
我们应该把这个测试包裹进一个可以标识出所属文件的东西中。在Jasmine领域，它就是`describe`函数。
|
||
每个测试文件都至少得有一个`describe`语句来标识该文件测试了什么。
|
||
|
||
Here’s what our revised `1st.spec.ts` looks like when wrapped in a `describe`:
|
||
|
||
下面是我们修改后的`1st.spec.ts`，用`describe`包裹后是这样的：
|
||
|
||
+makeExample('testing/ts/1st.spec.ts', 'describe')
|
||
|
||
:marked
|
||
And here’s how the test report displays it.
|
||
|
||
下面是测试报告的显示内容：
|
||
|
||
figure.image-display
|
||
img(src='/resources/images/devguide/jasmine-testing-101/test-report-1-spec-0-failures.png' style="height:100px;" alt="1 spec, 0 failures")
|
||
|
||
:marked
|
||
Let’s add another Jasmine test to `1st.spec.ts`
|
||
|
||
我们来向`1st.spec.ts`中添加另一个测试
|
||
|
||
+makeExample('testing/ts/1st.spec.ts', 'another-test')(format=".")
|
||
|
||
:marked
|
||
You knew that right? Let’s prove it with this test. The browser should refresh after you paste that test, and show:
|
||
|
||
你知道这个，对吧？现在让我们用这个测试来证明它。在你粘贴完那个测试后，浏览器会刷新并显示为：
|
||
|
||
figure.image-display
|
||
img(src='/resources/images/devguide/jasmine-testing-101/test-report-2-specs-0-failures.png' style="height:100px;" alt="refreshed 2 specs, 0 failures")
|
||
|
||
:marked
|
||
What does a failing test look like? Remove the `.not`. The browser refreshes and shows:
|
||
|
||
如果测试失败了会怎样？删除`.not`，浏览器会刷新并显示为：
|
||
|
||
figure.image-display
|
||
img(src='/resources/images/devguide/jasmine-testing-101/test-report-2-specs-1-failure.png' style="height:190px;" alt="failing test 2 specs, 1 failure")
|
||
|
||
:marked
|
||
Click the `Spec List` link just below “2 specs, 1 failure” to see the summary again:
|
||
|
||
点击“2 Specs, 1 failure”下面的`Spec List`链接，再看看汇总信息：
|
||
|
||
figure.image-display
|
||
img(src='/resources/images/devguide/jasmine-testing-101/spec-list-2-specs-1-failure.png' style="height:140px;" alt="2 specs, 1 failure")
|
||
|
||
:marked
|
||
We can re-run just the failing test by double-clicking it. Try it!
|
||
|
||
我们可以只重新运行那个失败的测试，双击它就可以了。试试看!
|
||
|
||
.l-main-section
|
||
:marked
|
||
## Debug the test
|
||
|
||
## 调试那个测试
|
||
|
||
Suppose we didn’t know what was going on. We can debug it in the browser.
|
||
|
||
假设我们不知道它为什么失败，就可以在浏览器中调试它。
|
||
|
||
- Open the browser’s “Developer Tools” (F12 or Ctrl-Shift-I).
|
||
|
||
- 打开浏览器的“开发者工具”(F12或者Ctrl-Shift-I)
|
||
|
||
- Pick the “sources” section
|
||
|
||
- 选择"sources"标签
|
||
|
||
- 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 on the second line of the failing test
|
||
|
||
- 在这个失败测试的第二行，设置一个断点
|
||
|
||
- Refresh the browser and it stops at our breakpoint.
|
||
|
||
- 刷新浏览器，然后它停在了我们的断点上
|
||
|
||
- Open the console window at the bottom (press Esc)
|
||
|
||
- 打开底部的console窗口(按Esc键)
|
||
|
||
- Type `null === undefined` and we should see this:
|
||
|
||
- 输入`null === undefined`...然后我们可以看到这个：
|
||
|
||
figure.image-display
|
||
img(src='/resources/images/devguide/jasmine-testing-101/null-to-equal-undefined.png' style="height:500px;" alt="null === undefined")
|
||
|
||
:marked
|
||
How about that! They really aren’t equal.
|
||
|
||
怎么样？它们真的不相等。
|
||
|
||
- remove the breakpoint (right-click in the “Breakpoints” section and chose “Remove breakpoint”)
|
||
|
||
- 移除断点(在“Breakpoints”区域，右键点击“Remove breakpoint”)
|
||
|
||
- Click the “play” icon to resume the test (or F8)
|
||
|
||
- 点“play”图标继续运行测试(或F8)
|
||
|
||
And the test finishes. Close the browser tools (click the close box or press F12 or Ctrl-Shift-I)
|
||
|
||
这样测试就算完成了。关闭浏览器工具(点击关闭图标或者按F12或Ctrl-Shift-I)
|
||
|
||
Fix the test (restore the `.not`); the browser should refresh automatically and all tests pass.
|
||
|
||
修复测试(还原`.not`)；浏览器会自动刷新，所有测试都通过了。
|
||
|
||
Congratulations, you’ve completed Jasmine testing 101.
|
||
|
||
恭喜...你完成了Jasmine测试简介。
|
||
|
||
Now that we’re familiar with Jasmine on its own, we’re ready to test an application.
|
||
|
||
现在，我们已经熟悉了Jasmine本身，接下来就要开始测试应用程序了。
|
||
|
||
<!-- TODO
|
||
.l-main-section
|
||
:marked
|
||
## Learn more
|
||
Learn more about basic Jasmine testing here
|
||
[Resources TBD](./#)
|
||
-->
|