Merge pull request #1350 from ethereum/test-tab

Test tab

src/app/tabs/test-tab.js

@@ -3,104 +3,109 @@ var async = require('async')
 var css = require('./styles/test-tab-styles')
 var remixTests = require('remix-tests')
 
-function append (container, txt) {
-  let child = yo`<div>${txt}</div>`
-  container.appendChild(child)
-}
+module.exports = class TestTab {
+  constructor (api = {}, events = {}, opts = {}) {
+    const self = this
+    self._opts = opts
+    self._api = api
+    self._events = events
+    self._view = { el: null }
+    self._components = {}
+    self.data = {}
 
-function testTabView (api) {
-  var container = yo`<div class="tests" id="tests"></div>`
+    self._view.el = self.render()
 
-  let testCallback = function (result) {
-    if (result.type === 'contract') {
-      append(container, '\n  ' + result.value)
-    } else if (result.type === 'testPass') {
-      append(container, '\t✓ ' + result.value)
-    } else if (result.type === 'testFailure') {
-      append(container, '\t✘ ' + result.value)
-    }
-  }
+    events.app.register('tabChanged', tabName => {
+      if (tabName !== 'test') return
+      yo.update(self._view.el, self.render())
+      self._view.el.style.display = 'block'
+    })
 
-  let resultsCallback = function (_err, result, cb) {
-    // total stats for the test
-    // result.passingNum
-    // result.failureNum
-    // result.timePassed
-    cb()
+    return { render () { return self._view.el } }
   }
+  render () {
+    const self = this
+    const api = self._api
+    var container = yo`<div class="tests" id="tests"></div>`
 
-  let updateFinalResult = function (_err, result) {
-    if (result.totalPassing > 0) {
-      append(container, ('  ' + result.totalPassing + ' passing ') + ('(' + result.totalTime + 's)'))
+    function append (container, txt) {
+      let child = yo`<div>${txt}</div>`
+      container.appendChild(child)
     }
-    if (result.totalFailing > 0) {
-      append(container, ('  ' + result.totalFailing + ' failing'))
+
+    let testCallback = function (result) {
+      if (result.type === 'contract') {
+        append(container, '\n  ' + result.value)
+      } else if (result.type === 'testPass') {
+        append(container, '\t✓ ' + result.value)
+      } else if (result.type === 'testFailure') {
+        append(container, '\t✘ ' + result.value)
+      }
     }
 
-    result.errors.forEach((error, index) => {
-      append(container, '  ' + (index + 1) + ') ' + error.context + ' ' + error.value)
-      append(container, '')
-      append(container, ('\t error: ' + error.message))
-    })
-  }
+    let resultsCallback = function (_err, result, cb) {
+      // total stats for the test
+      // result.passingNum
+      // result.failureNum
+      // result.timePassed
+      cb()
+    }
 
-  function runTest (testFilePath, callback) {
-    var provider = api.fileProviderOf(testFilePath)
-    provider.get(testFilePath, (error, content) => {
-      if (!error) {
-        var runningTest = {}
-        runningTest[testFilePath] = { content }
-        remixTests.runTestSources(runningTest, testCallback, resultsCallback, (error, result) => {
-          updateFinalResult(error, result)
-          callback(error)
-        }, api.importFileCb)
+    let updateFinalResult = function (_err, result) {
+      if (result.totalPassing > 0) {
+        append(container, ('  ' + result.totalPassing + ' passing ') + ('(' + result.totalTime + 's)'))
       }
-    })
-  }
-
-  let runTests = function () {
-    container.innerHTML = ''
-    var path = api.currentPath()
-    var tests = []
-    api.filesFromPath(path, (error, files) => {
-      if (!error) {
-        for (var file in files) {
-          if (/.(_test.sol)$/.exec(file)) tests.push(path + file)
-        }
-        async.eachOfSeries(tests, (value, key, callback) => { runTest(value, callback) })
+      if (result.totalFailing > 0) {
+        append(container, ('  ' + result.totalFailing + ' failing'))
       }
-    })
-  }
 
-  return yo`
-    <div class="${css.testTabView} "id="testView">
-      <div>
-        <div class="${css.infoBox}">
-        </div>
-      </div>
-      <div class="${css.testList}">
-        <p><button onclick=${runTests}>Run Tests</button></p>
-        ${container}
-      </div>
-    </div>
-  `
-}
-
-function testTab (api = {}, events = {}, opts = {}) {
-  let el = testTabView(api)
-  let gitterIsLoaded = false
+      result.errors.forEach((error, index) => {
+        append(container, '  ' + (index + 1) + ') ' + error.context + ' ' + error.value)
+        append(container, '')
+        append(container, ('\t error: ' + error.message))
+      })
+    }
 
-  events.app.register('tabChanged', (tabName) => {
-    if (tabName !== 'test' || gitterIsLoaded) {
-      return
+    function runTest (testFilePath, callback) {
+      var provider = api.fileProviderOf(testFilePath)
+      provider.get(testFilePath, (error, content) => {
+        if (!error) {
+          var runningTest = {}
+          runningTest[testFilePath] = { content }
+          remixTests.runTestSources(runningTest, testCallback, resultsCallback, (error, result) => {
+            updateFinalResult(error, result)
+            callback(error)
+          }, api.importFileCb)
+        }
+      })
     }
 
-    yo.update(el, testTabView(api))
-    el.style.display = 'block'
-    gitterIsLoaded = true
-  })
+    let runTests = function () {
+      container.innerHTML = ''
+      var path = api.currentPath()
+      var tests = []
+      api.filesFromPath(path, (error, files) => {
+        if (!error) {
+          for (var file in files) {
+            if (/.(_test.sol)$/.exec(file)) tests.push(path + file)
+          }
+          async.eachOfSeries(tests, (value, key, callback) => { runTest(value, callback) })
+        }
+      })
+    }
 
-  return { render () { return el } }
+    var el = yo`
+      <div class="${css.testTabView} "id="testView">
+        <div>
+          <div class="${css.infoBox}">
+          </div>
+        </div>
+        <div class="${css.testList}">
+          <p><button onclick=${runTests}>Run Tests</button></p>
+          ${container}
+        </div>
+      </div>
+    `
+    return el
+  }
 }
-
-module.exports = testTab