test: add svg renderer testing. store run config in local

test/runTest/blacklist.js

@@ -17,7 +17,7 @@
 * under the License.
 */
 
-module.exports = [
+module.exports.blacklist = [
     '-cases.html',
     'geo-random-stream.html',
     'chord.html',
@@ -36,3 +36,10 @@ module.exports = [
     'lines-bus.html',
     'lines-stream-not-large.html'
 ];
+
+
+module.exports.SVGBlacklist = [
+    'bar-stream-large.html',
+    'bar-stream-large1.html',
+    'candlestick-large2.html'
+];
\ No newline at end of file

test/runTest/cli.js

@@ -34,13 +34,15 @@ program
     .option('--no-headless', 'Not headless')
     .option('-s, --speed <speed>', 'Playback speed')
     .option('--expected <expected>', 'Expected version')
-    .option('--actual <actual>', 'Actual version');
+    .option('--actual <actual>', 'Actual version')
+    .option('--renderer <renderer>', 'svg/canvas renderer');
 
 program.parse(process.argv);
 
 program.speed = +program.speed || 1;
 program.actual = program.actual || 'local';
 program.expected = program.expected || '4.2.1';
+program.renderer = (program.renderer || 'canvas').toLowerCase();
 
 if (!program.tests) {
     throw new Error('Tests are required');
@@ -155,7 +157,7 @@ async function runTestPage(browser, testOpt, version, runtimeCode, isExpected) {
 
     try {
         await page.setViewport({width: 800, height: 600});
-        await page.goto(`${origin}/test/${fileUrl}`, {
+        await page.goto(`${origin}/test/${fileUrl}?__RENDERER__=${program.renderer}`, {
             waitUntil: 'networkidle2',
             timeout: 10000
         });
@@ -191,6 +193,11 @@ async function writePNG(diffPNG, diffPath) {
 };
 
 async function runTest(browser, testOpt, runtimeCode, expectedVersion, actualVersion) {
+    if (program.renderer === 'svg' && testOpt.ignoreSVG) {
+        console.log(testOpt.name + ' don\'t support svg testing.');
+        return;
+    }
+
     testOpt.status === 'running';
     const expectedResult = await runTestPage(browser, testOpt, expectedVersion, runtimeCode, true);
     const actualResult = await runTestPage(browser, testOpt, actualVersion, runtimeCode, false);
@@ -229,6 +236,7 @@ async function runTest(browser, testOpt, runtimeCode, expectedVersion, actualVer
     testOpt.expectedErrors = expectedResult.errors;
     testOpt.actualVersion = actualVersion;
     testOpt.expectedVersion = expectedVersion;
+    testOpt.useSVG = program.renderer === 'svg';
     testOpt.lastRun = Date.now();
 }
 
@@ -244,7 +252,7 @@ async function runTests(pendingTests) {
 
     try {
         for (let testOpt of pendingTests) {
-            console.log('Running Test', testOpt.name);
+            console.log(`Running test: ${testOpt.name}, renderer: ${program.renderer}`);
             try {
                 await runTest(browser, testOpt, runtimeCode, program.expected, program.actual);
             }
@@ -269,6 +277,10 @@ runTests(program.tests.split(',').map(testName => {
         fileUrl: fileNameFromTest(testName),
         name: testName,
         results: [],
+        actualLogs: [],
+        expectedLogs: [],
+        actualErrors: [],
+        expectedErrors: [],
         status: 'pending'
     };
 }));
\ No newline at end of file

test/runTest/client/client.js

@@ -18,6 +18,7 @@
 */
 
 const socket = io('/client');
+const LOCAL_SAVE_KEY = 'visual-regression-testing-config';
 
 function processTestsData(tests, oldTestsData) {
     tests.forEach((test, idx) => {
@@ -74,6 +75,7 @@ const app = new Vue({
             replaySpeed: 5,
             actualVersion: 'local',
             expectedVersion: null,
+            renderer: 'canvas',
             threads: 1
         }
     },
@@ -209,6 +211,15 @@ const app = new Vue({
     }
 });
 
+// Save and restore
+try {
+    Object.assign(app.runConfig, JSON.parse(localStorage.getItem(LOCAL_SAVE_KEY)));
+}
+catch (e) {}
+app.$watch('runConfig', () => {
+    localStorage.setItem(LOCAL_SAVE_KEY, JSON.stringify(app.runConfig));
+}, {deep: true});
+
 function runTests(tests) {
     if (!tests.length) {
         app.$notify({
@@ -230,6 +241,7 @@ function runTests(tests) {
         expectedVersion: app.runConfig.expectedVersion,
         actualVersion: app.runConfig.actualVersion,
         threads: app.runConfig.threads,
+        renderer: app.runConfig.renderer,
         noHeadless: app.runConfig.noHeadless,
         replaySpeed: app.runConfig.noHeadless
             ? app.runConfig.replaySpeed

test/runTest/client/index.html

@@ -79,7 +79,7 @@ under the License.
                                 <el-slider style="width: 140px;" v-model="runConfig.threads" :step="1" :min="1" :max="8" show-stops></el-slider>
                             </div>
                             <div class="run-config-item">
-                                <span>Version </span>
+                                <span>Version</span>
                                 <span style="font-size: 12px; color:#afafaf">Expected</span>
                                 <el-select size="mini" v-model="runConfig.expectedVersion" placeholder="Select Version"
                                     style="width: 80px;"
@@ -93,6 +93,13 @@ under the License.
                                     <el-option v-for="version in versions" :key="version" :label="version" :value="version"></el-option>
                                 </el-select>
                             </div>
+                            <div class="run-config-item">
+                                <span>Renderer</span>
+                                <el-select size="mini" v-model="runConfig.renderer" placeholder="Select Renderer">
+                                    <el-option key="canvas" label="canvas" value="canvas"></el-option>
+                                    <el-option key="svg" label="svg" value="svg"></el-option>
+                                </el-select>
+                            </div>
                             <i slot="reference" class="el-icon-setting"></i>
                         </el-popover>
 

test/runTest/server.js

@@ -77,17 +77,11 @@ class Thread {
         this.onUpdate;
     }
 
-    fork(noHeadless, replaySpeed, actualVersion, expectedVersion) {
+    fork(extraArgs) {
         let p = fork(path.join(__dirname, 'cli.js'), [
             '--tests',
             this.tests.map(testOpt => testOpt.name).join(','),
-            '--speed',
-            replaySpeed || 5,
-            '--actual',
-            actualVersion,
-            '--expected',
-            expectedVersion,
-            ...(noHeadless ? ['--no-headless'] : [])
+            ...extraArgs
         ]);
         this.p = p;
 
@@ -116,7 +110,8 @@ function startTests(testsNameList, socket, {
     threadsCount,
     replaySpeed,
     actualVersion,
-    expectedVersion
+    expectedVersion,
+    renderer
 }) {
     console.log('Received: ', testsNameList.join(','));
 
@@ -160,7 +155,13 @@ function startTests(testsNameList, socket, {
         for (let i = 0; i < threadsCount; i++) {
             runningThreads[i].onExit = onExit;
             runningThreads[i].onUpdate = onUpdate;
-            runningThreads[i].fork(noHeadless, replaySpeed, actualVersion, expectedVersion);
+            runningThreads[i].fork([
+                '--speed', replaySpeed || 5,
+                '--actual', actualVersion,
+                '--expected', expectedVersion,
+                '--renderer', renderer,
+                ...(noHeadless ? ['--no-headless'] : [])
+            ]);
             runningCount++;
         }
         // If something bad happens and no proccess are started successfully
@@ -228,7 +229,8 @@ async function start() {
                         threadsCount: data.threads,
                         replaySpeed: data.replaySpeed,
                         actualVersion: data.actualVersion,
-                        expectedVersion: data.expectedVersion
+                        expectedVersion: data.expectedVersion,
+                        renderer: data.renderer
                     }
                 );
             }
@@ -289,7 +291,8 @@ async function start() {
                     threadsCount: 1,
                     replaySpeed: 2,
                     actualVersion: data.actualVersion,
-                    expectedVersion: data.expectedVersion
+                    expectedVersion: data.expectedVersion,
+                    renderer: data.renderer
                 });
             }
             catch (e) { console.error(e); }

test/runTest/store.js

@@ -23,11 +23,41 @@ const fs = require('fs');
 const glob = require('glob');
 const {testNameFromFile} = require('./util');
 const util = require('util');
-const blacklist = require('./blacklist');
+const {blacklist, SVGBlacklist} = require('./blacklist');
 
 let _tests = [];
 let _testsMap = {};
 
+class Test {
+    constructor(fileUrl) {
+        this.fileUrl = fileUrl;
+        this.name = testNameFromFile(fileUrl);
+
+        // If this test case ignore svg testing.
+        this.ignoreSVG = false;
+
+        this.status = 'unsettled';
+
+        // Run results
+        this.results = [];  // Screenshots
+
+        this.actualLogs = [];
+        this.expectedLogs = [];
+        this.actualErrors = [];
+        this.expectedErrors = [];
+
+        // Use echarts versions.
+        this.actualVersion = null;
+        this.expectedVersion = null;
+
+        // Last timestamp
+        this.lastRun = 0;
+
+        // Use SVG
+        this.useSVG = false;
+    }
+}
+
 function getCacheFilePath() {
     return path.join(__dirname, 'tmp/__cache__.json');;
 }
@@ -72,13 +102,8 @@ module.exports.updateTestsList = async function (setPendingTestToUnsettled) {
             return;
         }
 
-        let test = {
-            fileUrl,
-            name: testNameFromFile(fileUrl),
-            // Default status should be unkown
-            // status: 'pending',
-            results: []
-        };
+        let test = new Test(fileUrl);
+        test.ignoreSVG = SVGBlacklist.includes(fileUrl);
 
         _tests.push(test);
         _testsMap[fileUrl] = test;