My project utilizes the vue-cordova-webpack template. Within my Vue component, I have integrated a v-ons-input element. During the unit testing of my component, I encountered the need to modify the value of v-ons-input. However, this can only be done post-compilation of the ons-input, as the input is generated after compilation (refer to OnsenUI component compilation). The complication arises from the asynchronous execution of the compilation process, and the absence of a clear method to determine when the OnsenUI component is ready for use.
What should be my course of action? I resorted to creating a sinon spy for an internal method _compile within the ons-input element, and awaited its invocation:
it('test', (done) => {
const wrapper = mount(myVueComponent)
// Unable to set a value for ons-input at this point
var spy = sinon.spy(wrapper.find('ons-input').element, '_compile')
function waitForCall(spy) {
return new Promise(function (resolve, reject) {
(function wait() {
if (spy.called) {
return resolve()
}
setTimeout(wait, 10)
})()
})
}
waitForCall(spy).then(function () {
// Now that ons-input is compiled, the value can be set
wrapper.find('ons-input').element.value = 'foo'
...
}).then(done, done)
})
Is there a more elegant approach to identifying the readiness of the OnsenUI component for utilization in a unit test environment (without resorting to manipulation of the component's internal methods)?
P.S. Although I am aware of a non-test environment solution - listening for the init event on the document (as discussed here), this method does not prove effective in unit tests.