fix(ui/ripple): fix ripple repeat call remove ripple task, ripple uni…

…t test complete

affects: @varlet/ui

packages/varlet-ui/src/collapse/__tests__/__snapshots__/index.spec.js.snap

@@ -23,7 +23,7 @@ exports[`tes collapse offset and collapse icon 1`] = `
 </div>"
 `;
 
-exports[`test collapseItem example 1`] = `
+exports[`test collapse example 1`] = `
 "<div class=\\"collapse-demo\\">
   <div>
     <div class=\\"app-type\\">基本使用</div>

packages/varlet-ui/src/popup/__tests__/__snapshots__/index.spec.js.snap

@@ -1,5 +1,51 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`test popup example 1`] = `
+"<div class=\\"app-type\\">弹出位置</div><button class=\\"var-button var--box var-button--normal var--flex var-button--primary var-elevation--1 mt-10\\" style=\\"width: 100%;\\">
+  <!--v-if-->
+  <div class=\\"var-button__content\\">居中弹出</div>
+</button><button class=\\"var-button var--box var-button--normal var--flex var-button--primary var-elevation--1 mt-10\\" style=\\"width: 100%;\\">
+  <!--v-if-->
+  <div class=\\"var-button__content\\">下方弹出</div>
+</button><button class=\\"var-button var--box var-button--normal var--flex var-button--primary var-elevation--1 mt-10\\" style=\\"width: 100%;\\">
+  <!--v-if-->
+  <div class=\\"var-button__content\\">上方弹出</div>
+</button><button class=\\"var-button var--box var-button--normal var--flex var-button--primary var-elevation--1 mt-10\\" style=\\"width: 100%;\\">
+  <!--v-if-->
+  <div class=\\"var-button__content\\">左侧弹出</div>
+</button><button class=\\"var-button var--box var-button--normal var--flex var-button--primary var-elevation--1 mt-10\\" style=\\"width: 100%;\\">
+  <!--v-if-->
+  <div class=\\"var-button__content\\">右侧弹出</div>
+</button>
+<!--teleport start-->
+<!--teleport end-->
+<!--teleport start-->
+<!--teleport end-->
+<!--teleport start-->
+<!--teleport end-->
+<!--teleport start-->
+<!--teleport end-->
+<!--teleport start-->
+<!--teleport end-->
+<div class=\\"app-type\\">遮罩层样式</div><button class=\\"var-button var--box var-button--normal var--flex var-button--primary var-elevation--1 mt-10\\" style=\\"width: 100%;\\">
+  <!--v-if-->
+  <div class=\\"var-button__content\\">遮罩层class</div>
+</button>
+<!--teleport start-->
+<!--teleport end--><button class=\\"var-button var--box var-button--normal var--flex var-button--primary var-elevation--1 mt-10\\" style=\\"width: 100%;\\">
+  <!--v-if-->
+  <div class=\\"var-button__content\\">遮罩层style</div>
+</button>
+<!--teleport start-->
+<!--teleport end-->
+<div class=\\"app-type\\">注册事件</div><button class=\\"var-button var--box var-button--normal var--flex var-button--primary var-elevation--1 mt-10\\" style=\\"width: 100%;\\">
+  <!--v-if-->
+  <div class=\\"var-button__content\\">注册事件</div>
+</button>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
 exports[`test popup show 1`] = `
 "<div class=\\"container\\">
   <!--teleport start-->

packages/varlet-ui/src/popup/__tests__/index.spec.js

@@ -1,8 +1,15 @@
+import example from '../example'
 import Popup from '..'
 import VarPopup from '../Popup'
 import { mount } from '@vue/test-utils'
 import { createApp } from 'vue'
 
