feat(demo): expand the e2e testing

packages/angular/demo/e2e/inputs.e2e-spec.ts

@@ -12,11 +12,65 @@ describe('Demo Inputs Page', () => {
     expect(page.getTitleText()).toEqual('Ionic Core Inputs Demo');
   });
 
-  describe('input one', () => {
+  describe('text input', () => {
     it('should display the starting text', () => {
       page.navigateTo();
       const el = page.getIonicTextInput();
       expect(el.getAttribute('value')).toEqual('This is the Ionic Text Input');
     });
+
+    it('should reflect back the entered data', () => {
+      page.navigateTo();
+      const el = page.getIonicTextInputEditable();
+      el.clear();
+      el.sendKeys('I am new text');
+      expect(page.getIonicTextInputOutputText()).toEqual('I am new text');
+    });
+  });
+
+  describe('textarea input', () => {
+    it('should display the starting text', () => {
+      page.navigateTo();
+      const el = page.getIonicTextareaInput();
+      expect(el.getAttribute('value')).toEqual('This is the Ionic Textarea Input');
+    });
+
+    it('should reflect back the entered data', () => {
+      page.navigateTo();
+      const el = page.getIonicTextareaInputEditable();
+      el.clear();
+      el.sendKeys('I am new text');
+      expect(page.getIonicTextareaInputOutputText()).toEqual('I am new text');
+    });
+  });
+
+  describe('checkbox input', () => {
+    it('should be set the initial value', () => {
+      page.navigateTo();
+      const el = page.getIonicCheckbox();
+      expect(el.getAttribute('checked')).toEqual('true');
+    });
+
+    it('should reflect toggling the value', () => {
+      page.navigateTo();
+      const el = page.getIonicCheckbox();
+      el.click();
+      expect(page.getIonicCheckboxOutputText()).toEqual('false');
+    });
+  });
+
+  describe('toggle input', () => {
+    it('should be set the initial value', () => {
+      page.navigateTo();
+      const el = page.getIonicToggle();
+      expect(el.getAttribute('checked')).toBeNull();
+    });
+
+    it('should reflect toggling the value', () => {
+      page.navigateTo();
+      const el = page.getIonicToggle();
+      el.click();
+      expect(page.getIonicToggleOutputText()).toEqual('true');
+    });
   });
 });

packages/angular/demo/e2e/inputs.po.ts

@@ -5,18 +5,6 @@ export class InputsPage {
     return browser.get('/inputs');
   }
 
-  getTitleText() {
-    return element(by.css('.title')).getText();
-  }
-
-  getIonicTextInput() {
-    return element(by.id('ionTextInput'));
-  }
-
-  getIonicTextInputOutputText() {
-    return element(by.id('ionTextInputOutput')).getText();
-  }
-
   getIonicCheckbox() {
     return element(by.id('ionCheckbox'));
   }
@@ -24,4 +12,42 @@ export class InputsPage {
   getIonicCheckboxOutputText() {
     return element(by.id('ionCheckboxOutput')).getText();
   }
+
+  getIonicToggle() {
+    return element(by.id('ionToggle'));
+  }
+
+  getIonicToggleOutputText() {
+    return element(by.id('ionToggleOutput')).getText();
+  }
+
+  getTitleText() {
+    return element(by.css('.title')).getText();
+  }
+
+  getIonicTextareaInput() {
+    return element(by.id('ionTextareaInput'));
+  }
+
+  getIonicTextareaInputEditable() {
+    const parent = this.getIonicTextareaInput();
+    return parent.all(by.css('textarea')).first();
+  }
+
+  getIonicTextareaInputOutputText() {
+    return element(by.id('ionTextareaInputOutput')).getText();
+  }
+
+  getIonicTextInput() {
+    return element(by.id('ionTextInput'));
+  }
+
+  getIonicTextInputEditable() {
+    const parent = this.getIonicTextInput();
+    return parent.all(by.css('input')).first();
+  }
+
+  getIonicTextInputOutputText() {
+    return element(by.id('ionTextInputOutput')).getText();
+  }
 }

packages/angular/demo/src/app/inputs/inputs-test-page.component.html

@@ -23,7 +23,7 @@
     <ion-col>
       <ion-item>
         <ion-label>Ionic Text Input</ion-label>
-        <ion-input id="ionTextInput" name="ionTextInput" [(ngModel)]="ionTextInput"></ion-input>
+        <ion-input id="ionTextInput" name="ionTextInput" [(ngModel)]="ionTextInput" (ionBlur)="onBlur($event)"></ion-input>
       </ion-item>
     </ion-col>
     <ion-col>
@@ -35,12 +35,12 @@
     <ion-col>
       <ion-item>
         <ion-label>Ionic Text Area Input</ion-label>
-        <ion-textarea id="ionTextareaInput" name="ionTextareaInput" [(ngModel)]="ionTextareaInput"></ion-textarea>
+        <ion-textarea id="ionTextareaInput" name="ionTextareaInput" [(ngModel)]="ionTextareaInput" (ionBlur)="onBlur($event)"></ion-textarea>
       </ion-item>
     </ion-col>
     <ion-col>
       Ionic Text Input:
-      <span id="ionTextInputOutput">{{ionTextareaInput}}</span>
+      <span id="ionTextareaInputOutput">{{ionTextareaInput}}</span>
     </ion-col>
   </ion-row>
 
@@ -80,7 +80,7 @@
     </ion-col>
     <ion-col>
       Ionic Toggle:
-      <span id="ionCheckboxOutput">{{ionToggle}}</span>
+      <span id="ionToggleOutput">{{ionToggle}}</span>
     </ion-col>
   </ion-row>
 </ion-grid>