When you have a button which shows based on a model, like so:
<button v-show="title != ''">Add it</button>
How would you test this? I can't figure it out for the life of me.
I tried the following (using Jest, but runner/framework shouldn't matter):
describe('btn test', () => {
it('should hide the add button initially', () => {
// vm is set up here to be the vue component
expect(vm.$el.querySelector('button').style.display).toBe('none') // works
// Update the input field (which has v-model="title")
vm.$el.querySelectorAll('input').value = 'fd'
expect(vm.$el.querySelector('button').style.display).toBe('block') // is still 'none'
// Update directly through vm prop
vm.title = 'sheep'
Vue.nextTick(() => {
expect(vm.$el.querySelector('button').style.display).toBe('block') // is still 'none'
})
})
})
Aucun commentaire:
Enregistrer un commentaire