add e2e test that would have caught regression in #3878 (#4207)

Author: mmalerba

e2e/components/input/input.e2e.ts

@@ -0,0 +1,44 @@
+import {browser, by, element} from 'protractor';
+
+
+describe('input', () => {
+  describe('text input', () => {
+    beforeEach(() => browser.get('/input'));
+
+    it('should update input value when user types', () => {
+      let input = element(by.id('text-input'));
+      input.sendKeys('abc123');
+      expect(input.getAttribute('value')).toBe('abc123');
+    });
+  });
+
+  describe('number input', () => {
+    beforeEach(() => browser.get('/input'));
+
+    it('should update input value when user types', () => {
+      let input = element(by.id('number-input'));
+      input.sendKeys('abc123');
+      expect(input.getAttribute('value')).toBe('123');
+    });
+
+    it('should increment when increment button clicked', () => {
+      let input = element(by.id('number-input'));
+      input.click();
+      input.getSize().then((size) => {
+        browser.actions()
+            .mouseMove(input, {x: size.width - 5, y: 5})
+            .click()
+            .perform();
+
+        expect(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');
+      });
+    });
+  });
+});

src/e2e-app/e2e-app-module.ts

@@ -18,6 +18,7 @@ import {FullscreenE2E, TestDialog as TestDialogFullScreen} from './fullscreen/fu
 import {MaterialModule, OverlayContainer, FullscreenOverlayContainer} from '@angular/material';
 import {E2E_APP_ROUTES} from './e2e-app/routes';
 import {SlideToggleE2E} from './slide-toggle/slide-toggle-e2e';
+import {InputE2E} from './input/input-e2e';
 
 @NgModule({
   imports: [
@@ -27,22 +28,23 @@ import {SlideToggleE2E} from './slide-toggle/slide-toggle-e2e';
     NoopAnimationsModule,
   ],
   declarations: [
-    E2EApp,
-    IconE2E,
-    ButtonE2E,
-    MenuE2E,
     BasicTabs,
-    SimpleRadioButtons,
-    SimpleCheckboxes,
-    Home,
+    ButtonE2E,
     DialogE2E,
-    TestDialog,
+    E2EApp,
+    FullscreenE2E,
     GridListE2E,
+    Home,
+    IconE2E,
+    InputE2E,
     ListE2E,
+    MenuE2E,
     ProgressBarE2E,
     ProgressSpinnerE2E,
+    SimpleCheckboxes,
+    SimpleRadioButtons,
     SlideToggleE2E,
-    FullscreenE2E,
+    TestDialog,
     TestDialogFullScreen
   ],
   bootstrap: [E2EApp],

src/e2e-app/e2e-app/e2e-app.html

@@ -4,16 +4,17 @@
   <a md-list-item [routerLink]="['button']">Button</a>
   <a md-list-item [routerLink]="['checkbox']">Checkbox</a>
   <a md-list-item [routerLink]="['dialog']">Dialog</a>
+  <a md-list-item [routerLink]="['fullscreen']">Fullscreen</a>
   <a md-list-item [routerLink]="['grid-list']">Grid list</a>
   <a md-list-item [routerLink]="['icon']">Icon</a>
+  <a md-list-item [routerLink]="['input']">Input</a>
   <a md-list-item [routerLink]="['list']">List</a>
   <a md-list-item [routerLink]="['menu']">Menu</a>
   <a md-list-item [routerLink]="['progress-bar']">Progress bar</a>
   <a md-list-item [routerLink]="['progress-spinner']">Progress Spinner</a>
   <a md-list-item [routerLink]="['radio']">Radios</a>
   <a md-list-item [routerLink]="['slide-toggle']">Slide Toggle</a>
   <a md-list-item [routerLink]="['tabs']">Tabs</a>
-  <a md-list-item [routerLink]="['fullscreen']">Fullscreen</a>
 </md-nav-list>
 
 <main>

src/e2e-app/e2e-app/routes.ts

@@ -13,20 +13,22 @@ import {ProgressBarE2E} from '../progress-bar/progress-bar-e2e';
 import {ProgressSpinnerE2E} from '../progress-spinner/progress-spinner-e2e';
 import {SlideToggleE2E} from '../slide-toggle/slide-toggle-e2e';
 import {FullscreenE2E} from '../fullscreen/fullscreen-e2e';
+import {InputE2E} from '../input/input-e2e';
 
 export const E2E_APP_ROUTES: Routes = [
   {path: '', component: Home},
   {path: 'button', component: ButtonE2E},
   {path: 'checkbox', component: SimpleCheckboxes},
-  {path: 'menu', component: MenuE2E},
-  {path: 'icon', component: IconE2E},
-  {path: 'radio', component: SimpleRadioButtons},
-  {path: 'tabs', component: BasicTabs},
   {path: 'dialog', component: DialogE2E},
+  {path: 'fullscreen', component: FullscreenE2E},
   {path: 'grid-list', component: GridListE2E},
+  {path: 'icon', component: IconE2E},
+  {path: 'input', component: InputE2E},
   {path: 'list', component: ListE2E},
+  {path: 'menu', component: MenuE2E},
   {path: 'progress-bar', component: ProgressBarE2E},
   {path: 'progress-spinner', component: ProgressSpinnerE2E},
+  {path: 'radio', component: SimpleRadioButtons},
   {path: 'slide-toggle', component: SlideToggleE2E},
-  {path: 'fullscreen', component: FullscreenE2E}
+  {path: 'tabs', component: BasicTabs},
 ];

src/e2e-app/input/input-e2e.html

@@ -0,0 +1,12 @@
+<section>
+  <p>
+    <md-input-container>
+      <input mdInput type="text" id="text-input" placeholder="Enter some text">
+    </md-input-container>
+  </p>
+  <p>
+    <md-input-container>
+      <input mdInput type="number" id="number-input" placeholder="Enter a number">
+    </md-input-container>
+  </p>
+</section>

src/e2e-app/input/input-e2e.ts

@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  moduleId: module.id,
+  selector: 'input-e2e',
+  templateUrl: 'input-e2e.html',
+})
+export class InputE2E {}