Отправка формы запуска по нажатию кнопки в Vue Unit Test - PullRequest
Новая
       7

Отправка формы запуска по нажатию кнопки в Vue Unit Test

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

Есть ли способ фактически запустить отправку формы, нажав на кнопку отправки в Vue Unit Test?

Давайте возьмем этот простой компонент: 

<template>
    <form @submit.prevent="$emit('submitEventTriggered')">
        <button type="submit">Submit Form</button>
    </form>
</template>

<script>
    export default {}
</script>

Вы можетев качестве примера найдите похожий компонент здесь .

Я хочу проверить, что submit.prevent срабатывает при нажатии кнопки и, следовательно, submitEventTriggered испускается.Когда я запускаю это в браузере, все работает как положено.Но следующий тест не пройден: 

import {shallowMount} from '@vue/test-utils'
import {assert} from 'chai'
import Form from '@/components/Form.vue'

describe.only('Form', () => {

    it('button click triggers submit event', () => {
        const wrapper = shallowMount(Form)

        wrapper.find('[type=\'submit\']').trigger('click')

        assert.exists(wrapper.emitted('submitEventTriggered'), 'Form submit not triggered')
    })

})

При таком выводе: 

AssertionError: Form submit not triggered: expected undefined to exist

Если я изменю действие на триггер submit.prevent в форме, то все будет работать нормально.Но тогда фактически нет тестового покрытия для отправки через кнопку. 

wrapper.find('form').trigger('submit.prevent')

Кажется, что функция trigger фактически не нажимает кнопку.

Почему это так и есть лиспособ это исправить?

1 Ответ

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

Проблема в том, что Vue Test Utils не присоединяет узлы DOM к документу по умолчанию.Это сделано для того, чтобы избежать принудительной очистки.Вы можете решить эту проблему, установив attachToDocument в true при монтировании компонента: 

it('button click triggers submit event', () => {
  const wrapper = shallowMount(Form, {
    attachToDocument: true
  })

  wrapper.find("[type='submit']").trigger('click')

  assert.exists(
    wrapper.emitted('submitEventTriggered'),
    'Form submit not triggered'
  )
})

Вы должны удалить узел DOM из документа, чтобы избежать утечки памяти.Вы можете сделать это, позвонив destroy на упаковщик: 

wrapper.destroy()
...