Vitest and $q.dialog

[jeff-wood-readyup]

Having trouble testing a component that uses the global $q.dialog method. I believe this has to do with how the dialog is mounted.

I have a layout which includes a sign out button, when clicked this sign out button pops up a confirmation dialog (are you sure you want to sign out? Yes/No) and since this popup is simple I am not using a custom component but rather the global dialog method.

const $q = useQuasar()

function showSignOutDialog() {
    $q.dialog({
      title: 'Sign Out?',
      message: 'Are you sure you want to sign out of ReadyUp?',
      ok: {
        label: 'Sign Out',
        color: 'negative'
      },
      cancel: { color: 'negative', outline: true }
    }).onOk(() => {
      AuthService.signOut()
        .then(() => {
          router
            .push('/auth/login')
            .then(() => {
              notifySuccess('Signed Out')
            })
            .catch((error) => {
              notifyError('Failed to Sign Out', error)
            })
        })
        .catch((error) => {
          notifyError('Failed to Sign Out', error)
        })
    })
  }

However when writing a test I am unable to see the html for the dialog or find the component using get/find/etc.

My html output from the mount is:

<div data-v-22686b16="" class="q-layout q-layout--standard" style="min-height: 768px;" tabindex="-1">
  <!---->
  <!---->
  <header data-v-22686b16="" class="q-header q-layout__section--marginal fixed-top text-white bg-dark-header">
    <!--v-if-->
    <div data-v-22686b16="" class="q-toolbar row no-wrap items-center row q-pl-none" role="toolbar">
      <div data-v-22686b16="" class="q-toolbar__title ellipsis col-10 flex items-center">
        <!--v-if--><img data-v-22686b16="" class="logo q-py-sm" src="/src/assets/readyup-admin-logo.svg" alt="ReadyUp Admin Logo">
      </div>
      <div data-v-22686b16="" class="col-2 text-right">
         <button data-v-22686b16="" class="q-btn q-btn-item non-selectable no-outline q-btn--unelevated q-btn--rectangle bg-negative text-white q-btn--actionable q-focusable q-hoverable" tabindex="0" type="button" id="signout-btn">
             <span class="q-focus-helper"></span>
             <span class="q-btn__content text-center col items-center q-anchor--skip justify-center row">
                 <i class="q-icon notranslate material-icons" aria-hidden="true" role="img">logout</i>
             </span>
             <span class="q-ripple" dir="ltr">
                 <span class="q-ripple__inner" style="height: 0px; width: 0px; transform: translate3d(0px,0px,0) scale3d(.2,.2,1); opacity: 0;"></span>
             </span>
         </button>
     </div>
    </div>
    <!---->
  </header>
  <!--v-if-->
  <div data-v-22686b16="" class="q-page-container" style="padding-top: 0px;">
    <!---->
  </div>
</div>

and my test code is as follows:

describe('MainLayout', () => {

  it('should mount component properly', () => {
    const wrapper = mount(MainLayout, {
      global: {
        plugins: [router]
      }
    });

    expect(wrapper.exists()).toBe(true);
  });

  it('should show sign out dialog and sign out user', async () => {
    const wrapper = mount(MainLayout, {
      global: {
        plugins: [router]
      }
    });

    const signOutButton = wrapper.find('button#signout-btn');
    await signOutButton.trigger('click');

  });
});

I know it is finding the signout button and triggering the click event, but I am unable to find the dialog html code to then trigger the confirmation with the button.