我对单元测试仍然很陌生,我想测试当isLinkPresent计算属性返回图像的链接并且该组件不为空时是否显示链接按钮:
<template lang="pug">
.merchandising_image_title
.image(:style="`background-image: url('${imageTitle.image}');`" )
.panel
.top
h2 {{imageTitle.top_title}}
.line
.center
h1 {{imageTitle.center_title}}
.bottom(v-if="isLinkPresent")
a.btn.round( target='_blank' :href='imageTitle.link') Notify Me By Email
</template>
<script>
export default {
name: 'MerchandisingImageTitle',
props: {
imageTitle: Object
},
computed:{
isLinkPresent(){
return this.imageTitle.link && this.imageTitle.link !== ''
}
}
}
</script>
Run Code Online (Sandbox Code Playgroud)
我尝试通过覆盖计算属性来测试它:
it("renders linked button when image title has a link and is not empty", () => {
const wrapper = mount(ImageTitle, {
propsData: {
imageTitle: Object
},
computed: {
isLinkPresent() { …Run Code Online (Sandbox Code Playgroud)