How to write testcase of $bvModal.msgBoxConfirm of vuebootstrap in nuxt.js - vue.js

Question

How to write a test case for this component, how to write a unit case for this, attach to dom might now working in this case,
How to write a test case for this component, how to write a unit case for this, attach to dom might now working in this case,
<template>
<div>
<div class="mb-2">
<b-button #click="showMsgBoxOne">Simple msgBoxConfirm</b-button>
Return value: {{ String(boxOne) }}
</div>
<div class="mb-1">
<b-button #click="showMsgBoxTwo">msgBoxConfirm with options</b-button>
Return value: {{ String(boxTwo) }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
boxOne: '',
boxTwo: ''
}
},
methods: {
showMsgBoxOne() {
this.boxOne = ''
this.$bvModal.msgBoxConfirm('Are you sure?')
.then(value => {
this.boxOne = value
})
.catch(err => {
// An error occurred
})
},
showMsgBoxTwo() {
this.boxTwo = ''
this.$bvModal.msgBoxConfirm('Please confirm that you want to delete everything.', {
title: 'Please Confirm',
size: 'sm',
buttonSize: 'sm',
okVariant: 'danger',
okTitle: 'YES',
cancelTitle: 'NO',
footerClass: 'p-2',
hideHeaderClose: false,
centered: true
})
.then(value => {
this.boxTwo = value
})
.catch(err => {
// An error occurred
})
}
}
}
</script>

Answer 1

async showMsgBoxTwo() {
this.boxTwo = ''
try {
const res = await this.$bvModal.msgBoxConfirm('Please confirm that you want to delete everything.', {
title: 'Please Confirm',
size: 'sm',
buttonSize: 'sm',
okVariant: 'danger',
okTitle: 'YES',
cancelTitle: 'NO',
footerClass: 'p-2',
hideHeaderClose: false,
centered: true
})
this.boxTwo = res
} catch (e) {
// error
}
}
then
it('test', () => {
const wrapper = shallowMount(Component, {
store,
localVue,
propsData: {},
})
const spy = jest.spyOn(wrapper.vm.$bvModal, 'msgBoxConfirm')
spy.mockImplementation(() => Promise.resolve(some value))
wrapper.vm.showMsgBoxTwo()
wrapper.vm.$nextTick(() => {
expect(spy).toHaveBeenCalled()
})
})