test(visual): optimize style. fetch version from jsdelivr

test/runTest/client/client.css

@@ -79,20 +79,17 @@
     z-index: 1;
     width: 100%;
     padding: 5px 20px;
+
+    background: #896bda;
+    box-shadow: 0 0 20px rgb(0 0 0 / 20%);
+    border-bottom: none;
 }
 
 .test-run-controls>* {
     display: inline-block;
     vertical-align: middle;
 }
-.test-run-controls .el-checkbox {
-    margin-right: 2px;
-}
-.nav-toolbar .el-icon-setting {
-    font-size: 20px;
-    margin-left: 5px;
-    cursor: pointer;
-}
+
 .nav-toolbar .el-button {
     padding-left: 8px;
     padding-right: 8px;
@@ -105,7 +102,15 @@
     display: inline-block;
     vertical-align: middle;
     font-size: 12px;
-    color: #afafaf;
+    color: #fff;
+}
+
+.run-config-item .el-input__inner,
+.run-config-item .el-button-group {
+    border: none;
+}
+.run-config-item .el-button {
+    border-color: #fff;
 }
 
 .run-config-item .label {
@@ -119,7 +124,13 @@
     background: #fff;
     margin: 0;
     padding: 0;
-    margin-top: 48px;
+
+    position: absolute;
+    top: 48px;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    overflow-y: scroll;
 }
 .test-list li {
     list-style: none;
@@ -127,6 +138,9 @@
     cursor: pointer;
     color: #222;
 }
+.test-list li .el-checkbox {
+    margin-right: 5px;
+}
 .test-list li a.menu-link {
     display: inline-block;
     text-decoration: none;
@@ -184,6 +198,9 @@
     margin: 0;
 }
 
+.test-result .title {
+    margin-left: 20px;
+}
 .test-result .title>* {
     display: inline-block;
     vertical-align: middle;
@@ -222,13 +239,12 @@
 .test-screenshots h4 {
     font-size: 30px;
     font-weight: 200;
-    margin-left: -20px;
     color: #162436;
 }
 
 .test-errors, .test-logs {
     margin-top: 20px;
-    padding: 0 50px;
+    padding: 0 20px;
 }
 
 .test-logs .log-item {

test/runTest/client/client.js

@@ -75,14 +75,20 @@ const app = new Vue({
         previewTitle: '',
 
         runConfig: {
+            isNightly: false,
             noHeadless: false,
             replaySpeed: 5,
             actualVersion: 'local',
             expectedVersion: null,
             renderer: 'canvas',
-            threads: 1
+            threads: 4
         }
     },
+
+    mounted() {
+        this.fetchVersions();
+    },
+
     computed: {
         tests() {
             let sortFunc = this.sortBy === 'name'
@@ -230,6 +236,26 @@ const app = new Vue({
             this.previewIframeSrc = `../../${src}`;
             this.previewTitle = src;
             this.showIframeDialog = true;
+        },
+
+        fetchVersions() {
+            const url = this.runConfig.isNightly
+                ? 'https://data.jsdelivr.com/v1/package/npm/echarts-nightly'
+                : 'https://data.jsdelivr.com/v1/package/npm/echarts'
+            fetch(url, {
+                mode: 'cors'
+            }).then(res => res.json()).then(json => {
+                this.versions = json.versions;
+
+                // if (!this.runConfig.expectedVersion) {
+                // PENDING
+                // Always override the expected version with latest version
+                // Avoid forget to change the version to latest in the next release.
+                this.runConfig.expectedVersion = json.tags.latest;
+                // }
+
+                this.versions.unshift('local');
+            });
         }
     }
 });
@@ -239,6 +265,7 @@ 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});
@@ -317,15 +344,6 @@ socket.on('abort', res => {
     });
     app.running = false;
 });
