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.

Author: crisbeto

e2e/components/button-e2e.spec.ts

@@ -8,15 +8,15 @@ 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')))));
       screenshot('clicked once');
 
       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,19 +11,19 @@ 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();
   });
 
   it('should hide contents of the expansion panel on click', async () => {
     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');
     });
   });
 });