Как протестировать пользовательские компоненты CSS Framework с помощью vue-test-utils - PullRequest
Новая
       15

Как протестировать пользовательские компоненты CSS Framework с помощью vue-test-utils

0 голосов
/ 26 июня 2018

Я использую Buefy CSS Framework, который предоставляет пользовательские компоненты vue-js, такие как <b-input> и <b-table>, и я столкнулся с проблемой тестирования тега <b-input>. 

import { shallowMount, createLocalVue } from '@vue/test-utils'
import BInputPractice from '../BInputPractice.vue'
import Buefy from 'buefy'

const localVue = createLocalVue()
localVue.use(Buefy)

describe('b-input Practice', () => {
  it('updates the name data property', () => {
    const wrapper = shallowMount(BInputPractice, { 
      localVue,
      stubs: {
        'b-input': Buefy.Input
      } 
    })
    const input = wrapper.find('input')
    input.element.value = 'a name'
    input.trigger('input')
    expect(wrapper.vm.name).toBe('a name')
  })
})

<!-- BInputPractice.vue -->
<template>
  <div>
    <b-input v-model="name"></b-input>
    <!-- <input v-model="name"> -->
  </div>
</template>

<script>
  export default {
    data() {
      return {
        name: ''
      }
    }
  }
</script>

Оператор ожидания в моем тестовом коде должен пройти, как и при использовании тега <input> вместо <b-input>. Однако запуск события 'input' на <b-input> никак не влияет на свойство данных name.

enter image description here

Кто-нибудь знает, как правильно пометить тег <b-input>, чтобы я мог проверить его в точности как тег <input>?

1 Ответ

0 голосов
/ 29 ноября 2018

Надеюсь, это немного поможет. Я понял, что при заглушке имя компонента меняется, и в конце добавляется -stub.

Так что, если вы заглушите b-input, он будет называться b-input-stub при использовании: 

const wrapper = shallowMount(BInputPractice, { stubs: ['b-input'] })

Не думаю, что вам нужно использовать localView и stubs одновременно. Также вы можете использовать setData (data) для установки данных компонента. 

expect(wrapper.find('b-input-stub').exists()).toBeTruthy() 
wrapper.setData({ name: 'a name' })
expect(wrapper.vm.name).toEqual('a name')

Здесь trigger('input') запускать не нужно, потому что вы не указали, что делать @input.native в b-input, как в шаблоне: 

<b-input @input.native="updateName" v-model="name"> </b-input>

И внутри экспорта по умолчанию в вашем скрипте. 

methods: {
    updateName: function () {
      this.$emit('nameUpdate', this.name)
    }
  }

Однако, чтобы установить и проверить значение пользовательских компонентов, таких как b-input, я бы обратился к vuejs / vue-test-utils .

...