2015-10-09 13:33:12 -04:00
include ../../../../_includes/_util-fns
:markdown
2015-10-14 23:25:19 -04:00
We’
We’
2015-10-09 13:33:12 -04:00
We will learn
- basic Jasmine testing skills
- to run our tests in the browser
- to write simple Jasmine tests in TypeScript
- to debug a test in the browser
**Create a new project folder** perhaps called `angular2-unit-testing`.
.l-main-section
:markdown
## Install npm packages locally
2015-10-14 23:25:19 -04:00
Next follow all of the steps prescribed in “Install npm packages locally” of the
[QuickStart](../quickstart.html).
2015-10-09 13:33:12 -04:00
We’
pre.prettyprint.lang-bash
code npm install jasmine-core --save-dev --save-exact
.alert.is-important
:markdown
Be sure to install `jasmine-core` , not `jasmine`!
:markdown
**Create a sub-folder `src` ** for our tests and then **cd into it**.
We are going to **display and control our tests in the browser**.
.l-sub-section
:markdown
The browser is nice during development of a few tests. It’ ’ ’
.l-main-section
:markdown
Create a new file called`unit-tests.html` and enter the following:
```
<html>
2015-10-14 23:25:19 -04:00
<head>
2015-10-09 13:33:12 -04:00
<title>1st Jasmine Tests</title>
<link rel="stylesheet" href="../node_modules/jasmine/lib/jasmine.css">
<script src="../node_modules/jasmine/lib/jasmine.js"></script>
<script src="../node_modules/jasmine/lib/jasmine-html.js"></script>
<script src="../node_modules/jasmine/lib/boot.js"></script>
</head>
<body>
</body>
</html>
```
In the head we have three Jasmine scripts and one Jasmine css file. That’
We’
2015-10-14 23:25:19 -04:00
```
<script>
it('true is true', function(){ expect(true).toEqual(true); });
</script>
```
2015-10-09 13:33:12 -04:00
Now open `unit-tests.html` in a browser and see the Jasmine HTML test output:
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")
:markdown
It doesn’
## First TypeScript Test
2015-10-14 23:25:19 -04:00
Perhaps too simple. We won’
Let’
2015-10-09 13:33:12 -04:00
.l-sub-section
:markdown
Among Jasmine developers, a test is known as a “spec” and test filenames include the word “spec”. We’
.l-main-section
:markdown
The test we wrote is valid TypeScript because any JavaScript is valid TypeScript. But let’
2015-10-14 23:25:19 -04:00
```
it('true is true', () => expect(true).toEqual(true));
```
2015-10-09 13:33:12 -04:00
Now modify `unit-tests.html` to load the script:
2015-10-14 23:25:19 -04:00
```
<script src="1st.spec.js"></script>
```
2015-10-09 13:33:12 -04:00
Hold on! We wrote a TypeScript file but we’
That’
## Prepare for TypeScript
2015-10-14 23:25:19 -04:00
As we’
a ** `tsconfig.json` **.
2015-10-09 13:33:12 -04:00
2015-10-14 23:25:19 -04:00
We can copy one from an application we wrote previously and paste it into our src sub-folder.
It should look something like this:
2015-10-09 13:33:12 -04:00
```
{
"compilerOptions": {
"target": "ES5",
"module": "commonjs",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true
}
}
```
## Compile and Run
Compile in the terminal window using the npm script command
pre.prettyprint.lang-bash
code npm run tsc
2015-10-14 23:25:19 -04:00
.alert.is-helpful
:markdown
Our editor and the compiler may complain that they don’
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.
2015-10-09 13:33:12 -04:00
:markdown
If we reload the browser, we should see the same Jasmine test-runner output as before.
2015-10-14 23:25:19 -04:00
We’
2015-10-09 13:33:12 -04:00
Let’
pre.prettyprint.lang-bash
code npm start
:markdown
Now navigate to `1st-tests.html`
We should get the same Jasmine test-runner output as before.
## Add a describe and another test
We can’ ’
We should wrap this test 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).
2015-10-14 23:25:19 -04:00
Here’
```
describe('1st tests', () => {
2015-10-09 13:33:12 -04:00
2015-10-14 23:25:19 -04:00
it('true is true', () => expect(true).toEqual(true));
2015-10-09 13:33:12 -04:00
2015-10-14 23:25:19 -04:00
});
```
2015-10-09 13:33:12 -04:00
And here’
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")
:markdown
Let’
2015-10-14 23:25:19 -04:00
```
it('null is not the same thing as undefined',
() => expect(null).not.toEqual(undefined)
);
```
2015-10-09 13:33:12 -04:00
You knew that right? Let’
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")
:markdown
What does a failing test look like? Remove the `.not`. The browser refreshes and shows:
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")
:markdown
Click the `Spec List` link just below “2 specs, 1 failure” to see the summary again:
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")
:markdown
We can re-run just the failing test by double-clicking it. Try it!
## Debug the test
Suppose we didn’
- Open the browser’
- Pick the “sources” section
- Open the `1st.spec.ts` test file (Ctrl-P, then start typing the name of the file).
- 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)
- Type `null === undefined` … … and we should see this:
figure.image-display
img(src='/resources/images/devguide/jasmine-testing-101/null-to-equal-undefined.png' style="height:500px;" alt="null === undefined")
:markdown
How about that! They really aren’
- remove the breakpoint (right-click in the “Breakpoints” section and chose “Remove breakpoint”)
- Click the “play” icon to resume the test (or F8)
And the test finishes. Close the browser tools (click the close box or press F12 or Ctrl-Shift-I)
Fix the test (restore the `.not`); the browser should refresh automatically and all tests pass.
Congratulations … you’
## Learn more
Learn more about basic Jasmine testing here
[Resources TBD](./#)
## What’
Now that we’ ’
What application? We introduce you to that app in the next chapter.
