From 9c6b3c1970679248494b9928e430df26aed2ae82 Mon Sep 17 00:00:00 2001 From: haoziqaq <357229046@qq.com> Date: Sat, 8 May 2021 16:40:23 +0800 Subject: [PATCH] fix(ui/ripple): fix ripple repeat call remove ripple task, ripple unit test complete affects: @varlet/ui --- .../__snapshots__/index.spec.js.snap | 2 +- .../__snapshots__/index.spec.js.snap | 46 ++++++++++++ .../src/popup/__tests__/index.spec.js | 7 ++ .../__snapshots__/index.spec.js.snap | 10 +++ .../src/ripple/__tests__/index.spec.js | 74 +++++++++++++++++++ packages/varlet-ui/src/ripple/index.ts | 1 - packages/varlet-ui/src/utils/jest.ts | 10 +++ 7 files changed, 148 insertions(+), 2 deletions(-) create mode 100644 packages/varlet-ui/src/ripple/__tests__/__snapshots__/index.spec.js.snap create mode 100644 packages/varlet-ui/src/ripple/__tests__/index.spec.js diff --git a/packages/varlet-ui/src/collapse/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/collapse/__tests__/__snapshots__/index.spec.js.snap index dea78b65784..0d1d5916229 100644 --- a/packages/varlet-ui/src/collapse/__tests__/__snapshots__/index.spec.js.snap +++ b/packages/varlet-ui/src/collapse/__tests__/__snapshots__/index.spec.js.snap @@ -23,7 +23,7 @@ exports[`tes collapse offset and collapse icon 1`] = ` " `; -exports[`test collapseItem example 1`] = ` +exports[`test collapse example 1`] = ` "
基本使用
diff --git a/packages/varlet-ui/src/popup/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/popup/__tests__/__snapshots__/index.spec.js.snap index c5fd8c3fb71..09865f701eb 100644 --- a/packages/varlet-ui/src/popup/__tests__/__snapshots__/index.spec.js.snap +++ b/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`] = ` +"
弹出位置
+ + + + + + + + + + +
遮罩层样式
+ + + + +
注册事件
+ +" +`; + exports[`test popup show 1`] = ` "
diff --git a/packages/varlet-ui/src/popup/__tests__/index.spec.js b/packages/varlet-ui/src/popup/__tests__/index.spec.js index f9744a3bf3c..ec52cfdd3c4 100644 --- a/packages/varlet-ui/src/popup/__tests__/index.spec.js +++ b/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() diff --git a/packages/varlet-ui/src/ripple/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/ripple/__tests__/__snapshots__/index.spec.js.snap new file mode 100644 index 00000000000..4d1ce24d80f --- /dev/null +++ b/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`] = ` +"
基本使用
+
点击
+
自定义颜色
+
点击
+
禁用状态
+
点击
" +`; diff --git a/packages/varlet-ui/src/ripple/__tests__/index.spec.js b/packages/varlet-ui/src/ripple/__tests__/index.spec.js new file mode 100644 index 00000000000..0d7d1fd8b3c --- /dev/null +++ b/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: ` +
+ `, +} + +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() +}) diff --git a/packages/varlet-ui/src/ripple/index.ts b/packages/varlet-ui/src/ripple/index.ts index 0c02fbdca5d..47dc2a9eef1 100644 --- a/packages/varlet-ui/src/ripple/index.ts +++ b/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) { diff --git a/packages/varlet-ui/src/utils/jest.ts b/packages/varlet-ui/src/utils/jest.ts index 62b425b91cf..ce23f35acf3 100644 --- a/packages/varlet-ui/src/utils/jest.ts +++ b/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