test(multiple): remove noop module from tests

Removes the `NoopAnimationsModule` from all tests since it's not necessary in most cases. For the cases where it's relevant, it has been replaced with our own token for disabling animations.

Author: crisbeto

src/cdk/text-field/autosize.spec.ts

@@ -9,7 +9,6 @@ import {
 } from '@angular/core/testing';
 import {FormsModule} from '@angular/forms';
 import {By} from '@angular/platform-browser';
-import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {dispatchFakeEvent} from '../testing/private';
 import {CdkTextareaAutosize} from './autosize';
 import {TextFieldModule} from './text-field-module';
@@ -24,7 +23,6 @@ describe('CdkTextareaAutosize', () => {
       imports: [
         FormsModule,
         TextFieldModule,
-        NoopAnimationsModule,
         AutosizeTextAreaWithContent,
         AutosizeTextAreaWithValue,
         AutosizeTextareaWithNgModel,

src/material/autocomplete/autocomplete.spec.ts

@@ -35,10 +35,9 @@ import {
 } from '@angular/core/testing';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {By} from '@angular/platform-browser';
-import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {EMPTY, Observable, Subject, Subscription} from 'rxjs';
 import {map, startWith} from 'rxjs/operators';
-import {MatOption, MatOptionSelectionChange} from '../core';
+import {MATERIAL_ANIMATIONS, MatOption, MatOptionSelectionChange} from '../core';
 import {MatFormField, MatFormFieldModule} from '../form-field';
 import {MatInputModule} from '../input';
 import {
@@ -65,10 +64,12 @@ describe('MatAutocomplete', () => {
         MatInputModule,
         FormsModule,
         ReactiveFormsModule,
-        NoopAnimationsModule,
         OverlayModule,
       ],
-      providers,
+      providers: [
+        ...providers,
+        {provide: MATERIAL_ANIMATIONS, useValue: {animationsDisabled: true}},
+      ],
       declarations: [component],
     });
 

src/material/autocomplete/autocomplete.zone.spec.ts

@@ -13,9 +13,8 @@ import {
 } from '@angular/core';
 import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {Subscription} from 'rxjs';
-import {MatOption} from '../core';
+import {MATERIAL_ANIMATIONS, MatOption} from '../core';
 import {MatFormField, MatFormFieldModule} from '../form-field';
 import {MatInputModule} from '../input';
 import {MatAutocomplete} from './autocomplete';
@@ -32,10 +31,13 @@ describe('MatAutocomplete Zone.js integration', () => {
         MatInputModule,
         FormsModule,
         ReactiveFormsModule,
-        NoopAnimationsModule,
         OverlayModule,
       ],
-      providers: [provideZoneChangeDetection(), ...providers],
+      providers: [
+        provideZoneChangeDetection(),
+        ...providers,
+        {provide: MATERIAL_ANIMATIONS, useValue: {animationsDisabled: true}},
+      ],
       declarations: [component],
     });
 

src/material/autocomplete/testing/autocomplete-harness.spec.ts

@@ -2,7 +2,6 @@ import {Component} from '@angular/core';
 import {MatAutocompleteModule} from '../module';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {HarnessLoader} from '@angular/cdk/testing';
-import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
 import {MatAutocompleteHarness} from './autocomplete-harness';
 
@@ -11,10 +10,6 @@ describe('MatAutocompleteHarness', () => {
   let loader: HarnessLoader;
 
   beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [NoopAnimationsModule, MatAutocompleteModule, AutocompleteHarnessTest],
-    });
-
     fixture = TestBed.createComponent(AutocompleteHarnessTest);
     fixture.detectChanges();
     loader = TestbedHarnessEnvironment.loader(fixture);

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

@@ -30,12 +30,12 @@ import {
   tick,
 } from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
-import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 
 import {MAT_BOTTOM_SHEET_DEFAULT_OPTIONS, MatBottomSheet} from './bottom-sheet';
 import {MAT_BOTTOM_SHEET_DATA, MatBottomSheetConfig} from './bottom-sheet-config';
 import {MatBottomSheetModule} from './bottom-sheet-module';
 import {MatBottomSheetRef} from './bottom-sheet-ref';
+import {MATERIAL_ANIMATIONS} from '../core';
 
 describe('MatBottomSheet', () => {
   let bottomSheet: MatBottomSheet;
@@ -50,7 +50,6 @@ describe('MatBottomSheet', () => {
     TestBed.configureTestingModule({
       imports: [
         MatBottomSheetModule,
-        NoopAnimationsModule,
         ComponentWithChildViewContainer,
         ComponentWithTemplateRef,
         ContentElementDialog,
@@ -60,7 +59,10 @@ describe('MatBottomSheet', () => {
         BottomSheetWithInjectedData,
         ShadowDomComponent,
       ],
-      providers: [{provide: Location, useClass: SpyLocation}],
+      providers: [
+        {provide: Location, useClass: SpyLocation},
+        {provide: MATERIAL_ANIMATIONS, useValue: {animationsDisabled: true}},
+      ],
     });
 
     bottomSheet = TestBed.inject(MatBottomSheet);
@@ -877,7 +879,8 @@ describe('MatBottomSheet with parent MatBottomSheet', () => {
 
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
-      imports: [MatBottomSheetModule, NoopAnimationsModule, ComponentThatProvidesMatBottomSheet],
+      imports: [MatBottomSheetModule, ComponentThatProvidesMatBottomSheet],
+      providers: [{provide: MATERIAL_ANIMATIONS, useValue: {animationsDisabled: true}}],
     });
 
     parentBottomSheet = TestBed.inject(MatBottomSheet);
@@ -957,13 +960,11 @@ describe('MatBottomSheet with default options', () => {
     };
 
     TestBed.configureTestingModule({
-      imports: [
-        MatBottomSheetModule,
-        NoopAnimationsModule,
-        ComponentWithChildViewContainer,
-        DirectiveWithViewContainer,
+      imports: [MatBottomSheetModule, ComponentWithChildViewContainer, DirectiveWithViewContainer],
+      providers: [
+        {provide: MAT_BOTTOM_SHEET_DEFAULT_OPTIONS, useValue: defaultConfig},
+        {provide: MATERIAL_ANIMATIONS, useValue: {animationsDisabled: true}},
       ],
-      providers: [{provide: MAT_BOTTOM_SHEET_DEFAULT_OPTIONS, useValue: defaultConfig}],
     });
 
     bottomSheet = TestBed.inject(MatBottomSheet);

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

@@ -3,18 +3,13 @@ import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {HarnessLoader} from '@angular/cdk/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
 import {MatBottomSheet, MatBottomSheetConfig, MatBottomSheetModule} from '../../bottom-sheet';
-import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {MatBottomSheetHarness} from './bottom-sheet-harness';
 
 describe('MatBottomSheetHarness', () => {
   let fixture: ComponentFixture<BottomSheetHarnessTest>;
   let loader: HarnessLoader;
 
   beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [MatBottomSheetModule, NoopAnimationsModule, BottomSheetHarnessTest],
-    });
-
     fixture = TestBed.createComponent(BottomSheetHarnessTest);
     fixture.detectChanges();
     loader = TestbedHarnessEnvironment.documentRootLoader(fixture);

src/material/chips/chip-grid.spec.ts

@@ -38,6 +38,7 @@ import {MatFormFieldModule} from '../form-field';
 import {MatInputModule} from '../input';
 import {By} from '@angular/platform-browser';
 import {MatChipEvent, MatChipGrid, MatChipInputEvent, MatChipRow, MatChipsModule} from './index';
+import {MATERIAL_ANIMATIONS} from '../core';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 
 describe('MatChipGrid', () => {
@@ -121,27 +122,25 @@ describe('MatChipGrid', () => {
     });
 
     describe('focus behaviors', () => {
-      let fixture: ComponentFixture<StandardChipGrid>;
-
-      beforeEach(() => {
-        fixture = createComponent(StandardChipGrid);
-      });
-
       it('should focus the first chip on focus', () => {
+        const fixture = createComponent(StandardChipGrid);
         chipGridInstance.focus();
         fixture.detectChanges();
 
         expect(document.activeElement).toBe(primaryActions[0]);
       });
 
       it('should focus the primary action when calling the `focus` method', () => {
+        const fixture = createComponent(StandardChipGrid);
         chips.last.focus();
         fixture.detectChanges();
 
         expect(document.activeElement).toBe(primaryActions[primaryActions.length - 1]);
       });
 
       it('should not be able to become focused when disabled', () => {
+        const fixture = createComponent(StandardChipGrid);
+
         expect(chipGridInstance.focused)
           .withContext('Expected grid to not be focused.')
           .toBe(false);
@@ -159,6 +158,7 @@ describe('MatChipGrid', () => {
       });
 
       it('should remove the tabindex from the grid if it is disabled', () => {
+        const fixture = createComponent(StandardChipGrid);
         expect(chipGridNativeElement.getAttribute('tabindex')).toBe('0');
 
         chipGridInstance.disabled = true;
@@ -170,6 +170,9 @@ describe('MatChipGrid', () => {
 
       describe('on chip destroy', () => {
         it('should focus the next item', () => {
+          // TODO(crisbeto): this test fails without the NoopAnimationsModule for some reason.
+          // It can indicate a deeper issue with the chips.
+          const fixture = createComponent(StandardChipGrid, undefined, [NoopAnimationsModule]);
           const midItem = chips.get(2)!;
 
           // Focus the middle item
@@ -185,6 +188,9 @@ describe('MatChipGrid', () => {
         });
 
         it('should focus the previous item', () => {
+          // TODO(crisbeto): this test fails without the NoopAnimationsModule for some reason.
+          // It can indicate a deeper issue with the chips.
+          const fixture = createComponent(StandardChipGrid, undefined, [NoopAnimationsModule]);
           // Focus the last item
           chips.last.focus();
 
@@ -198,6 +204,9 @@ describe('MatChipGrid', () => {
         });
 
         it('should not focus if chip grid is not focused', fakeAsync(() => {
+          // TODO(crisbeto): this test fails without the NoopAnimationsModule for some reason.
+          // It can indicate a deeper issue with the chips.
+          const fixture = createComponent(StandardChipGrid, undefined, [NoopAnimationsModule]);
           const midItem = chips.get(2)!;
 
           // Focus and blur the middle item
@@ -216,6 +225,9 @@ describe('MatChipGrid', () => {
         }));
 
         it('should focus the grid if the last focused item is removed', () => {
+          // TODO(crisbeto): this test fails without the NoopAnimationsModule for some reason.
+          // It can indicate a deeper issue with the chips.
+          const fixture = createComponent(StandardChipGrid, undefined, [NoopAnimationsModule]);
           testComponent.chips = [0];
           fixture.changeDetectorRef.markForCheck();
 
@@ -232,6 +244,7 @@ describe('MatChipGrid', () => {
       });
 
       it('should have a focus indicator', () => {
+        createComponent(StandardChipGrid, undefined, [NoopAnimationsModule]);
         const focusIndicators = chipGridNativeElement.querySelectorAll(
           '.mat-mdc-chip-primary-focus-indicator',
         );
@@ -488,14 +501,11 @@ describe('MatChipGrid', () => {
   });
 
   describe('FormFieldChipGrid', () => {
-    let fixture: ComponentFixture<FormFieldChipGrid>;
-
-    beforeEach(() => {
-      fixture = createComponent(FormFieldChipGrid);
-    });
-
     describe('keyboard behavior', () => {
       it('should maintain focus if the active chip is deleted', () => {
+        // TODO(crisbeto): this test fails without the NoopAnimationsModule for some reason.
+        // It can indicate a deeper issue with the chips.
+        const fixture = createComponent(FormFieldChipGrid, undefined, [NoopAnimationsModule]);
         const secondChip = fixture.nativeElement.querySelectorAll('.mat-mdc-chip')[1];
         const secondChipAction = secondChip.querySelector('.mdc-evolution-chip__action--primary');
 
@@ -512,6 +522,7 @@ describe('MatChipGrid', () => {
 
       describe('when the input has focus', () => {
         it('should not focus the last chip when press DELETE', () => {
+          const fixture = createComponent(FormFieldChipGrid);
           let nativeInput = fixture.nativeElement.querySelector('input');
 
           // Focus the input
@@ -527,6 +538,7 @@ describe('MatChipGrid', () => {
         });
 
         it('should focus the last chip when press BACKSPACE', () => {
+          const fixture = createComponent(FormFieldChipGrid);
           let nativeInput = fixture.nativeElement.querySelector('input');
 
           // Focus the input
@@ -542,6 +554,7 @@ describe('MatChipGrid', () => {
         });
 
         it('should not focus the last chip when pressing BACKSPACE on a non-empty input', () => {
+          const fixture = createComponent(FormFieldChipGrid);
           const nativeInput = fixture.nativeElement.querySelector('input');
           nativeInput.value = 'hello';
           nativeInput.focus();
@@ -558,6 +571,7 @@ describe('MatChipGrid', () => {
     });
 
     it('should complete the stateChanges stream on destroy', () => {
+      const fixture = createComponent(FormFieldChipGrid);
       const spy = jasmine.createSpy('stateChanges complete');
       const subscription = chipGridInstance.stateChanges.subscribe({complete: spy});
 
@@ -568,18 +582,14 @@ describe('MatChipGrid', () => {
   });
 
   describe('with chip remove', () => {
-    let fixture: ComponentFixture<ChipGridWithRemove>;
-    let trailingActions: NodeListOf<HTMLElement>;
-
-    beforeEach(fakeAsync(() => {
-      fixture = createComponent(ChipGridWithRemove);
+    it('should properly focus next item if chip is removed through click', fakeAsync(() => {
+      // TODO(crisbeto): this test fails without the NoopAnimationsModule for some reason.
+      // It can indicate a deeper issue with the chips.
+      const fixture = createComponent(ChipGridWithRemove, undefined, [NoopAnimationsModule]);
       flush();
-      trailingActions = chipGridNativeElement.querySelectorAll(
+      const trailingActions = chipGridNativeElement.querySelectorAll<HTMLElement>(
         '.mdc-evolution-chip__action--trailing',
       );
-    }));
-
-    it('should properly focus next item if chip is removed through click', fakeAsync(() => {
       const chip = chips.get(2)!;
       chip.focus();
       fixture.detectChanges();
@@ -1018,6 +1028,7 @@ describe('MatChipGrid', () => {
   function createComponent<T>(
     component: Type<T>,
     direction: Direction = 'ltr',
+    additionalImports: Type<unknown>[] = [],
   ): ComponentFixture<T> {
     directionality = {
       value: direction,
@@ -1031,9 +1042,12 @@ describe('MatChipGrid', () => {
         MatChipsModule,
         MatFormFieldModule,
         MatInputModule,
-        NoopAnimationsModule,
+        ...additionalImports,
+      ],
+      providers: [
+        {provide: Directionality, useValue: directionality},
+        {provide: MATERIAL_ANIMATIONS, useValue: {animationsDisabled: true}},
       ],
-      providers: [{provide: Directionality, useValue: directionality}],
       declarations: [component],
     });