Opening Modal Dialog in the test

[savifon]

I have a test that simulates the opening of a Modal (HeadlessUI), however, when performing the simulation of clicking the open button, the modal does not open. It just stays:

    <!--teleport start-->
    <!--teleport end-->
    <div style="position: absolute; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"></div>

Modal.vue code:

    <template>
      <TransitionRoot as="template" :show="modal.isOpen">
        <Dialog as="div" class="z-50 absolute inset-0" @close="modal.closeModal()">
          <div
            class="flex items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0"
          >
            <TransitionChild
              as="template"
              enter="ease-out duration-300"
              enter-from="opacity-0"
              enter-to="opacity-100"
              leave="ease-in duration-200"
              leave-from="opacity-100"
              leave-to="opacity-0"
            >
              <DialogOverlay
                class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75"
              />
            </TransitionChild>
            <TransitionChild
              as="template"
              enter="ease-out duration-300"
              enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
              enter-to="opacity-100 translate-y-0 sm:scale-100"
              leave="ease-in duration-200"
              leave-from="opacity-100 translate-y-0 sm:scale-100"
              leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
            >
              <!-- content modal -->
            </TransitionChild>
          </div>
        </Dialog>
      </TransitionRoot>
    </template>
    
    <script setup lang="ts">
    import { useModal } from "@/stores/modal"
    import {
      Dialog,
      DialogOverlay,
      TransitionChild,
      TransitionRoot
    } from "@headlessui/vue"
    
    const modal = useModal()
    </script>

App.vue Code:

  <script setup lang="ts">
   import { RouterView } from "vue-router"
   import Modal from "@/components/Modal.vue"
   </script>
   
   <template>
     <Modal />
     <RouterView />
   </template>

Test:

    import { loadFeature, defineFeature } from "jest-cucumber"
    import { mount, flushPromises, VueWrapper } from "@vue/test-utils"
    import { describe, beforeEach, afterEach, jest } from "@jest/globals"
    import { createTestingPinia } from "@pinia/testing"
    import { createRouter, createWebHistory, type Router } from "vue-router"
    import { routes } from "@/router/index"
    import { setupIntersectionObserverMock } from "tests/unit/__mocks__/intersectionObserver"
    import App from "@/App.vue"
    // import Modal from "@/components/Modal.vue"
    
    setupIntersectionObserverMock()
    const feature = loadFeature(
      "tests/features/feature/feature.feature"
    )
    let wrapper: VueWrapper
    let router: Router
    
    beforeEach(() => {
      setupIntersectionObserverMock()
      // const el = document.createElement("div")
      // el.id = "headlessui-portal-root"
      // document.body.appendChild(el)
      router = createRouter({
        history: createWebHistory(),
        routes: routes
      })
    })
    
    afterEach(() => {
      // // clean up
      // document.body.outerHTML = ""
      // jest.clearAllMocks()
    })
    
    const setRoute = async (url: string) => {
      router.push(url)
      await router.isReady()
    }
    
    const setup = async () => {
      const screen = mount(App, {
        // attachTo: document.body,
        global: {
          plugins: [
            createTestingPinia({
              stubActions: false
            }),
            router
          ]
        }
      })
      await flushPromises()
      return screen
    }
    
    defineFeature(feature, test => {
      describe("Modal", () => {
        test("Open Modal", async ({ given, when }) => {
          given("...", async () => {
            await setRoute("/router/view/abc")
            wrapper = await setup()
            // ...
          })
    
          when("...", async () => {
            await wrapper.find('span[data-test-id="button"]').trigger("click")
            await flushPromises()
            console.log(wrapper.html())
            // const modal = wrapper.findComponent(Modal)
            // console.log(modal.html())
            // ...
          })
        })
      })
    })

I have already implemented the code provided in the documentation, but without success as well.

Thank you for your attention!

[cexbrayat]

@savifon Can you try to make a minimal repro using https://stackblitz.com/edit/vitest-dev-vitest-f3vu9l?file=package.json&initialPath=__vitest__ ?

Please remove all the unrelated code so we can focus on the issue at hand, and we'll see if we have an idea 👍

[savifon]

Thank you.
In fact, as you can see from the link I provided, the VTU mock did not work in my case.
I will look into this mock that you mentioned.

[mskierski]

I have run into a similar problem using a component which contains Vuetify's 3 VSelect component.

When drop down is selected Vuetify generates via CSS a dialog overlay which is attached to the document outside of the mounted component. This effectively means that it is impossible to use wrapper => trigger => click to change selection. I can still use wrapper.vm.$emit but this defeats the purpose of the test.

Would you guys have a better test strategy for this situation?

Here is a fragment of document.body.innerHTML where wrapper is attachedTo document.getElementById("app") in the first line and the rest is result of "click" event on the input:

<div data-v-app="true" id="app"></div>
<div class="v-overlay-container">
<div class="v-overlay v-overlay--absolute v-overlay--active v-theme--light v-locale--is-ltr v-menu" style="z-index: 2000;">
<transition-stub name="fade-transition" appear="true" persisted="false" css="true"></transition-stub>
<transition-stub name="dialog-transition" appear="true" persisted="true" css="false">
<div class="v-overlay__content v-select__content" style="max-height: 0px; max-width: 0px; min-width: 0px; --v-overlay-anchor-origin: top right; transform-origin: bottom right; top: 12px; left: 12px;">
<div class="v-list v-theme--light v-list--density-default v-list--one-line" role="listbox">

<div class="v-list-item v-list-item--link v-theme--light v-list-item--density-default v-list-item--one-line v-list-item--variant-text" tabindex="0">
	<span class="v-list-item__overlay"></span>
	<span class="v-list-item__underlay"></span>
	<div class="v-list-item__prepend"></div>
	<div class="v-list-item__content">
		<div class="v-list-item-title">Primal dry aged</div>
	</div>
</div>

[mskierski]

Sorry for multiple answers but in my case (using Vuetify VSelect) the best solution was to use dispatchEvent on selected element.
It is outside of the wrapper but achieves the black box testing objective.

        const selectlistelements = document.getElementsByClassName("v-list-item");
        for (const element of selectlistelements){
            if (element.textContent === selectedlatertext)
            {
                const res: boolean = element.dispatchEvent(new Event("click"));
                expect(res).toBeTruthy();
            }
        }

[savifon]

but still the element itself that should render when clicked does not render, correct?

[mskierski]

I'm not sure if I understand your question.

In my case the modal element renders in an overlay which is a direct child of the document.body. This is outside of the wrapper which is attached to a child of document.body with id "app". This means that it cannot be accessed through "wrapper" methods but is accessible through "document" methods.

I do not know if this is the case in your code.

[814k31]

This is quite an old discussion but maybe for reference to help others

I added a comment here with a snipped on how I worked around it
vuejs/vue-test-utils#1333 (comment)

if you're using transition delays and stuff you may have to fake timers and force them to tick over the duration amount (depends if they are implemented using js or css)