I try to test an accordion.
would like to test if the accordion collapse after a click.
<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">
</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;
}
},
...
The test
it("check user click", () => {
const wrapper = factory({
active: false
})
wrapper.find('.button').trigger('click')
expect(wrapper.find('.card-body').isVisible()).toBe(true)
})
I tried to spy my function. It's works but it's depreciated. So I guess my function is called but the result of the test is wrong
Expected: true
Received: false
41 | wrapper.find('.button').trigger('click')
42 |
> 43 | expect(wrapper.find('.card-body').isVisible()).toBe(true)
| ^
44 |
45 | })
46 |
As you can see the value is false, the user click, run the toggle method so the expected should be true. However, the received is still false as if the user didn't click
Aucun commentaire:
Enregistrer un commentaire