fix: revert methods to test deferrable views

This reverts commit 40661ea, which should be a breaking change and will be released in v15.

Author: timdeschryver

Diff for: apps/example-app/src/app/examples/21-deferable-view.component.ts

@@ -1,5 +1,5 @@
 import { Type, DebugElement } from '@angular/core';
-import { ComponentFixture, DeferBlockState, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { Routes } from '@angular/router';
 import { BoundFunction, Queries, queries, Config as dtlConfig, PrettyDOMOptions } from '@testing-library/dom';
 
@@ -63,11 +63,6 @@ export interface RenderResult<ComponentType, WrapperType = ComponentType> extend
       'componentProperties' | 'componentInputs' | 'componentOutputs' | 'detectChangesOnRender'
     >,
   ) => Promise<void>;
-  /**
-   * @description
-   * Set the state of a deferrable block.
-   */
-  renderDeferBlock: (deferBlockState: DeferBlockState, deferBlockIndex?: number) => Promise<void>;
 }
 
 export interface RenderComponentOptions<ComponentType, Q extends Queries = typeof queries> {
@@ -368,8 +363,6 @@ export interface RenderComponentOptions<ComponentType, Q extends Queries = typeo
    * })
    */
   configureTestBed?: (testbed: TestBed) => void;
-
-  deferBlockStates?: DeferBlockState | { deferBlockState: DeferBlockState; deferBlockIndex: number }[];
 }
 
 export interface ComponentOverride<T> {

Diff for: apps/example-app/src/app/examples/21-deferable-view.spec.ts

@@ -9,7 +9,7 @@ import {
   ApplicationInitStatus,
   isStandalone,
 } from '@angular/core';
-import { ComponentFixture, DeferBlockState, TestBed, tick } from '@angular/core/testing';
+import { ComponentFixture, 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';
@@ -65,7 +65,6 @@ export async function render<SutType, WrapperType = SutType>(
     removeAngularAttributes = false,
     defaultImports = [],
     initialRoute = '',
-    deferBlockStates = undefined,
     configureTestBed = () => {
       /* noop*/
     },
@@ -161,19 +160,10 @@ export async function render<SutType, WrapperType = SutType>(
     }
   }
 
+  let fixture: ComponentFixture<SutType>;
   let detectChanges: () => void;
 
-  const fixture = await renderFixture(componentProperties, componentInputs, componentOutputs);
-
-  if (deferBlockStates) {
-    if (Array.isArray(deferBlockStates)) {
-      for (const deferBlockState of deferBlockStates) {
-        await renderDeferBlock(fixture, deferBlockState.deferBlockState, deferBlockState.deferBlockIndex);
-      }
-    } else {
-      await renderDeferBlock(fixture, deferBlockStates);
-    }
-  }
+  await renderFixture(componentProperties, componentInputs, componentOutputs);
 
   let renderedPropKeys = Object.keys(componentProperties);
   let renderedInputKeys = Object.keys(componentInputs);
@@ -220,61 +210,60 @@ export async function render<SutType, WrapperType = SutType>(
   };
 
   return {
+    // @ts-ignore: fixture assigned
     fixture,
     detectChanges: () => detectChanges(),
     navigate,
     rerender,
-    renderDeferBlock: async (deferBlockState: DeferBlockState, deferBlockIndex?: number) => {
-      await renderDeferBlock(fixture, deferBlockState, deferBlockIndex);
-    },
+    // @ts-ignore: fixture assigned
     debugElement: fixture.debugElement,
+    // @ts-ignore: fixture assigned
     container: fixture.nativeElement,
     debug: (element = fixture.nativeElement, maxLength, options) =>
       Array.isArray(element)
         ? element.forEach((e) => console.log(dtlPrettyDOM(e, maxLength, options)))
         : console.log(dtlPrettyDOM(element, maxLength, options)),
+    // @ts-ignore: fixture assigned
     ...replaceFindWithFindAndDetectChanges(dtlGetQueriesForElement(fixture.nativeElement, queries)),
   };
 
-  async function renderFixture(
-    properties: Partial<SutType>,
-    inputs: Partial<SutType>,
-    outputs: Partial<SutType>,
-  ): Promise<ComponentFixture<SutType>> {
-    const createdFixture = await createComponent(componentContainer);
-    setComponentProperties(createdFixture, properties);
-    setComponentInputs(createdFixture, inputs);
-    setComponentOutputs(createdFixture, outputs);
+  async function renderFixture(properties: Partial<SutType>, inputs: Partial<SutType>, outputs: Partial<SutType>) {
+    if (fixture) {
+      cleanupAtFixture(fixture);
+    }
+
+    fixture = await createComponent(componentContainer);
+    setComponentProperties(fixture, properties);
+    setComponentInputs(fixture, inputs);
+    setComponentOutputs(fixture, outputs);
 
     if (removeAngularAttributes) {
-      createdFixture.nativeElement.removeAttribute('ng-version');
-      const idAttribute = createdFixture.nativeElement.getAttribute('id');
+      fixture.nativeElement.removeAttribute('ng-version');
+      const idAttribute = fixture.nativeElement.getAttribute('id');
       if (idAttribute && idAttribute.startsWith('root')) {
-        createdFixture.nativeElement.removeAttribute('id');
+        fixture.nativeElement.removeAttribute('id');
       }
     }
 
-    mountedFixtures.add(createdFixture);
+    mountedFixtures.add(fixture);
 
     let isAlive = true;
-    createdFixture.componentRef.onDestroy(() => (isAlive = false));
+    fixture.componentRef.onDestroy(() => (isAlive = false));
 
-    if (hasOnChangesHook(createdFixture.componentInstance) && Object.keys(properties).length > 0) {
+    if (hasOnChangesHook(fixture.componentInstance) && Object.keys(properties).length > 0) {
       const changes = getChangesObj(null, componentProperties);
-      createdFixture.componentInstance.ngOnChanges(changes);
+      fixture.componentInstance.ngOnChanges(changes);
     }
 
     detectChanges = () => {
       if (isAlive) {
-        createdFixture.detectChanges();
+        fixture.detectChanges();
       }
     };
 
     if (detectChangesOnRender) {
       detectChanges();
     }
-
-    return createdFixture;
   }
 }
 
@@ -440,30 +429,6 @@ function addAutoImports<SutType>(
   return [...imports, ...components(), ...animations(), ...routing()];
 }
 
-async function renderDeferBlock<SutType>(
-  fixture: ComponentFixture<SutType>,
-  deferBlockState: DeferBlockState,
-  deferBlockIndex?: number,
-) {
-  const deferBlockFixtures = await fixture.getDeferBlocks();
-
-  if (deferBlockIndex !== undefined) {
-    if (deferBlockIndex < 0) {
-      throw new Error('deferBlockIndex must be a positive number');
-    }
-
-    const deferBlockFixture = deferBlockFixtures[deferBlockIndex];
-    if (!deferBlockFixture) {
-      throw new Error(`Could not find a deferrable block with index '${deferBlockIndex}'`);
-    }
-    await deferBlockFixture.render(deferBlockState);
-  } else {
-    for (const deferBlockFixture of deferBlockFixtures) {
-      await deferBlockFixture.render(deferBlockState);
-    }
-  }
-}
-
 /**
  * Wrap waitFor to invoke the Angular change detection cycle before invoking the callback
  */