No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

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

    Help
    3
    3
    1059
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • E
      endielo last edited by 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
      
      1 Reply Last reply Reply Quote 1
      • D
        DavidGo last edited by

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

        B 1 Reply Last reply Reply Quote 0
        • B
          bago @DavidGo last edited by 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()
          
          1 Reply Last reply Reply Quote 0
          • First post
            Last post