fix(core): DeferBlockFixture.render should not wait for stability (#55271)

atscott · AndrewKushnir · commit c175bca36432 · 2024-04-23T15:12:39.000-07:00
The `DeferBlockFixture.render` function should not await the `whenStable` promise of the fixture. This does not allow developers to test any intermediate states that might occur between rendering the initial content and the full app stability. fixes #55235 PR Close #55271
diff --git a/packages/core/src/defer/instructions.ts b/packages/core/src/defer/instructions.ts
@@ -694,15 +694,16 @@ export function triggerPrefetching(tDetails: TDeferBlockDetails, lView: LView, t
  * @param tDetails Static information about this defer block.
  * @param lView LView of a host view.
  */
-export function triggerResourceLoading(tDetails: TDeferBlockDetails, lView: LView, tNode: TNode) {
+export function triggerResourceLoading(
+    tDetails: TDeferBlockDetails, lView: LView, tNode: TNode): Promise<unknown> {
   const injector = lView[INJECTOR]!;
   const tView = lView[TVIEW];
 
   if (tDetails.loadingState !== DeferDependenciesLoadingState.NOT_STARTED) {
     // If the loading status is different from initial one, it means that
     // the loading of dependencies is in progress and there is nothing to do
     // in this function. All details can be obtained from the `tDetails` object.
-    return;
+    return tDetails.loadingPromise ?? Promise.resolve();
   }
 
   const lDetails = getLDeferBlockDetails(lView, tNode);
@@ -739,7 +740,7 @@ export function triggerResourceLoading(tDetails: TDeferBlockDetails, lView: LVie
       tDetails.loadingState = DeferDependenciesLoadingState.COMPLETE;
       pendingTasks.remove(taskId);
     });
-    return;
+    return tDetails.loadingPromise;
   }
 
   // Start downloading of defer block dependencies.
@@ -805,6 +806,7 @@ export function triggerResourceLoading(tDetails: TDeferBlockDetails, lView: LVie
       }
     }
   });
+  return tDetails.loadingPromise;
 }
 
 /** Utility function to render placeholder content (if present) */
diff --git a/packages/core/test/defer_fixture_spec.ts b/packages/core/test/defer_fixture_spec.ts
@@ -7,7 +7,7 @@
  */
 
 import {ɵPLATFORM_BROWSER_ID as PLATFORM_BROWSER_ID} from '@angular/common';
-import {Component, PLATFORM_ID} from '@angular/core';
+import {Component, PLATFORM_ID, ɵPendingTasks as PendingTasks} from '@angular/core';
 import {DeferBlockBehavior, DeferBlockState, TestBed} from '@angular/core/testing';
 import {expect} from '@angular/platform-browser/testing/src/matchers';
 
@@ -190,6 +190,42 @@ describe('DeferFixture', () => {
     expect(el.querySelector('.more')).toBeDefined();
   });
 
+  it('should not wait forever if application is unstable for a long time', async () => {
+    @Component({
+      selector: 'defer-comp',
+      standalone: true,
+      imports: [SecondDeferredComp],
+      template: `
+        <div>
+          @defer (on immediate) {
+            <second-deferred-comp />
+          }
+        </div>
+      `
+    })
+    class DeferComp {
+      constructor(taskService: PendingTasks) {
+        // Add a task and never remove it. Keeps application unstable forever
+        taskService.add();
+      }
+    }
+
+    TestBed.configureTestingModule({
+      imports: [
+        DeferComp,
+        SecondDeferredComp,
+      ],
+      providers: COMMON_PROVIDERS,
+      deferBlockBehavior: DeferBlockBehavior.Manual,
+    });
+
+    const componentFixture = TestBed.createComponent(DeferComp);
+    const deferBlock = (await componentFixture.getDeferBlocks())[0];
+    const el = componentFixture.nativeElement as HTMLElement;
+    await deferBlock.render(DeferBlockState.Complete);
+    expect(el.querySelector('.more')).toBeDefined();
+  });
+
   it('should work with templates that have local refs', async () => {
     @Component({
       selector: 'defer-comp',
diff --git a/packages/core/testing/src/defer.ts b/packages/core/testing/src/defer.ts
@@ -40,7 +40,6 @@ export class DeferBlockFixture {
     const skipTimerScheduling = true;
     renderDeferBlockState(state, this.block.tNode, this.block.lContainer, skipTimerScheduling);
     this.componentFixture.detectChanges();
-    return this.componentFixture.whenStable();
   }
 
   /**

Original file line number	Diff line number	Diff line change
`@@ -40,7 +40,6 @@ export class DeferBlockFixture {`
`40`	`40`	`const skipTimerScheduling = true;`
`41`	`41`	`renderDeferBlockState(state, this.block.tNode, this.block.lContainer, skipTimerScheduling);`
`42`	`42`	`this.componentFixture.detectChanges();`
`43`		`- return this.componentFixture.whenStable();`
`44`	`43`	`}`
`45`	`44`
`46`	`45`	`/**`