How to trigger the dialog onOk button ( jest unit test )

[endielo]

Hello,

I am trying to test a component which will need the user to confirm the action.

  methods: {
    click() {
      this.$q
        .dialog({
          title: "Confirm",
          message: "Are you sure to delete this record?",
          cancel: true,
          persistent: true
        })
        .onOk(() => {
          console.log('Deleting');
          // delete action here...
        })
    }
  }

    in my test:
    ...
    wrapper.find('.q-btn.delete' ).trigger('click')    // find and click the delete button 
    // what should I do to trigger the "OK" button ?
    // and then expect the console.log('Deleteing')  have been called

[DavidGo]

Same issue. @endielo have you managed to do this?

[bago]

Hey guys, stumbled upon that issue today. This is how I managed to do it.
Suppose you call the dialog like this in you vue

// draft.vue
this.$q.dialog({
  title: this.$t('mixin.delete.title'),
  message: this.$t('mixin.delete.confirmation'),
  cancel: true,
  persistent: true
}).onOk(() => {
  this.deleteDraftLifts()
})

You can trigger the onOk callback in two times by using the mockReturnThis() function of jest. The trick is to understand that we are tying to mock chained functions (this.$q.dialog({...}).onOk())

So start by mocking this.$q.dialog({...}) with

// draft.spec.js
vm.$q.dialog = jest.fn().mockReturnThis()

then mock the onOK like this

// draft.spec.js
vm.$q.dialog().onOk = jest.fn()

now you can trigger your function and it will pass.

// draft.spec.js
wrapper.find('xxxx-class' ).trigger('click') 
expect(vm.$q.dialog().onOk).toHaveBeenCalled()

You can go further by checking the delete logic inside if you want. You will need to abstract the logic inside a function like I did in my example draft.vue withthis.deleteDraftLifts()
by doing this you can now write the following code

// draft.spec.js
vm.$q.dialog = jest.fn().mockReturnThis()
vm.$q.dialog().onOk = jest.fn(() => vm.deleteDraftLifts())

wrapper.find('xxxx-class' ).trigger('click') 
expect(vm.$q.dialog().onOk).toHaveBeenCalled()