Skip to content

Commit e33c365

Browse files
jodytatepetebacondarwin
authored andcommitted
docs(guide/unit-testing): minor style and grammar changes
Closes angular#5057
1 parent e3ceb50 commit e33c365

File tree

1 file changed

+49
-50
lines changed

1 file changed

+49
-50
lines changed

docs/content/guide/dev_guide.unit-testing.ngdoc

+49-50
Original file line numberDiff line numberDiff line change
@@ -13,45 +13,44 @@ Unit testing as the name implies is about testing individual units of code. Unit
1313
answer questions such as "Did I think about the logic correctly?" or "Does the sort function order the list
1414
in the right order?"
1515

16-
In order to answer such question it is very important that we can isolate the unit of code under test.
16+
In order to answer such a question it is very important that we can isolate the unit of code under test.
1717
That is because when we are testing the sort function we don't want to be forced into creating
1818
related pieces such as the DOM elements, or making any XHR calls in getting the data to sort.
1919

20-
While
21-
this may seem obvious it usually is very difficult to be able to call an individual function on a
22-
typical project. The reason is that the developers often mix concerns, and they end up with a
23-
piece of code which does everything. It reads the data from XHR, it sorts it and then it
20+
While this may seem obvious it can be very difficult to call an individual function on a
21+
typical project. The reason is that the developers often mix concerns resulting in a
22+
piece of code which does everything. It makes an XHR request, it sorts the response data and then it
2423
manipulates the DOM.
2524

2625
With Angular we try to make it easy for you to do the right thing, and so we
27-
provide dependency injection for your XHR (which you can mock out) and we created abstraction which
26+
provide dependency injection for your XHR (which you can mock out) and we created abstractions which
2827
allow you to sort your model without having to resort to manipulating the DOM. So that in the end,
2928
it is easy to write a sort function which sorts some data, so that your test can create a data set,
3029
apply the function, and assert that the resulting model is in the correct order. The test does not
31-
have to wait for XHR, or create the right kind of DOM, or assert that your function has mutated the
32-
DOM in the right way.
30+
have to wait for the XHR response to arrive, create the right kind of test DOM, nor assert that your
31+
function has mutated the DOM in the right way.
3332

3433
## With great power comes great responsibility
3534

36-
Angular is written with testability in mind, but it still requires that you
37-
do the right thing. We tried to make the right thing easy, but Angular is not magic, which means if
38-
you don't follow these guidelines you may very well end up with an untestable application.
35+
Angular is written with testability in mind, but it still requires that you do the right thing.
36+
We tried to make the right thing easy, but Angular is not magic. If you don't follow these guidelines
37+
you may very well end up with an untestable application.
3938

