Skip to content

Commit

Permalink
chore(ng-core): update docs for AngularContextNext and `ComponentCo…
Browse files Browse the repository at this point in the history 
…ntextNext`
  • Loading branch information
@ersimont
ersimont committed Jan 7, 2021
1 parent 25bc7d1 commit c5a6101
Show file tree
Hide file tree
Showing 4 changed files with 25 additions and 21 deletions.
8 changes: 4 additions & 4 deletions docs/ng-dev/classes/angularcontextnext.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -963,13 +963,13 @@
thrown away, so they cannot leak between tests.</li>
<li>Clearly separates initialization code from the test itself.</li>
<li>Gives control over the simulated date &amp; time with a single line of code.</li>
<li>Automatically includes {@link HttpClientTestingModule} to stub network requests without additional setup.</li>
<li>Always verifies no unexpected http requests were made during a test.</li>
<li>Always discards periodic tasks and flushes pending timers at the end of each test to automatically avoid the error &quot;X timer(s) still in the queue&quot;.</li>
<li>Automatically includes <a href="https://angular.io/api/common/http/testing/HttpClientTestingModule" class="external">HttpClientTestingModule</a> to stub network requests without additional setup.</li>
<li>Always verifies that no unexpected http requests were made.</li>
<li>Automatically discards periodic tasks and flushes pending timers at the end of each test to avoid the error &quot;X timer(s) still in the queue&quot;.</li>
</ul>
</div>
<p>Why does the class name end with &quot;Next&quot;? This replaces the old <code>AngularContext</code>, but it&#39;s a breaking change so this gives people some time to transition over. Eventually the old one will be removed and this will be renamed to <code>AngularContext</code>.</p>
<p>This example tests a simple service that uses HttpClient, and is tested by using <code>AngularContextNext</code> directly. More often <code>AngularContextNext</code> will be used a super class. See <a href="componentcontextnext.html">ComponentContextNext</a> for more common use cases.</p>
<p>This example tests a simple service that uses <code>HttpClient</code>, and is tested by using <code>AngularContextNext</code> directly. More often <code>AngularContextNext</code> will be used as a super class. See <a href="componentcontextnext.html">ComponentContextNext</a> for more common use cases.</p>
<pre><code class="language-ts"><span class="hljs-comment">// This is the class we will test.</span>
<span class="hljs-meta">@Injectable</span>({ <span class="hljs-attr">providedIn</span>: <span class="hljs-string">&#x27;root&#x27;</span> })
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MemoriesService</span> </span>{
Expand Down
22 changes: 12 additions & 10 deletions docs/ng-dev/classes/componentcontextnext.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -967,12 +967,14 @@
<section class="tsd-panel tsd-comment">
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>A superclass to set up testing contexts for components. This is a foundation for an opinionated testing pattern, including everything described in <a href="angularcontextnext.html">AngularContextNext</a> plus:</p>
<p>Provides the foundation for an opinionated pattern of component tests.</p>
</div>
<ul>
<li>Includes all features from <a href="angularcontextnext.html">AngularContextNext</a></li>
<li>Automatically creates your component at the beginning of <code>run()</code>.</li>
<li>Wraps your component in a dynamically created parent component. (This sets up Angular to call <code>ngOnChanges()</code> in your tests the same way it does in production.)</li>
<li>Lets you use <a href="https://material.angular.io/cdk/test-harnesses/overview" class="external">component harnesses</a> (which are normally not usable within a <code>fakeAsync</code> test).</li>
<li>Sets up Angular to call <code>ngOnChanges()</code> like it would in production (this is not the case if you use the standard <code>TestBed.createComponent()</code> directly).</li>
<li>Wraps your component in a dynamically created parent that you can style however you like.</li>
<li>Lets you use <a href="https://material.angular.io/cdk/test-harnesses/overview" class="external">component harnesses</a> in the <code>fakeAsync</code> zone (which is normally a challenge).</li>
<li>Automatically disables animations.</li>
<li>Automatically integrates <a href="../index.html#trimleftoverstyles">trimLeftoverStyles</a> to speed up your test suite.</li>
</ul>
Expand Down Expand Up @@ -1158,7 +1160,7 @@ <h3>constructor</h3>
<aside class="tsd-sources">
<p>Overrides <a href="angularcontextnext.html">AngularContextNext</a>.<a href="angularcontextnext.html#constructor">constructor</a></p>
<ul>
<li>Defined in <a href="https://github.com/simontonsoftware/s-libs/blob/master/projects/ng-dev/src/lib/test-context/component-context/component-context-next.ts#L155">projects/ng-dev/src/lib/test-context/component-context/component-context-next.ts:155</a></li>
<li>Defined in <a href="https://github.com/simontonsoftware/s-libs/blob/master/projects/ng-dev/src/lib/test-context/component-context/component-context-next.ts#L157">projects/ng-dev/src/lib/test-context/component-context/component-context-next.ts:157</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
Expand All @@ -1175,7 +1177,7 @@ <h3>fixture</h3>
<div class="tsd-signature tsd-kind-icon">fixture<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">ComponentFixture</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">unknown</span><span class="tsd-signature-symbol">&gt;</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/simontonsoftware/s-libs/blob/master/projects/ng-dev/src/lib/test-context/component-context/component-context-next.ts#L148">projects/ng-dev/src/lib/test-context/component-context/component-context-next.ts:148</a></li>
<li>Defined in <a href="https://github.com/simontonsoftware/s-libs/blob/master/projects/ng-dev/src/lib/test-context/component-context/component-context-next.ts#L150">projects/ng-dev/src/lib/test-context/component-context/component-context-next.ts:150</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
Expand Down Expand Up @@ -1213,7 +1215,7 @@ <h3>assign<wbr>Inputs</h3>
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/simontonsoftware/s-libs/blob/master/projects/ng-dev/src/lib/test-context/component-context/component-context-next.ts#L205">projects/ng-dev/src/lib/test-context/component-context/component-context-next.ts:205</a></li>
<li>Defined in <a href="https://github.com/simontonsoftware/s-libs/blob/master/projects/ng-dev/src/lib/test-context/component-context/component-context-next.ts#L207">projects/ng-dev/src/lib/test-context/component-context/component-context-next.ts:207</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
Expand All @@ -1234,7 +1236,7 @@ <h3>assign<wbr>Wrapper<wbr>Styles</h3>
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/simontonsoftware/s-libs/blob/master/projects/ng-dev/src/lib/test-context/component-context/component-context-next.ts#L193">projects/ng-dev/src/lib/test-context/component-context/component-context-next.ts:193</a></li>
<li>Defined in <a href="https://github.com/simontonsoftware/s-libs/blob/master/projects/ng-dev/src/lib/test-context/component-context/component-context-next.ts#L195">projects/ng-dev/src/lib/test-context/component-context/component-context-next.ts:195</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
Expand Down Expand Up @@ -1262,7 +1264,7 @@ <h3><span class="tsd-flag ts-flagProtected">Protected</span> clean<wbr>Up</h3>
<aside class="tsd-sources">
<p>Overrides <a href="angularcontextnext.html">AngularContextNext</a>.<a href="angularcontextnext.html#cleanup">cleanUp</a></p>
<ul>
<li>Defined in <a href="https://github.com/simontonsoftware/s-libs/blob/master/projects/ng-dev/src/lib/test-context/component-context/component-context-next.ts#L251">projects/ng-dev/src/lib/test-context/component-context/component-context-next.ts:251</a></li>
<li>Defined in <a href="https://github.com/simontonsoftware/s-libs/blob/master/projects/ng-dev/src/lib/test-context/component-context/component-context-next.ts#L253">projects/ng-dev/src/lib/test-context/component-context/component-context-next.ts:253</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
Expand Down Expand Up @@ -1305,7 +1307,7 @@ <h3>get<wbr>Component<wbr>Instance</h3>
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/simontonsoftware/s-libs/blob/master/projects/ng-dev/src/lib/test-context/component-context/component-context-next.ts#L224">projects/ng-dev/src/lib/test-context/component-context/component-context-next.ts:224</a></li>
<li>Defined in <a href="https://github.com/simontonsoftware/s-libs/blob/master/projects/ng-dev/src/lib/test-context/component-context/component-context-next.ts#L226">projects/ng-dev/src/lib/test-context/component-context/component-context-next.ts:226</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
Expand Down Expand Up @@ -1349,7 +1351,7 @@ <h3><span class="tsd-flag ts-flagProtected">Protected</span> init</h3>
<aside class="tsd-sources">
<p>Overrides <a href="angularcontextnext.html">AngularContextNext</a>.<a href="angularcontextnext.html#init">init</a></p>
<ul>
<li>Defined in <a href="https://github.com/simontonsoftware/s-libs/blob/master/projects/ng-dev/src/lib/test-context/component-context/component-context-next.ts#L232">projects/ng-dev/src/lib/test-context/component-context/component-context-next.ts:232</a></li>
<li>Defined in <a href="https://github.com/simontonsoftware/s-libs/blob/master/projects/ng-dev/src/lib/test-context/component-context/component-context-next.ts#L234">projects/ng-dev/src/lib/test-context/component-context/component-context-next.ts:234</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
Expand Down
8 changes: 4 additions & 4 deletions projects/ng-dev/src/lib/test-context/angular-context/angular-context-next.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,13 +42,13 @@ export function extendMetadata(
* thrown away, so they cannot leak between tests.
* - Clearly separates initialization code from the test itself.
* - Gives control over the simulated date & time with a single line of code.
* - Automatically includes {@link HttpClientTestingModule} to stub network requests without additional setup.
* - Always verifies no unexpected http requests were made during a test.
* - Always discards periodic tasks and flushes pending timers at the end of each test to automatically avoid the error "X timer(s) still in the queue".
* - Automatically includes {@link https://angular.io/api/common/http/testing/HttpClientTestingModule|HttpClientTestingModule} to stub network requests without additional setup.
* - Always verifies that no unexpected http requests were made.
* - Automatically discards periodic tasks and flushes pending timers at the end of each test to avoid the error "X timer(s) still in the queue".
*
* Why does the class name end with "Next"? This replaces the old `AngularContext`, but it's a breaking change so this gives people some time to transition over. Eventually the old one will be removed and this will be renamed to `AngularContext`.
*
* This example tests a simple service that uses HttpClient, and is tested by using `AngularContextNext` directly. More often `AngularContextNext` will be used a super class. See {@link ComponentContextNext} for more common use cases.
* This example tests a simple service that uses `HttpClient`, and is tested by using `AngularContextNext` directly. More often `AngularContextNext` will be used as a super class. See {@link ComponentContextNext} for more common use cases.
*
* ```ts
* // This is the class we will test.
Expand Down
8 changes: 5 additions & 3 deletions projects/ng-dev/src/lib/test-context/component-context/component-context-next.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,13 @@ import {
} from './create-dynamic-wrapper';

/**
* A superclass to set up testing contexts for components. This is a foundation for an opinionated testing pattern, including everything described in {@link AngularContextNext} plus:
* Provides the foundation for an opinionated pattern for component tests.
*
* - Includes all features from {@link AngularContextNext}
* - Automatically creates your component at the beginning of `run()`.
* - Wraps your component in a dynamically created parent component. (This sets up Angular to call `ngOnChanges()` in your tests the same way it does in production.)
* - Lets you use {@link https://material.angular.io/cdk/test-harnesses/overview|component harnesses} (which are normally not usable within a `fakeAsync` test).
* - Sets up Angular to call `ngOnChanges()` like it would in production. This is not the case if you use the standard `TestBed.createComponent()` directly.
* - Wraps your component in a dynamically created parent that you can easily style however you like.
* - Lets you use {@link https://material.angular.io/cdk/test-harnesses/overview|component harnesses} in the `fakeAsync` zone, which is normally a challenge.
* - Automatically disables animations.
* - Automatically integrates {@link trimLeftoverStyles} to speed up your test suite.
*
Expand Down

0 comments on commit c5a6101

Please sign in to comment.