@@ -395,20 +395,39 @@ properties that are not defined are cleared.
395
395
396
396
` ` ` typescript
397
397
const {rerender} = await render(Counter, {
398
- componentProperties : {count: 4, name: 'Sarah'},
398
+ componentInputs : {count: 4, name: 'Sarah'},
399
399
})
400
400
401
401
expect(screen.getByTestId('count-value').textContent).toBe('4')
402
402
expect(screen.getByTestId('name-value').textContent).toBe('Sarah')
403
403
404
- await rerender({componentProperties : {count: 7}})
404
+ await rerender({componentInputs : {count: 7}})
405
405
406
- // count updated to 7
406
+ // count is updated to 7
407
407
expect(screen.getByTestId('count-value').textContent).toBe('7')
408
408
// name is undefined because it's not provided in rerender
409
409
expect(screen.getByTestId('name-value').textContent).toBeUndefined()
410
410
` ` `
411
411
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
+
412
431
### ` detectChanges `
413
432
414
433
Trigger a change detection cycle for the component .
@@ -473,3 +492,22 @@ screen.getByRole('heading', {
473
492
})
474
493
queryByLabelText(/First name/i')
475
494
` ` `
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