in my navbar component, i have a method that execute a router.push()
methods: {
redirectToScreen(payload) {
this.$router.push({ name: `${payload}` });
}
}
and then this is my template
<template lang="pug">
v-toolbar#nav-toolbar(
app
:clipped-left="clipped"
color="white"
height="80px"
fixed
)
v-toolbar-items
//- ADMIN_OPD
v-btn.admin-outpatient-event(
flat
v-if="userRole === 'ADMIN_OPD'"
@click="redirectToScreen('admin-new-customer')"
) OUTPATIENT
v-btn.admin-register-event(
flat
v-if="userRole === 'ADMIN_OPD'"
@click="openRegisterAlert()"
) Register
</template>
i want to test this code with the following specs
describe("Navbar.vue", () => {
var wrp
const localVue = createLocalVue();
const spy = jest.fn();
localVue.use(Vuetify);
localVue.use(VueRouter);
var router = new VueRouter({
routes
})
beforeEach(() => {
wrp = shallowMount(Navbar , {
localVue,
router,
computed: {
dataToken() {
return "123124asd"
},
userRole() {
return "ADMIN_OPD";
},
financeOnly() {
return true;
}
}
})
})
it("should redirect to admin-opd if navbar button got clicked", () => {
wrp.vm.$router.push = spy;
wrp.find(".admin-outpatient-event").trigger("click");
expect(spy).toHaveBeenCalledWith({ name: 'admin-new-customer' });
});
});
but unfortunately i got an error
Expected mock function to have been called with:
[{"name": "admin-new-customer"}]
But it was not called.
How should i write the test expect() to make sure that "name":"admin-new-customer" route has been called
thanks for the feedback
Maybe try throw spy.mock.calls
(Jest mock calls) before expects()
to see the arguments the spy was called with.
If there are no arguments the spy wasn't called and something went wrong with triggering the click and push.
Otherwise the code looks good to me.