refactor(chip-list): improve unit test speed (#10564)

Speeds up the chip list tests by not recompiling all of the different test components for every test. Also switches all of the `async` tests to run inside `fakeAsync` instead.

Author: crisbeto

src/lib/chips/chip-list.spec.ts

@@ -1,9 +1,17 @@
 import {FocusKeyManager} from '@angular/cdk/a11y';
-import {Directionality} from '@angular/cdk/bidi';
+import {Directionality, Direction} from '@angular/cdk/bidi';
 import {BACKSPACE, DELETE, ENTER, LEFT_ARROW, RIGHT_ARROW, SPACE, TAB} from '@angular/cdk/keycodes';
 import {createKeyboardEvent, dispatchFakeEvent, dispatchKeyboardEvent} from '@angular/cdk/testing';
-import {Component, DebugElement, QueryList, ViewChild, ViewChildren} from '@angular/core';
-import {async, ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
+import {
+  Component,
+  DebugElement,
+  QueryList,
+  ViewChild,
+  ViewChildren,
+  Type,
+  Provider,
+} from '@angular/core';
+import {ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
 import {FormControl, FormsModule, NgForm, ReactiveFormsModule, Validators} from '@angular/forms';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {By} from '@angular/platform-browser';
@@ -22,43 +30,12 @@ describe('MatChipList', () => {
   let testComponent: StandardChipList;
   let chips: QueryList<any>;
   let manager: FocusKeyManager<MatChip>;
-  let dir = 'ltr';
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      imports: [
-        FormsModule,
-        ReactiveFormsModule,
-        MatChipsModule,
-        MatFormFieldModule,
-        MatInputModule,
-        NoopAnimationsModule
-      ],
-      declarations: [
-        ChipListWithFormErrorMessages,
-        StandardChipList,
-        FormFieldChipList,
-        BasicChipList,
-        InputChipList,
-        MultiSelectionChipList,
-        FalsyValueChipList,
-        SelectedChipList
-      ],
-      providers: [{
-        provide: Directionality, useFactory: () => {
-          return {value: dir.toLowerCase()};
-        }
-      }]
-    });
-
-    TestBed.compileComponents();
-  }));
 
   describe('StandardChipList', () => {
     describe('basic behaviors', () => {
-      beforeEach(async(() => {
+      beforeEach(() => {
         setupStandardList();
-      }));
+      });
 
       it('should add the `mat-chip-list` class', () => {
         expect(chipListNativeElement.classList).toContain('mat-chip-list');
@@ -76,12 +53,12 @@ describe('MatChipList', () => {
     });
 
     describe('with selected chips', () => {
-      beforeEach(async(() => {
-        fixture = TestBed.createComponent(SelectedChipList);
+      beforeEach(() => {
+        fixture = createComponent(SelectedChipList);
         fixture.detectChanges();
         chipListDebugElement = fixture.debugElement.query(By.directive(MatChipList));
         chipListNativeElement = chipListDebugElement.nativeElement;
-      }));
+      });
 
       it('should not override chips selected', () => {
         const instanceChips = fixture.componentInstance.chips.toArray();
@@ -104,10 +81,10 @@ describe('MatChipList', () => {
     });
 
     describe('focus behaviors', () => {
-      beforeEach(async(() => {
+      beforeEach(() => {
         setupStandardList();
         manager = chipListInstance._keyManager;
-      }));
+      });
 
       it('should focus the first chip on focus', () => {
         chipListInstance.focus();
@@ -190,11 +167,10 @@ describe('MatChipList', () => {
 
     describe('keyboard behavior', () => {
       describe('LTR (default)', () => {
-        beforeEach(async(() => {
-          dir = 'ltr';
+        beforeEach(() => {
           setupStandardList();
           manager = chipListInstance._keyManager;
-        }));
+        });
 
         it('should focus previous item when press LEFT ARROW', () => {
           let nativeChips = chipListNativeElement.querySelectorAll('mat-chip');
@@ -253,11 +229,10 @@ describe('MatChipList', () => {
       });
 
       describe('RTL', () => {
-        beforeEach(async(() => {
-          dir = 'rtl';
-          setupStandardList();
+        beforeEach(() => {
+          setupStandardList('rtl');
           manager = chipListInstance._keyManager;
-        }));
+        });
 
         it('should focus previous item when press RIGHT ARROW', () => {
           let nativeChips = chipListNativeElement.querySelectorAll('mat-chip');
@@ -411,7 +386,7 @@ describe('MatChipList', () => {
     let nativeChips: HTMLElement[];
 
     beforeEach(() => {
-      fixture = TestBed.createComponent(BasicChipList);
+      fixture = createComponent(BasicChipList);
       fixture.detectChanges();
 
       formField = fixture.debugElement.query(By.css('.mat-form-field')).nativeElement;
@@ -430,7 +405,7 @@ describe('MatChipList', () => {
         .toBe(true, 'placeholder should be floating');
     });
 
-    it('should remove selection if chip has been removed', async(() => {
+    it('should remove selection if chip has been removed', fakeAsync(() => {
       const instanceChips = fixture.componentInstance.chips;
       const chipList = fixture.componentInstance.chipList;
       const firstChip = nativeChips[0];
@@ -442,11 +417,10 @@ describe('MatChipList', () => {
 
       fixture.componentInstance.foods = [];
       fixture.detectChanges();
+      tick();
 
-      fixture.whenStable().then(() => {
-        expect(chipList.selected)
-          .toBe(undefined, 'Expected selection to be removed when option no longer exists.');
-      });
+      expect(chipList.selected)
+        .toBe(undefined, 'Expected selection to be removed when option no longer exists.');
     }));
 
 
@@ -486,7 +460,7 @@ describe('MatChipList', () => {
 
     describe('single selection', () => {
       beforeEach(() => {
-        fixture = TestBed.createComponent(BasicChipList);
+        fixture = createComponent(BasicChipList);
         fixture.detectChanges();
 
         nativeChips = fixture.debugElement.queryAll(By.css('mat-chip'))
@@ -623,8 +597,9 @@ describe('MatChipList', () => {
 
       it('should be able to programmatically select a falsy option', () => {
         fixture.destroy();
+        TestBed.resetTestingModule();
 
-        const falsyFixture = TestBed.createComponent(FalsyValueChipList);
+        const falsyFixture = createComponent(FalsyValueChipList);
         falsyFixture.detectChanges();
 
         falsyFixture.componentInstance.control.setValue([0]);
@@ -649,7 +624,7 @@ describe('MatChipList', () => {
 
     describe('multiple selection', () => {
       beforeEach(() => {
-        fixture = TestBed.createComponent(MultiSelectionChipList);
+        fixture = createComponent(MultiSelectionChipList);
         fixture.detectChanges();
 
         nativeChips = fixture.debugElement.queryAll(By.css('mat-chip'))
@@ -732,7 +707,7 @@ describe('MatChipList', () => {
     let nativeChips: HTMLElement[];
 
     beforeEach(() => {
-      fixture = TestBed.createComponent(InputChipList);
+      fixture = createComponent(InputChipList);
       fixture.detectChanges();
 
       nativeChips = fixture.debugElement.queryAll(By.css('mat-chip'))
@@ -807,18 +782,17 @@ describe('MatChipList', () => {
         .toBeFalsy(`Expected chip with the old value not to be selected.`);
     });
 
-    it('should set the control to touched when the chip list is touched', async(() => {
+    it('should set the control to touched when the chip list is touched', fakeAsync(() => {
       expect(fixture.componentInstance.control.touched)
         .toBe(false, 'Expected the control to start off as untouched.');
 
       const nativeChipList = fixture.debugElement.query(By.css('.mat-chip-list')).nativeElement;
 
       dispatchFakeEvent(nativeChipList, 'blur');
+      tick();
 
-      fixture.whenStable().then(() => {
-        expect(fixture.componentInstance.control.touched)
-          .toBe(true, 'Expected the control to be touched.');
-      });
+      expect(fixture.componentInstance.control.touched)
+        .toBe(true, 'Expected the control to be touched.');
     }));
 
     it('should not set touched when a disabled chip list is touched', () => {
@@ -870,8 +844,6 @@ describe('MatChipList', () => {
 
     describe('keyboard behavior', () => {
       beforeEach(() => {
-        fixture = TestBed.createComponent(InputChipList);
-        fixture.detectChanges();
         chipListDebugElement = fixture.debugElement.query(By.directive(MatChipList));
         chipListInstance = chipListDebugElement.componentInstance;
         chips = chipListInstance.chips;
@@ -924,7 +896,7 @@ describe('MatChipList', () => {
     let chipListEl: HTMLElement;
 
     beforeEach(() => {
-      fixture = TestBed.createComponent(ChipListWithFormErrorMessages);
+      fixture = createComponent(ChipListWithFormErrorMessages);
       fixture.detectChanges();
       errorTestComponent = fixture.componentInstance;
       containerEl = fixture.debugElement.query(By.css('mat-form-field')).nativeElement;
@@ -939,23 +911,22 @@ describe('MatChipList', () => {
         .toBe('false', 'Expected aria-invalid to be set to "false".');
     });
 
-    it('should display an error message when the chip list is touched and invalid', async(() => {
+    it('should display an error message when the list is touched and invalid', fakeAsync(() => {
       expect(errorTestComponent.formControl.invalid)
         .toBe(true, 'Expected form control to be invalid');
       expect(containerEl.querySelectorAll('mat-error').length)
         .toBe(0, 'Expected no error message');
 
       errorTestComponent.formControl.markAsTouched();
       fixture.detectChanges();
+      tick();
 
-      fixture.whenStable().then(() => {
-        expect(containerEl.classList)
-          .toContain('mat-form-field-invalid', 'Expected container to have the invalid CSS class.');
-        expect(containerEl.querySelectorAll('mat-error').length)
-          .toBe(1, 'Expected one error message to have been rendered.');
-        expect(chipListEl.getAttribute('aria-invalid'))
-          .toBe('true', 'Expected aria-invalid to be set to "true".');
-      });
+      expect(containerEl.classList)
+        .toContain('mat-form-field-invalid', 'Expected container to have the invalid CSS class.');
+      expect(containerEl.querySelectorAll('mat-error').length)
+        .toBe(1, 'Expected one error message to have been rendered.');
+      expect(chipListEl.getAttribute('aria-invalid'))
+        .toBe('true', 'Expected aria-invalid to be set to "true".');
     }));
 
     it('should display an error message when the parent form is submitted', fakeAsync(() => {
@@ -1033,8 +1004,27 @@ describe('MatChipList', () => {
     });
   });
 
-  function setupStandardList() {
-    fixture = TestBed.createComponent(StandardChipList);
+  function createComponent<T>(component: Type<T>, providers: Provider[] = []): ComponentFixture<T> {
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        MatChipsModule,
+        MatFormFieldModule,
+        MatInputModule,
+        NoopAnimationsModule,
+      ],
+      declarations: [component],
+      providers
+    }).compileComponents();
+
+    return TestBed.createComponent<T>(component);
+  }
+
+  function setupStandardList(direction: Direction = 'ltr') {
+    fixture = createComponent(StandardChipList, [{
+      provide: Directionality, useFactory: () => ({value: direction.toLowerCase()})
+    }]);
     fixture.detectChanges();
 
     chipListDebugElement = fixture.debugElement.query(By.directive(MatChipList));
@@ -1045,7 +1035,7 @@ describe('MatChipList', () => {
   }
 
   function setupInputList() {
-    fixture = TestBed.createComponent(FormFieldChipList);
+    fixture = createComponent(FormFieldChipList);
     fixture.detectChanges();
 
     chipListDebugElement = fixture.debugElement.query(By.directive(MatChipList));