Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug Report][3.6.10] VMenu - activator="parent" can't be tested with VUE test utils #20471

Closed
YukiYu729 opened this issue Sep 13, 2024 · 1 comment

Comments

@YukiYu729
Copy link

Environment

Vuetify Version: 3.6.10
Vue Version: 3.4.29
Browsers: Chrome 128.0.0.0
OS: Windows 10

Steps to reproduce

I wrote three use cases for VMenu; they all work, but the third one (with activator="parent") cannot be tested in the unit test script. The other two are fine, but I really need the third solution.

Here's my code (also in VPlay):

<!-- first -->
<VMenu v-model="show">
  <template #default>
    <div class="menu-content">Menu Content</div>
  </template>
</VMenu>
<VBtn @mouseenter="show = true" @mouseleave="show = false">
  Open Menu
</VBtn>

<!-- second -->
<VMenu :open-on-hover="true">
  <template #activator="{ props }">
    <VBtn v-bind="props">Open Menu</VBtn>
  </template>
  <template #default>
    <div class="menu-content">Menu Content</div>
  </template>
</VMenu>

<!-- third -->
<VBtn>
  Open Menu
  <VMenu :open-on-hover="true" activator="parent">
    <template #default>
      <div class="menu-content">Menu Content</div>
    </template>
  </VMenu>
</VBtn>

And here's my unit test:

import { mount } from '@vue/test-utils';
import { VMenu, VBtn } from 'vuetify/components';
import PopupMenu from '../PopupMenu.vue';
import { createVuetify } from 'vuetify';
import { nextTick } from 'vue';

// Create a Vuetify instance
const vuetify = createVuetify();

describe('VMenu', () => {
  it('renders menu content when open', async () => {
    const wrapper = mount(PopupMenu, {
      global: {
        plugins: [vuetify],
      },
    });

    // Find and trigger the activator button
    await wrapper.findComponent(VBtn).trigger('mouseenter');

    // Wait for the menu to be visible
    await nextTick();
    await new Promise((resolve) => setTimeout(resolve, 1000));

    // Check if the menu content is rendered in the document body
   // Third solution will fail here
    const menuContent = document.querySelector('.menu-content');
    expect(menuContent).not.toBeNull();
    expect(menuContent.textContent).toBe('Menu Content');
  });
});

Expected Behavior

When use activator="parent", there should be some way to write the unit to verify it

Actual Behavior

Unit test can't pass, don't know why

Reproduction Link

https://play.vuetifyjs.com/#...

@KaelWD
Copy link
Member

KaelWD commented Sep 13, 2024

There is a few ms delay between the component rendering and when the event listeners are added, you shouldn't hover over it immediately.

@KaelWD KaelWD closed this as not planned Won't fix, can't repro, duplicate, stale Sep 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants