feat(demo): add datetimePicker testing

This commit is contained in:
Ken Sodemann
2017-11-28 11:52:04 -06:00
parent c92c062ba2
commit df4a9ea6b4
9 changed files with 90 additions and 48 deletions

View File

@ -100,11 +100,11 @@ describe('Basic Inputs Page', () => {
});
});
describe('select input', () => {
describe('date time picker', () => {
it('should be set the initial value', () => {
page.navigateTo();
const el = page.getIonicSelect();
expect(el.getAttribute('value')).toEqual('brains');
const el = page.getIonicDatetime();
expect(el.getAttribute('value')).toEqual('2017-11-18T14:17:45-06:00');
});
});

View File

@ -13,12 +13,12 @@ export class BasicInputsPage {
return element(by.id('checkboxOutput')).getText();
}
getIonicSelect() {
return element(by.id('ionSelect'));
getIonicDatetime() {
return element(by.id('ionDatetimeInput'));
}
getSelectOutput() {
return element(by.id('selectOutput')).getText();
getDatetimeOutput() {
return element(by.id('datetimeOutput')).getText();
}
getIonicToggle() {

View File

@ -100,4 +100,12 @@ describe('Group Inputs Page', () => {
});
});
});
describe('select input', () => {
it('should be set the initial value', () => {
page.navigateTo();
const el = page.getIonicSelect();
expect(el.getAttribute('value')).toEqual('brains');
});
});
});

View File

@ -50,4 +50,12 @@ export class GroupInputsPage {
getRadioOutputText() {
return element(by.id('radioOutput')).getText();
}
getIonicSelect() {
return element(by.id('ionSelect'));
}
getSelectOutput() {
return element(by.id('selectOutput')).getText();
}
}

View File

@ -82,44 +82,6 @@
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<h2>Select</h2>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<label for="stdSelect">Standard Select (for tacos)</label>
<select id="stdSelect" name="stdSelect" [(ngModel)]="selectValue" (blur)="onBlur($event)">
<option value="beef">Carne Asada</option>
<option value="tongue">Lengua</option>
<option value="brains">Sesos</option>
<option value="tripe">Tripa</option>
<option value="chicken">Pollo</option>
</select>
</ion-col>
<ion-col>
Value:
<span id="selectOutput">{{selectValue}}</span>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-item>
<ion-label>Ionic Select (for tacos)</ion-label>
<ion-select id="ionSelect" name="ionSelect" [(ngModel)]="selectValue" (blur)="onBlur($event)">
<ion-select-option value="beef">Carne Asada</ion-select-option>
<ion-select-option value="tongue">Lengua</ion-select-option>
<ion-select-option value="brains">Sesos</ion-select-option>
<ion-select-option value="tripe">Tripa</ion-select-option>
<ion-select-option value="chicken">Pollo</ion-select-option>
</ion-select>
</ion-item>
</ion-col>
<ion-col>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<h2>Toggle</h2>
@ -145,6 +107,32 @@
<ion-col>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<h2>Date Time Picker</h2>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<label for="stdToggle">ISO Formatted Date</label>
<input id="stdDatetimeInput" name="stdDatetimeInput" [(ngModel)]="datetimeValue" placeholder="YYYY-MM-DDTHH:mm:ssZ" />
</ion-col>
<ion-col>
Value:
<span id="datetimeOutput">{{datetimeValue}}</span>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<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>
</ion-item>
</ion-col>
<ion-col>
</ion-col>
</ion-row>
</ion-grid>
<a href='home'>Home</a>

View File

@ -7,14 +7,13 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
encapsulation: ViewEncapsulation.None
})
export class BasicInputsPageComponent implements OnInit {
datetimeValue = '2017-11-18T14:17:45-06:00';
textareaValue = 'This is the Textarea Input';
textValue = 'This is the Text Input';
checkboxValue = true;
toggleValue = false;
selectValue = 'brains';
constructor() {}
ngOnInit() {}

View File

@ -116,5 +116,43 @@
<ion-col></ion-col>
</ion-row>
<ion-row>
<ion-col>
<h2>Select</h2>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<label for="stdSelect">Standard Select (for tacos)</label>
<select id="stdSelect" name="stdSelect" [(ngModel)]="selectValue">
<option value="beef">Carne Asada</option>
<option value="tongue">Lengua</option>
<option value="brains">Sesos</option>
<option value="tripe">Tripa</option>
<option value="chicken">Pollo</option>
</select>
</ion-col>
<ion-col>
Value:
<span id="selectOutput">{{selectValue}}</span>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-item>
<ion-label>Ionic Select (for tacos)</ion-label>
<ion-select id="ionSelect" name="ionSelect" [(ngModel)]="selectValue">
<ion-select-option value="beef">Carne Asada</ion-select-option>
<ion-select-option value="tongue">Lengua</ion-select-option>
<ion-select-option value="brains">Sesos</ion-select-option>
<ion-select-option value="tripe">Tripa</ion-select-option>
<ion-select-option value="chicken">Pollo</ion-select-option>
</ion-select>
</ion-item>
</ion-col>
<ion-col>
</ion-col>
</ion-row>
</ion-grid>
<a href='home'>Home</a>

View File

@ -8,6 +8,7 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
})
export class GroupInputsPageComponent implements OnInit {
radioValue = 'tripe';
selectValue = 'brains';
constructor() {}

View File

@ -6,7 +6,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
// https://github.com/angular/angular/blob/5.0.2/packages/forms/src/directives/select_control_value_accessor.ts#L28-L158
@Directive({
/* tslint:disable-next-line:directive-selector */
selector: 'ion-select, ion-radio-group, ion-segment',
selector: 'ion-select, ion-radio-group, ion-segment, ion-datetime',
providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IonSelectValueAccessorDirective, multi: true }]
})
export class IonSelectValueAccessorDirective implements ControlValueAccessor {