diff --git a/packages/tooltip/__tests__/Tooltip.spec.js b/packages/tooltip/__tests__/Tooltip.spec.js
new file mode 100644
index 000000000..0340beea8
--- /dev/null
+++ b/packages/tooltip/__tests__/Tooltip.spec.js
@@ -0,0 +1,208 @@
+import { mount } from '@vue/test-utils'
+import { nextTick } from '@vue/runtime-core'
+import Tooltip from '../Tooltip'
+
+describe('Tooltip', () => {
+ let wrapper
+ it('create', (done) => {
+ wrapper = mount({
+ template: `
+
+
+
+ `,
+ components: {
+ [Tooltip.name]: Tooltip
+ }
+ })
+ nextTick(_ => {
+ expect(wrapper.vm.$refs.tooltip.popperVM.$el).toHaveProperty('textContent', '提示文字')
+ done()
+ })
+ })
+
+ it('custom popper class', done => {
+ wrapper = mount({
+ template: `
+
+
+
+ `,
+ components: {
+ [Tooltip.name]: Tooltip
+ }
+ })
+ nextTick(_ => {
+ expect(wrapper.vm.$refs.tooltip.popperVM.$el.classList.contains('custom-popper')).toBeTruthy()
+ done()
+ })
+ })
+
+ describe('manual', () => {
+ const wrapper = mount({
+ template: `
+
+
+
+ `,
+ data() {
+ return { show: false }
+ },
+ components: {
+ [Tooltip.name]: Tooltip
+ }
+ })
+ const tooltip = wrapper.vm.$refs.tooltip
+ const tooltip2 = wrapper.findComponent({ name: 'ElTooltip' })
+
+ it('aria-hidden is true', async (done) => {
+ await tooltip2.trigger('mouseenter')
+ expect(tooltip.popperVM.$el.getAttribute('aria-hidden')).toBe('true')
+ setTimeout(() => {
+ expect(tooltip.popperVM.$el.getAttribute('aria-hidden')).toBe('true')
+ done()
+ }, 0)
+ })
+ it('show', done => {
+ wrapper.vm.show = true
+ nextTick(_ => {
+ expect(tooltip.popperVM.$el.getAttribute('aria-hidden')).toBe('false')
+ done()
+ })
+ })
+ it('still show when trigger mouseleave', async (done) => {
+ await tooltip2.trigger('mouseleave')
+ expect(tooltip.popperVM.$el.getAttribute('aria-hidden')).toBe('false')
+ setTimeout(() => {
+ expect(tooltip.popperVM.$el.getAttribute('aria-hidden')).toBe('false')
+ done()
+ }, 0)
+ })
+ it('hidden', done => {
+ wrapper.vm.show = false
+ nextTick(_ => {
+ expect(tooltip.popperVM.$el.getAttribute('aria-hidden')).toBe('true')
+ done()
+ })
+ })
+ })
+
+ describe('hover', () => {
+ const wrapper = mount({
+ template: `
+
+
+
+ `,
+ components: {
+ [Tooltip.name]: Tooltip
+ }
+ })
+ const tooltip = wrapper.vm.$refs.tooltip
+ const tooltip2 = wrapper.getComponent({ name: 'ElTooltip' })
+ tooltip2.trigger('mouseenter')
+
+ it('popperElm is exist', done => {
+ nextTick(_ => {
+ expect(tooltip.$refs.popper).toBeTruthy()
+ done()
+ })
+ })
+ it('aria-hidden is false', done => {
+ nextTick(_ => {
+ expect(tooltip.popperVM.$el.getAttribute('aria-hidden')).toBe('false')
+ done()
+ })
+ })
+ it('close popper', done => {
+ tooltip2.trigger('mouseleave')
+ setTimeout(_ => {
+ expect(tooltip.popperVM.$el.getAttribute('aria-hidden')).toBe('true')
+ done()
+ }, 300)
+ })
+ })
+
+ it('light mode', done => {
+ wrapper = mount({
+ template: `
+
+
+
+ `,
+ components: {
+ [Tooltip.name]: Tooltip
+ }
+ })
+ nextTick(_ => {
+ expect(wrapper.vm.$refs.tooltip.popperVM.$el.classList.contains('is-light')).toBeTruthy()
+ done()
+ })
+ })
+ it('hide after', done => {
+ wrapper = mount({
+ template: `
+
+
+
+ `,
+ components: {
+ [Tooltip.name]: Tooltip
+ }
+ })
+ const tooltip = wrapper.vm.$refs.tooltip
+ const tooltip2 = wrapper.getComponent({ name: 'ElTooltip' })
+
+ nextTick(_ => {
+ tooltip2.trigger('mouseenter')
+ setTimeout(() => {
+ expect(tooltip.popperVM.$el.getAttribute('aria-hidden')).toBe('false')
+ setTimeout(() => {
+ expect(tooltip.popperVM.$el.getAttribute('aria-hidden')).toBe('true')
+ done()
+ }, 300)
+ }, 100)
+ })
+ })
+ it('reference element focus', done => {
+ wrapper = mount({
+ template: `
+
+
+
+ `,
+ components: {
+ [Tooltip.name]: Tooltip
+ }
+ })
+
+ const tooltip = wrapper.vm.$refs.tooltip
+ const tooltip2 = wrapper.getComponent({ name: 'ElTooltip' })
+ nextTick(_ => {
+ tooltip2.trigger('focus')
+ setTimeout(() => {
+ expect(tooltip.popperVM.$el.getAttribute('aria-hidden')).toBe('false')
+ expect(wrapper.find('button').element.classList.contains('focusing')).toBeTruthy()
+ tooltip2.trigger('blur')
+ setTimeout(() => {
+ expect(tooltip.popperVM.$el.getAttribute('aria-hidden')).toBe('true')
+ expect(wrapper.find('button').element.classList.contains('focusing')).toBeFalsy()
+ done()
+ }, 300)
+ }, 100)
+ })
+ })
+ it('custom tabindex', () => {
+ wrapper = mount({
+ template: `
+
+
+
+ `,
+ components: {
+ [Tooltip.name]: Tooltip
+ }
+ })
+ expect(wrapper.find('button').element.getAttribute('tabindex')).toBe('-1')
+ })
+})
\ No newline at end of file