test: support mousewheel event record and replay

src/chart/bar/BarView.js

@@ -196,7 +196,7 @@ export default echarts.extendChartView({
             this.group.setClipPath(clipPath);
         }
         else {
-            this.group.removeClipPath(null);
+            this.group.removeClipPath();
         }
     },
 
@@ -258,7 +258,7 @@ var clip = {
         layout.width = x2 - x;
         layout.height = y2 - y;
 
-        var clipped = layout.width < 0 || layout.height < 0;;
+        var clipped = layout.width < 0 || layout.height < 0;
 
         // Reverse back
         if (signWidth < 0) {

test/runTest/Timeline.js

@@ -29,6 +29,8 @@ module.exports = class Timeline {
 
         this._ops = [];
         this._currentOpIndex = 0;
+
+        this._client;
     }
 
     _reset() {
@@ -39,6 +41,10 @@ module.exports = class Timeline {
 
 
     async runAction(action, takeScreenshot, playbackSpeed) {
+        if (!this._client) {
+            this._client = await this._page.target().createCDPSession();
+        }
+
         this.stop();
 
         playbackSpeed = playbackSpeed || 1;
@@ -108,6 +114,32 @@ module.exports = class Timeline {
             case 'mousemove':
                 await page.mouse.move(op.x, op.y);
                 break;
+            case 'mousewheel':
+                await page.evaluate((x, y, deltaX, deltaY) => {
+                    let element = document.elementFromPoint(x, y);
+                    // Here dispatch mousewheel event because echarts used it.
+                    // TODO Consider upgrade?
+                    let event = new WheelEvent('mousewheel', {
+                        // PENDING
+                        // Needs inverse delta?
+                        deltaY,
+                        clientX: x, clientY: y,
+                        // Needs bubble to parent container
+                        bubbles: true
+                    });
+
+                    element.dispatchEvent(event);
+                }, op.x, op.y, op.deltaX || 0, op.deltaY);
+
+                // console.log('mousewheel', op.x, op.y, op.deltaX, op.deltaY);
+                // await this._client.send('Input.dispatchMouseEvent', {
+                //     type: 'mouseWheel',
+                //     x: op.x,
+                //     y: op.y,
+                //     deltaX: op.deltaX,
+                //     deltaY: op.deltaY
+                // });
+                // break;
             case 'screenshot':
                 await takeScreenshot();
                 break;

test/runTest/recorder/recorder.js

@@ -143,6 +143,7 @@ const app = new Vue({
                 if (action) {
                     action.ops = [];
                 }
+                saveData();
             }).catch(e => {});
         },
 
@@ -240,6 +241,10 @@ function keyboardRecordingHandler(e) {
     }
 }
 
+function sign(value) {
+    return value > 0 ? 1 : -1;
+}
+
 function recordIframeEvents(iframe, app) {
     let innerDocument = iframe.contentWindow.document;
 
@@ -247,12 +252,23 @@ function recordIframeEvents(iframe, app) {
     function addMouseOp(type, e) {
         if (app.recordingAction) {
             let time = getEventTime();
-            app.recordingAction.ops.push({
+            let op = {
                 type,
                 time: time,
                 x: e.clientX,
                 y: e.clientY
-            });
+            };
+            app.recordingAction.ops.push(op);
+            if (type === 'mousewheel') {
+                // TODO Sreenshot after mousewheel?
+                op.deltaY = e.deltaY;
+
+                // In a reversed direction.
+                // When creating WheelEvent, the sign of wheelData and deltaY are same
+                if (sign(e.wheelDelta) !== sign(e.deltaY)) {
+                    op.deltaY = -op.deltaY;
+                }
+            }
             if (type === 'mouseup' && app.config.screenshotAfterMouseUp) {
                 // Add a auto screenshot after mouseup
                 app.recordingAction.ops.push({
@@ -288,6 +304,10 @@ function recordIframeEvents(iframe, app) {
         }
         preventRecordingFollowingMouseEvents = false;
     }, true);
+    iframe.contentWindow.addEventListener('mousewheel', e => {
+        console.log(e);
+        addMouseOp('mousewheel', e);
+    }, true);
 
 
     innerDocument.body.addEventListener('change', e => {