test: optimize ui

test/lib/testHelper.js

@@ -251,10 +251,24 @@
 
 
     testHelper.resizable = function (chart) {
+        let dom = chart.getDom();
+        let width = dom.clientWidth;
+        let height = dom.clientHeight;
+        function resize() {
+            let newWidth = dom.clientWidth;
+            let newHeight = dom.clientHeight;
+            if (width !== newWidth || height !== newHeight) {
+                chart.resize();
+                width = newWidth;
+                height = newHeight;
+            }
+        }
         if (window.attachEvent) {
+            // Use builtin resize in IE
             window.attachEvent('onresize', chart.resize);
-        } else if (window.addEventListener) {
-            window.addEventListener('resize', chart.resize, false);
+        }
+        else if (window.addEventListener) {
+            window.addEventListener('resize', resize, false);
         }
     };
 

test/runTest/actions/connect-manually.json

-[{"name":"Action 1","ops":[{"type":"screenshot","time":678},{"type":"mousemove","time":1014,"x":172,"y":191},{"type":"mousemove","time":1215,"x":274,"y":193},{"type":"mousemove","time":1470,"x":274,"y":193},{"type":"screenshot","time":2279},{"type":"mousemove","time":2381,"x":276,"y":192},{"type":"mousemove","time":2582,"x":318,"y":190},{"type":"mousemove","time":2782,"x":324,"y":190},{"type":"screenshot","time":3418},{"type":"mousemove","time":3488,"x":343,"y":190},{"type":"mousemove","time":3688,"x":448,"y":190},{"type":"mousemove","time":3900,"x":485,"y":190},{"type":"mousemove","time":4803,"x":487,"y":190},{"type":"mousemove","time":5003,"x":552,"y":195},{"type":"mousemove","time":5223,"x":557,"y":194},{"type":"mousemove","time":5950,"x":556,"y":196},{"type":"mousemove","time":6153,"x":470,"y":357},{"type":"mousemove","time":6354,"x":236,"y":435},{"type":"mousemove","time":6555,"x":234,"y":437},{"type":"screenshot","time":7668},{"type":"mousemove","time":7991,"x":235,"y":437},{"type":"mousemove","time":8191,"x":373,"y":442},{"type":"mousemove","time":8406,"x":509,"y":451},{"type":"mousemove","time":8641,"x":510,"y":451},{"type":"screenshot","time":9853}],"scrollY":0,"scrollX":0,"timestamp":1568031059236}]
\ No newline at end of file
+[{"name":"Action 1","ops":[{"type":"mousemove","time":684,"x":176,"y":189},{"type":"mousemove","time":897,"x":193,"y":190},{"type":"screenshot","time":1559},{"type":"mousemove","time":2386,"x":194,"y":190},{"type":"mousemove","time":2587,"x":260,"y":195},{"type":"mousemove","time":2793,"x":318,"y":198},{"type":"mousemove","time":3008,"x":459,"y":198},{"type":"mousemove","time":3217,"x":460,"y":198},{"type":"mousemove","time":4472,"x":465,"y":198},{"type":"mousemove","time":4672,"x":590,"y":194},{"type":"mousemove","time":4883,"x":632,"y":196},{"type":"mousemove","time":6013,"x":622,"y":198},{"type":"mousemove","time":6214,"x":375,"y":327},{"type":"mousemove","time":6415,"x":238,"y":446},{"type":"mousemove","time":6630,"x":208,"y":465},{"type":"screenshot","time":7409},{"type":"mousemove","time":7633,"x":212,"y":465},{"type":"mousemove","time":7834,"x":356,"y":469},{"type":"mousemove","time":8050,"x":404,"y":470},{"type":"mousemove","time":8262,"x":411,"y":470},{"type":"mousemove","time":8433,"x":412,"y":470},{"type":"screenshot","time":8939},{"type":"mousemove","time":9034,"x":415,"y":470},{"type":"mousemove","time":9235,"x":538,"y":467},{"type":"mousemove","time":9434,"x":619,"y":462},{"type":"mousemove","time":9641,"x":621,"y":461},{"type":"screenshot","time":10291}],"scrollY":0,"scrollX":0,"timestamp":1568048970794}]
\ No newline at end of file

test/runTest/client/client.css

@@ -112,6 +112,10 @@
     font-size: 12px!important;
 }
 
+.test-result .el-progress__text {
+    font-size: 14px!important;
+}
+
 .test-result h3 {
     font-size: 40px;
     font-weight: 200;

test/runTest/client/index.html

@@ -86,6 +86,15 @@
             <el-main>
                 <div v-if="currentTest" class="test-result">
                     <div class="title">
+                        <el-progress
+                            v-if="currentTest.status === 'finished'"
+                            type="circle"
+                            :width="30"
+                            :stroke-width="4"
+                            :percentage="currentTest.percentage"
+                            :status="currentTest.summary"
+                            style="margin-top: 5px;"
+                        ></el-progress>
                         <h3>{{currentTest.name}}</h3>
                         <el-button-group style="margin-left: 10px">
                             <el-button title="Run Selected" @click="runTest(currentTest.name)" :loading="running" circle type="primary" icon="el-icon-caret-right"></el-button>
@@ -98,7 +107,7 @@
                     <div class="test-screenshots" v-for="(result, idx) in currentTest.results">
                         <!-- Not display title if it's same with previous -->
                         <h4 v-if="result.desc !== (currentTest.results[idx - 1] && currentTest.results[idx - 1].desc)">
-                            {{result.desc || result.name}}
+                            <i class="el-icon-s-operation"></i>{{result.desc || result.name}}
                         </h4>
                         <el-row :gutter="40" class="screenshots">
                             <el-col :span="8">
@@ -106,7 +115,7 @@
                                     <div slot="header" class="clearfix">
                                         <span>Expected</span>
                                     </div>
-                                    <el-image :src="result.expected" :preview-src-list="[result.expected]"></el-image>
+                                    <el-image :src="result.expected + '?' + Date.now()"></el-image>
                                 </el-card>
                             </el-col>
 
@@ -115,7 +124,7 @@
                                     <div slot="header" class="clearfix">
                                         <span>Actual</span>
                                     </div>
-                                    <el-image :src="result.actual" :preview-src-list="[result.actual]"></el-image>
+                                    <el-image :src="result.actual + '?' + Date.now()"></el-image>
                                 </el-card>
                             </el-col>
 
@@ -124,7 +133,7 @@
                                     <div slot="header" class="clearfix">
                                         <span>Diff({{result.diffRatio.toFixed(4)}})</span>
                                     </div>
-                                    <el-image :src="result.diff" :preview-src-list="[result.diff]"></el-image>
+                                    <el-image :src="result.diff + '?' + Date.now()" :preview-src-list="[result.diff]"></el-image>
                                 </el-card>
                             </el-col>
                         </el-row>

test/runTest/server.js

@@ -245,6 +245,7 @@ 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`);
 
 }

test/runTest/store.js

@@ -2,7 +2,7 @@ const path = require('path');
 const fse = require('fs-extra');
 const fs = require('fs');
 const glob = require('glob');
-const {getTestName} = require('./util');
+const {testNameFromFile} = require('./util');
 const util = require('util');
 const blacklist = require('./blacklist');
 
@@ -53,7 +53,7 @@ module.exports.updateTestsList = async function () {
 
         let test = {
             fileUrl,
-            name: getTestName(fileUrl),
+            name: testNameFromFile(fileUrl),
             // Default status should be unkown
             // status: 'pending',
             results: []