test(render): 添加 svg 和 webgl 事件的单测

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 } = (
-      <Canvas renderer={renderer} container={container} width={300} height={200}>
+      <Canvas
+        renderer={renderer}
+        container={container}
+        width={300}
+        height={200}
+        isTouchEvent={(e) => e.type.startsWith('touch')}
+      >
         <rect
           style={{
             width: '200px',
             height: '200px',
             fill: 'red',
           }}
+          onPan={onPan}
+          onClick={onClick}
         />
       </Canvas>
     );
@@ -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);
   });
 });

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 } = (
       <Canvas renderer={renderer} context={context}>
         <rect
@@ -20,11 +23,27 @@ describe('webgl', () => {
             height: '200px',
             fill: 'red',
           }}
+          onPan={onPan}
+          onClick={onClick}
         />
       </Canvas>
     );
 
     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);
   });
 });