Search code examples
vue.jsjestjsvue-routervuetify.jsvue-test-utils

Vue test-utils how to test a navbar button with vuetify


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


Solution

  • 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.