Skip to content

Commit d642758

Browse files
committed
feat(cdk/testing): update docs
1 parent f956828 commit d642758

File tree

1 file changed

+33
-17
lines changed

1 file changed

+33
-17
lines changed

src/cdk/testing/test-harnesses.md

Lines changed: 33 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -145,6 +145,29 @@ provide convenience methods on their `ComponentHarness` subclass to facilitate t
145145
`HarnessPredicate` instances. However, if the harness author's API is not sufficient, they can be
146146
created manually.
147147

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+
148171
#### Working with asynchronous component harness methods
149172

150173
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
154177
to improve the test readability.
155178

156179
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:
170185

171186
```ts
172187
it('reads properties in parallel', async () => {
173188
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([
175191
checkboxHarness.isChecked(),
176192
checkboxHarness.isIndeterminate()
177-
]));
178-
179-
// ... make some assertions
193+
]);
194+
expect(checked).toBe(false);
195+
expect(indeterminate).toBe(true);
180196
});
181197
```
182198

0 commit comments

Comments
 (0)