I made this time picker component. The user is able to either type the time into an input and it will display on the custom time picker component, or they can click in to each hour
and minute
inputs inside of the component and type the time.
I have a simple validation on it, basically every keypress (using an ember computed variable), make sure the time is not more than 12
. If it's greater than 12
, make it 12
.
I'm using ember-basic-dropdown to show this time picker and I've already used their clickTrigger()
to show the component. I'm having a problem where when I input a value (for example, 99
) into the hour
input, it doesn't fire the keyup event because it's just being placed there.
How do I allow the integration test to fire the keyup event or just make the input validate correctly?
test('Dropdown inputs change main input', function(assert) {
this.render(hbs``);
clickTrigger();
select('time-picker-hour').find('input').val('99').blur();
select('time-picker-minute').find('input').val('99').blur();
assert.equal(select('input').find('input').val(), moment().format('12:59 a'), "Minute is displaying fixed value");
});
The final assert is showing failed because the two inputs are not validating properly.
Here's how I'm using a computed variable to validate the time:
outputTime: Ember.computed('hour', 'minute', 'period', {
get() {
let hour = (this.get('hour') <= 12) ? this.get('hour') : 12;
let minute = (this.get('minute') <= 59) ? this.get('minute') : 59;
let period = this.get('period');
let time = hour + ":" + minute + " " + period;
return time;
},
set(key, value) {
value = value.replace(/\s/g,'');
let hour, minute, period;
if(value.indexOf(':') < 1) {
hour = (value <= 12) ? value : 12;
this.set('hour', value);
return hour;
} else {
hour = (value.split(":")[0] <= 12) ? value.split(":")[0] : 12;
minute = (value.split(":")[1].replace(/\D/g, '') <= 59) ? value.split(":")[1].replace(/\D/g, '') : 59;
period = value.split(":")[1].replace(/[0-9]/g, '');
this.set('hour', hour);
this.set('minute', minute);
this.set('period', period);
return hour + ":" + minute + " " + period;
}
}
}),
Aucun commentaire:
Enregistrer un commentaire