@@ -706,15 +706,14 @@ a(href="#top").to-top Back to top
706
706
:marked
707
707
### Synchronous tests
708
708
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`.
716
711
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_.
718
717
719
718
#async
720
719
:marked
@@ -724,10 +723,9 @@ a(href="#top").to-top Back to top
724
723
+ makeExample('testing/ts/app/shared/twain.component.spec.ts' , 'async-test' , 'app/shared/twain.component.spec.ts (async test)' )( format ='.' )
725
724
:marked
726
725
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_.
727
727
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
731
729
which becomes the argument to the Jasmine `it` call.
732
730
733
731
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
736
734
there is no `done` function to call as there is in standard Jasmine asynchronous tests.
737
735
738
736
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.
740
740
741
741
#when-stable
742
742
:marked
743
743
## _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.
750
745
751
746
This test has no direct access to the promise returned by the call to `testService.getQuote`
752
747
which is private and inaccessible inside `TwainComponent`.
@@ -755,10 +750,10 @@ a(href="#top").to-top Back to top
755
750
which intercepts all promises issued within the _async_ method call.
756
751
757
752
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".
759
754
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.
762
757
The `getQuote` helper method extracts the display element text and the expectation confirms that the text matches the test quote.
763
758
764
759
#fakeAsync
@@ -772,23 +767,23 @@ a(href="#top").to-top Back to top
772
767
Notice that `fakeAsync` replaces `async` as the `it` argument.
773
768
The `fakeAsync` function is another of the Angular testing utilities.
774
769
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.
777
772
778
773
The `fakeAsync` function enables a linear coding style by running the test body in a special _fakeAsync test zone_.
779
774
780
775
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()` .
783
778
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`.
785
782
786
783
#tick
787
784
#tick-first-look
788
785
:marked
789
786
## The _tick_ function
790
- Compare the third and fourth tests. Notice that `fixture.whenStable` is gone, replaced by `tick()`.
791
-
792
787
The `tick` function is one of the Angular testing utilities and a companion to `fakeAsync`.
793
788
It can only be called within a `fakeAsync` body.
794
789
@@ -858,25 +853,26 @@ a(href="#top").to-top Back to top
858
853
:marked
859
854
## The _async_ function in _beforeEach_
860
855
861
- Notice the `async` call in the `beforeEach`.
856
+ Notice the `async` call in the `beforeEach`, made necessary by the asynchronous `TestBed.compileComponents` method.
862
857
The `async` function arranges for the tester's code to run in a special _async test zone_
863
858
that hides the mechanics of asynchronous execution, just as it does when passed to an [_it_ test)(#async).
864
859
865
860
#compile-components
866
861
:marked
867
862
## _compileComponents_
868
- In this example, `Testbed .compileComponents` compiles one component, the `DashboardComponent`.
863
+ In this example, `TestBed .compileComponents` compiles one component, the `DashboardComponent`.
869
864
It's the only declared component in this testing module.
870
865
871
866
Tests later in this chapter have more declared components and some of them import application
872
867
modules that declare yet more components.
873
868
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.
875
870
876
871
The `compileComponents` method returns a promise so you can perform additional tasks _after_ it finishes.
872
+ The promise isn't needed here.
877
873
878
874
### _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.
880
876
You cannot call any more `TestBed` configuration methods, not `configureTestModule`
881
877
nor any of the `override...` methods. The `TestBed` throws an error if you try.
882
878
@@ -928,7 +924,7 @@ a(href="#top").to-top Back to top
928
924
The router seems particularly challenging.
929
925
.l-sub-section
930
926
: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.
932
928
:marked
933
929
The immediate goal is to test the `DashboardHeroComponent`, not the `DashboardComponent`, and there's no need
934
930
to work hard unnecessarily. Let's try the second and third options.
0 commit comments