Wrapper do not render v-dialog (Vuetify)

[knky-ru]

Version

1.0.0-beta.29

Reproduction link

https://forum.vuejs.org/t/how-to-test-ux-of-v-dialog-vuetify-components-which-is-not-appears-in-wrapper/78114

Steps to reproduce

Already two weeks I'll try to solve a little problem with vue-test-utils and testing of v-dialog component.

Aim: To test proper behaviour of UI.

Chain of Components: CreateProposal -> CreateEditProposal -> List of form fields components.

My test is:

import { mount } from '@vue/test-utils'
import Vuetify from 'vuetify'
import VueRouter from 'vue-router'
import Vue from 'vue'
import CreateProposal from '../../../src/components/createProposal'
import Vuex from "vuex";
import TestHelpers from "../../test-helpers";

let wrapper
let h

Vue.use(Vuetify)
Vue.use(VueRouter)
Vue.use(Vuex)

Vue.config.errorHandler = (e) => { console.info(e) }

describe('CreateProposal Test', () => {

  const routes = [{ path: '/proposal/create', name: 'CreateProposal' }]
  const router = new VueRouter({ routes })

  const emptyProposal = {
    aimsAndScope: '',
    title: '',
    valid: false
  }

  const dummyPerson = {
    id: 77,
    firstName: 'Joe',
    lastName: 'Dummy',
    jobTitle: 'Fake employee',
    department: 'Ghost department'
  }

  let store = new Vuex.Store({
    modules: {
      jomPerson: {
        state: {
          data: {
            authInfo: null
          }
        },
        mutations: {
          setAuthInfo (state, authInfo) {
            state.authInfo = authInfo
          }
        },
        getters: {
          getAuthInfo (state) {
            return state.authInfo
          }
        }
      }
    }
  })

  store.commit('setAuthInfo', dummyPerson)

  beforeEach(() => {
    wrapper = mount(CreateProposal, {
      store,
      router,
      sync: false,
      propsData: {
        proposal: emptyProposal,
        isProcessing: false
      },
      attachToDocument: true
    })

    h = new TestHelpers(wrapper, expect)
  })

  it('ui rendered', async () => {
    wrapper.find('button#addr_btn_person-rseditor').trigger('click')
    wrapper.vm.$nextTick()
    expect(wrapper.html()).toContain('Search Responsible Editor')
  })

})

I expect that after clicking a "Open Address Book" button I can check if modal window appears.

But in fact, I can't do that because mount method does not render it.

After a days of research, I found a way to render v-dialog modal html code using render() method from '@vue/server-test-utils'.

import { render } from '@vue/server-test-utils'
import CreateEditProposal from '../../../src/components/createEditComponent/createEditProposal'
import CreateProposal from '../../../src/components/createProposal'
import TestHelpers from '../../test-helpers'

describe('CreateProposal UI', () => {
  let wrapper
  let h

  beforeEach(async () => {
    wrapper = await render(CreateProposal, {
      components: {CreateEditProposal}
    })

    h = new TestHelpers(wrapper, expect)
  })

  it('is rendered all elements correctly', () => {
    h.see('Responsible Editor')
    h.see('Title')
    h.see('Open Address Book')
    h.see('Create')
    h.see('>0 / 256<')
    h.see('Search Responsible Editor')
  })

})

The result HTML contains all I want.

But this wrapper is not a VUE instance. So I cant interact with it with vue-test-utils.

So. Question is:
How to test UI and UX with vue-test-utils and especially with vuetify v-dialog component.

Thanks for any help!

What is expected?

html of v-dialog component

What is actually happening?

nothing

[Stoom]

Is the v-dialog in a named slot?

[dobromir-hristov]

Closing this because of inactivity. Comment if you still have issues.

[nephix]

I'm running into the exact same issue

[TFohrer]

@Stoom + @dobromir-hristov
Facing the same issue. Any solution to this ?

[v1talii-dev]

+1

[Stoom]

It could be how v-dialog is attached to the dom. If I remember correctly it's attached towards the root, outside of your component. Maybe try adding a test ID? I don't remember how I got to it of the top of my head 😔

[v1talii-dev]

i initialize component with param attachTo, but it didn’t give the desired result:

const div = document.createElement('div');
div.setAttribute('data-app', true);
document.body.appendChild(div);

wrapper = mount(ContactListChange, {
    attachTo: document.body
});

[dressuncoded]

Also not working for me. I've added the div with the data-app attribute and have used attachTo on that element. I use mount options to set up my activator slot, and upon button click (I've tried both trigger and $emit) the dialog content does not appear. Printing the full innerHTML of the document.body shows only the activator wrapped in the <div> I created.

[capaximperii]

Facing the same issue. Any solution to this ?

[bewee-i]

+1
Please consider re-opening this issue, as it is not solved

[mikhaylov-ya]

+1, can't test my component containing v-dialog

[alextay-ideagen]

+1

wrapper.html() produces below result:

< !--teleport start--> < !--teleport end-->

couldn't seem to find v-dialog in wrapper

[814k31]

If you're looking for a work around something like this seems to have gotten me over the hurdle

const WrapperComponent = defineComponent({
  props: { props: Object as PropType<AComponentProps> },
  template: `
    <v-defaults-provider :defaults="{'VDialog':{'contained':true }}">
      <component-containing-dialog v-bind="props"/>
    </v-defaults-provider>
  `,
});

function createComponentWrapper(props: AComponentProps) {
  return mount(WrapperComponent, {
    global: {
      plugins: [createVuetify({components, directives})],
      components: {
        'component-containing-dialog': AComponent
      }
    },
    props: {props},
  });
}

test('Doesnt explode', () => {
    const wrapper = createComponentWrapper({});
    expect(wrapper.exists()).toBeTruthy();
    console.log(wrapper.html());
});