test: Make tests fail on errors and fix newly uncovered failures (angular#29110)

Author: mmalerba

src/cdk-experimental/combobox/combobox.spec.ts

@@ -1,3 +1,6 @@
+import {CdkComboboxPopup} from '@angular/cdk-experimental/combobox/combobox-popup';
+import {DOWN_ARROW, ESCAPE} from '@angular/cdk/keycodes';
+import {dispatchKeyboardEvent, dispatchMouseEvent} from '@angular/cdk/testing/private';
 import {
   Component,
   DebugElement,
@@ -8,11 +11,8 @@ import {
 } from '@angular/core';
 import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
-import {CdkComboboxModule} from './combobox-module';
 import {CdkCombobox} from './combobox';
-import {dispatchKeyboardEvent, dispatchMouseEvent} from '@angular/cdk/testing/private';
-import {DOWN_ARROW, ESCAPE} from '@angular/cdk/keycodes';
-import {CdkComboboxPopup} from '@angular/cdk-experimental/combobox/combobox-popup';
+import {CdkComboboxModule} from './combobox-module';
 
 describe('Combobox', () => {
   describe('with a basic toggle trigger', () => {
@@ -249,10 +249,10 @@ describe('Combobox', () => {
     });
 
     it('should throw error when given invalid open action', () => {
-      const errorSpy = spyOn(console, 'error');
-      testComponent.actions.set('invalidAction');
-      fixture.detectChanges();
-      expect(errorSpy).toHaveBeenCalled();
+      expect(() => {
+        testComponent.actions.set('invalidAction');
+        fixture.detectChanges();
+      }).toThrowError('invalidAction is not a support open action for CdkCombobox');
     });
   });
 

src/cdk-experimental/scrolling/virtual-scroll-viewport.spec.ts

@@ -1,6 +1,6 @@
 import {CdkVirtualScrollViewport, ScrollingModule} from '@angular/cdk/scrolling';
 import {Component, Input, ViewChild, ViewEncapsulation} from '@angular/core';
-import {waitForAsync, ComponentFixture, fakeAsync, flush, TestBed} from '@angular/core/testing';
+import {ComponentFixture, TestBed, fakeAsync, flush, waitForAsync} from '@angular/core/testing';
 import {ScrollingModule as ExperimentalScrollingModule} from './scrolling-module';
 
 describe('CdkVirtualScrollViewport', () => {
@@ -47,11 +47,13 @@ describe('CdkVirtualScrollViewport', () => {
     }));
 
     it('should throw if maxBufferPx is less than minBufferPx', fakeAsync(() => {
-      testComponent.minBufferPx = 100;
-      testComponent.maxBufferPx = 99;
-      const errorSpy = spyOn(console, 'error');
-      finishInit(fixture);
-      expect(errorSpy).toHaveBeenCalled();
+      expect(() => {
+        testComponent.minBufferPx = 100;
+        testComponent.maxBufferPx = 99;
+        finishInit(fixture);
+      }).toThrowError(
+        'CDK virtual scroll: maxBufferPx must be greater than or equal to minBufferPx',
+      );
     }));
 
     // TODO(mmalerba): Add test that it corrects the initial render if it didn't render enough,

src/cdk/listbox/listbox.spec.ts

@@ -1058,11 +1058,9 @@ describe('CdkOption and CdkListbox', () => {
     });
 
     it('should throw on init if the preselected value is invalid', () => {
-      const errorSpy = spyOn(console, 'error');
-      setupComponent(ListboxWithInvalidPreselectedFormControl, [ReactiveFormsModule]);
-      expect(errorSpy.calls.first().args[1]).toMatch(
-        /Listbox has selected values that do not match any of its options./,
-      );
+      expect(() => {
+        setupComponent(ListboxWithInvalidPreselectedFormControl, [ReactiveFormsModule]);
+      }).toThrowError('Listbox has selected values that do not match any of its options.');
     });
   });
 });

src/cdk/menu/menu-trigger.spec.ts

@@ -1,13 +1,21 @@
-import {Component, ViewChildren, QueryList, ElementRef, ViewChild, Type} from '@angular/core';
+import {ENTER, SPACE, TAB} from '@angular/cdk/keycodes';
+import {
+  Component,
+  ElementRef,
+  QueryList,
+  Type,
+  ViewChild,
+  ViewChildren,
+  provideZoneChangeDetection,
+} from '@angular/core';
 import {ComponentFixture, TestBed, fakeAsync, tick, waitForAsync} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {dispatchKeyboardEvent} from '../../cdk/testing/private';
-import {TAB, SPACE, ENTER} from '@angular/cdk/keycodes';
-import {CdkMenuModule} from './menu-module';
-import {CdkMenuItem} from './menu-item';
 import {CdkMenu} from './menu';
-import {CdkMenuTrigger} from './menu-trigger';
 import {Menu} from './menu-interface';
+import {CdkMenuItem} from './menu-item';
+import {CdkMenuModule} from './menu-module';
+import {CdkMenuTrigger} from './menu-trigger';
 
 describe('MenuTrigger', () => {
   describe('on CdkMenuItem', () => {
@@ -114,6 +122,7 @@ describe('MenuTrigger', () => {
       TestBed.configureTestingModule({
         imports: [CdkMenuModule],
         declarations: [MenuBarWithNestedSubMenus],
+        providers: [provideZoneChangeDetection()],
       }).compileComponents();
     }));
 

src/cdk/menu/menu.spec.ts

@@ -1,24 +1,31 @@
+import {TAB} from '@angular/cdk/keycodes';
+import {
+  Component,
+  ElementRef,
+  QueryList,
+  ViewChild,
+  ViewChildren,
+  provideZoneChangeDetection,
+} from '@angular/core';
 import {
   ComponentFixture,
+  TestBed,
   fakeAsync,
   flush,
-  TestBed,
   tick,
   waitForAsync,
 } from '@angular/core/testing';
-import {Component, ElementRef, QueryList, ViewChild, ViewChildren} from '@angular/core';
-import {TAB} from '@angular/cdk/keycodes';
+import {By} from '@angular/platform-browser';
 import {
   createMouseEvent,
   dispatchEvent,
   dispatchKeyboardEvent,
   dispatchMouseEvent,
 } from '../../cdk/testing/private';
-import {By} from '@angular/platform-browser';
 import {CdkMenu} from './menu';
-import {CdkMenuModule} from './menu-module';
-import {CdkMenuItemCheckbox} from './menu-item-checkbox';
 import {CdkMenuItem} from './menu-item';
+import {CdkMenuItemCheckbox} from './menu-item-checkbox';
+import {CdkMenuModule} from './menu-module';
 
 describe('Menu', () => {
   describe('as checkbox group', () => {
@@ -138,6 +145,7 @@ describe('Menu', () => {
       beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
           imports: [CdkMenuModule, WithComplexNestedMenus],
+          providers: [provideZoneChangeDetection()],
         }).compileComponents();
       }));
 
@@ -329,6 +337,7 @@ describe('Menu', () => {
       beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
           imports: [CdkMenuModule, WithComplexNestedMenusOnBottom],
+          providers: [provideZoneChangeDetection()],
         }).compileComponents();
       }));
 

src/components-examples/material/checkbox/checkbox-harness/checkbox-harness-example.spec.ts

@@ -1,14 +1,19 @@
-import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {HarnessLoader} from '@angular/cdk/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {provideZoneChangeDetection} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {MatCheckboxHarness} from '@angular/material/checkbox/testing';
-import {HarnessLoader} from '@angular/cdk/testing';
 import {CheckboxHarnessExample} from './checkbox-harness-example';
 
 describe('CheckboxHarnessExample', () => {
   let fixture: ComponentFixture<CheckboxHarnessExample>;
   let loader: HarnessLoader;
 
   beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [provideZoneChangeDetection()],
+    });
+
     fixture = TestBed.createComponent(CheckboxHarnessExample);
     fixture.detectChanges();
     loader = TestbedHarnessEnvironment.loader(fixture);

src/components-examples/material/slide-toggle/slide-toggle-harness/slide-toggle-harness-example.spec.ts

@@ -1,14 +1,19 @@
-import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {HarnessLoader} from '@angular/cdk/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {provideZoneChangeDetection} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {MatSlideToggleHarness} from '@angular/material/slide-toggle/testing';
-import {HarnessLoader} from '@angular/cdk/testing';
 import {SlideToggleHarnessExample} from './slide-toggle-harness-example';
 
 describe('SlideToggleHarnessExample', () => {
   let fixture: ComponentFixture<SlideToggleHarnessExample>;
   let loader: HarnessLoader;
 
   beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [provideZoneChangeDetection()],
+    });
+
     fixture = TestBed.createComponent(SlideToggleHarnessExample);
     fixture.detectChanges();
     loader = TestbedHarnessEnvironment.loader(fixture);

src/material/autocomplete/autocomplete.spec.ts

@@ -28,13 +28,13 @@ import {
   provideZoneChangeDetection,
 } from '@angular/core';
 import {
-  waitForAsync,
   ComponentFixture,
+  TestBed,
   fakeAsync,
   flush,
   inject,
-  TestBed,
   tick,
+  waitForAsync,
 } from '@angular/core/testing';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatOption, MatOptionSelectionChange} from '@angular/material/core';
@@ -45,15 +45,15 @@ import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {EMPTY, Observable, Subject, Subscription} from 'rxjs';
 import {map, startWith} from 'rxjs/operators';
 import {
-  getMatAutocompleteMissingPanelError,
+  MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
+  MAT_AUTOCOMPLETE_SCROLL_STRATEGY,
   MatAutocomplete,
   MatAutocompleteDefaultOptions,
   MatAutocompleteModule,
   MatAutocompleteOrigin,
   MatAutocompleteSelectedEvent,
   MatAutocompleteTrigger,
-  MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
-  MAT_AUTOCOMPLETE_SCROLL_STRATEGY,
+  getMatAutocompleteMissingPanelError,
 } from './index';
 
 describe('MDC-based MatAutocomplete', () => {
@@ -1025,6 +1025,9 @@ describe('MDC-based MatAutocomplete', () => {
     it('should disable the input when used with a value accessor and without `matInput`', () => {
       fixture.destroy();
       TestBed.resetTestingModule();
+      TestBed.configureTestingModule({
+        providers: [provideZoneChangeDetection()],
+      });
 
       const plainFixture = createComponent(PlainAutocompleteInputWithFormControl);
       plainFixture.detectChanges();

src/material/bottom-sheet/bottom-sheet.spec.ts

@@ -20,6 +20,7 @@ import {
   ViewChild,
   ViewContainerRef,
   ViewEncapsulation,
+  provideZoneChangeDetection,
 } from '@angular/core';
 import {
   ComponentFixture,
@@ -61,7 +62,7 @@ describe('MatBottomSheet', () => {
         BottomSheetWithInjectedData,
         ShadowDomComponent,
       ],
-      providers: [{provide: Location, useClass: SpyLocation}],
+      providers: [provideZoneChangeDetection(), {provide: Location, useClass: SpyLocation}],
     }).compileComponents();
   }));
 
@@ -639,6 +640,7 @@ describe('MatBottomSheet', () => {
           autoFocus: 'first-tabbable',
         });
 
+        viewContainerFixture.detectChanges();
         await viewContainerFixture.whenStable();
 
         expect(document.activeElement!.tagName)

src/material/datepicker/datepicker.spec.ts

@@ -10,6 +10,7 @@ import {
   UP_ARROW,
 } from '@angular/cdk/keycodes';
 import {Overlay} from '@angular/cdk/overlay';
+import {_supportsShadowDom} from '@angular/cdk/platform';
 import {ScrollDispatcher} from '@angular/cdk/scrolling';
 import {
   createKeyboardEvent,
@@ -21,40 +22,39 @@ import {
 } from '@angular/cdk/testing/private';
 import {
   Component,
+  Directive,
+  Provider,
   Type,
   ViewChild,
-  Provider,
-  Directive,
   ViewEncapsulation,
   provideZoneChangeDetection,
 } from '@angular/core';
-import {ComponentFixture, fakeAsync, flush, inject, TestBed, tick} from '@angular/core/testing';
+import {ComponentFixture, TestBed, fakeAsync, flush, inject, tick} from '@angular/core/testing';
 import {
   FormControl,
   FormsModule,
+  NG_VALIDATORS,
   NgModel,
   ReactiveFormsModule,
   Validator,
-  NG_VALIDATORS,
 } from '@angular/forms';
 import {MAT_DATE_LOCALE, MatNativeDateModule, NativeDateModule} from '@angular/material/core';
 import {MatFormField, MatFormFieldModule} from '@angular/material/form-field';
-import {DEC, JAN, JUL, JUN, SEP} from '../testing';
+import {MatInputModule} from '@angular/material/input';
 import {By} from '@angular/platform-browser';
-import {_supportsShadowDom} from '@angular/cdk/platform';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {Subject} from 'rxjs';
-import {MatInputModule} from '@angular/material/input';
+import {DEC, JAN, JUL, JUN, SEP} from '../testing';
 import {MatDatepicker} from './datepicker';
+import {DatepickerDropdownPositionX, DatepickerDropdownPositionY} from './datepicker-base';
 import {MatDatepickerInput} from './datepicker-input';
 import {MatDatepickerToggle} from './datepicker-toggle';
 import {
   MAT_DATEPICKER_SCROLL_STRATEGY,
+  MatDateSelectionModel,
   MatDatepickerIntl,
   MatDatepickerModule,
-  MatDateSelectionModel,
 } from './index';
-import {DatepickerDropdownPositionX, DatepickerDropdownPositionY} from './datepicker-base';
 
 describe('MatDatepicker', () => {
   const SUPPORTS_INTL = typeof Intl != 'undefined';
@@ -511,6 +511,9 @@ describe('MatDatepicker', () => {
 
       it('should reset the datepicker when it is closed externally', fakeAsync(() => {
         TestBed.resetTestingModule();
+        TestBed.configureTestingModule({
+          providers: [provideZoneChangeDetection()],
+        });
 
         const scrolledSubject = new Subject();
 
@@ -1312,6 +1315,9 @@ describe('MatDatepicker', () => {
 
         fixture.destroy();
         TestBed.resetTestingModule();
+        TestBed.configureTestingModule({
+          providers: [provideZoneChangeDetection()],
+        });
         fixture = createComponent(DatepickerWithToggleInShadowDom, [MatNativeDateModule]);
         fixture.detectChanges();
         testComponent = fixture.componentInstance;

src/material/dialog/testing/dialog-opener.spec.ts

@@ -1,7 +1,7 @@
 import {Component, Inject} from '@angular/core';
-import {fakeAsync, TestBed, flush} from '@angular/core/testing';
-import {MatTestDialogOpenerModule, MatTestDialogOpener} from '@angular/material/dialog/testing';
+import {TestBed, fakeAsync, flush} from '@angular/core/testing';
 import {MAT_DIALOG_DATA, MatDialogRef, MatDialogState} from '@angular/material/dialog';
+import {MatTestDialogOpener, MatTestDialogOpenerModule} from '@angular/material/dialog/testing';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 
 describe('MDC-based MatTestDialogOpener', () => {
@@ -26,12 +26,13 @@ describe('MDC-based MatTestDialogOpener', () => {
     );
   });
 
-  it('should pass data to the component', () => {
+  it('should pass data to the component', async () => {
     const config = {data: 'test'};
     const fixture = TestBed.createComponent(
       MatTestDialogOpener.withComponent(ExampleComponent, config),
     );
     fixture.detectChanges();
+    await fixture.whenStable();
     const dialogContainer = document.querySelector('mat-dialog-container');
     expect(dialogContainer!.innerHTML).toContain('Data: test');
   });