test(scrolling): correctly treat TestBed.compileComponents as async (#14922)

Tests for cdk/scrolling previously assumed that Test.compileComponents
completes synchronously, immediately instantiating components after
calling the compile. This is not true, and the tests only work by
coicidence. With ivy, this is not as lenient and starts failing.

Author: jelbourn

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 {ComponentFixture, fakeAsync, flush, TestBed} from '@angular/core/testing';
+import {async, ComponentFixture, fakeAsync, flush, TestBed} from '@angular/core/testing';
 import {ScrollingModule as ExperimentalScrollingModule} from './scrolling-module';
 
 
@@ -10,12 +10,14 @@ describe('CdkVirtualScrollViewport', () => {
     let testComponent: AutoSizeVirtualScroll;
     let viewport: CdkVirtualScrollViewport;
 
-    beforeEach(() => {
+    beforeEach(async(() => {
       TestBed.configureTestingModule({
         imports: [ScrollingModule, ExperimentalScrollingModule],
         declarations: [AutoSizeVirtualScroll],
       }).compileComponents();
+    }));
 
+    beforeEach(() => {
       fixture = TestBed.createComponent(AutoSizeVirtualScroll);
       testComponent = fixture.componentInstance;
       viewport = testComponent.viewport;

src/cdk/scrolling/scrollable.spec.ts

@@ -27,10 +27,12 @@ describe('CdkScrollable', () => {
       imports: [ScrollingModule],
       declarations: [ScrollableViewport],
     }).compileComponents();
+  }));
 
+  beforeEach(() => {
     fixture = TestBed.createComponent(ScrollableViewport);
     testComponent = fixture.componentInstance;
-  }));
+  });
 
   describe('in LTR context', () => {
     beforeEach(() => {

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

@@ -15,7 +15,7 @@ import {
   ViewContainerRef,
   ViewEncapsulation
 } from '@angular/core';
-import {ComponentFixture, fakeAsync, flush, inject, TestBed} from '@angular/core/testing';
+import {async, ComponentFixture, fakeAsync, flush, inject, TestBed} from '@angular/core/testing';
 import {animationFrameScheduler, Subject} from 'rxjs';
 
 
@@ -25,12 +25,14 @@ describe('CdkVirtualScrollViewport', () => {
     let testComponent: FixedSizeVirtualScroll;
     let viewport: CdkVirtualScrollViewport;
 
-    beforeEach(() => {
+    beforeEach(async(() => {
       TestBed.configureTestingModule({
         imports: [ScrollingModule],
         declarations: [FixedSizeVirtualScroll],
       }).compileComponents();
+    }));
 
+    beforeEach(() => {
       fixture = TestBed.createComponent(FixedSizeVirtualScroll);
       testComponent = fixture.componentInstance;
       viewport = testComponent.viewport;