From a8a8393082171f1ac7b1f1af1ae2b251ece0e5ee Mon Sep 17 00:00:00 2001 From: zengyue Date: Sun, 8 Oct 2023 11:33:50 +0800 Subject: [PATCH] =?UTF-8?q?test(render):=20=E6=B7=BB=E5=8A=A0=20svg=20?= =?UTF-8?q?=E5=92=8C=20webgl=20=E4=BA=8B=E4=BB=B6=E7=9A=84=E5=8D=95?= =?UTF-8?q?=E6=B5=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../f-engine/test/canvas/svg/svg.test.tsx | 30 ++++++++++++++++++- .../f-engine/test/canvas/webgl/webgl.test.tsx | 19 ++++++++++++ 2 files changed, 48 insertions(+), 1 deletion(-) diff --git a/packages/f-engine/test/canvas/svg/svg.test.tsx b/packages/f-engine/test/canvas/svg/svg.test.tsx index b4af444a..b49aab11 100644 --- a/packages/f-engine/test/canvas/svg/svg.test.tsx +++ b/packages/f-engine/test/canvas/svg/svg.test.tsx @@ -1,5 +1,6 @@ import { jsx, Canvas } from '../../../src'; import { Renderer } from '@antv/g-mobile-svg'; +import { delay, gestureSimulator } from '../../util'; const container = document.createElement('div'); container.style.width = '300px'; @@ -9,14 +10,24 @@ document.body.appendChild(container); describe('svg', () => { it('svg renderer', async () => { const renderer = new Renderer(); + const onPan = jest.fn(); + const onClick = jest.fn(); const { props } = ( - + e.type.startsWith('touch')} + > ); @@ -28,5 +39,22 @@ describe('svg', () => { expect(dataURL).toBe( 'data:image/svg+xml;charset=utf8,%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22200%22%20color-interpolation-filters%3D%22sRGB%22%20style%3D%22background%3A%20transparent%3B%22%3E%3Cdefs%2F%3E%3Cg%20id%3D%22g-svg-camera%22%20transform%3D%22matrix(1%2C0%2C0%2C1%2C0%2C0)%22%3E%3Cg%20id%3D%22g-root%22%20fill%3D%22none%22%20stroke%3D%22none%22%20visibility%3D%22visible%22%20font-size%3D%2212px%22%20font-family%3D%22%26quot%3BHelvetica%20Neue%26quot%3B%2C%20Helvetica%2C%20%26quot%3BPingFang%20SC%26quot%3B%2C%20%26quot%3BHiragino%20Sans%20GB%26quot%3B%2C%20%26quot%3BMicrosoft%20YaHei%26quot%3B%2C%20Arial%2C%20sans-serif%22%20font-style%3D%22normal%22%20font-weight%3D%22normal%22%20font-variant%3D%22normal%22%20text-anchor%3D%22left%22%20stroke-dashoffset%3D%220px%22%20transform%3D%22matrix(1%2C0%2C0%2C1%2C0%2C0)%22%3E%3Cg%20transform%3D%22matrix(1%2C0%2C0%2C1%2C0%2C0)%22%3E%3Cpath%20id%3D%22g-svg-1%22%20fill%3D%22rgba(255%2C0%2C0%2C1)%22%20d%3D%22M%200%2C0%20l%20100%2C0%20l%200%2C100%20l-100%200%20z%22%20stroke%3D%22none%22%20width%3D%22100px%22%20height%3D%22100px%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E', ); + + // @ts-ignore + const svgDomElement = canvas.canvas.getContextService().getDomElement(); + + await delay(200); + await gestureSimulator(svgDomElement, 'touchstart', { x: 60, y: 60 }); + await gestureSimulator(svgDomElement, 'touchmove', { x: 62, y: 80 }); + await gestureSimulator(svgDomElement, 'touchend', { x: 62, y: 80 }); + await delay(500); + + expect(onPan.mock.calls.length).toBe(1); + // move不触发click事件 + expect(onClick.mock.calls.length).toBe(0); + + await delay(100); + gestureSimulator(svgDomElement, 'click', { x: 60, y: 60 }); + expect(onClick.mock.calls.length).toBe(1); }); }); diff --git a/packages/f-engine/test/canvas/webgl/webgl.test.tsx b/packages/f-engine/test/canvas/webgl/webgl.test.tsx index a95b7030..af5b10cd 100644 --- a/packages/f-engine/test/canvas/webgl/webgl.test.tsx +++ b/packages/f-engine/test/canvas/webgl/webgl.test.tsx @@ -1,5 +1,6 @@ import { jsx, Canvas } from '../../../src'; import { Renderer } from '@antv/g-mobile-webgl'; +import { delay, gestureSimulator } from '../../util'; const canvasEl = document.createElement('canvas'); canvasEl.style.display = 'block'; @@ -12,6 +13,8 @@ const context = canvasEl.getContext('webgl'); describe('webgl', () => { it('webgl renderer', async () => { const renderer = new Renderer(); + const onPan = jest.fn(); + const onClick = jest.fn(); const { props } = ( { height: '200px', fill: 'red', }} + onPan={onPan} + onClick={onClick} /> ); const canvas = new Canvas(props); await canvas.render(); + + await delay(500); + gestureSimulator(canvasEl, 'touchstart', { x: 60, y: 60 }); + gestureSimulator(canvasEl, 'touchmove', { x: 62, y: 80 }); + gestureSimulator(canvasEl, 'touchend', { x: 62, y: 80 }); + await delay(500); + + expect(onPan.mock.calls.length).toBe(1); + // move不触发click事件 + expect(onClick.mock.calls.length).toBe(0); + + await delay(100); + gestureSimulator(canvasEl, 'click', { x: 60, y: 60 }); + expect(onClick.mock.calls.length).toBe(1); }); });