chore(tests): add testing for disabled inputs

2025-08-18 03:00:58 +08:00 · 2018-02-06 11:32:51 -06:00
parent 77b8527d76
commit fcbe1818fa
4 changed files with 93 additions and 15 deletions
--- a/packages/demos/angular/e2e/basic-inputs.e2e-spec.ts
+++ b/packages/demos/angular/e2e/basic-inputs.e2e-spec.ts
@ -14,6 +14,30 @@ describe('Basic Inputs Page', () => {
    expect(page.getTitleText()).toEqual('Ionic Core Basic Inputs Demo');
  });

+  describe('search input', () => {
+    it('should display the starting text', () => {
+      page.navigateTo();
+      const el = page.getIonicSearchInput();
+      expect(el.getAttribute('value')).toEqual(null);
+    });
+
+    it('should reflect back the entered data', () => {
+      page.navigateTo();
+      const el = page.getIonicSearchInputEditable();
+      el.clear();
+      el.sendKeys('I am new text');
+      expect(page.getSearchOutput()).toEqual('I am new text');
+    });
+
+    // it('should disable', () => {
+    //   page.navigateTo();
+    //   const inp = page.getIonicSearchInputEditable();
+    //   const cb = page.getDisableButton();
+    //   cb.click();
+    //   expect(inp.isEnabled()).toEqual(false);
+    // });
+  });
+
  describe('text input', () => {
    it('should display the starting text', () => {
      page.navigateTo();
@ -40,6 +64,14 @@ describe('Basic Inputs Page', () => {
      inp.sendKeys('X');
      expect(hasClass(el, 'ng-invalid')).toEqual(false);
    });
+
+    it('should disable', () => {
+      page.navigateTo();
+      const inp = page.getIonicTextInputEditable();
+      const cb = page.getDisableButton();
+      cb.click();
+      expect(inp.isEnabled()).toEqual(false);
+    });
  });

  describe('numeric input', () => {
@ -56,6 +88,14 @@ describe('Basic Inputs Page', () => {
      inp.sendKeys('.48859');
      expect(page.getNumericOutputType()).toEqual('number');
    });
+
+    it('should disable', () => {
+      page.navigateTo();
+      const inp = page.getIonicNumericInputEditable();
+      const cb = page.getDisableButton();
+      cb.click();
+      expect(inp.isEnabled()).toEqual(false);
+    });
  });

  describe('textarea input', () => {
@ -84,6 +124,14 @@ describe('Basic Inputs Page', () => {
      inp.sendKeys('X');
      expect(hasClass(el, 'ng-invalid')).toEqual(false);
    });
+
+    it('should disable', () => {
+      page.navigateTo();
+      const inp = page.getIonicTextareaInputEditable();
+      const cb = page.getDisableButton();
+      cb.click();
+      expect(inp.isEnabled()).toEqual(false);
+    });
  });

  describe('checkbox input', () => {
--- a/packages/demos/angular/e2e/basic-inputs.po.ts
+++ b/packages/demos/angular/e2e/basic-inputs.po.ts
@ -46,6 +46,19 @@ export class BasicInputsPage {
    return element(by.id('textareaOutput')).getText();
  }

+  getIonicSearchInput() {
+    return element(by.id('ionSearchInput'));
+  }
+
+  getIonicSearchInputEditable() {
+    const parent = this.getIonicSearchInput();
+    return parent.all(by.css('input')).first();
+  }
+
+  getSearchOutput() {
+    return element(by.id('searchOutput')).getText();
+  }
+
  getIonicTextInput() {
    return element(by.id('ionTextInput'));
  }
@ -71,4 +84,8 @@ export class BasicInputsPage {
  getNumericOutputType() {
    return element(by.id('numericOutputType')).getText();
  }
+
+  getDisableButton() {
+    return element(by.id('disableCheckbox'));
+  }
 }
--- a/packages/demos/angular/src/app/basic-inputs-page/basic-inputs-page.component.html
+++ b/packages/demos/angular/src/app/basic-inputs-page/basic-inputs-page.component.html
@ -4,6 +4,15 @@

 <ion-grid>

+  <ion-row>
+    <ion-col>
+      <ion-item>
+        <ion-label>Disable Inputs</ion-label>
+        <ion-checkbox id="disableCheckbox" name="disableCheckbox" [(ngModel)]="disableInputs"></ion-checkbox>
+      </ion-item>
+    </ion-col>
+  </ion-row>
+
  <ion-row>
    <ion-col>
      <h2>Text Input</h2>
@ -12,7 +21,7 @@
  <ion-row>
    <ion-col>
      <label for="stdTextInput">Standard Input</label>
-      <input id="stdTextInput" name="stdTextInput" [(ngModel)]="textValue" minlength="10" />
+      <input id="stdTextInput" name="stdTextInput" [(ngModel)]="textValue" minlength="10" [disabled]="disableInputs" />
    </ion-col>
    <ion-col>
      Value:
@ -23,7 +32,7 @@
    <ion-col>
      <ion-item>
        <ion-label>Ionic Text Input</ion-label>
-        <ion-input id="ionTextInput" name="ionTextInput" [(ngModel)]="textValue" minlength="10"></ion-input>
+        <ion-input id="ionTextInput" name="ionTextInput" [(ngModel)]="textValue" minlength="10" [disabled]="disableInputs"></ion-input>
      </ion-item>
    </ion-col>
    <ion-col>
@ -39,7 +48,7 @@
    <ion-col>
      <ion-item>
        <ion-label>Ionic Text Input</ion-label>
-        <ion-searchbar id="ionSearchInput" name="ionSearchInput" [(ngModel)]="searchValue" minlength="10"></ion-searchbar>
+        <ion-searchbar id="ionSearchInput" name="ionSearchInput" [(ngModel)]="searchValue" minlength="10" [disabled]="disableInputs"></ion-searchbar>
      </ion-item>
    </ion-col>
    <ion-col>
@ -57,7 +66,7 @@
    <ion-col>
      <ion-item>
        <ion-label>Ionic Numeric Input</ion-label>
-        <ion-input type="number" id="ionNumericInput" name="ionNumericInput" [(ngModel)]="numericValue"></ion-input>
+        <ion-input type="number" id="ionNumericInput" name="ionNumericInput" [(ngModel)]="numericValue" [disabled]="disableInputs"></ion-input>
      </ion-item>
    </ion-col>
    <ion-col>
@ -80,7 +89,7 @@
  <ion-row>
    <ion-col>
      <label for="stdTextareaInput">Standard Textarea Input</label>
-      <textarea id="stdTextareaInput" name="stdTextareaInput" [(ngModel)]="textareaValue" minlength="10"></textarea>
+      <textarea id="stdTextareaInput" name="stdTextareaInput" [(ngModel)]="textareaValue" minlength="10" [disabled]="disableInputs"></textarea>
    </ion-col>
    <ion-col>
      Value:
@ -91,7 +100,7 @@
    <ion-col>
      <ion-item>
        <ion-label>Ionic Textarea Input</ion-label>
-        <ion-textarea id="ionTextareaInput" name="ionTextareaInput" [(ngModel)]="textareaValue" minlength="10"></ion-textarea>
+        <ion-textarea id="ionTextareaInput" name="ionTextareaInput" [(ngModel)]="textareaValue" minlength="10" [disabled]="disableInputs"></ion-textarea>
      </ion-item>
    </ion-col>
    <ion-col>
@ -106,7 +115,7 @@
  <ion-row>
    <ion-col>
      <label for="stdCheckbox">Standard Checkbox</label>
-      <input type="checkbox" id="stdCheckbox" name="stdCheckbox" [(ngModel)]="checkboxValue" />
+      <input type="checkbox" id="stdCheckbox" name="stdCheckbox" [(ngModel)]="checkboxValue" [disabled]="disableInputs" />
    </ion-col>
    <ion-col>
      Value:
@ -117,7 +126,7 @@
    <ion-col>
      <ion-item>
        <ion-label>Ionic Checkbox</ion-label>
-        <ion-checkbox id="ionCheckbox" name="ionCheckbox" [(ngModel)]="checkboxValue"></ion-checkbox>
+        <ion-checkbox id="ionCheckbox" name="ionCheckbox" [(ngModel)]="checkboxValue" [disabled]="disableInputs"></ion-checkbox>
      </ion-item>
    </ion-col>
    <ion-col>
@ -127,7 +136,8 @@
    <ion-col>
      <ion-item>
        <ion-label>Ionic Checkbox No ngModel</ion-label>
-        <ion-checkbox id="ionCheckboxNoModel" name="ionCheckboxNoModel" [checked]="checkboxValue" (ionChange)="checkboxValue=$event.target.checked"></ion-checkbox>
+        <ion-checkbox id="ionCheckboxNoModel" name="ionCheckboxNoModel" [checked]="checkboxValue" (ionChange)="checkboxValue=$event.target.checked"
+          [disabled]="disableInputs"></ion-checkbox>
      </ion-item>
    </ion-col>
    <ion-col>
@ -142,7 +152,7 @@
  <ion-row>
    <ion-col>
      <label for="stdToggle">Standard Toggle</label>
-      <input type="checkbox" id="stdToggle" name="stdToggle" [(ngModel)]="toggleValue" />
+      <input type="checkbox" id="stdToggle" name="stdToggle" [(ngModel)]="toggleValue" [disabled]="disableInputs" />
    </ion-col>
    <ion-col>
      Value:
@ -153,7 +163,7 @@
    <ion-col>
      <ion-item>
        <ion-label>Ionic Toggle</ion-label>
-        <ion-toggle id="ionToggle" name="ionToggle" [(ngModel)]="toggleValue"></ion-toggle>
+        <ion-toggle id="ionToggle" name="ionToggle" [(ngModel)]="toggleValue" [disabled]="disableInputs"></ion-toggle>
      </ion-item>
    </ion-col>
    <ion-col>
@ -168,7 +178,8 @@
  <ion-row>
    <ion-col>
      <label for="stdToggle">ISO Formatted Date</label>
-      <input id="stdDatetimeInput" name="stdDatetimeInput" [(ngModel)]="datetimeValue" placeholder="YYYY-MM-DDTHH:mm:ssZ" />
+      <input id="stdDatetimeInput" name="stdDatetimeInput" [(ngModel)]="datetimeValue" placeholder="YYYY-MM-DDTHH:mm:ssZ" [disabled]="disableInputs"
+      />
    </ion-col>
    <ion-col>
      Value:
@ -180,7 +191,7 @@
      <ion-item>
        <ion-label>Ionic Date</ion-label>
        <ion-datetime id="ionDatetimeInput" pickerFormat="YYYY-MM-DD HH:mm:ss" displayFormat="MM/DD/YYYY HH:mm:ss" name="ionDatetimeInput"
-          [(ngModel)]="datetimeValue"></ion-datetime>
+          [(ngModel)]="datetimeValue" [disabled]="disableInputs"></ion-datetime>
      </ion-item>
    </ion-col>
    <ion-col>
@ -195,7 +206,7 @@
  <ion-row>
    <ion-col>
      <label for="stdRangeInput">Range Value</label>
-      <input id="stdRangeInput" type="number" [(ngModel)]="rangeValue"/>
+      <input id="stdRangeInput" type="number" [(ngModel)]="rangeValue"  [disabled]="disableInputs" />
    </ion-col>
    <ion-col>
      Value:
@ -206,7 +217,7 @@

  <ion-row>
    <ion-col>
-      <ion-range id="ionRangeInput" [(ngModel)]="rangeValue"></ion-range>
+      <ion-range id="ionRangeInput" [(ngModel)]="rangeValue" [disabled]="disableInputs"></ion-range>
    </ion-col>
    <ion-col></ion-col>
  </ion-row>
--- a/packages/demos/angular/src/app/basic-inputs-page/basic-inputs-page.component.ts
+++ b/packages/demos/angular/src/app/basic-inputs-page/basic-inputs-page.component.ts
@ -7,6 +7,8 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
  encapsulation: ViewEncapsulation.None
 })
 export class BasicInputsPageComponent implements OnInit {
+  disableInputs = false;
+
  datetimeValue = '2017-11-18T14:17:45-06:00';
  textareaValue = 'This is the Textarea Input';
  textValue = 'This is the Text Input';