@@ -145,6 +145,29 @@ provide convenience methods on their `ComponentHarness` subclass to facilitate t
145
145
` HarnessPredicate ` instances. However, if the harness author's API is not sufficient, they can be
146
146
created manually.
147
147
148
+ #### Change detection
149
+ By default, test harnesses will run Angular's change detection before reading the state of a DOM
150
+ element and after interacting with a DOM element. While this is convenient in most cases, there may
151
+ be times that you need finer-grained control over change detection. (e.g. to check the state of
152
+ something while an async operation is in progress). In these cases you can use the
153
+ ` noAutoChangeDetection ` function to disable automatic handling of change detection for a block of
154
+ code. For example:
155
+
156
+ ``` ts
157
+ it (' checks state while async action is in progress' , async () => {
158
+ const buttonHarness = loader .getHarness (MyButtonHarness );
159
+ await noAutoChangeDetection (async () => {
160
+ await buttonHarness .click ();
161
+ fixture .detectChanges ();
162
+ // Check expectations while async click operation is in progress.
163
+ expect (isProgressSpinnerVisible ()).toBe (true );
164
+ await fixture .whenStable ();
165
+ // Check expectations after async click operation complete.
166
+ expect (isProgressSpinnerVisible ()).toBe (false );
167
+ });
168
+ });
169
+ ```
170
+
148
171
#### Working with asynchronous component harness methods
149
172
150
173
To support both unit and end-to-end tests, and to insulate tests against changes in
@@ -154,29 +177,22 @@ therefore, the Angular team recommends using
154
177
to improve the test readability.
155
178
156
179
Note that ` await ` statements block the execution of your test until the associated ` Promise `
157
- resolves. When reading multiple properties of a harness it may not be necessary to block on the
158
- first before asking for the next, in these cases use ` Promise.all ` to parallelize.
159
-
160
- By default, test harnesses will run Angular's change detection before reading the state of a DOM
161
- element and after interacting with a DOM element. If you're performing a large number of operations,
162
- this may slow down your tests. To avoid running change detection for every operation, you can use
163
- the ` batchCD ` method on ` ComponentHarness ` and ` HarnessLoader ` to run change detection just once
164
- before the batch operation and once after. When using ` Promise.all ` to parallelize operations, you
165
- almost always want to use ` batchCD ` , as it doesn't make sense to trigger change detection multiple
166
- times in parallel.
167
-
168
- For example, consider the following example of reading both the ` checked ` and ` indeterminate ` state
169
- off of a checkbox harness:
180
+ resolves. There are often times when you want to perform multiple actions simultaneously and wait
181
+ until they're all done rather than blocking. For example, reading multiple properties off a harness.
182
+ In these situations use the ` parallel ` function to parallelize the operations. The parallel function
183
+ works similarly to ` Promise.all ` , while also optimizing change detection, so it is not run an
184
+ excessive number of times. For example:
170
185
171
186
``` ts
172
187
it (' reads properties in parallel' , async () => {
173
188
const checkboxHarness = loader .getHarness (MyCheckboxHarness );
174
- const [checked, indeterminate] = await loader .batchCD (() => Promise .all ([
189
+ // Read the checked and intermediate properties simultaneously.
190
+ const [checked, indeterminate] = await parallel ([
175
191
checkboxHarness .isChecked (),
176
192
checkboxHarness .isIndeterminate ()
177
- ])) ;
178
-
179
- // ... make some assertions
193
+ ]);
194
+ expect ( checked ). toBe ( false );
195
+ expect ( indeterminate ). toBe ( true );
180
196
});
181
197
```
182
198
0 commit comments