You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: public/docs/ts/latest/testing/first-app-tests.jade
+34-34Lines changed: 34 additions & 34 deletions
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,7 @@
1
1
include../../../../_includes/_util-fns
2
2
3
3
:marked
4
-
In this chapter we’ll setup the environment for testing our sample application and write a few easy Jasmine tests of the app’s simplest parts.
4
+
In this chapter we'll setup the environment for testing our sample application and write a few easy Jasmine tests of the app's simplest parts.
5
5
We'll learn:
6
6
- to test one of our application classes
7
7
- why we prefer our test files to be next to their corresponding source files
@@ -44,14 +44,14 @@ include ../../../../_includes/_util-fns
44
44
</html>
45
45
```
46
46
47
-
We’re picking up right where we left off. All we’ve done is change the title.
47
+
We're picking up right where we left off. All we've done is change the title.
48
48
49
49
.l-main-section
50
50
:marked
51
51
## Update `package.json` for testing
52
52
53
-
We’ll assume that the application has `package.json` file that looks more or less like
54
-
the one we prescribed in the in the “Install npm packages locally” section of the
53
+
We'll assume that the application has `package.json` file that looks more or less like
54
+
the one we prescribed in the in the "Install npm packages locally" section of the
55
55
[QuickStart](../quickstart.html).
56
56
57
57
We must install the Jasmine package as well:
@@ -62,7 +62,7 @@ pre.prettyprint.lang-bash
62
62
.alert.is-important Be sure to install <code>jasmine-core</code> , not <code>jasmine</code>!
63
63
64
64
:marked
65
-
Let’s make one more change to the `package.json` script commands.
65
+
Let's make one more change to the `package.json` script commands.
66
66
67
67
**Open the `package.json` ** and scroll to the `scripts` node. Look for the command named `test`. Change it to:
68
68
@@ -96,16 +96,16 @@ pre.prettyprint.lang-bash
96
96
}
97
97
```
98
98
99
-
Let’s add a couple of simple tests in the `<body>` element.
99
+
Let's add a couple of simple tests in the `<body>` element.
100
100
101
-
First, we’ll load the JavaScript file that defines the `Hero` class.
101
+
First, we'll load the JavaScript file that defines the `Hero` class.
102
102
103
103
```
104
104
<!-- load the application's Hero definition -->
105
105
<script src="app/hero.js"></script>
106
106
```
107
107
108
-
Next, we’ll add an inline script element with the `Hero`tests themselves
108
+
Next, we'll add an inline script element with the `Hero`tests themselves
109
109
110
110
```
111
111
<script>
@@ -126,7 +126,7 @@ pre.prettyprint.lang-bash
126
126
</script>
127
127
```
128
128
129
-
That’s the basic Jasmine we learned back in “Jasmine 101”.
129
+
That's the basic Jasmine we learned back in "Jasmine 101".
130
130
131
131
Notice that we surrounded our tests with ** `describe('Hero')` **.
132
132
@@ -152,13 +152,13 @@ figure.image-display
152
152
:marked
153
153
## Critique
154
154
155
-
Is this `Hero` class even worth testing? It’s essentially a property bag with almost no logic. Maybe we should have tested the cloning feature. Maybe we should have tested id generation. We didn’t bother because there wasn’t much to learn by doing that.
155
+
Is this `Hero` class even worth testing? It's essentially a property bag with almost no logic. Maybe we should have tested the cloning feature. Maybe we should have tested id generation. We didn't bother because there wasn't much to learn by doing that.
156
156
157
-
It’s more important to take note of the `//Demo only` comment in the `unit-tests.html`.
157
+
It's more important to take note of the `//Demo only` comment in the `unit-tests.html`.
158
158
159
-
** We’ll never write real tests in the HTML this way**. It’s nice that we can write *some* of our application tests directly in the HTML. But dumping all of our tests into HTML is not sustainable and even if we didn’t mind that approach, we could only test a tiny fraction of our app this way.
159
+
** We'll never write real tests in the HTML this way**. It's nice that we can write *some* of our application tests directly in the HTML. But dumping all of our tests into HTML is not sustainable and even if we didn't mind that approach, we could only test a tiny fraction of our app this way.
160
160
161
-
We need to relocate these tests to a separate file. Let’s do that next.
161
+
We need to relocate these tests to a separate file. Let's do that next.
162
162
163
163
.l-main-section
164
164
:marked
@@ -173,17 +173,17 @@ figure.image-display
173
173
- When we move the source (inevitable), we remember to move the test.
174
174
- When we rename the source file (inevitable), we remember to rename the test file.
175
175
176
-
We can’t think of a downside. The server doesn’t care where they are. They are easy to find and distinguish from application files when named conventionally.
176
+
We can't think of a downside. The server doesn't care where they are. They are easy to find and distinguish from application files when named conventionally.
177
177
178
-
You may put your tests elsewhere if you wish. We’re putting ours inside the app, next to the source files that they test.
178
+
You may put your tests elsewhere if you wish. We're putting ours inside the app, next to the source files that they test.
179
179
180
180
.l-main-section
181
181
:marked
182
182
## First spec file
183
183
184
184
**Create** a new file, ** `hero.spec.ts` ** in `src/app` next to `hero.ts`.
185
185
186
-
Notice the “.spec” suffix in the test file’s filename, appended to the name of the file holding the application part we’re testing.
186
+
Notice the ".spec" suffix in the test file's filename, appended to the name of the file holding the application part we're testing.
187
187
188
188
.alert.is-important All of our unit test files follow this .spec naming pattern.
189
189
@@ -208,13 +208,13 @@ figure.image-display
208
208
209
209
```
210
210
211
-
### Import the part we’re testing
211
+
### Import the part we're testing
212
212
213
213
During our conversion to TypeScript, we added an `import {Hero} from './hero' ` statement.
214
214
215
-
If we forgot this import, a TypeScript-aware editor would warn us, with a squiggly red underline, that it can’t find the definition of the `Hero` class.
215
+
If we forgot this import, a TypeScript-aware editor would warn us, with a squiggly red underline, that it can't find the definition of the `Hero` class.
216
216
217
-
TypeScript doesn’t know what a `Hero` is. It doesn’t know about the script tag back in the `unit-tests.html` that loads the `hero.js` file.
217
+
TypeScript doesn't know what a `Hero` is. It doesn't know about the script tag back in the `unit-tests.html` that loads the `hero.js` file.
218
218
219
219
### Update unit-tests.html
220
220
@@ -231,9 +231,9 @@ figure.image-display
231
231
img(src='/resources/images/devguide/first-app-tests/Jasmine-not-running-tests.png'style="width:400px;"alt="Jasmine not running any tests")
232
232
233
233
:marked
234
-
That’s Jasmine saying “**things are _so_ bad that _I’m not running any tests_.**”
234
+
That's Jasmine saying "**things are _so_ bad that _I'm not running any tests_.**"
235
235
236
-
Open the browser’s Developer Tools (F12, Ctrl-Shift-i). There’s an error:
236
+
Open the browser's Developer Tools (F12, Ctrl-Shift-i). There's an error:
0 commit comments