build: update jasmine for improved type safety (#8350)

* Bumps the version of Jasmine to allow for better type safety in the assertions.
* Fixes a few new compilation errors.

e2e/components/button-e2e.spec.ts

@@ -8,7 +8,7 @@ describe('button', () => {
 
     it('should prevent click handlers from executing when disabled', async () => {
       element(by.id('test-button')).click();
-      expect(element(by.id('click-counter')).getText()).toEqual('1');
+      expect(await element(by.id('click-counter')).getText()).toEqual('1');
 
       await browser.wait(ExpectedConditions.not(
         ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))));
@@ -16,7 +16,7 @@ describe('button', () => {
 
       element(by.id('disable-toggle')).click();
       element(by.id('test-button')).click();
-      expect(element(by.id('click-counter')).getText()).toEqual('1');
+      expect(await element(by.id('click-counter')).getText()).toEqual('1');
 
       await browser.wait(ExpectedConditions.not(
         ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))));

e2e/components/expansion-e2e.spec.ts

@@ -11,7 +11,7 @@ describe('expansion', () => {
   });
 
   it('should show two panels', async () => {
-    expect(element.all(by.css('.mat-expansion-panel')).count()).toBe(2);
+    expect(await element.all(by.css('.mat-expansion-panel')).count()).toBe(2);
     screenshot();
   });
 
@@ -19,11 +19,11 @@ describe('expansion', () => {
     const panelHeader = element.all(by.css('.mat-expansion-panel-header')).get(0);
     const panelContent = element.all(by.css('.mat-expansion-panel-content')).get(0);
 
-    expect(panelContent.isDisplayed()).toBe(false);
+    expect(await panelContent.isDisplayed()).toBe(false);
 
     panelHeader.click();
 
-    expect(panelContent.isDisplayed()).toBe(true);
+    expect(await panelContent.isDisplayed()).toBe(true);
   });
 
   it('should emit events for expanding and collapsing', async () => {

e2e/components/fullscreen-e2e.spec.ts

@@ -4,36 +4,36 @@ describe('fullscreen', () => {
 
   beforeEach(() => browser.get('/fullscreen'));
 
-  it('should open a dialog inside a fullscreen element and move it to the document body', () => {
+  it('should open a dialog inside a fullscreen element and move it to the body', async () => {
     element(by.id('fullscreen-open')).click();
     element(by.id('dialog-open')).click();
 
-    expectOverlayInFullscreen();
+    await expectOverlayInFullscreen();
 
     element(by.id('dialog-fullscreen-exit')).click();
-    expectOverlayInBody();
+    await expectOverlayInBody();
   });
 
-  it('should open a dialog inside the document body and move it to a fullscreen element', () => {
+  it('should open a dialog inside the body and move it to a fullscreen element', async () => {
     element(by.id('dialog-open')).click();
-    expectOverlayInBody();
+    await expectOverlayInBody();
 
     element(by.id('dialog-fullscreen-open')).click();
-    expectOverlayInFullscreen();
+    await expectOverlayInFullscreen();
 
     element(by.id('dialog-fullscreen-exit')).click();
-    expectOverlayInBody();
+    await expectOverlayInBody();
   });
 
   /** Expects the overlay container to be inside of the body element. */
-  function expectOverlayInBody() {
-    expect(browser.isElementPresent(by.css('body > .cdk-overlay-container')))
+  async function expectOverlayInBody() {
+    expect(await browser.isElementPresent(by.css('body > .cdk-overlay-container')))
       .toBe(true, 'Expected the overlay container to be inside of the body.');
   }
 
   /** Expects the overlay container to be in fullscreen mode. */
-  function expectOverlayInFullscreen() {
-    expect(browser.isElementPresent(by.css('#fullscreen-pane > .cdk-overlay-container')))
+  async function expectOverlayInFullscreen() {
+    expect(await browser.isElementPresent(by.css('#fullscreen-pane > .cdk-overlay-container')))
       .toBe(true, 'Expected the overlay container to be in fullscreen mode.');
   }
 

e2e/components/input-e2e.spec.ts

@@ -12,20 +12,20 @@ describe('input', () => {
   describe('text input', () => {
     beforeEach(() => browser.get('/input'));
 
-    it('should update input value when user types', () => {
+    it('should update input value when user types', async () => {
       let input = element(by.id('text-input'));
       input.sendKeys('abc123');
-      expect(input.getAttribute('value')).toBe('abc123');
+      expect(await input.getAttribute('value')).toBe('abc123');
     });
   });
 
   describe('number input', () => {
     beforeEach(() => browser.get('/input'));
 
-    it('should update input value when user types', () => {
+    it('should update input value when user types', async () => {
       let input = element(by.id('number-input'));
       input.sendKeys('abc123');
-      expect(input.getAttribute('value')).toBe('123');
+      expect(await input.getAttribute('value')).toBe('123');
     });
 
     it('should increment when increment button clicked', async () => {
@@ -40,24 +40,24 @@ describe('input', () => {
           .click()
           .perform();
 
-      expect(input.getAttribute('value')).toBe('1');
+      expect(await input.getAttribute('value')).toBe('1');
 
       browser.actions()
           .mouseMove(input, {x: size.width - 5, y: size.height - 5})
           .click()
           .perform();
 
-      expect(input.getAttribute('value')).toBe('0');
+      expect(await input.getAttribute('value')).toBe('0');
     });
   });
 
   describe('textarea', () => {
     beforeEach(() => browser.get('/input'));
 
-    it('should update input value when user types', () => {
+    it('should update input value when user types', async () => {
       let input = element(by.id('text-area'));
       input.sendKeys('abc123');
-      expect(input.getAttribute('value')).toBe('abc123');
+      expect(await input.getAttribute('value')).toBe('abc123');
     });
   });
 

e2e/components/menu-e2e.spec.ts

@@ -18,12 +18,12 @@ describe('menu', () => {
 
   beforeEach(() => page = new MenuPage());
 
-  it('should open menu when the trigger is clicked', () => {
+  it('should open menu when the trigger is clicked', async () => {
     expectToExist(menuSelector, false);
     page.trigger().click();
 
     expectToExist(menuSelector);
-    expect(page.menu().getText()).toEqual('One\nTwo\nThree\nFour');
+    expect(await page.menu().getText()).toEqual('One\nTwo\nThree\nFour');
     screenshot();
   });
 
@@ -34,29 +34,29 @@ describe('menu', () => {
     screenshot();
   });
 
-  it('should run click handlers on regular menu items', () => {
+  it('should run click handlers on regular menu items', async () => {
     page.trigger().click();
     page.items(0).click();
-    expect(page.getResultText()).toEqual('one');
+    expect(await page.getResultText()).toEqual('one');
     screenshot('one');
 
     page.trigger().click();
     page.items(1).click();
-    expect(page.getResultText()).toEqual('two');
+    expect(await page.getResultText()).toEqual('two');
     screenshot('two');
   });
 
-  it('should run not run click handlers on disabled menu items', () => {
+  it('should run not run click handlers on disabled menu items', async () => {
     page.trigger().click();
     page.items(2).click();
-    expect(page.getResultText()).toEqual('');
+    expect(await page.getResultText()).toEqual('');
     screenshot();
   });
 
   it('should support multiple triggers opening the same menu', async () => {
     page.triggerTwo().click();
 
-    expect(page.menu().getText()).toEqual('One\nTwo\nThree\nFour');
+    expect(await page.menu().getText()).toEqual('One\nTwo\nThree\nFour');
     expectAlignedWith(page.menu(), '#trigger-two');
 
     page.backdrop().click();
@@ -65,7 +65,7 @@ describe('menu', () => {
 
     page.trigger().click();
 
-    expect(page.menu().getText()).toEqual('One\nTwo\nThree\nFour');
+    expect(await page.menu().getText()).toEqual('One\nTwo\nThree\nFour');
     expectAlignedWith(page.menu(), '#trigger');
 
     page.backdrop().click();

e2e/components/progress-spinner-e2e.spec.ts

@@ -3,15 +3,16 @@ import {browser, by, element} from 'protractor';
 describe('progress-spinner', () => {
   beforeEach(() => browser.get('/progress-spinner'));
 
-  it('should render a determinate progress spinner', () => {
-    expect(element(by.css('mat-progress-spinner')).isPresent()).toBe(true);
+  it('should render a determinate progress spinner', async () => {
+    expect(await element(by.css('mat-progress-spinner')).isPresent()).toBe(true);
   });
 
-  it('should render an indeterminate progress spinner', () => {
-    expect(element(by.css('mat-progress-spinner[mode="indeterminate"]')).isPresent()).toBe(true);
+  it('should render an indeterminate progress spinner', async () => {
+    expect(await element(by.css('mat-progress-spinner[mode="indeterminate"]')).isPresent())
+        .toBe(true);
   });
 
-  it('should render a spinner', () => {
-    expect(element(by.css('mat-spinner')).isPresent()).toBe(true);
+  it('should render a spinner', async () => {
+    expect(await element(by.css('mat-spinner')).isPresent()).toBe(true);
   });
 });

e2e/components/stepper-e2e.spec.ts

@@ -19,13 +19,13 @@ describe('stepper', () => {
       const previousButton = element.all(by.buttonText('Back'));
       const nextButton = element.all(by.buttonText('Next'));
 
-      expect(element(by.css('mat-step-header[aria-selected="true"]')).getText())
+      expect(await element(by.css('mat-step-header[aria-selected="true"]')).getText())
           .toBe('1\nFill out your name');
 
       screenshot('start');
       nextButton.get(0).click();
 
-      expect(element(by.css('mat-step-header[aria-selected="true"]')).getText())
+      expect(await element(by.css('mat-step-header[aria-selected="true"]')).getText())
           .toBe('2\nFill out your address');
 
       await browser.wait(ExpectedConditions.not(
@@ -34,7 +34,7 @@ describe('stepper', () => {
 
       previousButton.get(0).click();
 
-      expect(element(by.css('mat-step-header[aria-selected="true"]')).getText())
+      expect(await element(by.css('mat-step-header[aria-selected="true"]')).getText())
           .toBe('1\nFill out your name');
 
       await browser.wait(ExpectedConditions.not(
@@ -73,11 +73,11 @@ describe('stepper', () => {
       linearButton.click();
     });
 
-    it('should not move to next step when stepper button is clicked', () => {
+    it('should not move to next step when stepper button is clicked', async () => {
       let nextButton = element.all(by.buttonText('Next'));
       nextButton.get(0).click();
 
-      expect(element(by.css('mat-step-header[aria-selected="true"]')).getText())
+      expect(await element(by.css('mat-step-header[aria-selected="true"]')).getText())
           .toBe('1\nFill out your name');
     });
   });

e2e/components/tabs-e2e.spec.ts

@@ -26,46 +26,46 @@ describe('tabs', () => {
 
     it('should change tabs when the label is clicked', async () => {
       tabLabels.get(1).click();
-      expect(getLabelActiveStates(tabLabels)).toEqual([false, true, false]);
-      expect(getBodyActiveStates(tabBodies)).toEqual([false, true, false]);
+      expect(await getLabelActiveStates(tabLabels)).toEqual([false, true, false]);
+      expect(await getBodyActiveStates(tabBodies)).toEqual([false, true, false]);
 
       await browser.wait(ExpectedConditions.not(
         ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))));
       screenshot('click1');
 
       tabLabels.get(0).click();
-      expect(getLabelActiveStates(tabLabels)).toEqual([true, false, false]);
-      expect(getBodyActiveStates(tabBodies)).toEqual([true, false, false]);
+      expect(await getLabelActiveStates(tabLabels)).toEqual([true, false, false]);
+      expect(await getBodyActiveStates(tabBodies)).toEqual([true, false, false]);
 
       await browser.wait(ExpectedConditions.not(
         ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))));
       screenshot('click0');
     });
 
-    it('should change focus with keyboard interaction', () => {
+    it('should change focus with keyboard interaction', async () => {
       let right = Key.RIGHT;
       let left = Key.LEFT;
 
       tabLabels.get(0).click();
-      expect(getFocusStates(tabLabels)).toEqual([true, false, false]);
+      expect(await getFocusStates(tabLabels)).toEqual([true, false, false]);
 
       pressKeys(right);
-      expect(getFocusStates(tabLabels)).toEqual([false, true, false]);
+      expect(await getFocusStates(tabLabels)).toEqual([false, true, false]);
 
       pressKeys(right);
-      expect(getFocusStates(tabLabels)).toEqual([false, false, true]);
+      expect(await getFocusStates(tabLabels)).toEqual([false, false, true]);
 
       pressKeys(right);
-      expect(getFocusStates(tabLabels)).toEqual([false, false, true]);
+      expect(await getFocusStates(tabLabels)).toEqual([false, false, true]);
 
       pressKeys(left);
-      expect(getFocusStates(tabLabels)).toEqual([false, true, false]);
+      expect(await getFocusStates(tabLabels)).toEqual([false, true, false]);
 
       pressKeys(left);
-      expect(getFocusStates(tabLabels)).toEqual([true, false, false]);
+      expect(await getFocusStates(tabLabels)).toEqual([true, false, false]);
 
       pressKeys(left);
-      expect(getFocusStates(tabLabels)).toEqual([true, false, false]);
+      expect(await getFocusStates(tabLabels)).toEqual([true, false, false]);
     });
   });
 });
@@ -74,8 +74,8 @@ describe('tabs', () => {
  * Returns an array of true/false that represents the focus states of the provided elements.
  */
 async function getFocusStates(elements: ElementArrayFinder) {
-  return elements.map(async (element) => {
-    let elementText = await element!.getText();
+  return elements.map(async el => {
+    let elementText = await el!.getText();
     let activeText = await browser.driver.switchTo().activeElement().getText();
 
     return activeText === elementText;
@@ -97,8 +97,8 @@ function getBodyActiveStates(elements: ElementArrayFinder) {
  * each element.
  */
 async function getClassStates(elements: ElementArrayFinder, className: string) {
-  return elements.map(async (element) => {
-    let classes = await element!.getAttribute('class');
+  return elements.map(async el => {
+    let classes = await el!.getAttribute('class');
     return classes.split(/ +/g).indexOf(className) >= 0;
   });
 }

e2e/index-e2e.spec.ts

@@ -3,8 +3,8 @@ import {browser} from 'protractor';
 describe('hello, protractor', () => {
   describe('index', () => {
     browser.get('/');
-    it('should have a title', () => {
-      expect(browser.getTitle()).toBe('Angular Material');
+    it('should have a title', async () => {
+      expect(await browser.getTitle()).toBe('Angular Material');
     });
   });
 });

package.json

@@ -50,7 +50,7 @@
     "@types/glob": "^5.0.33",
     "@types/gulp": "3.8.32",
     "@types/hammerjs": "^2.0.35",
-    "@types/jasmine": "2.5.45",
+    "@types/jasmine": "^2.6.0",
     "@types/merge2": "^0.3.30",
     "@types/minimist": "^1.2.0",
     "@types/node": "^7.0.21",
@@ -87,7 +87,7 @@
     "highlight.js": "^9.11.0",
     "http-rewrite-middleware": "^0.1.6",
     "image-diff": "^1.6.3",
-    "jasmine-core": "^2.6.2",
+    "jasmine-core": "^2.8.0",
     "jsonwebtoken": "^7.4.1",
     "karma": "^1.7.1",
     "karma-browserstack-launcher": "^1.3.0",

src/cdk/table/table.spec.ts

@@ -66,7 +66,7 @@ describe('CdkTable', () => {
     it('with a rendered header with the right number of header cells', () => {
       const header = getHeaderRow(tableElement);
 
-      expect(header).not.toBe(undefined);
+      expect(header).toBeTruthy();
       expect(header.classList).toContain('customHeaderRowClass');
       expect(getHeaderCells(tableElement).length).toBe(component.columnsToRender.length);
     });
@@ -488,7 +488,7 @@ describe('CdkTable', () => {
     ]);
 
     // Remove the data source and check to make sure the table is empty again.
-    component.dataSource = null;
+    component.dataSource = undefined;
     dynamicDataSourceFixture.detectChanges();
 
     // Expect that the old data source has been disconnected.
@@ -696,7 +696,7 @@ class BooleanDataSource extends DataSource<boolean> {
   `
 })
 class SimpleCdkTableApp {
-  dataSource: FakeDataSource | null = new FakeDataSource();
+  dataSource: FakeDataSource | undefined = new FakeDataSource();
   columnsToRender = ['column_a', 'column_b', 'column_c'];
 
   @ViewChild(CdkTable) table: CdkTable<TestData>;

src/lib/input/input.spec.ts

@@ -223,7 +223,7 @@ describe('MatInput without forms', function () {
         fixture.debugElement.query(By.css('label')).nativeElement;
 
     expect(inputElement.id).toBeTruthy();
-    expect(inputElement.id).toEqual(labelElement.getAttribute('for'));
+    expect(inputElement.id).toEqual(labelElement.getAttribute('for')!);
   });
 
   it('should add aria-owns to the label for the associated control', () => {

src/lib/input/input.ts

@@ -75,6 +75,7 @@ export class MatInput implements MatFormFieldControl<any>, OnChanges, OnDestroy,
   protected _uid = `mat-input-${nextUniqueId++}`;
   protected _previousNativeValue: any;
   private _readonly = false;
+  private _inputValueAccessor: {value: any};
 
   /** Whether the input is focused. */
   focused = false;
@@ -161,11 +162,10 @@ export class MatInput implements MatFormFieldControl<any>, OnChanges, OnDestroy,
               @Optional() protected _parentForm: NgForm,
               @Optional() protected _parentFormGroup: FormGroupDirective,
               private _defaultErrorStateMatcher: ErrorStateMatcher,
-              @Optional() @Self() @Inject(MAT_INPUT_VALUE_ACCESSOR)
-                  private _inputValueAccessor: {value: any}) {
+              @Optional() @Self() @Inject(MAT_INPUT_VALUE_ACCESSOR) inputValueAccessor: any) {
     // If no input value accessor was explicitly specified, use the element as the input value
     // accessor.
-    this._inputValueAccessor = this._inputValueAccessor || this._elementRef.nativeElement;
+    this._inputValueAccessor = inputValueAccessor || this._elementRef.nativeElement;
 
     this._previousNativeValue = this.value;
 

src/lib/menu/menu.spec.ts

@@ -203,7 +203,7 @@ describe('MatMenu', () => {
     triggerEl.click();
     fixture.detectChanges();
 
-    const panel = overlayContainerElement.querySelector('.mat-menu-panel');
+    const panel = overlayContainerElement.querySelector('.mat-menu-panel')!;
 
     expect(panel).toBeTruthy('Expected the panel to be rendered.');
     expect(document.activeElement).toBe(panel, 'Expected the panel to be focused.');

src/lib/select/select.spec.ts

@@ -1032,7 +1032,7 @@ describe('MatSelect', () => {
       fixture.detectChanges();
 
       expect(fixture.componentInstance.customAccessor.select.ngControl)
-          .toBe(null, 'Expected mat-select NOT to inherit control from parent value accessor.');
+          .toBeFalsy('Expected mat-select NOT to inherit control from parent value accessor.');
       expect(fixture.componentInstance.customAccessor.writeValue).toHaveBeenCalled();
     }));
   });