Кнопка Vue Testing Child Component Нажатие родительского компонента - PullRequest
Новая
       14

Кнопка Vue Testing Child Component Нажатие родительского компонента

0 голосов
/ 12 февраля 2019

Я пытаюсь выполнить модульный тест для моей страницы vue, но я застрял в тесте триггера кнопки.Родитель не может вызвать функцию щелчка

, кнопка является дочерним компонентом, который принимает реквизиты, такие как отключенный, функция и текст

Родитель вызвал компонент кнопки, и он был отключен, если значение флажкаfalse

Child 

<div>
 <b-button
 :disabled= disabled
 class="myButton"
 @click="function"
   {{text}}
 </b-button>
</div>

Parent 

 <div>
  <input v-model="check" type="checkbox" value="Ok">Agree
  <div class="button-verification">
   <Button
     :disabled= !check
     :text= "'Ok'"
     :function= buttonFunction
    />
  </div>
 </div>

buttonFunction() {
 router.push('/another-page')
}

Юнит-тест 

import { mount, createLocalVue } from '@vue/test-utils'
import BootstrapVue from 'bootstrap-vue'
import Parent from '@/view/parent'
import Button from '@/component/child'

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

describe('test parent', () => {
  it('Trigger button correctly', function () {
   const wrapper = mount(Parent, {
    localVue
  })
  wrapper.setData({ check: true })
  const childComponent = wrapper.find(Button)
  console.log('child', childComponent)
  childComponent.trigger('click')
  expect(router.history.current.path).toBe('/another-page')
 })
})

Если я использовал обычную кнопку, тест будетуспешно, но я сделал компонент кнопки многократно используемым, поэтому мне нужно протестировать функцию щелчка, используя компонент кнопки

console.log childComponent, просто зарегистрируйте пустую оболочку 

VueWrapper {
  isFunctionalComponent: undefined,
  _emitted: {},
  _emittedByOrder: [] }
...