2022-03-25 15:35:56 +08:00
|
|
|
import { nextTick, ref } from 'vue'
|
2022-01-04 09:15:15 +08:00
|
|
|
import { shallowMount } from '@vue/test-utils'
|
2022-03-24 21:22:46 +08:00
|
|
|
import { POPPER_CONTENT_INJECTION_KEY } from '@element-plus/tokens'
|
2022-01-04 09:15:15 +08:00
|
|
|
import ElArrow from '../src/arrow.vue'
|
2022-03-24 21:22:46 +08:00
|
|
|
|
|
|
|
import type { VueWrapper } from '@vue/test-utils'
|
2022-01-04 09:15:15 +08:00
|
|
|
|
|
|
|
const popperContentInjection = {
|
|
|
|
arrowRef: ref(null),
|
|
|
|
arrowOffset: ref(0),
|
|
|
|
}
|
|
|
|
|
|
|
|
const mountArrow = () =>
|
|
|
|
shallowMount(ElArrow, {
|
|
|
|
global: {
|
|
|
|
provide: {
|
|
|
|
[POPPER_CONTENT_INJECTION_KEY as symbol]: popperContentInjection,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
})
|
|
|
|
|
|
|
|
describe('<ElPopperArrow />', () => {
|
2022-03-24 21:22:46 +08:00
|
|
|
let wrapper: VueWrapper<InstanceType<typeof ElArrow>>
|
2022-01-04 09:15:15 +08:00
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
wrapper = mountArrow()
|
|
|
|
return nextTick()
|
|
|
|
})
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
wrapper?.unmount()
|
|
|
|
popperContentInjection.arrowRef.value = null
|
|
|
|
popperContentInjection.arrowOffset.value = 0
|
|
|
|
})
|
|
|
|
|
|
|
|
it('should set the arrowRef after mounted', async () => {
|
|
|
|
expect(popperContentInjection.arrowRef.value).toBe(wrapper.vm.arrowRef)
|
|
|
|
expect(popperContentInjection.arrowOffset.value).toBe(0)
|
|
|
|
})
|
|
|
|
|
|
|
|
it('should update the offset after props changed', async () => {
|
|
|
|
expect(popperContentInjection.arrowOffset.value).toBe(0)
|
|
|
|
|
|
|
|
await wrapper.setProps({
|
|
|
|
arrowOffset: 10,
|
|
|
|
})
|
|
|
|
|
|
|
|
expect(popperContentInjection.arrowOffset.value).toBe(10)
|
|
|
|
})
|
|
|
|
|
|
|
|
it('should unset arrowRef before unmount', async () => {
|
|
|
|
expect(popperContentInjection.arrowRef.value).toBe(wrapper.vm.arrowRef)
|
|
|
|
|
|
|
|
wrapper.unmount()
|
|
|
|
expect(popperContentInjection.arrowRef.value).toBeNull()
|
|
|
|
})
|
|
|
|
})
|