diff --git a/README.md b/README.md index d5f67795..619870eb 100644 --- a/README.md +++ b/README.md @@ -71,6 +71,8 @@ Become a bronze sponsor and get your logo on our README on GitHub. - [Testing Select Elements](#testing-select-elements) - [Mocking Components](#mocking-components) - [Testing Single Component/Directive Angular Modules](#testing-single-componentdirective-angular-modules) + - [Deferrable Views](#deferrable-views) + - [Nested Deferrable Views](#nested-deferrable-views) - [Testing with Host](#testing-with-host) - [Custom Host Component](#custom-host-component) - [Testing with Routing](#testing-with-routing) @@ -154,6 +156,7 @@ const createComponent = createComponentFactory({ declareComponent: false, // Defaults to true disableAnimations: false, // Defaults to true shallow: true, // Defaults to false + deferBlockBehavior: DeferBlockBehavior // Defaults to DeferBlockBehavior.Playthrough }); ``` @@ -551,7 +554,107 @@ const createDirective = createDirectiveFactory({ }); ``` +### Deferrable Views +The Spectator provides a convenient API to access the deferrable views (`@defer {}`). +Access the desired defer block using the `spectator.deferBlock(optionalIndex)` method. The `optionalIndex` parameter is optional and allows you to specify the index of the defer block you want to access. + +- **Accessing the first defer block**: Simply call `spectator.deferBlock()`. +- **Accessing subsequent defer blocks**: Use the corresponding index as an argument. For example, `spectator.deferBlock(1)` accesses the second block (zero-based indexing). + +The `spectator.deferBlock(optionalIndex)` returns four methods for rendering different states of the specified defer block: + +- `renderComplete()` - Renders the **complete** state of the defer block. +- `renderPlaceholder()` - Renders the **placeholder** state of the defer block. +- `renderLoading()` - Renders the **loading** state of the defer block. +- `renderError()` - Renders the **error** state of the defer block. + +**Example:** + +```ts + @Component({ + selector: 'app-cmp', + template: ` + @defer (on viewport) { +