Add event trigger/register for new File created

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

@@ -3,61 +3,30 @@ var styleGuide = require('../../ui/styles-guide/theme-chooser')
 var styles = styleGuide.chooser()
 
 var css = csjs`
-.opts_li {
+  .testTabView {}
-  display: block;
+  .infoBox  {
-  font-weight: bold;
+    ${styles.rightPanel.testTab.box_listTests};
-  color: ${styles.rightPanel.text_Teriary};
+    margin: 2%;
-}
+  }
-.opts_li.active {
+  .tests {}
-  color: ${styles.rightPanel.text_Primary};
+  .testList {
-}
+    ${styles.rightPanel.testTab.box_listTests};
-.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%;
-}
-.testList {
-  ${styles.rightPanel.testTab.box_listTests}
     line-height: 2em;
     display: flex;
     flex-direction: column;
     margin: 2%;
-}
+  }
+  .testsOutput {
+    ${styles.rightPanel.testTab.box_listTests};
+    margin: 2%;
+  }
+  .buttons {
+    ${styles.rightPanel.testTab.box_listTests};
+    margin: 2%;
+  }
+  .runButton {
+    ${styles.rightPanel.testTab.button_runTests};
+  }
 `
 
 module.exports = css

src/app/tabs/test-tab.js

@@ -26,11 +26,10 @@ module.exports = class TestTab {
     return { render () { return self._view.el } }
   }
   render () {
-    var self = this
+    const self = this
-    var container = yo`<div class="tests" id="tests"></div>`
+    var container = yo`<div class=${css.testsOutput} id="tests"></div>`
     self.data.allTests = getTests()
     self.data.selectedTests = self.data.allTests
-    console.log(self.data.selectedTests)
     function append (container, txt) {
       var child = yo`<div>${txt}</div>`
       container.appendChild(child)
@@ -96,9 +95,11 @@ module.exports = class TestTab {
       return tests
     }
 
-    self._events.app.register('newTestFileCreated', file => {
+    self._events.filePanel.register('newTestFileCreated', file => {
+      var testList = document.querySelector(`[class^='testList']`)
+      var test = yo`<label><input onchange =${(e) => toggleCheckbox(e, file)} type="checkbox">${file} </label>`
+      testList.appendChild(test)
       self.data.allTests.push(file)
-      self.data.selectedTests.push(file)
     })
 
     function listTests () {
@@ -120,15 +121,16 @@ module.exports = class TestTab {
 
     var el = yo`
       <div class="${css.testTabView} "id="testView">
-        <div>
         <div class="${css.infoBox}">
+          Test your smart contract by creating a foo_test.sol file.
+          Open ballot_test.sol to see the example. For more details, see
+          How to test smart contracts guide in our documentation.
         </div>
+        <div class="${css.tests}">
+          <div class=${css.testList}>${listTests()}</div>
+          <div class=${css.buttons}>
+            <div class=${css.runButton} onclick=${runTests}>Run Tests</div>
           </div>
-        <div class="${css.testList}">
-          <div class=${css.testList}>
-            ${listTests()}
-          </div>
-          <p><button onclick=${runTests}>Run Tests</button></p>
           ${container}
         </div>
       </div>

src/app/ui/styles-guide/style-guide.js

@@ -662,6 +662,12 @@ function styleGuide () {
           BackgroundColor: appProperties.solidBorderBox_BackgroundColor,
           BorderColor: appProperties.solidBorderBox_BackgroundColor,
           Color: appProperties.solidBorderBox_TextColor
+        }),
+
+        button_runTests: appProperties.uiElements.button({
+          BackgroundColor: appProperties.primaryButton_BackgroundColor,
+          BorderColor: appProperties.primaryButton_BorderColor,
+          Color: appProperties.primaryButton_TextColor
         })
       },