In this Vue component, there is a toggle function that controls the visibility of a child component called ListDetails for each item in a rendered list generated from an array using v-for.
I am interested in testing this functionality using Jest, specifically when the conditions for ListDetails are met:
<ListDetails
v-if="currentIndex >= 0 && currentIndex === index"
/>
The goal is to verify whether ListDetails is actually being rendered.
After several attempts, I have not been successful in confirming if ListDetails is rendered following the toggle method. Here is a snippet of the test code:
it("check if child is rendered after toggle method", () => {
const wrapper = shallowMount(ErrandsListTable);
wrapper.vm.toggleExpanded(1);
expect(wrapper.find(ListDetails).exists()).toBeTruthy();
expect(wrapper.vm.currentIndex).toBeGreaterThanOrEqual(0);
});
Although I have been able to successfully test the toggleMethod with a given index and verify the conditions, I am still unable to ascertain if the ListDetails component is being shown or rendered afterwards.
Below is an excerpt from the Vue component:
<template>
<div
v-for="(errand, index) in errands"
:key="index"
>
<div
:data-test="`errand-row-${index}`"
class="flex-table__row"
:class="{ 'flex-table__row--closed': index !== currentIndex }"
@click="toggleExpanded(index)"
>
<ListDetails
v-if="currentIndex >= 0 && currentIndex === index"
/>
</div>
</div>
</template>
<script>
import ListDetails from "./ListDetails.vue";
export default {
components: {
ListDetails: ListDetails
},
props: {
errands: {
type: Array,
default: () => {
return [];
}
},
},
data() {
return {
currentIndex: -1,
};
},
methods: {
toggleExpanded: function(index) {
this.currentIndex = this.currentIndex === index ? -1 : index;
},
}
};
</script>
If there are any questions or if further clarification is needed, please feel free to ask!
Thank you in advance, Erik