mercredi 1 mars 2017

How to unit test a 'v-show' property of a Vue Component

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