Модульный тест возвращает неожиданный результат - PullRequest
0 голосов
/ 02 июля 2019

Мой тупой компонент TestForm состоит из h2 - элемента, v-combobox и v-btn . v-btn отключено, если поле со списком поле ввода пусто или === 'item_1'

Юнит-тест состоит из 3 шагов:

  1. Проверка, если кнопка изначально отключена

  2. Ввод некоторого текста в поле со списком

  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-м шаге.Но я не хочу вручную устанавливать данные немого компонента!

...