test(aio): remove compileComponents from all tests

By reflex we began all component tests with an async `beforeEach` that called `compileComponents`.
In at least one case (`live-example.component.spec.ts`) that led to the `it` tests being async as well.
There is no need to call `.compileComponents` because CLI web pack + plugin inlines all templates and styles.
While `.compileComponents` was harmless, it added complexity and distraction which we should not inflict on future readers and testers.

aio/src/app/app.component.spec.ts

@@ -35,12 +35,9 @@ describe('AppComponent', () => {
   let locationService: MockLocationService;
   let sidenav: HTMLElement;
 
-  beforeEach(async(() => {
-    createTestingModule('a/b');
-    TestBed.compileComponents();
-  }));
-
   beforeEach(() => {
+    createTestingModule('a/b');
+
     fixture = TestBed.createComponent(AppComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
@@ -366,15 +363,14 @@ describe('AppComponent', () => {
   });
 
   describe('initial rendering', () => {
-    beforeEach(async(() => {
+    beforeEach(() => {
       createTestingModule('a/b');
       // Remove the DocViewer for this test and hide the missing component message
       TestBed.overrideModule(AppModule, {
         remove: { declarations: [DocViewerComponent] },
         add: { schemas: [NO_ERRORS_SCHEMA] }
       });
-      TestBed.compileComponents();
+    });
-    }));
 
     it('should initially add the starting class until the first document is rendered', () => {
       fixture = TestBed.createComponent(AppComponent);

aio/src/app/embedded/api/api-list.component.spec.ts

@@ -10,7 +10,7 @@ describe('ApiListComponent', () => {
   let fixture: ComponentFixture<ApiListComponent>;
   let sections: ApiSection[];
 
-  beforeEach(async(() => {
+  beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [ ApiListComponent ],
       providers: [
@@ -18,10 +18,7 @@ describe('ApiListComponent', () => {
         { provide: LocationService, useClass: TestLocationService }
       ]
     });
-    TestBed.compileComponents();
-  }));
 
-  beforeEach(() => {
     fixture = TestBed.createComponent(ApiListComponent);
     component = fixture.componentInstance;
     sections = getApiSections();

aio/src/app/embedded/code/code.component.spec.ts

@@ -41,7 +41,7 @@ describe('CodeComponent', () => {
     delete window['prettyPrintOne'];
   });
 
-  beforeEach(async(() => {
+  beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [ MdSnackBarModule, NoopAnimationsModule ],
       declarations: [ CodeComponent, HostComponent ],
@@ -50,9 +50,8 @@ describe('CodeComponent', () => {
         CopierService,
         {provide: Logger, useClass: TestLogger }
      ]
-    })
+    });
-    .compileComponents();
+  });
-  }));
 
   // Must be async because
   // CodeComponent creates PrettyPrintService which async loads `prettify.js`.

aio/src/app/embedded/current-location.component.spec.ts

@@ -5,9 +5,11 @@ import { CurrentLocationComponent } from './current-location.component';
 
 
 describe('CurrentLocationComponent', () => {
+  let element: HTMLElement;
+  let fixture: ComponentFixture<CurrentLocationComponent>;
   let locationService: MockLocationService;
 
-  beforeEach(async(() => {
+  beforeEach(() => {
     locationService = new MockLocationService('initial/url');
 
     TestBed.configureTestingModule({
@@ -16,13 +18,12 @@ describe('CurrentLocationComponent', () => {
         { provide: LocationService, useValue: locationService }
       ]
     });
-    TestBed.compileComponents();
+
-  }));
+    fixture = TestBed.createComponent(CurrentLocationComponent);
+    element = fixture.nativeElement;
+  });
 
   it('should render the current location', () => {
-    const fixture = TestBed.createComponent(CurrentLocationComponent);
-    const element: HTMLElement = fixture.nativeElement;
-
     fixture.detectChanges();
     expect(element.innerText).toEqual('initial/url');
 

aio/src/app/embedded/live-example/live-example.component.spec.ts

@@ -38,23 +38,20 @@ describe('LiveExampleComponent', () => {
   }
 
   function testComponent(testFn: () => void) {
-    return TestBed
+    fixture = TestBed.createComponent(HostComponent);
-      .compileComponents()
+    hostComponent = fixture.componentInstance;
-      .then(() => {
+    liveExampleDe = fixture.debugElement.children[0];
-        fixture = TestBed.createComponent(HostComponent);
+    liveExampleComponent = liveExampleDe.componentInstance;
-        hostComponent = fixture.componentInstance;
-        liveExampleDe = fixture.debugElement.children[0];
-        liveExampleComponent = liveExampleDe.componentInstance;
 
-        // Copy the LiveExample's innerHTML (content)
+    // Copy the LiveExample's innerHTML (content)
-        // into the `liveExampleContent` property as the DocViewer does
+    // into the `liveExampleContent` property as the DocViewer does
-        liveExampleDe.nativeElement.liveExampleContent = liveExampleContent;
+    liveExampleDe.nativeElement.liveExampleContent = liveExampleContent;
 
-        fixture.detectChanges();
+    fixture.detectChanges();
-        liveExampleComponent.onResize(1033); // wide by default
+    liveExampleComponent.onResize(1033); // wide by default
-        fixture.detectChanges();
+    fixture.detectChanges();
-      })
+
-      .then(testFn);
+    testFn();
   }
 
   //////// tests ////////
@@ -76,49 +73,49 @@ describe('LiveExampleComponent', () => {
     function getLiveExampleAnchor() { return getAnchors()[0]; }
     function getDownloadAnchor() { return getAnchors()[1]; }
 
-    it('should create LiveExampleComponent', async(() => {
+    it('should create LiveExampleComponent', () => {
       testComponent(() => {
         expect(liveExampleComponent).toBeTruthy('LiveExampleComponent');
       });
-    }));
+    });
 
-    it('should have expected plunker & download hrefs', async(() => {
+    it('should have expected plunker & download hrefs', () => {
       testPath = '/tutorial/toh-pt1';
       testComponent(() => {
         const hrefs = getHrefs();
         expect(hrefs[0]).toContain('/toh-pt1/eplnkr.html');
         expect(hrefs[1]).toContain('/toh-pt1/toh-pt1.zip');
       });
-    }));
+    });
 
-    it('should have expected plunker & download hrefs even when path has # frag', async(() => {
+    it('should have expected plunker & download hrefs even when path has # frag', () => {
       testPath = '/tutorial/toh-pt1#somewhere';
       testComponent(() => {
         const hrefs = getHrefs();
         expect(hrefs[0]).toContain('/toh-pt1/eplnkr.html');
         expect(hrefs[1]).toContain('/toh-pt1/toh-pt1.zip');
       });
-    }));
+    });
 
-    it('should have expected plunker & download hrefs even when path has ? params', async(() => {
+    it('should have expected plunker & download hrefs even when path has ? params', () => {
       testPath = '/tutorial/toh-pt1?foo=1&bar="bar"';
       testComponent(() => {
         const hrefs = getHrefs();
         expect(hrefs[0]).toContain('/toh-pt1/eplnkr.html');
         expect(hrefs[1]).toContain('/toh-pt1/toh-pt1.zip');
       });
-    }));
+    });
 
-    it('should have expected flat-style plunker when has `flat-style`', async(() => {
+    it('should have expected flat-style plunker when has `flat-style`', () => {
       testPath = '/tutorial/toh-pt1';
       setHostTemplate('<live-example flat-style></live-example>');
       testComponent(() => {
         // The file should be "plnkr.html", not "eplnkr.html"
         expect(getLiveExampleAnchor().href).toContain('/plnkr.html');
       });
-    }));
+    });
 
-    it('should have expected plunker & download hrefs when has example directory (name)', async(() => {
+    it('should have expected plunker & download hrefs when has example directory (name)', () => {
       testPath = '/guide/somewhere';
       setHostTemplate('<live-example name="toh-pt1"></live-example>');
       testComponent(() => {
@@ -126,9 +123,9 @@ describe('LiveExampleComponent', () => {
         expect(hrefs[0]).toContain('/toh-pt1/eplnkr.html');
         expect(hrefs[1]).toContain('/toh-pt1/toh-pt1.zip');
       });
-    }));
+    });
 
-    it('should have expected plunker & download hrefs when has `plnkr`', async(() => {
+    it('should have expected plunker & download hrefs when has `plnkr`', () => {
       testPath = '/testing';
       setHostTemplate('<live-example plnkr="app-specs"></live-example>');
       testComponent(() => {
@@ -136,9 +133,9 @@ describe('LiveExampleComponent', () => {
         expect(hrefs[0]).toContain('/testing/app-specs.eplnkr.html');
         expect(hrefs[1]).toContain('/testing/app-specs.testing.zip');
       });
-    }));
+    });
 
-    it('should have expected plunker & download hrefs when has `name` & `plnkr`', async(() => {
+    it('should have expected plunker & download hrefs when has `name` & `plnkr`', () => {
       testPath = '/guide/somewhere';
       setHostTemplate('<live-example name="testing" plnkr="app-specs"></live-example>');
       testComponent(() => {
@@ -146,42 +143,42 @@ describe('LiveExampleComponent', () => {
         expect(hrefs[0]).toContain('/testing/app-specs.eplnkr.html');
         expect(hrefs[1]).toContain('/testing/app-specs.testing.zip');
       });
-    }));
+    });
 
-    it('should be embedded style by default', async(() => {
+    it('should be embedded style by default', () => {
       setHostTemplate('<live-example></live-example>');
       testComponent(() => {
         const hrefs = getHrefs();
         expect(hrefs[0]).toContain(defaultTestPath + '/eplnkr.html');
       });
-    }));
+    });
 
-    it('should be flat style when flat-style requested', async(() => {
+    it('should be flat style when flat-style requested', () => {
       setHostTemplate('<live-example flat-style></live-example>');
       testComponent(() => {
         const hrefs = getHrefs();
         expect(hrefs[0]).toContain(defaultTestPath + '/plnkr.html');
       });
-    }));
+    });
 
-    it('should not have a download link when `noDownload` atty present', async(() => {
+    it('should not have a download link when `noDownload` atty present', () => {
       setHostTemplate('<live-example noDownload></live-example>');
       testComponent(() => {
         const hrefs = getHrefs();
         expect(hrefs.length).toBe(1, 'only the plunker live-example anchor');
         expect(hrefs[0]).toContain('plnkr.html');
       });
-    }));
+    });
 
-    it('should only have a download link when `downloadOnly` atty present', async(() => {
+    it('should only have a download link when `downloadOnly` atty present', () => {
       setHostTemplate('<live-example downloadOnly>download this</live-example>');
       testComponent(() => {
         const hrefs = getHrefs();
         expect(hrefs.length).toBe(1, 'only the zip anchor');
         expect(hrefs[0]).toContain('.zip');      });
-    }));
+    });
 
-    it('should have default title when no title attribute or content', async(() => {
+    it('should have default title when no title attribute or content', () => {
       setHostTemplate('<live-example></live-example>');
       testComponent(() => {
         const expectedTitle = 'live example';
@@ -189,9 +186,9 @@ describe('LiveExampleComponent', () => {
         expect(anchor.innerText).toBe(expectedTitle, 'anchor content');
         expect(anchor.getAttribute('title')).toBe(expectedTitle, 'title');
       });
-    }));
+    });
 
-    it('should add title when set `title` attribute', async(() => {
+    it('should add title when set `title` attribute', () => {
       const expectedTitle = 'Great Example';
       setHostTemplate(`<live-example title="${expectedTitle}"></live-example>`);
       testComponent(() => {
@@ -199,9 +196,9 @@ describe('LiveExampleComponent', () => {
         expect(anchor.innerText).toBe(expectedTitle, 'anchor content');
         expect(anchor.getAttribute('title')).toBe(expectedTitle, 'title');
       });
-    }));
+    });
 
-    it('should add title from <live-example> body', async(() => {
+    it('should add title from <live-example> body', () => {
       liveExampleContent = 'The Greatest Example';
       setHostTemplate('<live-example title="ignore this title"></live-example>');
       testComponent(() => {
@@ -209,16 +206,16 @@ describe('LiveExampleComponent', () => {
         expect(anchor.innerText).toBe(liveExampleContent, 'anchor content');
         expect(anchor.getAttribute('title')).toBe(liveExampleContent, 'title');
       });
-    }));
+    });
 
-    it('should not duplicate the exampleDir on a zip when there is a / on the name', async(() => {
+    it('should not duplicate the exampleDir on a zip when there is a / on the name', () => {
       setHostTemplate('<live-example name="testing/ts"></live-example>');
       testComponent(() => {
         const hrefs = getHrefs();
         expect(hrefs[0]).toContain('/testing/ts/eplnkr.html');
         expect(hrefs[1]).toContain('/testing/ts/testing.zip');
       });
-    }));
+    });
   });
 
   describe('when embedded', () => {
@@ -240,45 +237,45 @@ describe('LiveExampleComponent', () => {
 
     describe('before click', () => {
 
-      it('should have hidden, embedded plunker', async(() => {
+      it('should have hidden, embedded plunker', () => {
         setHostTemplate('<live-example embedded></live-example>');
         testComponent(() => {
           expect(liveExampleComponent.mode).toBe('embedded', 'component is embedded');
           expect(liveExampleComponent.showEmbedded).toBe(false, 'component.showEmbedded');
           expect(getEmbeddedPlunkerComponent()).toBeNull('no EmbeddedPlunkerComponent');
         });
-      }));
+      });
 
-      it('should have default plunker placeholder image', async(() => {
+      it('should have default plunker placeholder image', () => {
         setHostTemplate('<live-example embedded></live-example>');
         testComponent(() => {
           expect(getImg().src).toContain('plunker/placeholder.png');
         });
-      }));
+      });
 
-      it('should have specified plunker placeholder image', async(() => {
+      it('should have specified plunker placeholder image', () => {
         const expectedSrc = 'example/demo.png';
         setHostTemplate(`<live-example embedded img="${expectedSrc}"></live-example>`);
         testComponent(() => {
           expect(getImg().src).toContain(expectedSrc);
         });
-      }));
+      });
 
-      it('should have download paragraph with expected anchor href', async(() => {
+      it('should have download paragraph with expected anchor href', () => {
         testPath = '/tutorial/toh-pt1';
         setHostTemplate('<live-example embedded></live-example>');
         testComponent(() => {
           expect(getDownloadAnchor().href).toContain('/toh-pt1/toh-pt1.zip');
         });
-      }));
+      });
 
-      it('should not have download paragraph when has `nodownload`', async(() => {
+      it('should not have download paragraph when has `nodownload`', () => {
         testPath = '/tutorial/toh-pt1';
         setHostTemplate('<live-example embedded nodownload></live-example>');
         testComponent(() => {
           expect(getDownloadAnchor()).toBeNull();
         });
-      }));
+      });
 
     });
 
@@ -289,7 +286,7 @@ describe('LiveExampleComponent', () => {
         fixture.detectChanges();
       }
 
-      it('should show plunker in the page', async(() => {
+      it('should show plunker in the page', () => {
         setHostTemplate('<live-example embedded></live-example>');
         testComponent(() => {
           clickImg();
@@ -297,14 +294,14 @@ describe('LiveExampleComponent', () => {
           expect(liveExampleComponent.showEmbedded).toBe(true, 'component.showEmbedded');
           expect(getEmbeddedPlunkerComponent()).toBeDefined('has EmbeddedPlunkerComponent');
         });
-      }));
+      });
 
     });
   });
 
   describe('when narrow display (mobile)', () => {
 
-    it('should be embedded style when no style defined', async(() => {
+    it('should be embedded style when no style defined', () => {
       setHostTemplate('<live-example></live-example>');
       testComponent(() => {
         liveExampleComponent.onResize(600); // narrow
@@ -312,9 +309,9 @@ describe('LiveExampleComponent', () => {
         const hrefs = getHrefs();
         expect(hrefs[0]).toContain(defaultTestPath + '/eplnkr.html');
       });
-    }));
+    });
 
-    it('should be embedded style even when flat-style requested', async(() => {
+    it('should be embedded style even when flat-style requested', () => {
       setHostTemplate('<live-example flat-style></live-example>');
       testComponent(() => {
         liveExampleComponent.onResize(600); // narrow
@@ -322,7 +319,6 @@ describe('LiveExampleComponent', () => {
         const hrefs = getHrefs();
         expect(hrefs[0]).toContain(defaultTestPath + '/eplnkr.html');
       });
-    }));
+    });
   });
 });
-

aio/src/app/embedded/toc/toc.component.spec.ts

@@ -28,16 +28,15 @@ describe('TocComponent', () => {
     };
   }
 
-  beforeEach(async(() => {
+  beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [ HostEmbeddedTocComponent, HostNotEmbeddedTocComponent, TocComponent ],
       providers: [
         { provide: ScrollService, useClass: TestScrollService },
         { provide: TocService, useClass: TestTocService }
       ]
-    })
+    });
-    .compileComponents();
+  });
-  }));
 
   describe('when embedded in doc body', () => {
     let fixture: ComponentFixture<HostEmbeddedTocComponent>;

aio/src/app/layout/doc-viewer/doc-viewer.component.spec.ts

@@ -112,7 +112,7 @@ describe('DocViewerComponent', () => {
     component.currentDoc = { contents, id };
   }
 
-  beforeEach(async(() => {
+  beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [ TestModule ],
       declarations: [
@@ -125,9 +125,8 @@ describe('DocViewerComponent', () => {
         { provide: Title, useClass: TestTitleService },
         { provide: TocService, useClass: TestTocService }
       ]
-    })
+    });
-    .compileComponents();
+  });
-  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(TestComponent);

aio/src/app/layout/top-menu/top-menu.component.spec.ts

@@ -9,15 +9,14 @@ describe('TopMenuComponent', () => {
   let component: TopMenuComponent;
   let fixture: ComponentFixture<TopMenuComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [ TopMenuComponent ],
       providers: [
         { provide: NavigationService, useClass: TestNavigationService }
       ]
-    })
+    });
-    .compileComponents();
+  });
-  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(TopMenuComponent);

aio/src/app/search/search-box/search-box.component.spec.ts

@@ -18,15 +18,14 @@ describe('SearchBoxComponent', () => {
   let host: HostComponent;
   let fixture: ComponentFixture<HostComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [ SearchBoxComponent, HostComponent ],
       providers: [
         { provide: LocationService, useFactory: () => new MockLocationService('') }
       ]
-    })
+    });
-    .compileComponents();
+  });
-  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(HostComponent);

aio/src/app/search/search-results/search-results.component.spec.ts

@@ -33,15 +33,14 @@ describe('SearchResultsComponent', () => {
     return take === undefined ? results : results.slice(0, take);
   }
 
-  beforeEach(async(() => {
+  beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [ SearchResultsComponent ],
       providers: [
         { provide: SearchService, useFactory: () => new MockSearchService() }
       ]
-    })
+    });
-    .compileComponents();
+  });
-  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(SearchResultsComponent);