I recently upgraded my project from Vue 2 to Vue 3, so i'm just importing Bootstrap instead of using Bootstrap-Vue.
I want to test the accordion functionality using nuxt-test-utils and my test previously passed but now its failing and it seems as though nothing changes after I trigger a click on the accordion
it("content only rendered on click", async () => {
const wrapper = await mountSuspended(Accordion, {
props: {
title: "Accordion Title",
isOpen: false,
index: '1',
content: 'test'
},
stubs: {
IconGroup: true,
TeamMemberCard: true,
"nuxt-img": true
}
});
expect(wrapper.find(".accordion-button").classes()).toContain("collapsed");
await wrapper.find("button").trigger('click')
await nextTick()
expect(wrapper.find(".accordion-button").classes()).not.toContain("collapsed");
});
when I console log wrapper.html before and after the click event the html seems unchanged, but I would expect the 'collapsed' class to be removed. The accordion works in my browser and there are no errors, so I think it's something to do with how i'm testing it. I tried adding await nextTick() but I still have the same issue.
Accordion:
<template>
<div class="accordion-item">
<p class="accordion-header">
<button
:aria-expanded="isOpen"
:aria-controls="'accordion-panel-' + index"
:id="'accordion-header-' + index"
class="accordion-button collapsed"
:data-bs-target="'#accordion-panel-' + index"
data-bs-toggle="collapse"
>
{{ props.title }}
</button>
</p>
<div
:aria-labelledby="'accordion-header-' + index"
:id="'accordion-panel-' + index"
class="accordion-collapse collapse"
data-bs-parent="#accordion-container"
>
<div class="accordion-body">
<div v-html="htmlContent" />
</div>
</div>
</div>
</template>
<script setup>
import { documentToHtmlString } from "@contentful/rich-text-html-renderer";
const props = defineProps({
title: String,
index: String,
isOpen: Boolean,
content: {}
})
const htmlContent = ref(documentToHtmlString(props.content))
</script>