Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit 3ee1978

Browse files
authored
docs(testing): incorporate Igor Minar feedback, Part 2 (#2453)
docs(testing): incorporate Igor Minar feedback, Part 2
1 parent f45c999 commit 3ee1978

File tree

1 file changed

+29
-33
lines changed

1 file changed

+29
-33
lines changed

public/docs/ts/latest/guide/testing.jade

Lines changed: 29 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -706,15 +706,14 @@ a(href="#top").to-top Back to top
706706
:marked
707707
### Synchronous tests
708708
The first two tests are synchronous.
709-
Neither test can prove that a value from the service will be displayed.
710-
711-
Thanks to the spy, the second test verifies that `getQuote` is called.
712-
But the quote itself has not arrived, despite the fact that the spy returns a resolved promise.
713-
714-
This test must wait at least one full turn of the JavaScript engine, a least one "tick", before the
715-
value becomes available. By that time, the test runner has moved on to the next test in the suite.
709+
Thanks to the spy, they verify that `getQuote` is called _after_
710+
the first change detection cycle during which Angular calls `ngOnInit`.
716711

717-
The test must become an "async test" ... like the third test
712+
Neither test can prove that a value from the service is be displayed.
713+
The quote itself has not arrived, despite the fact that the spy returns a resolved promise.
714+
715+
This test must wait at least one full turn of the JavaScript engine before the
716+
value becomes available. The test must become _asynchronous_.
718717

719718
#async
720719
:marked
@@ -724,10 +723,9 @@ a(href="#top").to-top Back to top
724723
+makeExample('testing/ts/app/shared/twain.component.spec.ts', 'async-test', 'app/shared/twain.component.spec.ts (async test)')(format='.')
725724
:marked
726725
The `async` function is one of the Angular testing utilities.
726+
It simplifies coding of asynchronous tests by arranging for the tester's code to run in a special _async test zone_.
727727

728-
It simplifyies coding of asynchronous tests by arranging for the tester's code to run in a special _async test zone_.
729-
730-
The `async` function _takes_ a parameterless function and _returns_ a parameterless function
728+
The `async` function _takes_ a parameterless function and _returns_ a function
731729
which becomes the argument to the Jasmine `it` call.
732730

733731
The body of the `async` argument looks much like the body of a normal `it` argument.
@@ -736,17 +734,14 @@ a(href="#top").to-top Back to top
736734
there is no `done` function to call as there is in standard Jasmine asynchronous tests.
737735

738736
Some functions called within a test (such as `fixture.whenStable`) continue to reveal their asynchronous behavior.
739-
Consider also the [_fakeAsync_](#fake-async) alternative which affords a more linear coding experience.
737+
.l-sub-section
738+
:marked
739+
The `fakeAsync` alternative, [covered below](#fake-async), removes this artifact and affords a more linear coding experience.
740740

741741
#when-stable
742742
:marked
743743
## _whenStable_
744-
The test must wait for the `getQuote` promise to resolve.
745-
746-
The `getQuote` promise promise resolves in the next turn of the JavaScript engine, thanks to the spy.
747-
But a different test implementation of `getQuote` could take longer.
748-
An integration test might call the _real_ `getQuote`, resulting in an XHR request
749-
that took many seconds to respond.
744+
The test must wait for the `getQuote` promise to resolve in the next turn of the JavaScript engine.
750745

751746
This test has no direct access to the promise returned by the call to `testService.getQuote`
752747
which is private and inaccessible inside `TwainComponent`.
@@ -755,10 +750,10 @@ a(href="#top").to-top Back to top
755750
which intercepts all promises issued within the _async_ method call.
756751

757752
The `ComponentFixture.whenStable` method returns its own promise which resolves when the `getQuote` promise completes.
758-
In fact, the _whenStable_ promise resolves when _all pending asynchronous activities_ complete ... the definition of "stable".
753+
In fact, the _whenStable_ promise resolves when _all pending asynchronous activities within this test_ complete ... the definition of "stable".
759754

760-
Then the testing continues.
761-
The test kicks off another round of change detection (`fixture.detechChanges`) which tells Angular to update the DOM with the quote.
755+
Then the test resumes and kicks off another round of change detection (`fixture.detectChanges`)
756+
which tells Angular to update the DOM with the quote.
762757
The `getQuote` helper method extracts the display element text and the expectation confirms that the text matches the test quote.
763758

764759
#fakeAsync
@@ -772,23 +767,23 @@ a(href="#top").to-top Back to top
772767
Notice that `fakeAsync` replaces `async` as the `it` argument.
773768
The `fakeAsync` function is another of the Angular testing utilities.
774769

775-
Like [async](#), it _takes_ a parameterless function and _returns_ a parameterless function
776-
which becomes the argument to the Jasmine `it` call.
770+
Like [async](#async), it _takes_ a parameterless function and _returns_ a function
771+
that becomes the argument to the Jasmine `it` call.
777772

778773
The `fakeAsync` function enables a linear coding style by running the test body in a special _fakeAsync test zone_.
779774

780775
The principle advantage of `fakeAsync` over `async` is that the test appears to be synchronous.
781-
There are no promises at all.
782-
No `then(...)` chains to disrupt the visible flow of control.
776+
There is no `then(...)` to disrupt the visible flow of control.
777+
The promise-returning `fixture.whenStable` is gone, replaced by `tick()`.
783778

784-
There are limitations. For example, you cannot make an XHR call from within a `fakeAsync`.
779+
.l-sub-section
780+
:marked
781+
There _are_ limitations. For example, you cannot make an XHR call from within a `fakeAsync`.
785782

786783
#tick
787784
#tick-first-look
788785
:marked
789786
## The _tick_ function
790-
Compare the third and fourth tests. Notice that `fixture.whenStable` is gone, replaced by `tick()`.
791-
792787
The `tick` function is one of the Angular testing utilities and a companion to `fakeAsync`.
793788
It can only be called within a `fakeAsync` body.
794789

@@ -858,25 +853,26 @@ a(href="#top").to-top Back to top
858853
:marked
859854
## The _async_ function in _beforeEach_
860855

861-
Notice the `async` call in the `beforeEach`.
856+
Notice the `async` call in the `beforeEach`, made necessary by the asynchronous `TestBed.compileComponents` method.
862857
The `async` function arranges for the tester's code to run in a special _async test zone_
863858
that hides the mechanics of asynchronous execution, just as it does when passed to an [_it_ test)(#async).
864859

865860
#compile-components
866861
:marked
867862
## _compileComponents_
868-
In this example, `Testbed.compileComponents` compiles one component, the `DashboardComponent`.
863+
In this example, `TestBed.compileComponents` compiles one component, the `DashboardComponent`.
869864
It's the only declared component in this testing module.
870865

871866
Tests later in this chapter have more declared components and some of them import application
872867
modules that declare yet more components.
873868
Some or all of these components could have external templates and css files.
874-
`TestBed.compileComponents` compiles them all asynchonously at one time.
869+
`TestBed.compileComponents` compiles them all asynchronously at one time.
875870

876871
The `compileComponents` method returns a promise so you can perform additional tasks _after_ it finishes.
872+
The promise isn't needed here.
877873

878874
### _compileComponents_ closes configuration
879-
After `compileComponents` runs, the current `TestBed` instance is closed to further configuration.
875+
Calling `compileComponents` closes the current `TestBed` instance is further configuration.
880876
You cannot call any more `TestBed` configuration methods, not `configureTestModule`
881877
nor any of the `override...` methods. The `TestBed` throws an error if you try.
882878

@@ -928,7 +924,7 @@ a(href="#top").to-top Back to top
928924
The router seems particularly challenging.
929925
.l-sub-section
930926
:marked
931-
The [discussion below](#routed-component) covers testing components that requre the router.
927+
The [discussion below](#routed-component) covers testing components that require the router.
932928
:marked
933929
The immediate goal is to test the `DashboardHeroComponent`, not the `DashboardComponent`, and there's no need
934930
to work hard unnecessarily. Let's try the second and third options.

0 commit comments

Comments
 (0)