test: Add tests select and run control in dashboard

test/runTest/cli.js

@@ -227,15 +227,15 @@ async function runTest(browser, testOpt) {
     sortScreenshots(actualShots);
 
     const results = [];
-    expectedShots.forEach(async (shot, idx) => {
+    let idx = 0;
+    for (let shot of expectedShots) {
         let expected = shot;
-        let actual = actualShots[idx];
+        let actual = actualShots[idx++];
         let {diffRatio, diffPNG} = await compareScreenshot(
             expected.screenshotPath,
             actual.screenshotPath
         );
 
-
         let diffPath = `${path.resolve(__dirname, getScreenshotDir())}/${shot.testName}-diff.png`;
         diffPNG.pack().pipe(fs.createWriteStream(diffPath));
 
@@ -247,7 +247,7 @@ async function runTest(browser, testOpt) {
             desc: actual.desc,
             diffRatio
         });
-    });
+    }
 
     testOpt.results = results;
     testOpt.status = 'finished';
@@ -289,19 +289,15 @@ async function start() {
     // Start a static server for puppeteer open the html test cases.
     let {broadcast, io} = serve();
 
-    open(`${origin}/test/runTest/client/index.html`);
-
     const browser = await puppeteer.launch({ /* headless: false */ });
 
     const tests = await getTestsList();
 
-    broadcast({tests});
-
     io.on('connect', socket => {
-        broadcast({tests});
+        socket.emit('update', {tests});
         // TODO Stop previous?
         socket.on('run', async testsNameList => {
-            console.log(testsNameList);
+            console.log(testsNameList.join(','));
 
             const pendingTests = tests.filter(testOpt => {
                 return testsNameList.includes(testOpt.name);
@@ -313,21 +309,26 @@ async function start() {
                 testOpt.results = [];
             }
 
-            broadcast({tests});
+            socket.emit('update', {tests});
 
             try {
                 for (let testOpt of pendingTests) {
+                    console.log('Running Test', testOpt.name);
                     await runTest(browser, testOpt);
-                    broadcast({tests});
+                    socket.emit('update', {tests});
                     writeTestsToCache(tests);
                 }
             }
             catch(e) {
                 console.log(e);
             }
+
+            socket.emit('finish');
         });
     });
 
+    console.log(`Dashboard: ${origin}/test/runTest/client/index.html`);
+    // open(`${origin}/test/runTest/client/index.html`);
 
     // runTests(browser, tests, tests);
 }

test/runTest/client/client.js

 const socket = io();
 
-function processTestsData(tests) {
-    tests.forEach(test => {
+function processTestsData(tests, oldTestsData) {
+    tests.forEach((test, idx) => {
         let passed = 0;
+        test.index = idx;
         test.results.forEach(result => {
             // Threshold?
             if (result.diffRatio < 0.001) {
@@ -19,7 +20,14 @@ function processTestsData(tests) {
         else {
             test.summary = 'warning'
         }
-        test.selected = false;
+
+        // Keep select status not change.
+        if (oldTestsData && oldTestsData[idx]) {
+            test.selected = oldTestsData[idx].selected;
+        }
+        else {
+            test.selected = false;
+        }
     });
     return tests;
 }
@@ -35,7 +43,8 @@ socket.on('connect', () => {
             searchString: '',
             running: false,
 
-            allSelected: false
+            allSelected: false,
+            lastSelectedIndex: -1
         },
         computed: {
             tests() {
@@ -60,13 +69,16 @@ socket.on('connect', () => {
                 return currentTest;
             },
 
-            isSelectAllIndeterminate() {
-                if (!this.tests.length) {
-                    return true;
-                }
-                return this.tests.some(test => {
-                    return test.selected !== this.tests[0].selected;
-                });
+            isSelectAllIndeterminate: {
+                get() {
+                    if (!this.tests.length) {
+                        return true;
+                    }
+                    return this.tests.some(test => {
+                        return test.selected !== this.tests[0].selected;
+                    });
+                },
+                set() {}
             }
         },
         methods: {
@@ -82,15 +94,34 @@ socket.on('connect', () => {
                     test.selected = val;
                 });
                 this.isSelectAllIndeterminate = false;
+            },
+            handleSelect(idx) {
+                Vue.nextTick(() => {
+                    this.lastSelectedIndex = idx;
+                });
+            },
+            handleShiftSelect(idx) {
+                if (this.lastSelectedIndex < 0) {
+                    return;
+                }
+                let start = Math.min(this.lastSelectedIndex, idx);
+                let end = Math.max(this.lastSelectedIndex, idx);
+                let selected = !this.tests[idx].selected;   // Will change
+                for (let i = start; i < end; i++) {
+                    this.tests[i].selected = selected;
+                }
+            },
+            refreshList() {
+
             },
             runSelectedTests() {
-                this.running = true;
                 const tests = this.fullTests.filter(test => {
                     return test.selected;
                 }).map(test => {
                     return test.name
                 });
                 if (tests.length > 0) {
+                    this.running = true;
                     socket.emit('run', tests);
                 }
             },
@@ -102,8 +133,11 @@ socket.on('connect', () => {
     });
     app.$el.style.display = 'block';
 
-    socket.on('broadcast', msg => {
-        app.fullTests = processTestsData(msg.tests);
+    socket.on('update', msg => {
+        app.fullTests = processTestsData(msg.tests, app.fullTests);
+    });
+    socket.on('finish', () => {
+        app.running = false;
     });
 
     function updateTestHash() {

test/runTest/client/index.html

@@ -32,15 +32,18 @@
                             <el-button title="Run Selected" @click="runSelectedTests" :loading="running" circle size="mini" type="primary" icon="el-icon-caret-right"></el-button>
                             <el-button v-if="running" title="Run Selected" @click="stopTests" circle size="mini" type="primary" icon="el-icon-close"></el-button>
                         </el-button-group>
+                        <el-button title="Refresh List" @click="refreshList" circle size="mini" type="primary" icon="el-icon-refresh"></el-button>
                     </div>
                 </div>
                 <ul class="test-list">
-                    <li v-for="test in tests"
+                    <li v-for="(test, index) in tests"
                         :title="test.name"
                         :class="{active: currentTest && currentTest.name === test.name}"
                         @click.self="goto(test.name)"
                     >
-                        <el-checkbox v-model="test.selected"></el-checkbox>
+                        <span @mouseup="handleSelect(index)" @mouseup.shift="handleShiftSelect(index)">
+                            <el-checkbox v-model="test.selected"></el-checkbox>
+                        </span>
                         <i class="el-icon-loading" v-if="test.status === 'pending' && running"></i>
                         <el-progress
                             v-if="test.status === 'finished'"

test/runTest/serve.js

@@ -19,9 +19,6 @@ function serve() {
 
     const io = require('socket.io')(server);
     return {
-        broadcast(data) {
-            io.emit('broadcast', data);
-        },
         io
     }
 }