test(angular): form tests (#17179)

angular/test/test-app/e2e/src/form.e2e-spec.ts

@@ -0,0 +1,117 @@
+import { browser, element, by } from 'protractor';
+import { handleErrorMessages, setProperty, getText, waitTime } from './utils';
+
+describe('form', () => {
+
+  afterEach(() => {
+    handleErrorMessages();
+  });
+
+  describe('change', () => {
+    beforeEach(async () => {
+      await browser.get('/form');
+    });
+
+    it('should have default values', async () => {
+      await testStatus('INVALID');
+      expect(await getText('#submit')).toEqual('false');
+      await testData({
+        'datetime': '2010-08-20',
+        'select': null,
+        'toggle': false,
+        'input': '',
+        'input2': 'Default Value',
+        'checkbox': false,
+        'range': 5
+      });
+    });
+
+    it('should become valid', async () => {
+      await setProperty('ion-input.required', 'value', 'Some value');
+      await testStatus('INVALID');
+      await setProperty('ion-select', 'value', 'nes');
+      await testStatus('INVALID');
+      await setProperty('ion-range', 'value', 40);
+      await testStatus('VALID');
+      await testData({
+        'datetime': '2010-08-20',
+        'select': 'nes',
+        'toggle': false,
+        'input': 'Some value',
+        'input2': 'Default Value',
+        'checkbox': false,
+        'range': 40
+      });
+    });
+
+    it('ion-toggle should change', async () => {
+      await element(by.css('ion-toggle')).click();
+      await testData({
+        'datetime': '2010-08-20',
+        'select': null,
+        'toggle': true,
+        'input': '',
+        'input2': 'Default Value',
+        'checkbox': false,
+        'range': 5
+      });
+    });
+
+    it('ion-checkbox should change', async () => {
+      await element(by.css('ion-checkbox')).click();
+      await testData({
+        'datetime': '2010-08-20',
+        'select': null,
+        'toggle': false,
+        'input': '',
+        'input2': 'Default Value',
+        'checkbox': true,
+        'range': 5
+      });
+    });
+
+    it('should submit', async () => {
+      await element(by.css('#set-values')).click();
+      await waitTime(100);
+      await element(by.css('#submit-button')).click();
+      expect(await getText('#submit')).toEqual('true');
+    });
+  });
+
+  describe('blur', () => {
+    beforeEach(async () => {
+      await browser.get('/form#blur');
+    });
+
+    it('ion-toggle should change only after blur', async () => {
+      await element(by.css('ion-toggle')).click();
+      await testData({
+        'datetime': '2010-08-20',
+        'select': null,
+        'toggle': false,
+        'input': '',
+        'input2': 'Default Value',
+        'checkbox': false,
+        'range': 5
+      });
+      await element(by.css('ion-checkbox')).click();
+      await testData({
+        'datetime': '2010-08-20',
+        'select': null,
+        'toggle': true,
+        'input': '',
+        'input2': 'Default Value',
+        'checkbox': false,
+        'range': 5
+      });
+    });
+  });
+});
+
+async function testStatus(status: string) {
+  expect(await element(by.css('#status')).getText()).toEqual(status);
+}
+
+async function testData(data: any) {
+  expect(JSON.parse(await element(by.css('#data')).getText())).toEqual(data);
+}

angular/test/test-app/src/app/form/form.component.html

@@ -7,7 +7,7 @@
 </ion-header>
 
 <ion-content>
-  <form [formGroup]="profileForm">
+  <form [formGroup]="profileForm" (ngSubmit)="onSubmit($event)">
     <ion-list>
 
       <ion-item>
@@ -35,7 +35,7 @@
 
       <ion-item>
         <ion-label>Input (required)</ion-label>
-        <ion-input formControlName="input"></ion-input>
+        <ion-input formControlName="input" class="required"></ion-input>
       </ion-item>
 
       <ion-item>
@@ -60,7 +60,10 @@
     <p>
       Form Status: <span id="data">{{ profileForm.value | json }}</span>
     </p>
-    <ion-button type="submit" [disabled]="!profileForm.valid">Submit</ion-button>
+    <p>
+      Form Submit: <span id="submit">{{submitted}}</span>
+    </p>
+    <ion-button id="submit-button" type="submit" [disabled]="!profileForm.valid">Submit</ion-button>
 
   </form>
   <ion-list>
@@ -71,6 +74,6 @@
     </ion-item>
   </ion-list>
   <p>
-    <ion-button (click)="setValues()" id="set-button">Set values</ion-button>
+    <ion-button (click)="setValues()" id="set-values">Set values</ion-button>
   </p>
 </ion-content>

angular/test/test-app/src/app/form/form.component.ts

@@ -7,6 +7,7 @@ import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms'
 })
 export class FormComponent {
 
+  submitted = 'false';
   profileForm: FormGroup;
   outsideToggle = new FormControl(true);
 
@@ -18,14 +19,18 @@ export class FormComponent {
       input: ['', Validators.required],
       input2: ['Default Value'],
       checkbox: [false],
-      range: [20, Validators.min(10)],
-    }, {updateOn: 'blur'});
+      range: [5, Validators.min(10)],
+    }, {updateOn: window.location.hash === '#blur' ? 'blur' : 'change'});
+  }
+
+  onSubmit(_ev) {
+    this.submitted = 'true';
   }
 
   setValues() {
     this.profileForm.patchValue({
       datetime: '2010-08-20',
-      setValue: 'nes',
+      select: 'nes',
       toggle: true,
       input: 'Some value',
       input2: 'Another values',