Skip to content

Commit 960d86f

Browse files
angular: document deferrable views (#1354)
1 parent aa016e2 commit 960d86f

File tree

1 file changed

+41
-3
lines changed
  • docs/angular-testing-library

1 file changed

+41
-3
lines changed

docs/angular-testing-library/api.mdx

Lines changed: 41 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -395,20 +395,39 @@ properties that are not defined are cleared.
395395

396396
```typescript
397397
const {rerender} = await render(Counter, {
398-
componentProperties: {count: 4, name: 'Sarah'},
398+
componentInputs: {count: 4, name: 'Sarah'},
399399
})
400400
401401
expect(screen.getByTestId('count-value').textContent).toBe('4')
402402
expect(screen.getByTestId('name-value').textContent).toBe('Sarah')
403403
404-
await rerender({componentProperties: {count: 7}})
404+
await rerender({componentInputs: {count: 7}})
405405
406-
// count updated to 7
406+
// count is updated to 7
407407
expect(screen.getByTestId('count-value').textContent).toBe('7')
408408
// name is undefined because it's not provided in rerender
409409
expect(screen.getByTestId('name-value').textContent).toBeUndefined()
410410
```
411411

412+
Using `partialUpdate`, only the newly provided properties will be updated. Other
413+
input properties that aren't provided won't be cleared.
414+
415+
```typescript
416+
const {rerender} = await render(Counter, {
417+
componentInputs: {count: 4, name: 'Sarah'},
418+
})
419+
420+
expect(screen.getByTestId('count-value').textContent).toBe('4')
421+
expect(screen.getByTestId('name-value').textContent).toBe('Sarah')
422+
423+
await rerender({componentInputs: {count: 7}, partialUpdate: true})
424+
425+
// count is updated to 7
426+
expect(screen.getByTestId('count-value').textContent).toBe('7')
427+
// name is still rendered as "Sarah" because of the partial update
428+
expect(screen.getByTestId('name-value').textContent).toBe('Sarah')
429+
```
430+
412431
### `detectChanges`
413432

414433
Trigger a change detection cycle for the component.
@@ -473,3 +492,22 @@ screen.getByRole('heading', {
473492
})
474493
queryByLabelText(/First name/i')
475494
```
495+
496+
### `renderDeferBlock`
497+
498+
To test [Deferrable views](https://angular.dev/guide/defer#defer), you can make
499+
use of `renderDeferBlock`. `renderDeferBlock` will set the desired defer state
500+
for a specific deferrable block. The default value of a deferrable view is
501+
`Placeholder`, but you can also set the initial state while rendering the
502+
component.
503+
504+
```typescript
505+
const {renderDeferBlock} = await render(FixtureComponent, {
506+
deferBlockStates: DeferBlockState.Loading,
507+
})
508+
509+
expect(screen.getByText(/loading/i)).toBeInTheDocument()
510+
511+
await renderDeferBlock(DeferBlockState.Complete)
512+
expect(screen.getByText(/completed/i)).toBeInTheDocument()
513+
```

0 commit comments

Comments
 (0)