add poc test tab

.gitignore

@@ -9,3 +9,5 @@ package-lock.json
 remix
 .DS_Store
 contracts
+TODO
+.tern-port

package.json

@@ -36,9 +36,10 @@
     "npm-link-local": "^1.1.0",
     "npm-run-all": "^4.0.2",
     "onchange": "^3.2.1",
-    "remix-core": "latest",
-    "remix-lib": "latest",
-    "remix-solidity": "latest",
+    "remix-core": "/Users/iurimatias/Projects/EthereumFoundation/remix/remix-core",
+    "remix-lib": "/Users/iurimatias/Projects/EthereumFoundation/remix/remix-lib",
+    "remix-solidity": "/Users/iurimatias/Projects/EthereumFoundation/remix/remix-solidity",
+    "remix-tests": "/Users/iurimatias/Projects/EthereumFoundation/remix-tests",
     "remixd": "git+https://github.com/ethereum/remixd.git",
     "request": "^2.83.0",
     "rimraf": "^2.6.1",
@@ -52,7 +53,7 @@
     "web3": "^0.18.0",
     "webworkify": "^1.2.1",
     "yo-yo": "^1.2.2",
-    "yo-yoify": "^3.1.0"
+    "yo-yoify": "^3.7.3"
   },
   "dependencies": {
     "http-server": "0.9.0",

src/app/panels/righthand-panel.js

@@ -9,6 +9,7 @@ var AnalysisTab = require('../tabs/analysis-tab')
 var DebuggerTab = require('../tabs/debugger-tab')
 var SupportTab = require('../tabs/support-tab')
 var PluginTab = require('../tabs/plugin-tab')
+var TestTab = require('../tabs/test-tab')
 var PluginManager = require('../plugin/pluginManager')
 
 var css = require('./styles/righthand-panel-styles')
@@ -54,12 +55,15 @@ function RighthandPanel (appAPI = {}, events = {}, opts = {}) {
   optionViews.appendChild(debuggerTab.render())
   var supportTab = new SupportTab(appAPI, events, opts)
   optionViews.appendChild(supportTab.render())
+  var testTab = new TestTab(appAPI, events, opts)
+  optionViews.appendChild(testTab.render())
   this._view.tabbedMenu.addTab('Compile', 'compileView', optionViews.querySelector('#compileTabView'))
   this._view.tabbedMenu.addTab('Run', 'runView', optionViews.querySelector('#runTabView'))
   this._view.tabbedMenu.addTab('Settings', 'settingsView', optionViews.querySelector('#settingsView'))
   this._view.tabbedMenu.addTab('Analysis', 'staticanalysisView', optionViews.querySelector('#staticanalysisView'))
   this._view.tabbedMenu.addTab('Debugger', 'debugView', optionViews.querySelector('#debugView'))
   this._view.tabbedMenu.addTab('Support', 'supportView', optionViews.querySelector('#supportView'))
+  this._view.tabbedMenu.addTab('Test', 'testView', optionViews.querySelector('#testView'))
   this._view.tabbedMenu.selectTabByTitle('Compile')
 
   self.pluginManager = new PluginManager(opts.pluginAPI, events)

src/app/tabs/styles/test-tab-styles.js

+var csjs = require('csjs-inject')
+var styleGuide = require('../../ui/styles-guide/theme-chooser')
+var styles = styleGuide.chooser()
+
+var css = csjs`
+.opts_li {
+  display: block;
+  font-weight: bold;
+  color: ${styles.rightPanel.text_Teriary};
+}
+.opts_li.active {
+  color: ${styles.rightPanel.text_Primary};
+}
+.opts_li:hover {
+  color: ${styles.rightPanel.icon_HoverColor_TogglePanel};
+}
+.solIcon {
+  margin-left: 10px;
+  margin-right: 30px;
+  display: flex;
+  align-self: center;
+  height: 29px;
+  width: 20px;
+  background-color: ${styles.colors.transparent};
+}
+a {
+  color: ${styles.rightPanel.text_link};
+}
+#optionViews > div {
+  display: none;
+}
+#optionViews .pre {
+  word-wrap: break-word;
+  background-color: ${styles.rightPanel.BackgroundColor_Pre};
+  border-radius: 3px;
+  display: inline-block;
+  padding: 0 0.6em;
+}
+#optionViews .hide {
+  display: none;
+}
+.infoBox  {
+  ${styles.infoTextBox}
+  margin-bottom: 1em;
+}
+.textBox  {
+  ${styles.textBoxL}
+  margin-bottom: 1em;
+}
+.icon {
+  height: 70%;
+  margin-right: 2%;
+}
+`
+
+module.exports = css

src/app/tabs/test-tab.js

-// var yo = require('yo-yo')
-// var csjs = require('csjs-inject')
-// var remixLib = require('remix-lib')
-//
-// var EventManager = remixLib.EventManager
-// var styles = remixLib.ui.themeChooser.chooser()
-//
-// module.exports = class TestTab {
-//   constructor (opts = { api: {}, events: {} }) {
-//     const self = this
-//     self.event = new EventManager()
-//     self._api = opts.api
-//     self._events = opts.events
-//     self._view = { el: null }
-//     self.data = {}
-//     self._components = {}
-//   }
-//   render () {
-//     const self = this
-//     if (self._view.el) return self._view.el
-//     self._view.el = yo`
-//       <div class=${css.testTab}>
-//         Test Tab
-//       </div>`
-//     return self._view.el
-//   }
-// }
-// const css = csjs`
-//   .testTab         {
-//     position       : relative;
-//     box-sizing     : border-box;
-//     display        : flex;
-//     flex-direction : column;
-//     align-items    : center;
-//   }
-// `
+var yo = require('yo-yo')
 
-/*
-.opts_li {
-  display: block;
-  font-weight: bold;
-  color: ${styles.rightPanel.text_Teriary};
-}
-.opts_li.active {
-  color: ${styles.rightPanel.text_Primary};
-}
-.opts_li:hover {
-  color: ${styles.rightPanel.icon_HoverColor_TogglePanel};
-}
-.solIcon {
-  margin-left: 10px;
-  margin-right: 30px;
-  display: flex;
-  align-self: center;
-  height: 29px;
-  width: 20px;
-  background-color: ${styles.colors.transparent};
-}
-a {
-  color: ${styles.rightPanel.text_link};
-}
-#optionViews > div {
-  display: none;
-}
-#optionViews .pre {
-  word-wrap: break-word;
-  background-color: ${styles.rightPanel.BackgroundColor_Pre};
-  border-radius: 3px;
-  display: inline-block;
-  padding: 0 0.6em;
-}
-#optionViews .hide {
-  display: none;
-}
-.infoBox  {
-  ${styles.infoTextBox}
-  margin-bottom: 1em;
+var css = require('./styles/test-tab-styles')
+
+var remixTests = require('remix-tests')
+
+function runTests () {
+  // remixTests.runTest(testName, testObject, testCallback, resultsCallback)
+  let contractSources = api.compilerContracts.getSources()
+  remixTests.runTestSources(contractSources)
 }
-.textBox  {
-  ${styles.textBoxL}
-  margin-bottom: 1em;
+
+function testTabView () {
+  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>
+      </div>
+    </div>
+  `
 }
-.icon {
-  height: 70%;
-  margin-right: 2%;
+
+function testTab (api = {}, events = {}, opts = {}) {
+  window.api = api
+  console.dir('------')
+  console.dir(api)
+  let el = testTabView('')
+  let gitterIsLoaded = false
+
+  // api.compilerContracts.getSources()
+
+  events.app.register('tabChanged', (tabName) => {
+    if (tabName !== 'test' || gitterIsLoaded) {
+      return
+    }
+
+    yo.update(el, testTabView())
+    el.style.display = 'block'
+    gitterIsLoaded = true
+  })
+
+  return { render () { return el } }
 }
-*/
+
+module.exports = testTab