refactor: use jasmine expectAsync instead of try/catch (#18535)

Currently tests that assert errors to be thrown/or not from
asynchronous methods use `try/catch` in order to use `await`.

We added a helper method for this in the private testing utilities. This
one reduced the `try/catch` burden. That helper method has downsides
though because it doesn't allow us to expect no error to be thrown.

We should remove this method in favor of using jasmine's `expectAsync`
function. This one gives us more flexibility and is also more
"jamsine"-idiomatic.

Author: devversion

package.json

@@ -84,7 +84,7 @@
     "@types/glob": "^5.0.33",
     "@types/gulp": "3.8.32",
     "@types/inquirer": "^0.0.43",
-    "@types/jasmine": "^3.4.0",
+    "@types/jasmine": "^3.5.4",
     "@types/marked": "^0.4.2",
     "@types/merge2": "^0.3.30",
     "@types/minimist": "^1.2.0",
@@ -112,12 +112,12 @@
     "highlight.js": "^9.11.0",
     "husky": "^1.3.1",
     "inquirer": "^6.2.0",
-    "jasmine-core": "^3.3.0",
+    "jasmine-core": "^3.5.0",
     "karma": "^4.4.1",
     "karma-browserstack-launcher": "^1.3.0",
     "karma-chrome-launcher": "^2.2.0",
     "karma-firefox-launcher": "^1.0.1",
-    "karma-jasmine": "^2.0.1",
+    "karma-jasmine": "^3.1.1",
     "karma-parallel": "^0.3.0",
     "karma-requirejs": "^1.1.0",
     "karma-sauce-launcher": "^2.0.2",
@@ -155,6 +155,8 @@
   },
   "resolutions": {
     "dgeni-packages/typescript": "3.7.4",
+    "@bazel/jasmine/jasmine": "3.5.0",
+    "@bazel/jasmine/jasmine-core": "3.5.0",
     "**/graceful-fs": "4.2.2"
   }
 }

src/cdk/a11y/key-manager/list-key-manager.spec.ts

@@ -9,7 +9,6 @@ import {ActiveDescendantKeyManager} from './activedescendant-key-manager';
 import {FocusKeyManager} from './focus-key-manager';
 import {ListKeyManager, ListKeyManagerModifierKey, ListKeyManagerOption} from './list-key-manager';
 
