mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-15 18:01:24 +08:00
dd19cae2bc
* refactor(components): popper composables - Refactor popper composables * updates * updates for tooltip * Updates for popper. TODO: fix controlled tooltip animation * Fix controlled mode popper animation issue * Add new feature for customizing tooltip theme * Fix popover and popconfirm error * - Add Collection component for wrapping a collection of component - Add FocusTrap component for trap focus for popups - Add RovingFocus component for roving focus component type - Adjust dropdown component based on these newly added components - Add popper-trigger component for placing the trigger - TODO: Finish current dropdown component, and all component's tests plus documents * Refactor popper * Complete organizing popper * Almost finish dropdown * Update popper tests * update only-child test * Finish focus trap component test * Finish tooltip content test * Finish tooltip trigger tests * Finish tooltip tests * finish tests for Collection and RovingFocusGroup * Fix test cases for timeselect & select & popover * Fix popover, popconfirm, menu bug and test cases * Fix select-v2 test error caused by updating popper * Fix date-picker test issue for updating popper * fix test cases * Fix eslint * Rebase dev & fix tests * Remove unused code
114 lines
2.9 KiB
TypeScript
114 lines
2.9 KiB
TypeScript
import { nextTick } from 'vue'
|
|
import { mount } from '@vue/test-utils'
|
|
import { debugWarn } from '@element-plus/utils/error'
|
|
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'
|
|
|
|
jest.useFakeTimers()
|
|
|
|
jest.mock('@element-plus/utils/error', () => ({
|
|
debugWarn: jest.fn(),
|
|
}))
|
|
|
|
const AXIOM = 'Rem is the best girl'
|
|
|
|
describe('<ElTooltip />', () => {
|
|
const createComponent = (props: any = {}, content: string | VNode = '') =>
|
|
mount(Tooltip, {
|
|
slots: {
|
|
default: () => AXIOM,
|
|
content: () => content,
|
|
},
|
|
props,
|
|
attachTo: document.body,
|
|
})
|
|
|
|
let wrapper: ReturnType<typeof createComponent>
|
|
const findTrigger = () => wrapper.findComponent(ElPopperTrigger)
|
|
|
|
afterEach(() => {
|
|
wrapper?.unmount()
|
|
document.body.innerHTML = ''
|
|
;(debugWarn as jest.Mock).mockClear()
|
|
})
|
|
|
|
describe('rendering', () => {
|
|
it('should render correctly', async () => {
|
|
wrapper = createComponent()
|
|
await nextTick()
|
|
expect(findTrigger().text()).toContain(AXIOM)
|
|
})
|
|
})
|
|
|
|
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')
|
|
await triggerEl.trigger('mouseenter')
|
|
jest.runAllTimers()
|
|
await rAF()
|
|
|
|
expect(wrapper.emitted()).toHaveProperty('show')
|
|
|
|
await triggerEl.trigger('mouseleave') // dispatches a timer with 200ms timeout.
|
|
jest.runAllTimers()
|
|
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')
|
|
await triggerEl.trigger('mousedown')
|
|
jest.runAllTimers()
|
|
await rAF()
|
|
expect(wrapper.emitted()).toHaveProperty('show')
|
|
|
|
await triggerEl.trigger('mousedown')
|
|
jest.runAllTimers()
|
|
await rAF()
|
|
expect(wrapper.emitted()).toHaveProperty('hide')
|
|
})
|
|
})
|
|
})
|