我应该如何正确触发更改事件以在单元测试中触发功能?
How should I correctly trigger a change event to fire a function in unit test?
我有一个复选框组件,由于 Safari 的一个错误,我更改了
@input=input() to @change='input'
因为 Safari 没有输入事件。
复选框
<template>
<div
class="checkbox">
<input
....
@change="input">
</div>
</template>
<script>
export default {
....
methods: {
input () {
/**
* Input event on change
*
* @event input
* @type {Boolean}
*/
this.$emit('input', this.$refs.checkbox.checked)
}
}
}
</script>
单元测试
describe('...', () => {
beforeEach(async () => {
const input = wrapper.find('input')
jest.spyOn(wrapper.vm, 'input')
input.trigger('change') // told this is incorrect
jest.runAllTimers()
})
it('[positive] should emit an input event with the input\'s value', () => {
expect(wrapper.emitted().input).toBeTruthy()
expect(wrapper.emitted().input).toHaveLength(1)
expect(wrapper.emitted().input[0]).toEqual([false])
})
it('[positive] should call the input() method with the target value', () => {
// this is wrong also, because the expectation will always be true
wrapper.vm.input()
expect(wrapper.vm.input).toHaveBeenCalled()
})
})
我应该如何正确设置第二个测试?为什么单元测试中 input.trigger('change') 错误?
我的第二个测试设置为始终为真。我调用函数
wrapper.vm.input()
然后断言它将被调用,这将永远是真的,所以这是一个糟糕的测试。
input.trigger('change')
...是正确的,它就在我拥有它的地方。这是我重构的测试:
describe('when the checkbox state is changed', () => {
let input
beforeEach(() => {
input = wrapper.find('input')
jest.spyOn(wrapper.vm, 'input')
jest.runAllTimers()
})
it('[positive] should emit an input event with the input\'s value', () => {
input.trigger('change')
expect(wrapper.emitted().input).toBeTruthy()
expect(wrapper.emitted().input).toHaveLength(1)
expect(wrapper.emitted().input[0]).toEqual([false])
})
it('[negative] should not emit an input event with the input\'s value', () => {
input.trigger('input')
expect(wrapper.emitted().input).toBeFalsy()
})
})
我有一个复选框组件,由于 Safari 的一个错误,我更改了
@input=input() to @change='input'
因为 Safari 没有输入事件。
复选框
<template>
<div
class="checkbox">
<input
....
@change="input">
</div>
</template>
<script>
export default {
....
methods: {
input () {
/**
* Input event on change
*
* @event input
* @type {Boolean}
*/
this.$emit('input', this.$refs.checkbox.checked)
}
}
}
</script>
单元测试
describe('...', () => {
beforeEach(async () => {
const input = wrapper.find('input')
jest.spyOn(wrapper.vm, 'input')
input.trigger('change') // told this is incorrect
jest.runAllTimers()
})
it('[positive] should emit an input event with the input\'s value', () => {
expect(wrapper.emitted().input).toBeTruthy()
expect(wrapper.emitted().input).toHaveLength(1)
expect(wrapper.emitted().input[0]).toEqual([false])
})
it('[positive] should call the input() method with the target value', () => {
// this is wrong also, because the expectation will always be true
wrapper.vm.input()
expect(wrapper.vm.input).toHaveBeenCalled()
})
})
我应该如何正确设置第二个测试?为什么单元测试中 input.trigger('change') 错误?
我的第二个测试设置为始终为真。我调用函数
wrapper.vm.input()
然后断言它将被调用,这将永远是真的,所以这是一个糟糕的测试。
input.trigger('change')
...是正确的,它就在我拥有它的地方。这是我重构的测试:
describe('when the checkbox state is changed', () => {
let input
beforeEach(() => {
input = wrapper.find('input')
jest.spyOn(wrapper.vm, 'input')
jest.runAllTimers()
})
it('[positive] should emit an input event with the input\'s value', () => {
input.trigger('change')
expect(wrapper.emitted().input).toBeTruthy()
expect(wrapper.emitted().input).toHaveLength(1)
expect(wrapper.emitted().input[0]).toEqual([false])
})
it('[negative] should not emit an input event with the input\'s value', () => {
input.trigger('input')
expect(wrapper.emitted().input).toBeFalsy()
})
})