+test('test popup example', () => {
+  const wrapper = mount(example)
+  expect(wrapper.html()).toMatchSnapshot()
+  wrapper.unmount()
+})
+
 test('test popup plugin', () => {
   const app = createApp({}).use(Popup)
   expect(app.component(Popup.name)).toBeTruthy()

packages/varlet-ui/src/ripple/__tests__/__snapshots__/index.spec.js.snap

@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test ripple example 1`] = `
+"<div class=\\"app-type\\">基本使用</div>
+<div class=\\"block var-elevation--2\\">点击</div>
+<div class=\\"app-type\\">自定义颜色</div>
+<div class=\\"block var-elevation--2\\">点击</div>
+<div class=\\"app-type\\">禁用状态</div>
+<div class=\\"block var-elevation--2\\">点击</div>"
+`;

packages/varlet-ui/src/ripple/__tests__/index.spec.js

@@ -0,0 +1,74 @@
+import example from '../example'
+import Ripple from '..'
+import { mount } from '@vue/test-utils'
+import { createApp } from 'vue'
+import { delay, mockOffset, trigger, triggerDrag } from '../../utils/jest'
+
+mockOffset()
+
+test('test ripple example', () => {
+  const wrapper = mount(example)
+  expect(wrapper.html()).toMatchSnapshot()
+  wrapper.unmount()
+})
+
+test('test ripple plugin', () => {
+  const app = createApp({}).use(Ripple)
+  expect(app.directive('ripple')).toBeTruthy()
+})
+
+const Wrapper = {
+  directives: { Ripple },
+  data: () => ({
+    color: 'yellow',
+    disabled: false,
+  }),
+  template: `
+    <div class="ripple-container" style="width: 100px; height: 100px" v-ripple="{ color, disabled }"></div>
+  `,
+}
+
+test('test ripple show & hide', async () => {
+  const wrapper = mount(Wrapper, { attachTo: document.body })
+  await trigger(wrapper, 'touchstart')
+  await delay(60)
+  expect(wrapper.find('.var-ripple').exists()).toBeTruthy()
+
+  await trigger(wrapper, 'touchend')
+  await delay(1000)
+  expect(wrapper.find('.var-ripple').exists()).toBeFalsy()
+  wrapper.unmount()
+})
+
+test('test ripple update & color', async () => {
+  const wrapper = mount(Wrapper, { attachTo: document.body })
+  await wrapper.setData({ color: 'green' })
+
+  await trigger(wrapper, 'touchstart')
+  await delay(60)
+  expect(wrapper.find('.var-ripple').exists()).toBeTruthy()
+  expect(wrapper.find('.var-ripple').element.style.backgroundColor).toBe('green')
+
+  wrapper.unmount()
+})
+
+test('test ripple disabled', async () => {
+  const wrapper = mount(Wrapper, { attachTo: document.body })
+  await wrapper.setData({ disabled: true })
+
+  await trigger(wrapper, 'touchstart')
+  await delay(60)
+  expect(wrapper.find('.var-ripple').exists()).toBeFalsy()
+
+  wrapper.unmount()
+})
+
+test('test ripple touchmove', async () => {
+  const wrapper = mount(Wrapper, { attachTo: document.body })
+
+  await triggerDrag(wrapper, 0, 20)
+  await delay(60)
+  expect(wrapper.find('.var-ripple').exists()).toBeFalsy()
+
+  wrapper.unmount()
+})

packages/varlet-ui/src/ripple/index.ts

@@ -109,7 +109,6 @@ function removeRipple(this: RippleHTMLElement) {
   }
 
   _ripple.tasker ? setTimeout(task, 60) : task()
-  task()
 }
 
 function forbidRippleTask(this: RippleHTMLElement) {

packages/varlet-ui/src/utils/jest.ts

@@ -60,6 +60,16 @@ export function mockOffset() {
         return parseFloat(window.getComputedStyle(this).height) || 0
       },
     },
+    clientWidth: {
+      get() {
+        return parseFloat(window.getComputedStyle(this).width) || 0
+      },
+    },
+    clientHeight: {
+      get() {
+        return parseFloat(window.getComputedStyle(this).height) || 0
+      },
+    },
     offsetLeft: {
       get() {
         return parseFloat(window.getComputedStyle(this).marginLeft) || 0