test: set up e2e test for mdc-based input

Sets up e2e tests for the MDC-based input. These weren't
copied in the initial MDC-based version of input and form-field.

Author: devversion

.github/CODEOWNERS

@@ -230,6 +230,7 @@
 /src/e2e-app/mdc-card/**                           @mmalerba
 /src/e2e-app/mdc-checkbox/**                       @mmalerba
 /src/e2e-app/mdc-chips/**                          @mmalerba
+/src/e2e-app/mdc-input/**                          @devversion
 /src/e2e-app/mdc-menu/**                           @crisbeto
 /src/e2e-app/mdc-progress-bar/**                   @crisbeto
 /src/e2e-app/mdc-radio/**                          @mmalerba

src/e2e-app/BUILD.bazel

@@ -36,6 +36,7 @@ ng_module(
         "//src/material-experimental/mdc-card",
         "//src/material-experimental/mdc-checkbox",
         "//src/material-experimental/mdc-chips",
+        "//src/material-experimental/mdc-input",
         "//src/material-experimental/mdc-menu",
         "//src/material-experimental/mdc-progress-bar",
         "//src/material-experimental/mdc-radio",

src/e2e-app/devserver-configure.js

@@ -36,7 +36,7 @@ require.config({
     '@material/tab-bar': '@material/tab-bar/dist/mdc.tabBar',
     '@material/tab-indicator': '@material/tab-indicator/dist/mdc.tabIndicator',
     '@material/tab-scroller': '@material/tab-scroller/dist/mdc.tabScroller',
-    '@material/text-field': '@material/textfield/dist/mdc.textField',
+    '@material/textfield': '@material/textfield/dist/mdc.textfield',
     '@material/top-app-bar': '@material/top-app-bar/dist/mdc.topAppBar',
   }
 });

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

@@ -27,6 +27,7 @@
   <a mat-list-item [routerLink]="['mdc-card']">MDC Card</a>
   <a mat-list-item [routerLink]="['mdc-checkbox']">MDC Checkbox</a>
   <a mat-list-item [routerLink]="['mdc-chips']">MDC Chips</a>
+  <a mat-list-item [routerLink]="['mdc-input']">MDC Input</a>
   <a mat-list-item [routerLink]="['mdc-menu']">MDC Menu</a>
   <a mat-list-item [routerLink]="['mdc-radio']">MDC Radio</a>
   <a mat-list-item [routerLink]="['mdc-slide-toggle']">MDC Slide Toggle</a>

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

@@ -15,6 +15,7 @@ import {MdcButtonE2e} from '../mdc-button/mdc-button-e2e';
 import {MdcCardE2e} from '../mdc-card/mdc-card-e2e';
 import {MdcCheckboxE2e} from '../mdc-checkbox/mdc-checkbox-e2e';
 import {MdcChipsE2e} from '../mdc-chips/mdc-chips-e2e';
+import {MdcInputE2E} from '../mdc-input/mdc-input-e2e';
 import {MdcMenuE2e} from '../mdc-menu/mdc-menu-e2e';
 import {MdcRadioE2e} from '../mdc-radio/mdc-radio-e2e';
 import {MdcSlideToggleE2e} from '../mdc-slide-toggle/mdc-slide-toggle-e2e';
@@ -50,6 +51,7 @@ export const E2E_APP_ROUTES: Routes = [
   {path: 'mdc-card', component: MdcCardE2e},
   {path: 'mdc-checkbox', component: MdcCheckboxE2e},
   {path: 'mdc-chips', component: MdcChipsE2e},
+  {path: 'mdc-input', component: MdcInputE2E},
   {path: 'mdc-menu', component: MdcMenuE2e},
   {path: 'mdc-radio', component: MdcRadioE2e},
   {path: 'mdc-slide-toggle', component: MdcSlideToggleE2e},

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

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgModule} from '@angular/core';
+import {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field';
+import {MatInputModule} from '@angular/material-experimental/mdc-input';
+import {MdcInputE2E} from './mdc-input-e2e';
+
+@NgModule({
+  imports: [MatFormFieldModule, MatInputModule],
+  declarations: [MdcInputE2E],
+})
+export class MdcInputE2eModule {
+}

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

@@ -0,0 +1,27 @@
+<section>
+  <p>
+    <mat-form-field>
+      <mat-label>Enter some text</mat-label>
+      <input matInput type="text" id="text-input">
+    </mat-form-field>
+  </p>
+  <p>
+    <mat-form-field>
+      <mat-label>Enter a number</mat-label>
+      <input matInput type="number" id="number-input">
+    </mat-form-field>
+  </p>
+  <p>
+    <mat-form-field>
+      <mat-label>Enter some text</mat-label>
+      <textarea matInput id="text-area"></textarea>
+    </mat-form-field>
+  </p>
+  <p>
+    <mat-form-field>
+      <mat-label>Enter some text</mat-label>
+      <textarea matInput cdkTextareaAutosize cdkAutosizeMaxRows="10" id="autosize-text-area">
+      </textarea>
+    </mat-form-field>
+  </p>
+</section>

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

@@ -0,0 +1,7 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'mdc-input-e2e',
+  templateUrl: 'mdc-input-e2e.html',
+})
+export class MdcInputE2E {}

src/material-experimental/mdc-input/input.e2e.spec.ts

@@ -0,0 +1,73 @@
+import {browser, by, element} from 'protractor';
+
+describe('input', () => {
+
+  beforeEach(async () => await browser.get('/mdc-input'));
+
+  describe('text input', () => {
+
+    it('should update input value when user types', async () => {
+      const input = element(by.id('text-input'));
+      await input.sendKeys('abc123');
+      expect(await input.getAttribute('value')).toBe('abc123');
+    });
+  });
+
+  describe('number input', () => {
+
+    it('should update input value when user types', async () => {
+      const input = element(by.id('number-input'));
+      await input.sendKeys('abc123');
+      expect(await input.getAttribute('value')).toBe('123');
+    });
+
+    it('should increment when increment button clicked', async () => {
+      const input = element(by.id('number-input'));
+      await input.click();
+
+      const size = await input.getSize();
+
+      await browser.actions()
+        .mouseMove(input, {x: size.width - 5, y: 5})
+        .perform();
+      // Workaround: https://github.com/angular/protractor/issues/4578
+      await browser.actions().click().perform();
+
+      expect(await input.getAttribute('value')).toBe('1');
+
+      await browser.actions()
+        .mouseMove(input, {x: size.width - 5, y: size.height - 5})
+        .perform();
+      // Workaround: https://github.com/angular/protractor/issues/4578
+      await browser.actions().click().perform();
+
+      expect(await input.getAttribute('value')).toBe('0');
+    });
+  });
+
+  describe('textarea', () => {
+
+    it('should update input value when user types', async () => {
+      const input = element(by.id('text-area'));
+      await input.sendKeys('abc123');
+      expect(await input.getAttribute('value')).toBe('abc123');
+    });
+  });
+
+  describe('autosize-textarea', () => {
+
+    it('should resize correctly', async () => {
+      const input = element(by.id('autosize-text-area'));
+      await input.sendKeys('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa');
+    });
+
+    it('should enfore max rows', async () => {
+      const input = element(by.id('autosize-text-area'));
+      await input.sendKeys(
+        'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa' +
+        'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa' +
+        'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa' +
+        'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa');
+    });
+  });
+});