test: fix some running status issue in visual regression testing tool

ea2c006f · pissang · abf9cb5c · ea2c006f · ea2c006f · ea2c006f
7 changed file
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -34,16 +34,17 @@
    "estraverse": "4.1.1",
    "fs-extra": "0.26.7",
    "glob": "7.0.0",
-    "pixelmatch": "^5.0.2",
-    "pngjs": "^3.4.0",
+    "open": "6.4.0",
+    "pixelmatch": "5.0.2",
+    "pngjs": "3.4.0",
    "rollup": "0.50.0",
-    "rollup-plugin-commonjs": "^8.4.1",
+    "rollup-plugin-commonjs": "8.4.1",
    "rollup-plugin-node-resolve": "3.0.0",
    "rollup-plugin-uglify": "2.0.1",
-    "seedrandom": "^3.0.3",
-    "semver": "^6.3.0",
-    "serve-handler": "^6.1.1",
-    "slugify": "^1.3.4",
-    "socket.io": "^2.2.0"
+    "seedrandom": "3.0.3",
+    "semver": "6.3.0",
+    "serve-handler": "6.1.1",
+    "slugify": "1.3.4",
+    "socket.io": "2.2.0"
  }
 }
--- a/test/runTest/cli.js
+++ b/test/runTest/cli.js
@@ -63,7 +63,7 @@ function getClientRelativePath(absPath) {
 function replaceEChartsVersion(interceptedRequest, version) {
    // TODO Extensions and maps
    if (interceptedRequest.url().endsWith('dist/echarts.js')) {
-        console.log(getVersionDir(version));
+        console.log('Use echarts version: ' + getVersionDir(version));
        interceptedRequest.continue({
            url: `${origin}/test/runTest/${getVersionDir(version)}/echarts.js`
        });
@@ -269,6 +269,6 @@ runTests(program.tests.split(',').map(testName => {
        fileUrl: fileNameFromTest(testName),
        name: testName,
        results: [],
-        status: 'unsettled'
+        status: 'pending'
    };
 }));
\ No newline at end of file
--- a/test/runTest/client/client.js
+++ b/test/runTest/client/client.js
@@ -258,7 +258,7 @@ socket.on('update', msg => {
        }).catch(() => {});
    }
    // TODO
-    // app.running = !!msg.running;
+    app.running = !!msg.running;
    app.fullTests = processTestsData(msg.tests, app.fullTests);

    firstUpdate = false;
@@ -274,6 +274,14 @@ socket.on('finish', res => {
    console.log(`${res.count} test complete, Cost: ${(res.time / 1000).toFixed(1)} s. Threads: ${res.threads}`);
    app.running = false;
 });
+socket.on('abort', res => {
+    app.$notify({
+        type: 'info',
+        title: `Aborted`,
+        duration: 4000
+    });
+    app.running = false;
+});
 socket.on('versions', versions => {
    app.versions = versions.filter(version => {
        return !version.startsWith('2.')

--- a/test/runTest/client/index.html
+++ b/test/runTest/client/index.html
@@ -24,6 +24,8 @@ under the License.
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="shortcut icon" href="https://www.echartsjs.com/zh/images/favicon.png">
+    <title>Visual Regression Testing Tool</title>
 </head>
 <body>
 <div id="app" style="display: none">
@@ -31,7 +33,7 @@ under the License.
        <el-header class="header" height="50">
            <div id="logo">
                <img src="https://echarts.apache.org/zh/images/logo.png" />
-                <h1>Visual Regression Test</h1>
+                <h1>Visual Regression Testing Tool</h1>
            </div>
        </el-header>
        <el-container style="min-height: 0"> <!-- https://juejin.im/post/5c642f2ff265da2de660ecfc -->

--- a/test/runTest/server.js
+++ b/test/runTest/server.js
@@ -28,6 +28,7 @@ const {getTestsList, updateTestsList, saveTestsList, mergeTestsResults, updateAc
 const {prepareEChartsLib, getActionsFullPath, fetchVersions} = require('./util');
 const fse = require('fs-extra');
 const fs = require('fs');
+const open = require('open');

 function serve() {
    const server = http.createServer((request, response) => {
@@ -51,6 +52,7 @@ function serve() {

 let runningThreads = [];
 let pendingTests;
+let aborted = false;

 function stopRunningTests() {
    if (runningThreads) {
@@ -131,18 +133,23 @@ function startTests(testsNameList, socket, {
            testOpt.results = [];
        });

-        socket.emit('update', {tests: getTestsList()});
+        if (!aborted) {
+            socket.emit('update', {tests: getTestsList(), running: true});
+        }

        let runningCount = 0;
        function onExit() {
            runningCount--;
            if (runningCount === 0) {
+                runningThreads = [];
                resolve();
            }
        }
        function onUpdate() {
            // Merge tests.
-            socket.emit('update', {tests: getTestsList(), running: true});
+            if (!aborted) {
+                socket.emit('update', {tests: getTestsList(), running: true});
+            }
        }
        threadsCount = Math.min(threadsCount, pendingTests.length);
        // Assigning tests to threads
@@ -180,7 +187,10 @@ async function start() {
        return;
    }

-    let versions = await fetchVersions();
+    let [versions] = await Promise.all([
+        fetchVersions(),
+        updateTestsList(true)
+    ]);

    // let runtimeCode = await buildRuntimeCode();
    // fse.outputFileSync(path.join(__dirname, 'tmp/testRuntime.js'), runtimeCode, 'utf-8');
@@ -191,20 +201,28 @@ async function start() {
    io.of('/client').on('connect', async socket => {
        await updateTestsList();

-        socket.emit('update', {tests: getTestsList()});
+        socket.emit('update', {
+            tests: getTestsList(),
+            running: runningThreads.length > 0
+        });

        socket.on('run', async data => {

            let startTime = Date.now();
+            aborted = false;

            await prepareEChartsLib(data.expectedVersion); // Expected version.
            await prepareEChartsLib(data.actualVersion); // Version to test

+            if (aborted) {  // If it is aborted when downloading echarts lib.
+                return;
+            }
+
            // TODO Should broadcast to all sockets.
            try {
                await startTests(
                    data.tests,
-                    socket,
+                    io.of('/client'),
                    {
                        noHeadless: data.noHeadless,
                        threadsCount: data.threads,
@@ -214,16 +232,26 @@ async function start() {
                    }
                );
            }
-            catch (e) { console.error(e); }
-            console.log('Finished');
-            socket.emit('finish', {
-                time: Date.now() - startTime,
-                count: data.tests.length,
-                threads: data.threads
-            });
+            catch (e) {
+                console.error(e);
+            }
+
+            if (!aborted) {
+                console.log('Finished');
+                io.of('/client').emit('finish', {
+                    time: Date.now() - startTime,
+                    count: data.tests.length,
+                    threads: data.threads
+                });
+            }
+            else {
+                console.log('Aborted!');
+            }
        });
        socket.on('stop', () => {
            stopRunningTests();
+            io.of('/client').emit('abort');
+            aborted = true;
        });

        socket.emit('versions', versions);
@@ -280,8 +308,8 @@ async function start() {
    });

    console.log(`Dashboard: ${origin}/test/runTest/client/index.html`);
-    // console.log(`Interaction Recorder: ${origin}/test/runTest/recorder/index.html`);
-    // open(`${origin}/test/runTest/client/index.html`);
+    console.log(`Interaction Recorder: ${origin}/test/runTest/recorder/index.html`);
+    open(`${origin}/test/runTest/client/index.html`);

 }


--- a/test/runTest/store.js
+++ b/test/runTest/store.js
@@ -40,7 +40,7 @@ module.exports.getTestByFileUrl = function (url) {
    return _testsMap[url];
 };

-module.exports.updateTestsList = async function () {
+module.exports.updateTestsList = async function (setPendingTestToUnsettled) {
    let tmpFolder = path.join(__dirname, 'tmp');
    fse.ensureDirSync(tmpFolder);
    _tests = [];
@@ -51,8 +51,10 @@ module.exports.updateTestsList = async function () {
        _tests.forEach(test => {
            // In somehow tests are stopped and leave the status pending.
            // Set the status to unsettled again.
-            if (test.status === 'pending') {
-                test.status = 'unsettled';
+            if (setPendingTestToUnsettled) {
+                if (test.status === 'pending') {
+                    test.status = 'unsettled';
+                }
            }
            _testsMap[test.fileUrl] = test;
        });