どのようにユニットテストをVueのコンポーネント

Question

の「V-ショー」プロパティにあなたがそうのようなモデルに基づいて示しボタン、持っている：

<button v-show="title != ''">Add it</button>

どのようにこれをテストでしょうか？私は私の人生のためにそれを理解することができません。 Vモデルを経由して

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' 
     }) 

    }) 
}) 

Answer 1

DOM APIを介して入力の値を変更しますない更新データを、理由：

私は（問題ではないはず冗談を使用しますが、ランナー/フレームワーク）次のことを試してみましたv-modelがリッスンする入力イベントは発生しません。

したがって、データは変更されていないため、v-showはまだtrueです。

解決方法、vmのデータを変更してください。

vm.title = 'fd' 

、あなたが最後の行で行ったようにのみ、その後の更新はDOM

Answer 2

になりますので、$ nextTickを使用し、私は偶然それを考え出しました。テストにはdoneパラメータが必要です。

これは（行わPARAMとコールバックに気づく）

it('should hide aap',() => { 
    expect(vm.$el.querySelector('.aap').style.display).toBe('none') 
    vm.showAap = true 
    Vue.nextTick(() => { 
     // vm.showAap = false again 
     expect(vm.$el.querySelector('.aap').style.display).toBe('') 
    }) 
}) 

を動作しません。そして、これは作業を行います。

it('should hide aap', (done) => { 
    expect(vm.$el.querySelector('.aap').style.display).toBe('none') 
    vm.showAap = true 
    Vue.nextTick(() => { 
     expect(vm.$el.querySelector('.aap').style.display).toBe('') 
     done() 
    }) 
})