-socket.on('versions', versions => {
-    app.versions = versions.filter(version => {
-        return !version.startsWith('2.');
-    }).reverse();
-    if (!app.runConfig.expectedVersion) {
-        app.runConfig.expectedVersion = app.versions[0];
-    }
-    app.versions.unshift('local');
-});
 
 function updateTestHash() {
     app.currentTestName = window.location.hash.slice(1);

test/runTest/client/index.html

@@ -100,22 +100,24 @@ under the License.
             </el-aside>
             <el-main>
                 <div class="test-run-controls">
-                    <el-dropdown v-if="!running" split-button type="primary" size="mini" title="Run"
-                        @click="run('selected')"
-                        @command="run"
-                    >
-                        <i class="el-icon-caret-right"></i> Run selected ({{selectedTests.length}})
-                        <el-dropdown-menu slot="dropdown" >
-                            <el-dropdown-item command="unfinished">Run unfinished ({{unfinishedTests.length}})</el-dropdown-item>
-                            <el-dropdown-item command="failed">Run failed ({{failedTests.length}})</el-dropdown-item>
-                            <el-dropdown-item command="all">Run all ({{fullTests.length}})</el-dropdown-item>
-                        </el-dropdown-menu>
-                    </el-dropdown>
+                    <div class="run-config-item">
+                        <el-dropdown v-if="!running" split-button size="mini" title="Run"
+                            @click="run('selected')"
+                            @command="run"
+                        >
+                            <i class="el-icon-caret-right"></i> Run ({{selectedTests.length}})
+                            <el-dropdown-menu slot="dropdown" >
+                                <el-dropdown-item command="unfinished">Run unfinished ({{unfinishedTests.length}})</el-dropdown-item>
+                                <el-dropdown-item command="failed">Run failed ({{failedTests.length}})</el-dropdown-item>
+                                <el-dropdown-item command="all">Run all ({{fullTests.length}})</el-dropdown-item>
+                            </el-dropdown-menu>
+                        </el-dropdown>
 
-                    <el-button-group v-else>
-                        <el-button type="primary" size="mini" :loading="true">Stop</el-button>
-                        <el-button title="Run Selected" @click="stopTests" size="mini" type="primary" icon="el-icon-close" style="padding-left: 3px;padding-right:3px;"></el-button>
-                    </el-button-group>
+                        <el-button-group v-else>
+                            <el-button size="mini" :loading="true">Stop</el-button>
+                            <el-button title="Run" @click="stopTests" size="mini" icon="el-icon-close" style="padding-left: 3px;padding-right:3px;"></el-button>
+                        </el-button-group>
+                    </div>
 
 
                     <!-- <div class="run-config-item">
@@ -169,12 +171,14 @@ under the License.
                             style="margin-top: 5px;"
                         ></el-progress>
                         <h3>{{currentTest.name}}</h3>
-                        <el-button-group style="margin-left: 10px">
-                            <el-button title="Run Selected" @click="runSingleTest(currentTest.name)" :loading="running" circle type="primary" icon="el-icon-caret-right"></el-button>
-                            <el-button v-if="running" title="Run Selected" @click="stopTests" circle type="primary" icon="el-icon-close"></el-button>
+                        <el-button-group style="margin-left: 10px" v-if="running">
+                            <el-button :loading="running" circle type="primary"></el-button>
+                            <el-button title="Run Selected" @click="stopTests" circle type="primary" icon="el-icon-close"></el-button>
                         </el-button-group>
-                        <a target="_blank" :href="currentTestUrl"><i class="el-icon-link"></i>Open Demo</a>
-                        <a target="_blank" :href="currentTestRecordUrl"><i class="el-icon-video-camera"></i>Record Interaction</a>
+                        <el-button v-else style="margin-left: 10px"  title="Run Selected" @click="runSingleTest(currentTest.name)" circle type="primary" icon="el-icon-caret-right"></el-button>
+                        </el-button>
+                        <a target="_blank" :href="currentTestUrl"><i class="el-icon-link"></i>&nbsp;Open Demo</a>
+                        <a target="_blank" :href="currentTestRecordUrl"><i class="el-icon-video-camera"></i>&nbsp;Record Interaction</a>
                     </div>
 
                     <div class="test-screenshots" v-for="(result, idx) in currentTest.results">

test/runTest/server.js

@@ -25,7 +25,7 @@ const {fork} = require('child_process');
 const semver = require('semver');
 const {port, origin} = require('./config');
 const {getTestsList, updateTestsList, saveTestsList, mergeTestsResults, updateActionsMeta} = require('./store');
-const {prepareEChartsLib, getActionsFullPath, fetchVersions} = require('./util');
+const {prepareEChartsLib, getActionsFullPath} = require('./util');
 const fse = require('fs-extra');
 const fs = require('fs');
 const open = require('open');
@@ -193,10 +193,7 @@ async function start() {
         return;
     }
 
-    let [versions] = await Promise.all([
-        fetchVersions(),
-        updateTestsList(true)
-    ]);
+    updateTestsList(true);
 
     // let runtimeCode = await buildRuntimeCode();
     // fse.outputFileSync(path.join(__dirname, 'tmp/testRuntime.js'), runtimeCode, 'utf-8');
@@ -273,8 +270,6 @@ async function start() {
         });
 
         socket.on('stop', abortTests);
-
-        socket.emit('versions', versions);
     });
 
     io.of('/recorder').on('connect', async socket => {