4039
## Dependency Injection
41-
There are several ways in which you can get a hold of a dependency:
42-
1. You could create it using the `new` operator.
43-
2. You could look for it in a well known place, also known as global singleton.
44-
3. You could ask a registry (also known as service registry) for it. (But how do you get a hold of
45-
the registry? Most likely by looking it up in a well known place. See #2)
46-
4. You could expect that it be handed to you.
40+
There are several ways in which you can get a hold of a dependency. You can:
41+
1. Create it using the `new` operator.
42+
2. Look for it in a well-known place, also known as a global singleton.
43+
3. Ask a registry (also known as service registry) for it. (But how do you get a hold of
44+
the registry? Most likely by looking it up in a well known place. See #2.)
45+
4. Expect it to be handed to you.
4746

4847
Out of the four options in the list above, only the last one is testable. Let's look at why:
4948

5049
### Using the `new` operator
5150

52-
While there is nothing wrong with the `new` operator fundamentally the issue is that calling a new
53-
on a constructor permanently binds the call site to the type. For example lets say that we are
54-
trying to instantiate an `XHR` so that we can get some data from the server.
51+
While there is nothing wrong with the `new` operator fundamentally, a problem arises when calling `new`
52+
on a constructor. This permanently binds the call site to the type. For example, lets say that we try to
53+
instantiate an `XHR` that will retrieve data from the server.
5554

5655
<pre>
5756
function MyClass() {
@@ -64,12 +63,12 @@ function MyClass() {
6463
}
6564
</pre>
6665

67-
The issue becomes that in tests, we would very much like to instantiate a `MockXHR` which would
66+
A problem surfaces in tests when we would like to instantiate a `MockXHR` that would
6867
allow us to return fake data and simulate network failures. By calling `new XHR()` we are
69-
permanently bound to the actual XHR, and there is no good way to replace it. Yes there is monkey
70-
patching. That is a bad idea for many reasons which are outside the scope of this document.
68+
permanently bound to the actual XHR and there is no way to replace it. Yes, we could monkey
69+
patch, but that is a bad idea for many reasons which are outside the scope of this document.
7170

72-
The class above is hard to test since we have to resort to monkey patching:
71+
Here's an example of how the class above becomes hard to test when resorting to monkey patching:
7372
<pre>
7473
var oldXHR = XHR;
7574
XHR = function MockXHR() {};
@@ -81,7 +80,7 @@ XHR = oldXHR; // if you forget this bad things will happen
8180

8281

8382
### Global look-up:
84-
Another way to approach the problem is to look for the service in a well known location.
83+
Another way to approach the problem is to look for the service in a well-known location.
8584

8685
<pre>
8786
function MyClass() {
@@ -95,14 +94,14 @@ function MyClass() {
9594
}
9695
</pre>
9796

98-
While no new instance of the dependency is being created, it is fundamentally the same as `new`, in
99-
that there is no good way to intercept the call to `global.xhr` for testing purposes, other then
97+
While no new dependency instance is created, it is fundamentally the same as `new` in
98+
that no way exists to intercept the call to `global.xhr` for testing purposes, other then
10099
through monkey patching. The basic issue for testing is that a global variable needs to be mutated in
101-
order to replace it with call to a mock method. For further explanation why this is bad see: {@link
100+
order to replace it with call to a mock method. For further explanation of why this is bad see: {@link
102101
http://misko.hevery.com/code-reviewers-guide/flaw-brittle-global-state-singletons/ Brittle Global
103102
State & Singletons}
104103

105-
The class above is hard to test since we have to change global state:
104+
The class above is hard to test since we have to change the global state:
106105
<pre>
107106
var oldXHR = global.xhr;
108107
global.xhr = function mockXHR() {};
@@ -115,7 +114,7 @@ global.xhr = oldXHR; // if you forget this bad things will happen
115114

116115
### Service Registry:
117116

118-
It may seem as that this can be solved by having a registry for all of the services, and then
117+
It may seem that this can be solved by having a registry of all the services and then
119118
having the tests replace the services as needed.
120119

121120
<pre>
@@ -131,12 +130,12 @@ function MyClass() {
131130
}
132131
</pre>
133132

134-
However, where does the serviceRegistry come from? if it is:
135-
* `new`-ed up, the test has no chance to reset the services for testing
136-
* global look-up, then the service returned is global as well (but resetting is easier, since
137-
there is only one global variable to be reset).
133+
However, where does the serviceRegistry come from? If it is:
134+
* `new`-ed up, the test has no chance to reset the services for testing.
135+
* a global look-up then the service returned is global as well (but resetting is easier, since
136+
only one global variable exists to be reset).
138137

139-
The class above is hard to test since we have to change global state:
138+
The class above is hard to test since we have to change the global state:
140139
<pre>
141140
var oldServiceLocator = global.serviceLocator;
142141
global.serviceLocator.set('xhr', function mockXHR() {});
@@ -148,7 +147,7 @@ global.serviceLocator = oldServiceLocator; // if you forget this bad things will
148147

149148

150149
### Passing in Dependencies:
151-
Lastly the dependency can be passed in.
150+
Last, the dependency can be passed in.
152151

153152
<pre>
154153
function MyClass(xhr) {
@@ -161,12 +160,12 @@ function MyClass(xhr) {
161160
}
162161
</pre>
163162

164-
This is the preferred way since the code makes no assumptions as to where the `xhr` comes from,
165-
rather that whoever created the class was responsible for passing it in. Since the creator of the
163+
This is the preferred method since the code makes no assumptions about the origin of `xhr` and cares
164+
instead about whoever created the class responsible for passing it in. Since the creator of the
166165
class should be different code than the user of the class, it separates the responsibility of
167-
creation from the logic, and that is what dependency-injection is in a nutshell.
166+
creation from the logic. This is dependency-injection is in a nutshell.
168167

169-
The class above is very testable, since in the test we can write:
168+
The class above is testable, since in the test we can write:
170169
<pre>
171170
function xhrMock(args) {...}
172171
var myClass = new MyClass(xhrMock);
@@ -176,12 +175,12 @@ myClass.doWork();
176175

177176
Notice that no global variables were harmed in the writing of this test.
178177

179-
Angular comes with {@link di dependency injection} built in which makes the right thing
178+
Angular comes with {@link di dependency injection} built-in, making the right thing
180179
easy to do, but you still need to do it if you wish to take advantage of the testability story.
181180

182181
## Controllers
183-
What makes each application unique is its logic, which is what we would like to test. If the logic
184-
for your application is mixed in with DOM manipulation, it will be hard to test as in the example
182+
What makes each application unique is its logic, and the logic is what we would like to test. If the logic
183+
for your application contains DOM manipulation, it will be hard to test. See the example
185184
below:
186185

187186
<pre>
@@ -209,7 +208,7 @@ function PasswordCtrl() {
209208
}
210209
</pre>
211210

212-
The code above is problematic from a testability point of view, since it requires your test to have the right kind
211+
The code above is problematic from a testability point of view since it requires your test to have the right kind
213212
of DOM present when the code executes. The test would look like this:
214213

215214
<pre>
@@ -226,8 +225,8 @@ expect(span.text()).toEqual('weak');
226225
$('body').html('');
227226
</pre>
228227

229-
In angular the controllers are strictly separated from the DOM manipulation logic which results in
230-
a much easier testability story as can be seen in this example:
228+
In angular the controllers are strictly separated from the DOM manipulation logic and this results in
229+
a much easier testability story as the following example shows:
231230

232231
<pre>
233232
function PasswordCtrl($scope) {
@@ -245,7 +244,7 @@ function PasswordCtrl($scope) {
245244
}
246245
</pre>
247246

248-
and the test is straight forward
247+
and the test is straight forward:
249248

250249
<pre>
251250
var $scope = {};
@@ -255,11 +254,11 @@ $scope.grade();
255254
expect($scope.strength).toEqual('weak');
256255
</pre>
257256

258-
Notice that the test is not only much shorter but it is easier to follow what is going on. We say
257+
Notice that the test is not only much shorter, it is also easier to follow what is happening. We say
259258
that such a test tells a story, rather then asserting random bits which don't seem to be related.
260259

261260
## Filters
262-
{@link api/ng.$filterProvider Filters} are functions which transform the data into user readable
261+
{@link api/ng.$filterProvider Filters} are functions which transform the data into a user readable
263262
format. They are important because they remove the formatting responsibility from the application
264263
logic, further simplifying the application logic.
265264

@@ -282,7 +281,7 @@ you create with directives may be used throughout your application and in many d
282281

283282
### Simple HTML Element Directive
284283

285-
Lets start with an angular app with no dependencies.
284+
Let's start with an angular app with no dependencies.
286285

287286
<pre>
288287
var app = angular.module('myApp', []);

0 commit comments

Comments
 (0)