feat: add DeferBlockBehavior (#431)

Author: timdeschryver

projects/testing-library/src/lib/models.ts

@@ -1,5 +1,5 @@
 import { Type, DebugElement } from '@angular/core';
-import { ComponentFixture, DeferBlockState, TestBed } from '@angular/core/testing';
+import {ComponentFixture, DeferBlockBehavior, DeferBlockState, TestBed} from '@angular/core/testing';
 import { Routes } from '@angular/router';
 import { BoundFunction, Queries, queries, Config as dtlConfig, PrettyDOMOptions } from '@testing-library/dom';
 
@@ -369,7 +369,17 @@ export interface RenderComponentOptions<ComponentType, Q extends Queries = typeo
    */
   configureTestBed?: (testbed: TestBed) => void;
 
+  /**
+   * @description
+   * Set the initial state of a deferrable block.
+   */
   deferBlockStates?: DeferBlockState | { deferBlockState: DeferBlockState; deferBlockIndex: number }[];
+
+  /**
+   * @description
+   * Set the defer blocks behavior.
+   */
+  deferBlockBehavior?: DeferBlockBehavior
 }
 
 export interface ComponentOverride<T> {

projects/testing-library/src/lib/testing-library.ts

@@ -1,32 +1,32 @@
 import {
+  ApplicationInitStatus,
   ChangeDetectorRef,
   Component,
-  Type,
+  isStandalone,
   NgZone,
-  SimpleChange,
   OnChanges,
+  SimpleChange,
   SimpleChanges,
-  ApplicationInitStatus,
-  isStandalone,
+  Type,
 } from '@angular/core';
-import { ComponentFixture, DeferBlockState, TestBed, tick } from '@angular/core/testing';
-import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { NavigationExtras, Router } from '@angular/router';
-import { RouterTestingModule } from '@angular/router/testing';
+import {ComponentFixture, DeferBlockState, TestBed, tick} from '@angular/core/testing';
+import {BrowserAnimationsModule, NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {NavigationExtras, Router} from '@angular/router';
+import {RouterTestingModule} from '@angular/router/testing';
+import type {BoundFunctions, Queries} from '@testing-library/dom';
 import {
+  configure as dtlConfigure,
   getQueriesForElement as dtlGetQueriesForElement,
   prettyDOM as dtlPrettyDOM,
+  queries as dtlQueries,
+  screen as dtlScreen,
   waitFor as dtlWaitFor,
   waitForElementToBeRemoved as dtlWaitForElementToBeRemoved,
-  screen as dtlScreen,
-  within as dtlWithin,
   waitForOptions as dtlWaitForOptions,
-  configure as dtlConfigure,
-  queries as dtlQueries,
+  within as dtlWithin,
 } from '@testing-library/dom';
-import type { Queries, BoundFunctions } from '@testing-library/dom';
-import { RenderComponentOptions, RenderTemplateOptions, RenderResult, ComponentOverride } from './models';
-import { getConfig } from './config';
+import {ComponentOverride, RenderComponentOptions, RenderResult, RenderTemplateOptions} from './models';
+import {getConfig} from './config';
 
 const mountedFixtures = new Set<ComponentFixture<any>>();
 const safeInject = TestBed.inject || TestBed.get;
@@ -66,6 +66,7 @@ export async function render<SutType, WrapperType = SutType>(
     defaultImports = [],
     initialRoute = '',
     deferBlockStates = undefined,
+    deferBlockBehavior = undefined,
     configureTestBed = () => {
       /* noop*/
     },
@@ -94,6 +95,7 @@ export async function render<SutType, WrapperType = SutType>(
     }),
     providers: [...providers],
     schemas: [...schemas],
+    deferBlockBehavior: deferBlockBehavior as any
   });
   overrideComponentImports(sut, componentImports);
   overrideChildComponentProviders(childComponentOverrides);

projects/testing-library/tests/defer-blocks.spec.ts

@@ -1,6 +1,7 @@
-import { Component } from '@angular/core';
-import { DeferBlockState } from '@angular/core/testing';
-import { render, screen } from '../src/public_api';
+import {Component} from '@angular/core';
+import {DeferBlockBehavior, DeferBlockState} from '@angular/core/testing';
+import {render, screen} from '../src/public_api';
+import {fireEvent} from "@testing-library/dom";
 
 test('renders a defer block in different states using the official API', async () => {
   const { fixture } = await render(FixtureComponent);
@@ -28,6 +29,26 @@ test('renders a defer block in different states using ATL', async () => {
   expect(screen.queryByText(/load/i)).not.toBeInTheDocument();
 });
 
+test('renders a defer block in different states using DeferBlockBehavior.Playthrough', async () => {
+   await render(FixtureComponent, {
+    deferBlockBehavior: DeferBlockBehavior.Playthrough
+  });
+
+  expect(await screen.findByText(/loading/i)).toBeInTheDocument();
+  expect(await screen.findByText(/Defer block content/i)).toBeInTheDocument();
+});
+
+test('renders a defer block in different states using DeferBlockBehavior.Playthrough event', async () => {
+  await render(FixtureComponentWithEvents, {
+    deferBlockBehavior: DeferBlockBehavior.Playthrough
+  });
+
+  const button = screen.getByRole('button', {name: /click/i});
+  fireEvent.click(button)
+
+  expect(screen.getByText(/empty defer block/i)).toBeInTheDocument();
+});
+
 test('renders a defer block initially in the loading state', async () => {
   await render(FixtureComponent, {
     deferBlockStates: DeferBlockState.Loading,
@@ -65,3 +86,14 @@ test('renders a defer block in an initial state using the array syntax', async (
   `,
 })
 class FixtureComponent {}
+
+@Component({
+  template: `
+    <button #trigger>Click</button>
+    @defer(on interaction(trigger)) {
+        <div>empty defer block</div>
+    }
+  `,
+})
+class FixtureComponentWithEvents {}
+