feat: extract common test utils

packages/avatar/__tests__/avatar.spec.ts

@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils'
 import { nextTick } from 'vue'
 import Avatar from '../src/index.vue'
-import { IMAGE_SUCCESS, IMAGE_FAIL } from '../../test-utils/mock'
+import { IMAGE_SUCCESS, IMAGE_FAIL } from '@element-plus/test-utils'
 
 beforeAll(() => {
   Object.defineProperty(global.Image.prototype, 'src', {

packages/dropdown/__tests__/dropdown.spec.ts

@@ -1,5 +1,6 @@
 import { mount } from '@vue/test-utils'
 import { eventKeys } from '@element-plus/utils/aria'
+import { sleep } from '@element-plus/test-utils'
 import Dropdown from '../src/dropdown.vue'
 import DropdownItem from '../src/dropdown-item.vue'
 import DropdownMenu from '../src/dropdown-menu.vue'
@@ -8,6 +9,7 @@ const MOUSE_ENTER_EVENT = 'mouseenter'
 const MOUSE_LEAVE_EVENT = 'mouseleave'
 const CLICK = 'click'
 
+const _sleep = () => sleep(250)
 const _mount = (template: string, data, otherObj?) => mount({
   components: {
     [Dropdown.name]: Dropdown,
@@ -18,11 +20,6 @@ const _mount = (template: string, data, otherObj?) => mount({
   data,
   ...otherObj,
 })
-const sleep = (time = 250) => new Promise(resolve => setTimeout(resolve, time))
-export const timeout = async (fn, time = 250) => {
-  await sleep(time)
-  fn()
-}
 
 describe('Dropdown', () => {
   test('create', async () => {
@@ -49,10 +46,10 @@ describe('Dropdown', () => {
     const triggerElm = wrapper.find('.el-dropdown-link')
     expect(content.value).toBe(false)
     await triggerElm.trigger(MOUSE_ENTER_EVENT)
-    await sleep()
+    await _sleep()
     expect(content.value).toBe(true)
     await triggerElm.trigger(MOUSE_LEAVE_EVENT)
-    await sleep()
+    await _sleep()
     expect(content.value).toBe(false)
   })
 
@@ -89,9 +86,9 @@ describe('Dropdown', () => {
     // const content = wrapper.findComponent({ ref: 'b' }).vm.$refs.popper as any
     const triggerElm = wrapper.find('.el-dropdown-link')
     await triggerElm.trigger(MOUSE_ENTER_EVENT)
-    await sleep()
+    await _sleep()
     await wrapper.findComponent({ ref: 'c' }).trigger('click')
-    await sleep()
+    await _sleep()
     expect((wrapper.vm as any).name).toBe('CommandC')
   })
 
@@ -122,10 +119,10 @@ describe('Dropdown', () => {
     const triggerElm = wrapper.find('.el-dropdown-link')
     expect(content.value).toBe(false)
     await triggerElm.trigger(MOUSE_ENTER_EVENT)
-    await sleep()
+    await _sleep()
     expect(content.value).toBe(false)
     await triggerElm.trigger(CLICK)
-    await sleep()
+    await _sleep()
     expect(content.value).toBe(true)
   })
 
@@ -164,7 +161,7 @@ describe('Dropdown', () => {
     await button.trigger('click')
     expect((wrapper.vm as any).name).toBe('click')
     await triggerElm.trigger(MOUSE_ENTER_EVENT)
-    await sleep()
+    await _sleep()
     expect(content.value).toBe(true)
   })
 
@@ -192,9 +189,9 @@ describe('Dropdown', () => {
     const content = wrapper.findComponent({ ref: 'b' }).vm.$refs.popper as any
     const triggerElm = wrapper.find('.el-dropdown-link')
     await triggerElm.trigger(MOUSE_ENTER_EVENT)
-    await sleep()
+    await _sleep()
     await wrapper.findComponent({ ref: 'c' }).trigger('click')
-    await sleep()
+    await _sleep()
     expect(content.value).toBe(true)
   })
 
@@ -222,19 +219,19 @@ describe('Dropdown', () => {
     const content = wrapper.findComponent({ ref: 'b' }).vm.$refs.popper as any
     const triggerElm = wrapper.find('.el-dropdown-link')
     await triggerElm.trigger(MOUSE_ENTER_EVENT)
-    await sleep()
+    await _sleep()
     await triggerElm.trigger('keydown', {
       keyCode: eventKeys.enter,
     })
-    await sleep()
+    await _sleep()
     expect(content.value).toBe(false)
 
     await triggerElm.trigger(MOUSE_ENTER_EVENT)
-    await sleep()
+    await _sleep()
     await triggerElm.trigger('keydown', {
       keyCode: eventKeys.tab,
     })
-    await sleep()
+    await _sleep()
     expect(content.value).toBe(false)
   })
 
@@ -262,11 +259,11 @@ describe('Dropdown', () => {
     const content = wrapper.findComponent({ ref: 'a' })
     const triggerElm = wrapper.find('.el-dropdown-link')
     await triggerElm.trigger(MOUSE_ENTER_EVENT)
-    await sleep()
+    await _sleep()
     await content.trigger('keydown', {
       keyCode: eventKeys.down,
     })
-    await sleep()
+    await _sleep()
     expect(wrapper.findComponent({ ref: 'd' }).attributes('tabindex')).toBe('0')
 
   })

packages/scrollbar/__tests__/scrollbar.spec.ts

@@ -1,12 +1,7 @@
 import { mount } from '@vue/test-utils'
+import { makeScroll, defineGetter } from '@element-plus/test-utils'
 import Scrollbar from '../src/index'
-const wait = (ms = 0) => (new Promise(resolve => setTimeout(() => resolve(), ms)))
+
-const makeScroll = async (dom, name, number ) => {
-  dom[name] = number
-  dom.dispatchEvent(new CustomEvent('scroll'))
-  // must use setTimeout instead of nextTick to wait dom change
-  return await wait()
-}
 const _mount = (template: string) => mount({
   components: {
     'el-scrollbar': Scrollbar,
@@ -16,25 +11,17 @@ const _mount = (template: string) => mount({
 
 describe('ScrollBar', () => {
   test('vertical', async () => {
-    const outterHeight = 200
+    const outerHeight = 200
     const innerHeight = 500
     const wrapper = _mount(`
-      <el-scrollbar style="height: ${outterHeight}px">
+      <el-scrollbar style="height: ${outerHeight}px">
         <div style="height: ${innerHeight}px;"></div>
       </el-scrollbar>
-`)
+    `)
-    Object.defineProperties(window.HTMLElement.prototype, {
+
-      clientHeight: {
+    defineGetter(window.HTMLElement.prototype, 'clientHeight', outerHeight)
-        get () {
+    defineGetter(window.HTMLElement.prototype, 'scrollHeight', innerHeight)
-          return outterHeight
+
-        },
-      },
-      scrollHeight:{
-        get () {
-          return innerHeight
-        },
-      },
-    })
     const scrollDom = wrapper.find('.el-scrollbar__wrap').element
     await makeScroll(scrollDom, 'scrollTop', 100)
     expect(wrapper.find('.is-vertical div').attributes('style')).toContain('height: 40%; transform: translateY(50%); webkit-transform: translateY(50%)')
@@ -43,25 +30,17 @@ describe('ScrollBar', () => {
   })
 
   test('horizontal', async () => {
-    const outterWidth = 200
+    const outerWidth = 200
     const innerWidth = 500
     const wrapper = _mount(`
-      <el-scrollbar style="height: 100px; width: ${outterWidth}px">
+      <el-scrollbar style="height: 100px; width: ${outerWidth}px">
         <div style="height:100px; width: ${innerWidth}px;"></div>
       </el-scrollbar>
-`)
+    `)
-    Object.defineProperties(window.HTMLElement.prototype, {
+
-      clientWidth: {
+    defineGetter(window.HTMLElement.prototype, 'clientWidth', outerWidth)
-        get () {
+    defineGetter(window.HTMLElement.prototype, 'scrollWidth', innerWidth)
-          return outterWidth
+
-        },
-      },
-      scrollWidth:{
-        get () {
-          return innerWidth
-        },
-      },
-    })
     const scrollDom = wrapper.find('.el-scrollbar__wrap').element
     await makeScroll(scrollDom, 'scrollLeft', 100)
     expect(wrapper.find('.is-horizontal div').attributes('style')).toContain('width: 40%; transform: translateX(50%); webkit-transform: translateX(50%)')

packages/test-utils/define-getter.ts

@@ -0,0 +1,8 @@
+import { isFunction } from 'lodash'
+
+const defineGetter = (obj: Record<string, unknown>, prop: string, value: any) => {
+  const getter = isFunction(value) ? value : () => value
+  Object.defineProperty(obj, prop, { get: getter })
+}
+
+export default defineGetter

packages/test-utils/index.ts

@@ -0,0 +1,4 @@
+export * from './mock'
+export { default as defineGetter } from './define-getter'
+export { default as makeScroll } from './make-scroll'
+export { default as sleep } from './sleep'

packages/test-utils/make-scroll.ts

@@ -0,0 +1,10 @@
+import { sleep } from '@element-plus/test-utils'
+
+const makeScroll = async (dom: Element, name: 'scrollTop' | 'scrollLeft', offset: number) => {
+  dom[name] = offset
+  dom.dispatchEvent(new CustomEvent('scroll'))
+  // must use setTimeout instead of nextTick to wait dom change
+  return await sleep()
+}
+
+export default makeScroll

packages/test-utils/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@element-plus/test-utils",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "dependencies": {
+    "vue": "^3.0.0-rc.9",
+    "@vue/test-utils": "^2.0.0-beta.3"
+  }
+}

packages/test-utils/sleep.ts

@@ -0,0 +1,3 @@
+const sleep = (time = 0) => new Promise(resolve => setTimeout(resolve, time))
+
+export default sleep