test(visual): fix progressive rendering in VST

test/lib/frameInsight.js

@@ -43,12 +43,17 @@
         addEventListener: global.addEventListener
     };
 
-    var now = global.performance
-        // performance.now has higer accuracy.
-        ? performance.now.bind(performance)
-        : function () {
-            return +new Date();
-        };
+    // var now = global.performance
+    //     // performance.now has higer accuracy.
+    //     ? performance.now.bind(performance)
+    //     : function () {
+    //         return +new Date();
+    //     };
+
+    // performance.now is not mocked in the visual regression test. Always use Date.now
+    var now = function () {
+        return Date.now();
+    };
 
     instrumentBase();
 

test/runTest/cli.js

@@ -24,7 +24,7 @@ const fs = require('fs');
 const path = require('path');
 const program = require('commander');
 const compareScreenshot = require('./compareScreenshot');
-const {testNameFromFile, fileNameFromTest, getVersionDir, buildRuntimeCode, getEChartsTestFileName, waitTime} = require('./util');
+const {testNameFromFile, fileNameFromTest, getVersionDir, buildRuntimeCode, getEChartsTestFileName} = require('./util');
 const {origin} = require('./config');
 const cwebpBin = require('cwebp-bin');
 const { execFile } = require('child_process');

test/runTest/client/client.js

@@ -419,7 +419,7 @@ function runTests(tests, noHeadless) {
         threads: app.runConfig.threads,
         renderer: app.runConfig.renderer,
         noHeadless,
-        replaySpeed: noHeadless ? 2 : 5
+        replaySpeed: noHeadless ? 5 : 5
     });
 }
 

test/runTest/runtime/timeline.js

@@ -131,8 +131,15 @@ function flushIntervalHandlers() {
 const NativeDate = window.Date;
 
 const mockNow = function () {
+    // // Use same time in one frame.
+    // var realFrameTime = NativeDate.now();
+    // // Split frame. Add 8ms offset on the second half
+    // // Avoid infinite loop when some logic determine whether to break the loop based on the execution time.
+    // // For example https://github.com/apache/echarts/blob/737e23c0054e6b501ecc6f562920cffae953b5c6/src/core/echarts.ts#L537
+    // var frameDeltaTime = realFrameTime - realFrameStartTime;
+    var frameDeltaTime = 0;
     // Use same time in one frame.
-    return TIMELINE_START + timelineTime * window.__VST_PLAYBACK_SPEED__;
+    return TIMELINE_START + (timelineTime + frameDeltaTime) * window.__VST_PLAYBACK_SPEED__;
 };
 function MockDate(...args) {
     if (!args.length) {
@@ -145,9 +152,10 @@ function MockDate(...args) {
 MockDate.prototype = Object.create(NativeDate.prototype);
 Object.setPrototypeOf(MockDate, NativeDate);
 MockDate.now = mockNow;
-
 window.Date = MockDate;
 
+// TODO Do we need to mock performance? Or leave some API that can keep real.
+
 
 export function start() {
     window.__VST_TIMELINE_PAUSED__ = false;

test/runTest/util.js

@@ -27,7 +27,11 @@ const commonjs = require('@rollup/plugin-commonjs');
 const config = require('./config');
 
 function modifyEChartsCode(code) {
-    return code.replace(/Math.random/g, '__random__inner__');
+    return code.replace(/Math\.random/g, '__random__inner__')
+        // https://github.com/apache/echarts/blob/737e23c0054e6b501ecc6f562920cffae953b5c6/src/core/echarts.ts#L537
+        // This code will cause infinite loop if we reduce the precision of Date in the visual regression test.
+        // TODO: This is a very dirty HACK.
+        .replace('remainTime > 0', 'false');
 }
 
 module.exports.testNameFromFile = function(fileName) {
@@ -53,20 +57,22 @@ module.exports.getEChartsTestFileName = function () {
 };
 
 module.exports.prepareEChartsLib = function (version) {
-    let versionFolder = path.join(__dirname, getVersionDir(version));
+
+    const versionFolder = path.join(__dirname, getVersionDir(version));
+    const ecDownloadPath = `${versionFolder}/echarts.js`;
     fse.ensureDirSync(versionFolder);
     if (!version || version === 'local') {
         // Developing version, make sure it's new build
         fse.copySync(path.join(__dirname, '../../dist/echarts.js'), `${versionFolder}/echarts.js`);
-        let code = modifyEChartsCode(fs.readFileSync(`${versionFolder}/echarts.js`, 'utf-8'));
+        let code = modifyEChartsCode(fs.readFileSync(ecDownloadPath, 'utf-8'));
         fs.writeFileSync(`${versionFolder}/${module.exports.getEChartsTestFileName()}`, code, 'utf-8');
-        return Promise.resolve();
 
+        return Promise.resolve();
     }
     return new Promise(resolve => {
-        let testLibPath = `${versionFolder}/${module.exports.getEChartsTestFileName()}`;
-        if (!fs.existsSync(testLibPath)) {
-            const file = fs.createWriteStream(`${versionFolder}/echarts.js`);
+        const testLibPath = `${versionFolder}/${module.exports.getEChartsTestFileName()}`;
+        if (!fs.existsSync(ecDownloadPath)) {
+            const file = fs.createWriteStream();
             const isNightly = version.includes('-dev');
             const packageName = isNightly ? 'echarts-nightly' : 'echarts'
 
@@ -75,13 +81,17 @@ module.exports.prepareEChartsLib = function (version) {
                 response.pipe(file);
 
                 file.on('finish', () => {
-                    let code = modifyEChartsCode(fs.readFileSync(`${versionFolder}/echarts.js`, 'utf-8'));
+                    let code = modifyEChartsCode(fs.readFileSync(ecDownloadPath, 'utf-8'));
                     fs.writeFileSync(testLibPath, code, 'utf-8');
                     resolve();
                 });
             });
         }
         else {
+            // Always do code modifaction.
+            // In case we need to do replacement on old downloads.
+            let code = modifyEChartsCode(fs.readFileSync(ecDownloadPath, 'utf-8'));
+            fs.writeFileSync(testLibPath, code, 'utf-8');
             resolve();
         }
     });

test/stream-basic.js

@@ -23,6 +23,7 @@
     var _recordContainer;
     var CELL_MAX = 160;
 
+
     if (window.Canteen) {
         window.Canteen.globals.STACK_SIZE = 100000000;
     }

test/stream-basic1.html

@@ -55,7 +55,7 @@ under the License.
 
             var count = 5000;
             var lineCount = 100;
-            var progressive = 50;
+            var progressive = 100;
             var data = [];
             var yCurr = 5;
             for (var i = 0; i < count; i++) {