angular: document deferrable views (#1354)

Author: timdeschryver

docs/angular-testing-library/api.mdx

@@ -395,20 +395,39 @@ properties that are not defined are cleared.
 
 ```typescript
 const {rerender} = await render(Counter, {
- componentProperties: {count: 4, name: 'Sarah'},
+ componentInputs: {count: 4, name: 'Sarah'},
 })
 
 expect(screen.getByTestId('count-value').textContent).toBe('4')
 expect(screen.getByTestId('name-value').textContent).toBe('Sarah')
 
-await rerender({componentProperties: {count: 7}})
+await rerender({componentInputs: {count: 7}})
 
-// count updated to 7
+// count is updated to 7
 expect(screen.getByTestId('count-value').textContent).toBe('7')
 // name is undefined because it's not provided in rerender
 expect(screen.getByTestId('name-value').textContent).toBeUndefined()
 ```
 
+Using `partialUpdate`, only the newly provided properties will be updated. Other
+input properties that aren't provided won't be cleared.
+
+```typescript
+const {rerender} = await render(Counter, {
+ componentInputs: {count: 4, name: 'Sarah'},
+})
+
+expect(screen.getByTestId('count-value').textContent).toBe('4')
+expect(screen.getByTestId('name-value').textContent).toBe('Sarah')
+
+await rerender({componentInputs: {count: 7}, partialUpdate: true})
+
+// count is updated to 7
+expect(screen.getByTestId('count-value').textContent).toBe('7')
+// name is still rendered as "Sarah" because of the partial update
+expect(screen.getByTestId('name-value').textContent).toBe('Sarah')
+```
+
 ### `detectChanges`
 
 Trigger a change detection cycle for the component.
@@ -473,3 +492,22 @@ screen.getByRole('heading', {
 })
 queryByLabelText(/First name/i')
 ```
+
+### `renderDeferBlock`
+
+To test [Deferrable views](https://angular.dev/guide/defer#defer), you can make
+use of `renderDeferBlock`. `renderDeferBlock` will set the desired defer state
+for a specific deferrable block. The default value of a deferrable view is
+`Placeholder`, but you can also set the initial state while rendering the
+component.
+
+```typescript
+const {renderDeferBlock} = await render(FixtureComponent, {
+ deferBlockStates: DeferBlockState.Loading,
+})
+
+expect(screen.getByText(/loading/i)).toBeInTheDocument()
+
+await renderDeferBlock(DeferBlockState.Complete)
+expect(screen.getByText(/completed/i)).toBeInTheDocument()
+```