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,7 +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 {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {MATERIAL_ANIMATIONS} from '../core';
 
 describe('MatChipGrid', () => {
   let chipGridDebugElement: DebugElement;
@@ -1031,9 +1031,11 @@ describe('MatChipGrid', () => {
         MatChipsModule,
         MatFormFieldModule,
         MatInputModule,
-        NoopAnimationsModule,
       ],
-      providers: [{provide: Directionality, useValue: directionality}],
+      providers: [
+        {provide: Directionality, useValue: directionality},
+        {provide: MATERIAL_ANIMATIONS, useValue: {animationsDisabled: true}},
+      ],
       declarations: [component],
     });
 

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

@@ -10,7 +10,6 @@ import {Component, DebugElement, ViewChild} from '@angular/core';
 import {ComponentFixture, TestBed, fakeAsync, flush, waitForAsync} from '@angular/core/testing';
 import {MatFormFieldModule} from '../form-field';
 import {By} from '@angular/platform-browser';
-import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {Subject} from 'rxjs';
 import {
   MAT_CHIPS_DEFAULT_OPTIONS,
@@ -20,6 +19,7 @@ import {
   MatChipsDefaultOptions,
   MatChipsModule,
 } from './index';
+import {MATERIAL_ANIMATIONS} from '../core';
 
 describe('MatChipInput', () => {
   let fixture: ComponentFixture<TestChipInput>;
@@ -31,7 +31,7 @@ describe('MatChipInput', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [PlatformModule, MatChipsModule, MatFormFieldModule, NoopAnimationsModule],
+      imports: [PlatformModule, MatChipsModule, MatFormFieldModule],
       providers: [
         {
           provide: Directionality,
@@ -42,6 +42,7 @@ describe('MatChipInput', () => {
             };
           },
         },
+        {provide: MATERIAL_ANIMATIONS, useValue: {animationsDisabled: true}},
       ],
       declarations: [TestChipInput],
     });
@@ -216,13 +217,14 @@ describe('MatChipInput', () => {
       fixture.destroy();
 
       TestBed.resetTestingModule().configureTestingModule({
-        imports: [MatChipsModule, MatFormFieldModule, PlatformModule, NoopAnimationsModule],
+        imports: [MatChipsModule, MatFormFieldModule, PlatformModule],
         declarations: [TestChipInput],
         providers: [
           {
             provide: MAT_CHIPS_DEFAULT_OPTIONS,
             useValue: {separatorKeyCodes: [COMMA]} as MatChipsDefaultOptions,
           },
+          {provide: MATERIAL_ANIMATIONS, useValue: {animationsDisabled: true}},
         ],
       });
 

src/material/core/ripple/ripple.spec.ts

@@ -7,9 +7,8 @@ import {
   dispatchMouseEvent,
   dispatchTouchEvent,
 } from '@angular/cdk/testing/private';
-import {Component, ViewChild, ViewEncapsulation} from '@angular/core';
+import {Component, Provider, ViewChild, ViewEncapsulation} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
-import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {
   MAT_RIPPLE_GLOBAL_OPTIONS,
   MatRipple,
@@ -18,6 +17,7 @@ import {
   RippleGlobalOptions,
   RippleState,
 } from './index';
+import {MATERIAL_ANIMATIONS} from '../animation/animation';
 
 describe('MatRipple', () => {
   let fixture: ComponentFixture<any>;
@@ -494,14 +494,17 @@ describe('MatRipple', () => {
     function createTestComponent(
       rippleConfig: RippleGlobalOptions,
       testComponent: any = BasicRippleContainer,
-      extraImports: any[] = [],
+      extraProviders: Provider[] = [],
     ) {
       // Reset the previously configured testing module to be able set new providers.
       // The testing module has been initialized in the root describe group for the ripples.
       TestBed.resetTestingModule();
       TestBed.configureTestingModule({
-        imports: [MatRippleModule, ...extraImports, testComponent],
-        providers: [{provide: MAT_RIPPLE_GLOBAL_OPTIONS, useValue: rippleConfig}],
+        imports: [MatRippleModule, testComponent],
+        providers: [
+          {provide: MAT_RIPPLE_GLOBAL_OPTIONS, useValue: rippleConfig},
+          ...extraProviders,
+        ],
       });
 
       fixture = TestBed.createComponent(testComponent);
@@ -585,10 +588,12 @@ describe('MatRipple', () => {
       expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
     });
 
-    it('should not mutate the global options when NoopAnimationsModule is present', () => {
+    it('should not mutate the global options when animations are disabled', () => {
       const options: RippleGlobalOptions = {};
 
-      createTestComponent(options, RippleContainerWithoutBindings, [NoopAnimationsModule]);
+      createTestComponent(options, RippleContainerWithoutBindings, [
+        {provide: MATERIAL_ANIMATIONS, useValue: {animationsDisabled: true}},
+      ]);
 
       expect(options.animation).toBeFalsy();
     });
@@ -600,7 +605,8 @@ describe('MatRipple', () => {
     beforeEach(() => {
       TestBed.resetTestingModule();
       TestBed.configureTestingModule({
-        imports: [NoopAnimationsModule, MatRippleModule, BasicRippleContainer],
+        imports: [MatRippleModule, BasicRippleContainer],
+        providers: [{provide: MATERIAL_ANIMATIONS, useValue: {animationsDisabled: true}}],
       });
 
       fixture = TestBed.createComponent(BasicRippleContainer);

src/material/datepicker/date-range-input.spec.ts

@@ -15,9 +15,8 @@ import {
   Validator,
   Validators,
 } from '@angular/forms';
-import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {Subscription} from 'rxjs';
-import {ErrorStateMatcher, MatNativeDateModule} from '../core';
+import {ErrorStateMatcher, MATERIAL_ANIMATIONS, MatNativeDateModule} from '../core';
 import {MatFormField, MatFormFieldModule, MatLabel} from '../form-field';
 import {MatInputModule} from '../input';
 import {MatDateRangeInput} from './date-range-input';
@@ -33,12 +32,14 @@ describe('MatDateRangeInput', () => {
         MatDatepickerModule,
         MatFormFieldModule,
         MatInputModule,
-        NoopAnimationsModule,
         ReactiveFormsModule,
         MatNativeDateModule,
         component,
       ],
-      providers,
+      providers: [
+        ...providers,
+        {provide: MATERIAL_ANIMATIONS, useValue: {animationsDisabled: true}},
+      ],
     });
 
     return TestBed.createComponent(component);