Async Jasmine unit test wrong order
I have a onBlur
function which gets executed when the blur on an input is activated. Inside this async onBlur
function I await
the response from another function. When I try to test this the order of execution seems wrong. I've put in three console.logs() to inspect the order of execution which seems to be incorrect.
What is causing this order to go wrong? Wouldn't nextTick()
ensure that the async
functions need to be finished before the test is concluded?
it('executes startDate when blur is triggered on search', async function(done) {
// GIVEN an instantiated SearchDate
// WHEN validateStartDate is spied upon and blur is triggered
const spyValidateStartDate = spyOn(SearchDate.methods, 'validateStartDate').and.callThrough();
wrapper = shallowMount(
Search,
{
localVue: this.localVue,
propsData: props,
},
);
const searchStartDateElement = wrapper.find('#searchStartDate');
searchStartDateElement.element.value = '01-01-2018';
await searchStartDateElement.trigger('blur');
// THEN expect datepickerStartDate to have the correct date
wrapper.vm.$nextTick(() => {
expect(spyValidateStartDate).toHaveBeenCalled();
console.log('3');
expect(wrapper.vm._data.datepickerStartDate).toEqual(new Date('2018-01-01'));
done();
});
});
And the blur function in Vue
async onBlur(event) {
console.log('1');
this.datepickerStartDate = await this.validateDateField(event.target.getAttribute('name'), event.target.value);
console.log('2');
},
The current order of the console.log()
is 1, 3, 2
validateDateField function
async validateDateField(name, value) {
const valid = await this.$validator.validate(name);
if (!valid || !value) {
return null;
}
const splittedInput = value.split('-');
return new Date(`${ splittedInput[2] }-${ splittedInput[1] }-${ splittedInput[0] }`);
},
May be someone more experienced in Vue could explain this better. But could you try if any of these work —
await wrapper.vm.$nextTick();
expect(spyValidateStartDate).toHaveBeenCalled();
console.log('3');
expect(wrapper.vm._data.datepickerStartDate).toEqual(new Date('2018-01-01'));
done();
or
wrapper.vm.$nextTick().then(() => {
expect(spyValidateStartDate).toHaveBeenCalled();
console.log('3');
expect(wrapper.vm._data.datepickerStartDate).toEqual(new Date('2018-01-01'));
done();
});
If so I assumes that the nextTick's callback is being passed to microtask job queue which executes before the normal async callback queue. If not, then may be it is taking more than one tick for the blur event handler to get called.