-
 class FakeFocusable {
   /** Whether the item is disabled or not. */
   disabled = false;
@@ -68,7 +67,14 @@ describe('Key managers', () => {
   });
 
   describe('ListKeyManager', () => {
-    let keyManager: ListKeyManager<FakeFocusable>;
+    // We have a spy on the `setActiveItem` method of the list key manager. That method has
+    // multiple overloads and TypeScript is unable to infer the right parameters when calls are
+    // checked using jasmine's `hasBeenCalledWith` matcher. We work around this by explicitly
+    // specifying the overload signature that should be used.
+    // TODO: remove if https://github.com/DefinitelyTyped/DefinitelyTyped/issues/42455 is solved.
+    let keyManager: Omit<ListKeyManager<FakeFocusable>, 'setActiveItem'> & {
+      setActiveItem(index: number): void;
+    };
 
     beforeEach(() => {
       itemList.items = [

src/cdk/schematics/ng-update/test-cases/misc/global-stylesheets.spec.ts

@@ -34,14 +34,9 @@ describe('global stylesheets migration', () => {
     writeFile('/sub_project/node_modules/materialize.css/package.json', '');
     writeFile('/sub_project/assets/test.css', subProjectStylesheet);
 
-    let error: any = null;
-    try {
-      await runFixers()
-    } catch (e) {
-      error = e;
-    }
-
-    expect(error).toBeNull();
+    // Run the fixers and expect no error to be thrown.
+    await expectAsync(runFixers()).not.toBeRejected();
+
     // if the external stylesheet that is not of a project target would have been checked
     // by accident, the stylesheet would differ from the original file content.
     expect(appTree.readContent('/sub_project/assets/test.css')).toBe(subProjectStylesheet);

src/cdk/testing/private/expect-async-error.ts

@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-export * from './expect-async-error';
 export * from './wrapped-error-message';
 export * from './mock-ng-zone';
 export * from './text-dedent';

src/cdk/testing/private/public-api.ts

@@ -4,7 +4,6 @@ import {
   HarnessLoader,
   TestElement
 } from '@angular/cdk/testing';
-import {expectAsyncError} from '@angular/cdk/testing/private';
 import {ProtractorHarnessEnvironment} from '@angular/cdk/testing/protractor';
 import {browser} from 'protractor';
 import {MainComponentHarness} from './harnesses/main-component-harness';
@@ -392,11 +391,16 @@ describe('ProtractorHarnessEnvironment', () => {
     });
 
     it('should throw when multiple queries fail to match', async () => {
-      await expectAsyncError(() => harness.missingElementsAndHarnesses(),
-          'Error: Failed to find element matching one of the following queries:' +
-          '\n(TestElement for element matching selector: ".not-found"),' +
-          '\n(SubComponentHarness with host element matching selector: "test-sub" satisfying' +
-          ' the constraints: title = /not found/)');
+      try {
+        await harness.missingElementsAndHarnesses();
+        fail('Expected to throw.');
+      } catch (e) {
+        expect(e.message).toBe(
+            'Failed to find element matching one of the following queries:' +
+            '\n(TestElement for element matching selector: ".not-found"),' +
+            '\n(SubComponentHarness with host element matching selector: "test-sub" satisfying' +
+            ' the constraints: title = /not found/)');
+      }
     });
 
     it('should check if element is focused', async () => {

src/cdk/testing/tests/protractor.e2e.spec.ts

@@ -4,7 +4,6 @@ import {
   HarnessLoader,
   TestElement
 } from '@angular/cdk/testing';
-import {expectAsyncError} from '@angular/cdk/testing/private';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
 import {async, ComponentFixture, fakeAsync, TestBed} from '@angular/core/testing';
 import {FakeOverlayHarness} from './harnesses/fake-overlay-harness';
@@ -435,11 +434,16 @@ describe('TestbedHarnessEnvironment', () => {
     });
 
     it('should throw when multiple queries fail to match', async () => {
-      await expectAsyncError(() => harness.missingElementsAndHarnesses(),
-          'Error: Failed to find element matching one of the following queries:' +
+      try {
+        await harness.missingElementsAndHarnesses();
+        fail('Expected to throw.');
+      } catch (e) {
+        expect(e.message).toBe(
+          'Failed to find element matching one of the following queries:' +
           '\n(TestElement for element matching selector: ".not-found"),' +
           '\n(SubComponentHarness with host element matching selector: "test-sub" satisfying' +
           ' the constraints: title = /not found/)');
+      }
     });
 
     it('should check if element is focused', async () => {

src/cdk/testing/tests/testbed.spec.ts

@@ -1,5 +1,4 @@
 import {OverlayContainer} from '@angular/cdk/overlay';
-import {expectAsyncError} from '@angular/cdk/testing/private';
 import {HarnessLoader} from '@angular/cdk/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
 import {Component} from '@angular/core';
@@ -131,8 +130,8 @@ export function runHarnessTests(
   it('should throw when selecting an option that is not available', async () => {
     const input = await loader.getHarness(autocompleteHarness.with({selector: '#plain'}));
     await input.enterText('New');
-    await expectAsyncError(() => input.selectOption({text: 'Texas'}),
-        /Error: Could not find a mat-option matching {"text":"Texas"}/);
+    await expectAsync(input.selectOption({text: 'Texas'})).toBeRejectedWithError(
+        /Could not find a mat-option matching {"text":"Texas"}/);
   });
 }
 

src/material/autocomplete/testing/shared.spec.ts

@@ -1,5 +1,4 @@
 import {HarnessLoader} from '@angular/cdk/testing';
-import {expectAsyncError} from '@angular/cdk/testing/private';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
 import {Component} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
@@ -91,8 +90,8 @@ export function runHarnessTests(
     ]);
     expect(await tiles[0].getHeaderText()).toBe('Three');
     expect(await tiles[1].getHeaderText()).toBe('Three');
-    await expectAsyncError(
-        () => gridList.getTileAtPosition({row: 2, column: 0}), /Could not find tile/);
+    await expectAsync(gridList.getTileAtPosition({row: 2, column: 0}))
+      .toBeRejectedWithError(/Could not find tile/);
 
     // Update the fourth tile to span over two rows. The previous position
     // should now be valid and the fourth tile should be returned.

src/material/grid-list/testing/shared.spec.ts

@@ -1,5 +1,4 @@
 import {OverlayContainer} from '@angular/cdk/overlay';
-import {expectAsyncError} from '@angular/cdk/testing/private';
 import {HarnessLoader} from '@angular/cdk/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
 import {Component} from '@angular/core';
@@ -155,8 +154,8 @@ export function runHarnessTests(
 
     it('should throw when item is not found', async () => {
       const menu1 = await loader.getHarness(MatMenuHarness.with({triggerText: 'Menu 1'}));
-      await expectAsyncError(() => menu1.clickItem({text: 'Fake Item'}),
-          /Error: Could not find item matching {"text":"Fake Item"}/);
+      await expectAsync(menu1.clickItem({text: 'Fake Item'})).toBeRejectedWithError(
+          /Could not find item matching {"text":"Fake Item"}/);
     });
 
     it('should select item in nested menu', async () => {
@@ -167,8 +166,8 @@ export function runHarnessTests(
 
     it('should throw when intermediate item does not have submenu', async () => {
       const menu1 = await loader.getHarness(MatMenuHarness.with({triggerText: 'Menu 1'}));
-      await expectAsyncError(() => menu1.clickItem({text: 'Leaf Item 1'}, {}),
-          /Error: Item matching {"text":"Leaf Item 1"} does not have a submenu/);
+      await expectAsync(menu1.clickItem({text: 'Leaf Item 1'}, {})).toBeRejectedWithError(
+          /Item matching {"text":"Leaf Item 1"} does not have a submenu/);
     });
   });
 }