fix test tab ux

ethereum · Jun 3, 2019 · 04efa94 · 04efa94
1 parent 5785313
commit 04efa94
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 10 deletions.
diff --git a/src/app/tabs/test-tab.js b/src/app/tabs/test-tab.js
@@ -28,7 +28,6 @@ module.exports = class TestTab extends BaseApi {
     this.filePanel = filePanel
     this.testTabLogic = new TestTabLogic(fileManager)
     this.data = {}
-    this.testList = yo`<div class=${css.testList}></div>`
   }
 
   activate () {
@@ -47,15 +46,20 @@ module.exports = class TestTab extends BaseApi {
       this.data.selectedTests.push(file)
     })
 
+    this.fileManager.events.on('noFileSelected', () => {
+      this.updateGenerateFileAction()
+      this.updateRunAction()
+      this.updateTestFileList()
+    })
+
     this.fileManager.events.on('currentFileChanged', (file, provider) => {
+      this.updateGenerateFileAction(file)
+      this.updateRunAction(file)
       this.testTabLogic.getTests((error, tests) => {
         if (error) return tooltip(error)
         this.data.allTests = tests
         this.data.selectedTests = [...this.data.allTests]
-
-        const testsMessage = (tests.length ? this.listTests() : 'No test file available')
-        yo.update(this.testList, yo`<div class=${css.testList}>${testsMessage}</div>`)
-
+        this.updateTestFileList(tests)
         if (!this.testsOutput || !this.testsSummary) return
       })
     })
@@ -148,13 +152,46 @@ module.exports = class TestTab extends BaseApi {
   }
 
   runTests () {
-    this.loading.hidden = false
     this.testsOutput.innerHTML = ''
     this.testsSummary.innerHTML = ''
     var tests = this.data.selectedTests
+    if (!tests) return
+    this.loading.hidden = tests.length === 0
     async.eachOfSeries(tests, (value, key, callback) => { this.runTest(value, callback) })
   }
 
+  updateGenerateFileAction (currentFile) {
+    let el = yo`<button class="${css.generateTestFile} btn btn-primary" onclick="${this.testTabLogic.generateTestFile.bind(this.testTabLogic)}">Generate test file</button>`
+    if (!currentFile) el.setAttribute('disabled', 'disabled')
+    if (!this.generateFileActionElement) {
+      this.generateFileActionElement = el
+    } else {
+      yo.update(this.generateFileActionElement, el)
+    }
+    return this.generateFileActionElement
+  }
+
+  updateRunAction (currentFile) {
+    let el = yo`<button class="${css.runButton} btn btn-primary"  onclick="${this.runTests.bind(this)}">Run Tests</button>`
+    if (!currentFile) el.setAttribute('disabled', 'disabled')
+    if (!this.runActionElement) {
+      this.runActionElement = el
+    } else {
+      yo.update(this.runActionElement, el)
+    }
+    return this.runActionElement
+  }
+
+  updateTestFileList (tests) {
+    const testsMessage = (tests && tests.length ? this.listTests() : 'No test file available')
+    let el = yo`<div class=${css.testList}>${testsMessage}</div>`
+    if (!this.testFilesListElement) {
+      this.testFilesListElement = el
+    } else {
+      yo.update(this.testFilesListElement, el)
+    }
+    return this.testFilesListElement
+  }
   render () {
     this.testsOutput = yo`<div class="${css.container} m-3 border border-primary border-right-0 border-left-0 border-bottom-0"  hidden='true' id="tests"></div>`
     this.testsSummary = yo`<div class="${css.container} border border-primary border-right-0 border-left-0 border-bottom-0" hidden='true' id="tests"></div>`
@@ -172,11 +209,11 @@ module.exports = class TestTab extends BaseApi {
           For more details, see
           How to test smart contracts guide in our documentation.
           <br/>
-          <div class="${css.generateTestFile} btn btn-secondary" onclick="${this.testTabLogic.generateTestFile.bind(this.testTabLogic)}">Generate test file</div>
+          ${this.updateGenerateFileAction()}
         </div>
         <div class="${css.tests}">          
           <div class="${css.buttons}">
-            <div class="${css.runButton} btn btn-primary"  onclick="${this.runTests.bind(this)}">Run Tests</div>
+          ${this.updateRunAction()}
             <label class="${css.label} mx-4 m-2" for="checkAllTests">
               <input id="checkAllTests"
                 type="checkbox"
@@ -186,7 +223,7 @@ module.exports = class TestTab extends BaseApi {
               Check/Uncheck all
             </label>
           </div>
-          ${this.testList}
+          ${this.updateTestFileList()}
           <hr>
           <div class="${css.buttons}" ><h6>Results:${this.loading}</h6></div>
           ${this.testsOutput}

diff --git a/src/app/tabs/testTab/testTab.js b/src/app/tabs/testTab/testTab.js
@@ -33,7 +33,7 @@ class TestTabLogic {
     for (var file in files) {
       if (/.(_test.sol)$/.exec(file)) tests.push(provider.type + '/' + file)
     }
-    cb(null, tests)
+    cb(null, tests, path)
   }
 
   generateTestContractSample () {