vuetify.jsを使ったアプリの単体テスト

v-textfield

idをつけた要素がそのまま、input要素にマッピングされるためにテストは素直にかける

<v-text-field id="name" v-model="name" required></v-text-field>

  <div class="input-group input-group--dirty input-group--required input-group--text-field primary--text">
    <div class="input-group__input">
      <input id="name" required="required" tabindex="0" type="text">
    </div>
    <div class="input-group__details">
      <!---->
    </div>
  </div>

v-checkbox

idをつけた要素が見当たらないし、input要素にマッピングされないため要素の特定が難しい

<v-checkbox id="flag" v-model="flag"></v-checkbox>

  <div tabindex="0" role="checkbox" aria-checked="false" class="input-group checkbox input-group--selection-controls accent--text">
    <div class="input-group__input">
      <i aria-hidden="true" class="icon icon--selection-control material-icons">check_box_outline_blank</i>
      <div class="input-group--selection-controls__ripple"></div>
    </div>
    <div class="input-group__details"><!----></div>
  </div>

テストコード

とりあえずこんな按配でコードを書いた。(avoriaz+jest)

import { mount } from 'avoriaz'
import Vue from 'vue'
import Vuetify from 'vuetify'
import Hello from '@/components/Hello'

Vue.use(Vuetify)

describe('Hello.vue', () => {
  it('should input name', () => {
      const wrapper = mount(Hello)
      const name = wrapper.find('input#name')[0]
      name.trigger('focus')
      name.element.value = 'TARO'    
      expect(wrapper.vm.name)
      .toEqual('TARO')
    })
    it('should input flag', () => {
      const wrapper = mount(Hello)
      console.log(wrapper.html())
      const flag = wrapper.find('.input-group--selection-controls__ripple')[0]
      flag.trigger('click')
      expect(wrapper.vm.flag)
        .toEqual(true)
    })
})