import { nextTick } from 'vue' import { mount } from '@vue/test-utils' import { afterEach, describe, expect, it, vi } from 'vitest' import { debugWarn } from '@element-plus/utils' import { rAF } from '@element-plus/test-utils/tick' import { ElPopperTrigger } from '@element-plus/components/popper' import Tooltip from '../src/tooltip.vue' import type { VNode } from 'vue' vi.mock('@element-plus/utils/error', () => ({ debugWarn: vi.fn(), })) const AXIOM = 'Rem is the best girl' describe('', () => { const createComponent = (props = {}, content: string | VNode = '') => mount( AXIOM, content: () => content, }} />, { attachTo: document.body, } ) let wrapper: ReturnType const findTrigger = () => wrapper.findComponent(ElPopperTrigger) afterEach(() => { wrapper?.unmount() document.body.innerHTML = '' }) describe('rendering', () => { it('should render correctly', async () => { wrapper = createComponent() await nextTick() expect(findTrigger().text()).toContain(AXIOM) }) it('content should teleport according appendTo', async () => { const el = document.createElement('div') el.id = 'test' document.body.appendChild(el) wrapper = createComponent({ appendTo: '#test' }, 'test appendTo props') await nextTick() const trigger$ = findTrigger() const triggerEl = trigger$.find('.el-tooltip__trigger') await triggerEl.trigger('mouseenter') expect(document.querySelector('#test')?.innerHTML).toContain( 'test appendTo props' ) }) }) describe('deprecating API', () => { it('should warn about API that will be deprecated', async () => { expect(debugWarn).toHaveBeenCalledTimes(0) wrapper = createComponent({ openDelay: 200, visibleArrow: true, }) await nextTick() expect(debugWarn).toHaveBeenCalledTimes(2) }) }) describe('functionality', () => { const content = 'Test content' it('should be able to update popper content manually', async () => { wrapper = createComponent() await nextTick() const { vm } = wrapper expect(vm.updatePopper).toBeDefined() vm.updatePopper() }) it('should be able to open & close tooltip content', async () => { wrapper = createComponent({}, content) await nextTick() const trigger$ = findTrigger() const triggerEl = trigger$.find('.el-tooltip__trigger') vi.useFakeTimers() await triggerEl.trigger('mouseenter') vi.runAllTimers() vi.useRealTimers() await rAF() expect(wrapper.emitted()).toHaveProperty('show') vi.useFakeTimers() await triggerEl.trigger('mouseleave') // dispatches a timer with 200ms timeout. vi.runAllTimers() vi.useRealTimers() await rAF() expect(wrapper.emitted()).toHaveProperty('hide') }) it('should be able to toggle visibility of tooltip content', async () => { wrapper = createComponent( { trigger: 'click', }, content ) await nextTick() const trigger$ = findTrigger() const triggerEl = trigger$.find('.el-tooltip__trigger') vi.useFakeTimers() await triggerEl.trigger('click') vi.runAllTimers() vi.useRealTimers() await rAF() expect(wrapper.emitted()).toHaveProperty('show') vi.useFakeTimers() await triggerEl.trigger('click') vi.runAllTimers() vi.useRealTimers() await rAF() expect(wrapper.emitted()).toHaveProperty('hide') }) }) })