Question

我的哑组件 TestForm 由 h2 -元素， v-combobox 和 v-btn 组成。如果 combobox 输入字段为空或==='item_1'

，则禁用 v-btn

单元测试包含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' })

应用于第二步。但是我不想手动设置哑组件的数据！

单元测试返回意外结果

0 个答案: