Vue.js - Element Plus - How to test el-dropdown component

469 Views Asked by At

I have a problem that I can't trigger el-dropdown menu. I've followed the testing approach done in element-plus repository but couldn't able to simulate mouseenter event and see whether dropdown menu is opened.

my code can be found below.

<template>
  <el-dropdown>
    <el-icon>
      <MoreFilled/>
    </el-icon>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item>Send a message</el-dropdown-item>
        <el-dropdown-item>Report</el-dropdown-item>
        <el-dropdown-item>Block</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script lang="ts" setup>
import { MoreFilled } from '@element-plus/icons-vue';
</script>

and my test code can be found here

import { mount } from "@vue/test-utils";
import { nextTick } from "vue";
import { describe, it, expect, beforeEach, afterEach, vi  } from "vitest";
import EntryCardFooterDropdown from "../EntryCardFooterDropdown.vue";
import { ElTooltip } from "element-plus";

describe('EntryCardFooterDropdown', () => {
  it('render', async () => {
    const wrapper = mount(EntryCardFooterDropdown)
    await nextTick()

    const content = wrapper.findComponent(ElTooltip).vm as InstanceType<typeof ElTooltip>
    vi.useFakeTimers();

    const triggerElm = wrapper.find('.el-tooltip__trigger');
    expect(content.open).toBe(false);
    await triggerElm.trigger('mouseenter');

    vi.runAllTimers();    
    expect(content.open).toBe(true);
  })
})
0

There are 0 best solutions below