test: use proper typings in e2e app

e2e/components/button/button.e2e.ts

@@ -1,3 +1,5 @@
+import {browser, by, element} from 'protractor';
+
 describe('button', function () {
   describe('disabling behavior', function () {
     beforeEach(function() {

e2e/components/checkbox/checkbox.e2e.ts

@@ -1,3 +1,5 @@
+import {browser, by, element} from 'protractor';
+
 describe('checkbox', function () {
   describe('check behavior', function () {
     beforeEach(function() {

e2e/components/dialog/dialog.e2e.ts

@@ -1,17 +1,19 @@
+import {browser, by, element, Key, ProtractorBy} from 'protractor';
+
 describe('dialog', () => {
   beforeEach(() => browser.get('/dialog'));
 
   it('should open a dialog', () => {
     element(by.id('default')).click();
-    waitForDialog().then(isPresent => expect(isPresent).toBe(true));
+    waitForDialog().then((isPresent: boolean) => expect(isPresent).toBe(true));
   });
 
   it('should close by clicking on the backdrop', () => {
     element(by.id('default')).click();
 
     waitForDialog().then(() => {
       clickOnBackrop();
-      waitForDialog().then(isPresent => expect(isPresent).toBe(false));
+      waitForDialog().then((isPresent: boolean) => expect(isPresent).toBe(false));
     });
   });
 
@@ -20,7 +22,7 @@ describe('dialog', () => {
 
     waitForDialog().then(() => {
       pressEscape();
-      waitForDialog().then(isPresent => expect(isPresent).toBe(false));
+      waitForDialog().then((isPresent: boolean) => expect(isPresent).toBe(false));
     });
   });
 
@@ -29,7 +31,7 @@ describe('dialog', () => {
 
     waitForDialog().then(() => {
       element(by.id('close')).click();
-      waitForDialog().then(isPresent => expect(isPresent).toBe(false));
+      waitForDialog().then((isPresent: boolean) => expect(isPresent).toBe(false));
     });
   });
 
@@ -56,7 +58,7 @@ describe('dialog', () => {
     element(by.id('default')).click();
 
     waitForDialog().then(() => {
-      let tab = protractor.Key.TAB;
+      let tab = Key.TAB;
 
       browser.actions().sendKeys(tab, tab, tab).perform();
       expectFocusOn(element(by.id('close')));
@@ -68,7 +70,7 @@ describe('dialog', () => {
 
     waitForDialog().then(() => {
       clickOnBackrop();
-      waitForDialog().then(isPresent => expect(isPresent).toBe(true));
+      waitForDialog().then((isPresent: boolean) => expect(isPresent).toBe(true));
     });
   });
 
@@ -77,12 +79,12 @@ describe('dialog', () => {
 
     waitForDialog().then(() => {
       pressEscape();
-      waitForDialog().then(isPresent => expect(isPresent).toBe(true));
+      waitForDialog().then((isPresent: boolean) => expect(isPresent).toBe(true));
     });
   });
 
   function waitForDialog() {
-    return browser.isElementPresent(by.css('md-dialog-container'));
+    return browser.isElementPresent(by.css('md-dialog-container') as ProtractorBy);
   }
 
   function clickOnBackrop() {
@@ -95,7 +97,7 @@ describe('dialog', () => {
   }
 
   function pressEscape() {
-    browser.actions().sendKeys(protractor.Key.ESCAPE).perform();
+    browser.actions().sendKeys(Key.ESCAPE).perform();
   }
 
   // TODO(crisbeto): should be moved to a common util. copied from the menu e2e setup.

e2e/components/grid-list/grid-list.e2e.ts

@@ -1,3 +1,5 @@
+import {browser, by, element} from 'protractor';
+
 describe('grid-list', () => {
   beforeEach(() => browser.get('/grid-list'));
 

e2e/components/icon/icon.e2e.ts

@@ -1,3 +1,5 @@
+import {browser, by, element} from 'protractor';
+
 describe('icon', () => {
   describe('font icons by ligature', () => {
     let testIcon: any;

e2e/components/list/list.e2e.ts

@@ -1,3 +1,5 @@
+import {browser, by, element} from 'protractor';
+
 describe('list', () => {
   beforeEach(() => browser.get('/list'));
 

e2e/components/menu/menu-page.ts

@@ -1,4 +1,4 @@
-import ElementFinder = protractor.ElementFinder;
+import {browser, by, element, ElementFinder, ProtractorBy} from 'protractor';
 
 export class MenuPage {
 
@@ -16,9 +16,7 @@ export class MenuPage {
 
   backdrop() { return element(by.css('.md-overlay-backdrop')); }
 
-  items(index: number) {
-    return element.all(by.css('[md-menu-item]')).get(index);
-  }
+  items(index: number) { return element.all(by.css('[md-menu-item]')).get(index); }
 
   textArea() { return element(by.id('text')); }
 
@@ -35,20 +33,21 @@ export class MenuPage {
   combinedMenu() { return element(by.css('.md-menu-panel.combined')); }
 
   // TODO(kara): move to common testing utility
-  pressKey(key: any): void {
+  pressKey(key: string): void {
     browser.actions().sendKeys(key).perform();
   }
 
   // TODO(kara): move to common testing utility
-  expectFocusOn(el: ElementFinder): void {
+  expectFocusOn(el: any): void {
     expect(browser.driver.switchTo().activeElement().getInnerHtml())
         .toBe(el.getInnerHtml());
   }
 
   expectMenuPresent(expected: boolean) {
-    return browser.isElementPresent(by.css('.md-menu-panel')).then(isPresent => {
-      expect(isPresent).toBe(expected);
-    });
+    return browser.isElementPresent(by.css('.md-menu-panel') as ProtractorBy)
+        .then((isPresent: boolean) => {
+          expect(isPresent).toBe(expected);
+        });
   }
 
   expectMenuLocation(el: ElementFinder, {x, y}: {x: number, y: number}) {

e2e/components/menu/menu.e2e.ts

@@ -1,4 +1,5 @@
-import { MenuPage } from './menu-page';
+import {browser, Key, protractor} from 'protractor';
+import {MenuPage} from './menu-page';
 
 describe('menu', () => {
   let page: MenuPage;
@@ -57,7 +58,7 @@ describe('menu', () => {
 
   it('should mirror classes on host to menu template in overlay', () => {
     page.trigger().click();
-    page.menu().getAttribute('class').then(classes => {
+    page.menu().getAttribute('class').then((classes: string) => {
       expect(classes).toContain('md-menu-panel custom');
     });
   });
@@ -66,16 +67,16 @@ describe('menu', () => {
     beforeEach(() => {
       // click start button to avoid tabbing past navigation
       page.start().click();
-      page.pressKey(protractor.Key.TAB);
+      page.pressKey(Key.TAB);
     });
 
     it('should auto-focus the first item when opened with ENTER', () => {
-      page.pressKey(protractor.Key.ENTER);
+      page.pressKey(Key.ENTER);
       page.expectFocusOn(page.items(0));
     });
 
     it('should auto-focus the first item when opened with SPACE', () => {
-      page.pressKey(protractor.Key.SPACE);
+      page.pressKey(Key.SPACE);
       page.expectFocusOn(page.items(0));
     });
 
@@ -85,60 +86,60 @@ describe('menu', () => {
     });
 
     it('should focus subsequent items when down arrow is pressed', () => {
-      page.pressKey(protractor.Key.ENTER);
-      page.pressKey(protractor.Key.DOWN);
+      page.pressKey(Key.ENTER);
+      page.pressKey(Key.DOWN);
       page.expectFocusOn(page.items(1));
     });
 
     it('should focus previous items when up arrow is pressed', () => {
-      page.pressKey(protractor.Key.ENTER);
-      page.pressKey(protractor.Key.DOWN);
-      page.pressKey(protractor.Key.UP);
+      page.pressKey(Key.ENTER);
+      page.pressKey(Key.DOWN);
+      page.pressKey(Key.UP);
       page.expectFocusOn(page.items(0));
     });
 
     it('should skip disabled items using arrow keys', () => {
-      page.pressKey(protractor.Key.ENTER);
-      page.pressKey(protractor.Key.DOWN);
-      page.pressKey(protractor.Key.DOWN);
+      page.pressKey(Key.ENTER);
+      page.pressKey(Key.DOWN);
+      page.pressKey(Key.DOWN);
       page.expectFocusOn(page.items(3));
 
-      page.pressKey(protractor.Key.UP);
+      page.pressKey(Key.UP);
       page.expectFocusOn(page.items(1));
     });
 
     it('should close the menu when tabbing past items', () => {
-      page.pressKey(protractor.Key.ENTER);
-      page.pressKey(protractor.Key.TAB);
+      page.pressKey(Key.ENTER);
+      page.pressKey(Key.TAB);
       page.expectMenuPresent(false);
 
-      page.pressKey(protractor.Key.TAB);
-      page.pressKey(protractor.Key.ENTER);
+      page.pressKey(Key.TAB);
+      page.pressKey(Key.ENTER);
       page.expectMenuPresent(true);
 
-      page.pressKey(protractor.Key.chord(protractor.Key.SHIFT, protractor.Key.TAB));
+      page.pressKey(protractor.Key.chord(Key.SHIFT, Key.TAB));
       page.expectMenuPresent(false);
     });
 
     it('should wrap back to menu when arrow keying past items', () => {
-      page.pressKey(protractor.Key.ENTER);
-      page.pressKey(protractor.Key.DOWN);
-      page.pressKey(protractor.Key.DOWN);
-      page.pressKey(protractor.Key.DOWN);
+      page.pressKey(Key.ENTER);
+      page.pressKey(Key.DOWN);
+      page.pressKey(Key.DOWN);
+      page.pressKey(Key.DOWN);
       page.expectFocusOn(page.items(0));
 
-      page.pressKey(protractor.Key.UP);
+      page.pressKey(Key.UP);
       page.expectFocusOn(page.items(3));
     });
 
     it('should focus before and after trigger when tabbing past items', () => {
-      page.pressKey(protractor.Key.ENTER);
-      page.pressKey(protractor.Key.TAB);
+      page.pressKey(Key.ENTER);
+      page.pressKey(Key.TAB);
       page.expectFocusOn(page.triggerTwo());
 
       // navigate back to trigger
       page.pressKey(protractor.Key.chord(protractor.Key.SHIFT, protractor.Key.TAB));
-      page.pressKey(protractor.Key.ENTER);
+      page.pressKey(Key.ENTER);
 
       page.pressKey(protractor.Key.chord(protractor.Key.SHIFT, protractor.Key.TAB));
       page.expectFocusOn(page.start());

e2e/components/progress-bar/progress-bar.e2e.ts

@@ -1,3 +1,5 @@
+import {browser, by, element} from 'protractor';
+
 describe('progress-bar', () => {
   beforeEach(() => browser.get('/progress-bar'));
 

e2e/components/progress-circle/progress-circle.e2e.ts

@@ -1,3 +1,5 @@
+import {browser, by, element} from 'protractor';
+
 describe('progress-circle', () => {
   beforeEach(() => browser.get('/progress-circle'));
 

e2e/components/radio/radio.e2e.ts

@@ -1,3 +1,5 @@
+import {browser, by, element} from 'protractor';
+
 describe('radio', function () {
 
   describe('disabling behavior', function () {

e2e/components/slide-toggle/slide-toggle.e2e.ts

@@ -1,3 +1,5 @@
+import {browser, element, by, protractor} from 'protractor';
+
 describe('slide-toggle', () => {
 
   beforeEach(() => browser.get('slide-toggle'));
@@ -40,7 +42,7 @@ describe('slide-toggle', () => {
   });
 
   it('should move the thumb on state change', () => {
-    let slideToggleEl = element(By.css('#normal-slide-toggle'));
+    let slideToggleEl = element(by.css('#normal-slide-toggle'));
     let thumbEl = element(by.css('#normal-slide-toggle .md-slide-toggle-thumb-container'));
 
     let previousX = thumbEl.getLocation().then(pos => pos.x);

e2e/components/tabs/tabs.e2e.ts

@@ -1,5 +1,4 @@
-import ElementArrayFinder = protractor.ElementArrayFinder;
-import ElementFinder = protractor.ElementFinder;
+import {browser, by, element, ElementArrayFinder, ElementFinder, Key} from 'protractor';
 
 describe('tabs', () => {
   describe('basic behavior', () => {
@@ -28,22 +27,22 @@ describe('tabs', () => {
       tabLabels.get(0).click();
       expect(getFocusStates(tabLabels)).toEqual([true, false, false]);
 
-      pressKey(protractor.Key.RIGHT);
+      pressKey(Key.RIGHT);
       expect(getFocusStates(tabLabels)).toEqual([false, true, false]);
 
-      pressKey(protractor.Key.RIGHT);
+      pressKey(Key.RIGHT);
       expect(getFocusStates(tabLabels)).toEqual([false, false, true]);
 
-      pressKey(protractor.Key.RIGHT);
+      pressKey(Key.RIGHT);
       expect(getFocusStates(tabLabels)).toEqual([false, false, true]);
 
-      pressKey(protractor.Key.LEFT);
+      pressKey(Key.LEFT);
       expect(getFocusStates(tabLabels)).toEqual([false, true, false]);
 
-      pressKey(protractor.Key.LEFT);
+      pressKey(Key.LEFT);
       expect(getFocusStates(tabLabels)).toEqual([true, false, false]);
 
-      pressKey(protractor.Key.LEFT);
+      pressKey(Key.LEFT);
       expect(getFocusStates(tabLabels)).toEqual([true, false, false]);
     });
   });

e2e/index.e2e.ts

@@ -1,3 +1,5 @@
+import {browser} from 'protractor';
+
 describe('hello, protractor', function () {
   describe('index', function () {
     browser.get('/');

e2e/tsconfig.json

@@ -11,9 +11,12 @@
     "outDir": "../dist/e2e/",
     "rootDir": ".",
     "sourceMap": true,
-    "target": "es5"
-  },
-  "files": [
-    "e2e.d.ts"
-  ]
+    "target": "es5",
+    "typeRoots": [
+      "../node_modules/@types/"
+    ],
+    "types": [
+      "jasmine"
+    ]
+  }
 }