quasar-testing: QDialog is not mounted in tests when used with mount()

Based on @Abuntxa 's awesome answer I use the following technique to test q-dialog in my component tests:

// somewhere in the setup process I create the wrapper of the component I want to test
const wrapper = mount(MyComponent, { localVue })
// in the same place I create a wrapper for `document.body`
const bodyWrapper = createWrapper(document.body)
// and when I need it, I can query the `q-dialog` on bodyWrapper
bodyWrapper.find('.q-dialog')

The good thing is that createWrapper accepts HTMLElement (I am on v1.0.0-beta.29), so no knowledge of vue’s internal structures and private properties is needed.

The bad thing is - as @kennyki mentioned - that even if I create a brand new wrapper for every test case, document is not re-rendered, so I have to manually remove the q-dialog at the end of each test.

Thanks guys!

Sorry for reviving the thread. Just to sum up for people still looking how to deal with QDialog testing in Vue 3 usingTest Utils V2 :

Thanks @OneFourFree updating MyDialog.spec.js

import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-jest';
import { beforeEach, describe, expect, it } from '@jest/globals';
import { DOMWrapper, mount } from '@vue/test-utils';
import MyDialog from './demo/MyDialog';

installQuasarPlugin();

describe('MyDialog', () => {
  beforeEach(() => {
    mount(MyDialog, {
      data: () => ({
        isDialogOpen: true,
      }),
    });
  });

  it('should mount the document body and expose for testing', () => {
    const wrapper = new DOMWrapper(document.body);

    expect(wrapper.find('.q-dialog').exists()).toBeTruthy();
  });

  it('can check the inner text of the dialog', () => {
    const wrapper = new DOMWrapper(document.body);

    expect(wrapper.find('.q-dialog').html()).toContain(
      'Custom dialog which should be tested',
    );
  });
});

Hey guys! Is there any new progress here? I’m running quasar 2 with Vue3, but I can’t find any way how to test contents of Qdialog… I also tried to create separate component and open in via dialog plugin like this this.$q.dialog({ component: TagsDialog, componentProps: { isReadonly: this.isReadOnly, tagList: this.tagList } }); but no luck… It seems to be createWrapper is now missing in testing tools v2, any suggestions? Thanks!

I’ve been able to get this to work with Vue 3 and quasar 2 using the attachTo property when mounting the component.

import {DOMWrapper, mount} from "@vue/test-utils"

const node = document.createElement('div')
node.setAttribute('id', 'app')
document.body.appendChild(node)

const wrapper = mount(MyComponent, {
  attachTo: '#app',
})

describe('test portal based component', () => {
  it('should display a menu item', () => {
    const documentWrapper = new DOMWrapper(document.body)
    const menu = documentWrapper.find('.q-menu')
    expect(menu.exists()).toBeTruthy()
  })
})

I use the following code to be able to test the components in the QDialog.

@rstoenescu Could it be considered the use of portal-vue?

import { createWrapper } from '@vue/test-utils'
/**
 * The dialogs are created through document.createElement in order to place the elements at the root
 * level of the page's dom (they won't be subcomponents of any view).
 * This methos allows getting access to the component of the dialog if there is any.
 * @returns {Wrapper} the vue wrapper of the dialog
 */
export const getDialogComponentWrapper = () => {
  let dialogElements = document.getElementsByClassName('q-dialog')
  // if there is any, there should be only one
  if (dialogElements
    && dialogElements.length>0
    && dialogElements[0].__vue__){
    return createWrapper(dialogElements[0].__vue__)
  }
  return undefined
}

@AlphaJuliettOmega Play necromancer in Diablo, but not GitHub

Please do us a favor and open a new issue

@Shinigami92 Ok, will try do so!

@IlCallo yeah I’ll have time to add that this week

Hey guys! Is there any new progress here? I’m running quasar 2 with Vue3, but I can’t find any way how to test contents of Qdialog… I also tried to create separate component and open in via dialog plugin like this this.$q.dialog({ component: TagsDialog, componentProps: { isReadonly: this.isReadOnly, tagList: this.tagList } }); but no luck… It seems to be createWrapper is now missing in testing tools v2, any suggestions? Thanks!

I’ve been able to get this to work with Vue 3 and quasar 2 using the attachTo property when mounting the component.

import {DOMWrapper, mount} from "@vue/test-utils"

const node = document.createElement('div')
node.setAttribute('id', 'app')
document.body.appendChild(node)

const wrapper = mount(MyComponent, {
  attachTo: '#app',
})

describe('test portal based component', () => {
  it('should display a menu item', () => {
    const documentWrapper = new DOMWrapper(document.body)
    const menu = documentWrapper.find('.q-menu')
    expect(menu.exists()).toBeTruthy()
  })
})

@OneFourFree I think you saved me multiple hours of struggle ❤️ Works perfectly 👌

This is a long-standing problem with Portal-based components, but still could not find a workaround If you need to test a component which calls a dialog, stub Dialog.create or $q.dialog (depending on which you’re using), as unit testing is meant to test a single component in isolation, not the interaction between components

If you need to test the dialog content, abstract the dialog inside its own component and mount that component for testing

Hi,

The QDialog, QMenu and QTooltip components do not mount in the same place that they are used. They are mounted at the end of <body> when they are opened through a Quasar Portal.

What you should do is to use content-class prop, trigger QDialog to show, wait for it to be opened (attach a Vue ref and @show event handler – this.$refs.dialog.$once('show', handlerFn)) then look in DOM for that class --> that would be your DOM node that has the QDialog content.