Мой тупой компонент TestForm состоит из h2 - элемента, v-combobox и v-btn . v-btn отключено, если поле со списком поле ввода пусто или === 'item_1'
Юнит-тест состоит из 3 шагов:
Проверка, если кнопка изначально отключена
Ввод некоторого текста в поле со списком
Проверка, включена ли кнопка
Проблема: по какой-то причине не удается выполнить 3-й шаг.
Тупой компонент:
<script>
export default {
name: 'TestForm',
data () {
return {
selectedItem: null,
items: ['item_1']
}
},
computed: {
btnDisabled () {
return this.items.includes(this.selectedItem) ||
this.selectedItem === null
}
}
}
</script>
<template>
<v-layout row wrap>
<h2>My form</h2>
<v-combobox
id='formInput'
v-model='selectedItem'
:items='items'
:search-input.sync='selectedItem'
outline
/>
<v-btn
id='formBtn'
color='primary'
:disabled='btnDisabled'
@click='$emit("addProduct", selectedItem)'
>
Add item
</v-btn>
</v-layout>
</template>
Тесты - все прохождения, кроме 3-го шага последнего:
import { createLocalVue, shallowMount } from '@vue/test-utils'
import TestForm from '@/components/custom/TestForm.vue'
import Vuetify from 'vuetify'
describe('TestForm', () => {
let wrapper
const localVue = createLocalVue()
localVue.use(Vuetify)
beforeEach(() => {
wrapper = shallowMount(TestForm, {
localVue
})
})
test('renders a vue instance', () => {
expect(wrapper.isVueInstance()).toBe(true)
})
test('Contains text - My form', () => {
expect(wrapper.text()).toContain('My form')
})
test('Btn is disabled if input text is empty or = item_1', () => {
const btn = wrapper.find('#formBtn')
const input = wrapper.find('#formInput')
// 1 step - Initially, button should be disabled, because combobox is empty:
expect(btn.props().disabled).toBe(true)
// 2 step - Entering some text into combobox:
input.element.value = 'item_new'
input.trigger('input')
expect(input.element.value).toBe('item_new')
// wrapper.setData({ selectedItem: 'item_new' })
// 3 step - Checking if button has become enabled:
expect(btn.props().disabled).toBe(false)
})
})
Ожидаемый результат :
expect(btn.props().disabled).toBe(false)
Фактический результат :
expect(btn.props().disabled).toBe(false)
- не проходит: это true вместо false .
Проблема идетпрочь, если:
wrapper.setData({ selectedItem: 'item_new' })
применяется на 2-м шаге.Но я не хочу вручную устанавливать данные немого компонента!