[英]Vue test can't trigger click on <div>
我试着测试手风琴。
想测试一下手风琴是否在单击后崩溃。
<template>
<div :id="accordionName">
<div class="card mb-4">
<div class="card-header" @click.prevent="accordionToggle()" data-toggle="collapse" data-target="accordionTarget">
<h5 ref="title" class="float-left">
{{title}}
</h5>
<span class="float-right" v-show="!accordionActive">
<font-awesome-icon icon="chevron-left" /></span>
<span class="float-right" v-show="accordionActive">
<font-awesome-icon icon="chevron-down" /></span>
</div>
<div id="accordionTarget" class="collapse show" v-show="accordionActive">
<div class="card-body">
<slot>
<!-- The content will be here -->
</slot>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'LayoutCard',
data() {
return {
accordionActive: null
}
},
props: {
title: {
required: true
},
active: {
default: false
}
},
computed: {
...
methods: {
assignPropsToData() {
this.accordionActive = this.active;
},
accordionToggle() {
this.accordionActive = !this.accordionActive;
}
},
...
考试
it("check user click", () => {
const wrapper = factory({
active: false
})
wrapper.find('.button').trigger('click')
expect(wrapper.find('.card-body').isVisible()).toBe(true)
})
我试图监视我的功能。 它有效,但已贬值。 所以我猜我的函数被调用了但是测试的结果是错误的
Expected: true
Received: false
41 | wrapper.find('.button').trigger('click')
42 |
> 43 | expect(wrapper.find('.card-body').isVisible()).toBe(true)
| ^
44 |
45 | })
46 |
如您所见,值为 false,用户单击,运行切换方法,因此预期值应为 true。 但是,收到的仍然是假的,就好像用户没有点击一样
尝试使用nextTick
后trigger.click
因为点击不是对下一个节拍,你会看到立即的变化,只有处理。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.