test(multiple): switch remaining tests away from fakeAsync (#33889)

Reworks most of the remaining `fakeAsync` tests in the CDK and Material. The tests that assert on
errors reported asynchronously (e.g. thrown from an RxJS subscription) now use
`jasmine.spyOnGlobalErrorsAsync`.

The `material/list` test was failing without `fakeAsync` because the initial `ngModel` value from
`beforeEach` was written at the test's first `await`, clearing the selection. We now flush it before
the test starts.

Also fixes a `cdk/table` test that was detecting changes on the wrong fixture.

(cherry picked from commit 62f58d1)

Author: MeAkib

src/cdk/drag-drop/directives/drop-list-shared.spec.ts

@@ -13,7 +13,7 @@ import {
   inject,
   signal,
 } from '@angular/core';
-import {ComponentFixture, fakeAsync, flush, TestBed, tick} from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {Platform, _supportsShadowDom} from '../../platform';
 import {CdkScrollable, ViewportRuler} from '../../scrolling';
 import {
@@ -1096,19 +1096,19 @@ export function defineCommonDropListTests(config: {
         .toBe(sourceCanvas.toDataURL());
     });
 
-    // TODO(crisbeto): this one is using `fakeAsync` because we throw an error from a subscription.
-    it('should not throw when cloning an invalid canvas', fakeAsync(() => {
-      const fixture = createComponent(DraggableWithInvalidCanvasInDropZone);
-      fixture.detectChanges();
-      const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement;
+    it('should not throw when cloning an invalid canvas', async () => {
+      await jasmine.spyOnGlobalErrorsAsync(async globalErrorSpy => {
+        const fixture = createComponent(DraggableWithInvalidCanvasInDropZone);
+        fixture.detectChanges();
+        const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement;
 
-      expect(() => {
-        startDraggingViaMouse(fixture, item);
-        tick();
-      }).not.toThrow();
+        expect(() => startDraggingViaMouse(fixture, item)).not.toThrow();
+        await wait(0);
 
-      expect(document.querySelector('.cdk-drag-preview canvas')).toBeTruthy();
-    }));
+        expect(globalErrorSpy).not.toHaveBeenCalled();
+        expect(document.querySelector('.cdk-drag-preview canvas')).toBeTruthy();
+      });
+    });
 
     it('should clone the content of descendant input elements', () => {
       const fixture = createComponent(DraggableWithInputsInDropZone);
@@ -2340,29 +2340,32 @@ export function defineCommonDropListTests(config: {
       ]);
     });
 
-    // TODO(crisbeto): this one is using `fakeAsync` because we throw an error from a subscription.
-    it('should not throw if an item is removed after dragging has started', fakeAsync(() => {
-      const fixture = createComponent(DraggableInDropZone);
-      fixture.detectChanges();
-      const dragItems = fixture.componentInstance.dragItems;
-      const firstElement = dragItems.first.element.nativeElement;
-      const lastItemRect = dragItems.last.element.nativeElement.getBoundingClientRect();
-
-      // Start dragging.
-      startDraggingViaMouse(fixture, firstElement);
+    it('should not throw if an item is removed after dragging has started', async () => {
+      await jasmine.spyOnGlobalErrorsAsync(async globalErrorSpy => {
+        const fixture = createComponent(DraggableInDropZone);
+        fixture.detectChanges();
+        const dragItems = fixture.componentInstance.dragItems;
+        const firstElement = dragItems.first.element.nativeElement;
+        const lastItemRect = dragItems.last.element.nativeElement.getBoundingClientRect();
 
-      // Remove the last item.
-      fixture.componentInstance.items.pop();
-      fixture.changeDetectorRef.markForCheck();
-      fixture.detectChanges();
+        // Start dragging.
+        startDraggingViaMouse(fixture, firstElement);
 
-      expect(() => {
-        // Move the dragged item over where the remove item would've been.
-        dispatchMouseEvent(document, 'mousemove', lastItemRect.left + 1, lastItemRect.top + 1);
+        // Remove the last item.
+        fixture.componentInstance.items.pop();
+        fixture.changeDetectorRef.markForCheck();
         fixture.detectChanges();
-        flush();
-      }).not.toThrow();
-    }));
+
+        expect(() => {
+          // Move the dragged item over where the remove item would've been.
+          dispatchMouseEvent(document, 'mousemove', lastItemRect.left + 1, lastItemRect.top + 1);
+          fixture.detectChanges();
+        }).not.toThrow();
+        await wait(0);
+
+        expect(globalErrorSpy).not.toHaveBeenCalled();
+      });
+    });
 
     it('should not be able to start a drag sequence while another one is still active', async () => {
       const fixture = createComponent(DraggableInDropZone);
@@ -4703,33 +4706,43 @@ export function defineCommonDropListTests(config: {
         .toBe(targetContainer);
     });
 
-    // TODO(crisbeto): this one is using `fakeAsync` because we throw an error from a subscription.
-    it('should throw if the items are not inside of the alternate container', fakeAsync(() => {
-      const fixture = createComponent(DraggableWithInvalidAlternateContainer);
-      fixture.detectChanges();
+    it('should throw if the items are not inside of the alternate container', async () => {
+      await jasmine.spyOnGlobalErrorsAsync(async globalErrorSpy => {
+        const fixture = createComponent(DraggableWithInvalidAlternateContainer);
+        fixture.detectChanges();
 
-      expect(() => {
         const item = fixture.componentInstance.dragItems.first.element.nativeElement;
         startDraggingViaMouse(fixture, item);
-        tick();
-      }).toThrowError(
-        /Invalid DOM structure for drop list\. All items must be placed directly inside of the element container/,
-      );
-    }));
+        await wait(0);
+
+        expect(globalErrorSpy).toHaveBeenCalledWith(
+          jasmine.objectContaining({
+            message: jasmine.stringMatching(
+              /Invalid DOM structure for drop list\. All items must be placed directly inside of the element container/,
+            ),
+          }),
+        );
+      });
+    });
 
-    // TODO(crisbeto): this one is using `fakeAsync` because we throw an error from a subscription.
-    it('should throw if the alternate container cannot be found', fakeAsync(() => {
-      const fixture = createComponent(DraggableWithMissingAlternateContainer);
-      fixture.detectChanges();
+    it('should throw if the alternate container cannot be found', async () => {
+      await jasmine.spyOnGlobalErrorsAsync(async globalErrorSpy => {
+        const fixture = createComponent(DraggableWithMissingAlternateContainer);
+        fixture.detectChanges();
 
-      expect(() => {
         const item = fixture.componentInstance.dragItems.first.element.nativeElement;
         startDraggingViaMouse(fixture, item);
-        tick();
-      }).toThrowError(
-        /CdkDropList could not find an element container matching the selector "does-not-exist"/,
-      );
-    }));
+        await wait(0);
+
+        expect(globalErrorSpy).toHaveBeenCalledWith(
+          jasmine.objectContaining({
+            message: jasmine.stringMatching(
+              /CdkDropList could not find an element container matching the selector "does-not-exist"/,
+            ),
+          }),
+        );
+      });
+    });
   });
 
   describe('with an anchor', () => {

src/cdk/table/table.spec.ts

@@ -16,7 +16,7 @@ import {
   signal,
 } from '@angular/core';
 import {By} from '@angular/platform-browser';
-import {ComponentFixture, fakeAsync, flush, TestBed} from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {BehaviorSubject, Observable, combineLatest, of as observableOf} from 'rxjs';
 import {map} from 'rxjs/operators';
 import {CdkColumnDef} from './cell';
@@ -694,16 +694,19 @@ describe('CdkTable', () => {
     ).not.toThrow();
   });
 
-  it('should throw an error if a column definition is requested but not defined after render', fakeAsync(() => {
+  it('should throw an error if a column definition is requested but not defined after render', async () => {
     const columnDefinitionMissingAfterRenderFixture = TestBed.createComponent(
       MissingColumnDefAfterRenderCdkTableApp,
     );
-    expect(() => {
-      columnDefinitionMissingAfterRenderFixture.detectChanges();
-      flush();
-      columnDefinitionMissingAfterRenderFixture.detectChanges();
-    }).toThrowError(getTableUnknownColumnError('column_a').message);
-  }));
+    columnDefinitionMissingAfterRenderFixture.detectChanges();
+
+    // Wait for the `setTimeout` in the component to add the missing column.
+    await new Promise(resolve => setTimeout(resolve));
+
+    expect(() => columnDefinitionMissingAfterRenderFixture.detectChanges()).toThrowError(
+      getTableUnknownColumnError('column_a').message,
+    );
+  });
 
   it('should throw an error if the row definitions are missing', () => {
     expect(() =>
@@ -820,17 +823,21 @@ describe('CdkTable', () => {
       expect(updatedRows[2].classList).toContain('default-row');
     });
 
-    it('should error if there is row data that does not have a matching row template', fakeAsync(() => {
-      const whenRowWithoutDefaultFixture = TestBed.createComponent(
-        WhenRowWithoutDefaultCdkTableApp,
-      );
-      const data = whenRowWithoutDefaultFixture.componentInstance.dataSource.data;
-      expect(() => {
+    it('should error if there is row data that does not have a matching row template', async () => {
+      // The error is thrown inside a subscription so RxJS reports it asynchronously.
+      await jasmine.spyOnGlobalErrorsAsync(async globalErrorSpy => {
+        const whenRowWithoutDefaultFixture = TestBed.createComponent(
+          WhenRowWithoutDefaultCdkTableApp,
+        );
+        const data = whenRowWithoutDefaultFixture.componentInstance.dataSource.data;
         whenRowWithoutDefaultFixture.detectChanges();
-        flush();
-        fixture.detectChanges();
-      }).toThrowError(getTableMissingMatchingRowDefError(data[0]).message);
-    }));
+        await new Promise(resolve => setTimeout(resolve));
+
+        expect(globalErrorSpy).toHaveBeenCalledWith(
+          new Error(getTableMissingMatchingRowDefError(data[0]).message),
+        );
+      });
+    });
 
     it('should fail when multiple rows match data without multiTemplateDataRows', () => {
       let whenFixture = TestBed.createComponent(WhenRowMultipleDefaultsCdkTableApp);

src/cdk/tree/control/nested-tree-control.spec.ts

@@ -1,4 +1,3 @@
-import {fakeAsync, flush} from '@angular/core/testing';
 import {of as observableOf} from 'rxjs';
 import {NestedTreeControl} from './nested-tree-control';
 
@@ -114,19 +113,19 @@ describe('CdkNestedTreeControl', () => {
         .toBe(totalNumber);
     });
 
-    // Note that this needs to be `fakeAsync` in order to
-    // catch the error inside an observable correctly.
-    it('should handle null children', fakeAsync(() => {
-      const nodes = generateData(3, 2);
+    it('should handle null children', async () => {
+      // Errors inside an observable are reported asynchronously so we need to check for global ones.
+      await jasmine.spyOnGlobalErrorsAsync(async globalErrorSpy => {
+        const nodes = generateData(3, 2);
 
-      nodes[1].children = null!;
-      treeControl.dataNodes = nodes;
+        nodes[1].children = null!;
+        treeControl.dataNodes = nodes;
 
-      expect(() => {
-        treeControl.expandAll();
-        flush();
-      }).not.toThrow();
-    }));
+        expect(() => treeControl.expandAll()).not.toThrow();
+        await new Promise(resolve => setTimeout(resolve));
+        expect(globalErrorSpy).not.toHaveBeenCalled();
+      });
+    });
 
     describe('with children array', () => {
       let getStaticChildren = (node: TestData) => node.children;

src/material/list/selection-list.spec.ts

@@ -13,7 +13,7 @@ import {
   QueryList,
   ViewChildren,
 } from '@angular/core';
-import {ComponentFixture, TestBed, fakeAsync, tick} from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {FormControl, FormsModule, NgModel, ReactiveFormsModule} from '@angular/forms';
 import {ThemePalette} from '../core';
 import {By} from '@angular/platform-browser';
@@ -1339,8 +1339,11 @@ describe('MatSelectionList with forms', () => {
         .toBe(false);
     });
 
-    // TODO: this seems tricky to switch away from `fakeAsync` for some reason.
-    it('should remove a selected option from the value on destroy', fakeAsync(() => {
+    it('should remove a selected option from the value on destroy', async () => {
+      // Flush the initial `ngModel` value before the test starts so that it doesn't overwrite the
+      // selection further down.
+      await fixture.whenStable();
+
       listOptions[1].selected = true;
       listOptions[2].selected = true;
 
@@ -1350,10 +1353,10 @@ describe('MatSelectionList with forms', () => {
 
       fixture.componentInstance.options.pop();
       fixture.detectChanges();
-      tick();
+      await fixture.whenStable();
 
       expect(fixture.componentInstance.selectedOptions).toEqual(['opt2']);
-    }));
+    });
 
     it('should update the model if an option got selected via the model', async () => {
       expect(fixture.componentInstance.selectedOptions).toEqual([]);

src/material/table/table.spec.ts

@@ -1,5 +1,5 @@
 import {AfterViewInit, Component, OnInit, ViewChild, ChangeDetectionStrategy} from '@angular/core';
-import {ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {MatTable, MatTableDataSource, MatTableModule} from './index';
 import {DataSource} from '@angular/cdk/table';
 import {BehaviorSubject, Observable} from 'rxjs';
@@ -187,15 +187,18 @@ describe('MatTable', () => {
     expect(stuckCellElement.classList).toContain('mat-mdc-table-sticky');
   });
 
-  // Note: needs to be fakeAsync so it catches the error.
-  it('should not throw when a row definition is on an ng-container', fakeAsync(() => {
-    const fixture = TestBed.createComponent(TableWithNgContainerRow);
+  it('should not throw when a row definition is on an ng-container', async () => {
+    // Some of the table's logic runs asynchronously so we need to check for global errors.
+    await jasmine.spyOnGlobalErrorsAsync(async globalErrorSpy => {
+      const fixture = TestBed.createComponent(TableWithNgContainerRow);
 
-    expect(() => {
-      fixture.detectChanges();
-      tick();
-    }).not.toThrow();
-  }));
+      expect(() => fixture.detectChanges()).not.toThrow();
+      await fixture.whenStable();
+      await new Promise(resolve => setTimeout(resolve));
+
+      expect(globalErrorSpy).not.toHaveBeenCalled();
+    });
+  });
 
   it('should be able to render a flexbox-based table', () => {
     expect(() => {