I have implemented the vue-bootstrap b-modal feature with the @ok="save" hook
Here is a snippet of mycomponent.vue:
<template>
<div>
<b-button @click="add">open modal</b-button>
<b-modal static lazy id="modal-detail" @ok="save">
<b-form-input v-model="fooName"></b-form-input>
</b-modal>
</div>
</template>
<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { RestClient } from "./RestClient";
@Component({ name: "fooController" })
export default class FooController extends Vue {
public fooName = "";
public add(): void {
this.$root.$emit("bv::show::modal", "modal-detail");
}
public save(): void {
console.log("in save method");
RestClient.create(this.fooName);
}
}
</script>
This is how RestClient.ts is structured:
export class RestClient {
static create(payload: string) {
return payload;
}
}
And here is a glimpse of the test:
import { createLocalVue, mount } from "@vue/test-utils";
import BootstrapVue from "bootstrap-vue";
import MyComponent from "./mycomponent.vue";
import { RestClient } from "./RestClient";
jest.mock("./RestClient.ts", () => ({
RestClient: {
create: jest.fn(() => {
return {};
// return Promise.resolve({});
})
}
}));
describe("component test", () => {
const localVue = createLocalVue();
localVue.use(BootstrapVue);
it("should call the create method on the REST client when ok-ing the modal", (done) => {
const wrapper = mount(MyComponent, {
attachToDocument: true,
localVue
});
expect(wrapper.isVueInstance()).toBe(true);
// triggering the open modal button
wrapper.find("button").trigger("click");
const modal = wrapper.find("#modal-detail");
modal.vm.$emit("ok");
return wrapper.vm.$nextTick().then(() => {
expect(RestClient.create).toBeCalled();
return wrapper.vm.$nextTick().then(done);
});
});
});
I am emitting the ok event on the modal directly and expecting to see the console.log statement in the save-method executed. However, I cannot find it in the terminal while running the test.
Hence, the RestClient.create method is not being invoked as expected.
Why is that happening?