test(aio): fix tests and update testing infra (#23234)

PR Close #23234

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

@@ -6,7 +6,7 @@ import { HttpClient } from '@angular/common/http';
 import { MatProgressBar, MatSidenav } from '@angular/material';
 import { By } from '@angular/platform-browser';
 
-import { Observable, timer } from 'rxjs';
+import { timer } from 'rxjs';
 import { mapTo } from 'rxjs/operators';
 
 import { AppComponent } from './app.component';
@@ -1113,22 +1113,13 @@ describe('AppComponent', () => {
         navigateTo('guide/pipes');
         checkHostClass('sidenav', 'open');
 
-        sidenav.close();
-        await waitForEmit(sidenav.onClose);
+        await sidenav.close();
         fixture.detectChanges();
         checkHostClass('sidenav', 'closed');
 
-        sidenav.open();
-        await waitForEmit(sidenav.onOpen);
+        await sidenav.open();
         fixture.detectChanges();
         checkHostClass('sidenav', 'open');
-
-        function waitForEmit(emitter: Observable<void>): Promise<void> {
-          return new Promise(resolve => {
-            emitter.subscribe(resolve);
-            fixture.detectChanges();
-          });
-        }
       });
 
       it('should set the css class of the host container based on the initial deployment mode', () => {

aio/src/app/shared/custom-icon-registry.spec.ts

@@ -5,12 +5,13 @@ describe('CustomIconRegistry', () => {
   it('should get the SVG element for a preloaded icon from the cache', () => {
     const mockHttp: any = {};
     const mockSanitizer: any = {};
+    const mockDocument: any = {};
     const svgSrc = '<svg xmlns="http://www.w3.org/2000/svg" focusable="false" ' +
                  'viewBox="0 0 24 24"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/></svg>';
     const svgIcons: SvgIconInfo[] = [
       { name: 'test_icon', svgSource: svgSrc }
     ];
-    const registry = new CustomIconRegistry(mockHttp, mockSanitizer, svgIcons);
+    const registry = new CustomIconRegistry(mockHttp, mockSanitizer, mockDocument, svgIcons);
     let svgElement: SVGElement|undefined;
     registry.getNamedSvgIcon('test_icon').subscribe(el => svgElement = el);
     expect(svgElement).toEqual(createSvg(svgSrc));
@@ -19,6 +20,7 @@ describe('CustomIconRegistry', () => {
   it('should call through to the MdIconRegistry if the icon name is not in the preloaded cache', () => {
     const mockHttp: any = {};
     const mockSanitizer: any = {};
+    const mockDocument: any = {};
     const svgSrc = '<svg xmlns="http://www.w3.org/2000/svg" focusable="false" ' +
                  'viewBox="0 0 24 24"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/></svg>';
     const svgIcons: SvgIconInfo[] = [
@@ -26,7 +28,7 @@ describe('CustomIconRegistry', () => {
     ];
     spyOn(MatIconRegistry.prototype, 'getNamedSvgIcon');
 
-    const registry = new CustomIconRegistry(mockHttp, mockSanitizer, svgIcons);
+    const registry = new CustomIconRegistry(mockHttp, mockSanitizer, mockDocument, svgIcons);
 
     registry.getNamedSvgIcon('other_icon');
     expect(MatIconRegistry.prototype.getNamedSvgIcon).toHaveBeenCalledWith('other_icon', undefined);

aio/src/karma.conf.js

@@ -1,5 +1,5 @@
 // Karma configuration file, see link for more information
-// https://karma-runner.github.io/0.13/config/configuration-file.html
+// https://karma-runner.github.io/1.0/config/configuration-file.html
 
 module.exports = function (config) {
   config.set({
@@ -12,11 +12,12 @@ module.exports = function (config) {
       require('karma-coverage-istanbul-reporter'),
       require('@angular-devkit/build-angular/plugins/karma')
     ],
-    client:{
+    client: {
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
     coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
+      dir: require('path').join(__dirname, 'coverage'),
+      reports: ['html', 'lcovonly'],
       fixWebpackSourcePaths: true
     },
     angularCli: {

aio/src/test.ts

@@ -3,25 +3,18 @@
 import 'zone.js/dist/zone-testing';
 import { getTestBed } from '@angular/core/testing';
 import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
+    BrowserDynamicTestingModule,
+    platformBrowserDynamicTesting
 } from '@angular/platform-browser-dynamic/testing';
 
-// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
-declare const __karma__: any;
 declare const require: any;
 
-// Prevent Karma from running prematurely.
-__karma__.loaded = function () {};
-
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
+    BrowserDynamicTestingModule,
+    platformBrowserDynamicTesting()
 );
 // Then we find all the tests.
 const context = require.context('./', true, /\.spec\.ts$/);
 // And load the modules.
 context.keys().map(context);
-// Finally, start Karma to run the tests.
-__karma__.start();

aio/src/tsconfig.spec.json

@@ -3,8 +3,6 @@
   "compilerOptions": {
     "outDir": "../out-tsc/spec",
     "module": "commonjs",
-    "target": "es5",
-    "baseUrl": "",
     "types": [
       "jasmine",
       "node"