Improvements on Mocha runner reporter

src/mocha-test-runner/helpers.js

@@ -0,0 +1,25 @@
+function findElement(selector, parent = document) {
+  return promiseToCheck( () => parent.querySelector(selector) );
+}
+
+function promiseToCheck(fn, waitTime = 2000) {
+  return new Promise(resolve => {
+    const interval = setInterval(() => {
+      const result = fn();
+      if(result) {
+        clearInterval(interval)
+        resolve(result)
+      };
+    }, 50)
+
+    setTimeout(() => {
+      resolve()
+      clearInterval(interval)
+    }, waitTime)
+  })
+}
+
+module.exports = {
+  findElement,
+  promiseToCheck
+}

src/mocha-test-runner/reporter.js

@@ -52,22 +52,27 @@ class Reporter {
       .on(EVENT_TEST_FAIL, (test, err) => {
         const panel = createElem('atom-panel', "", {classes: ['inset-panel', 'padded']})
         panel.style.border = '1px solid'
-        createElem('button', test.fullTitle(), {
+        const button = createElem('button', test.fullTitle(), {
           classes: ['btn', 'btn-error', 'inline-block-tight'],
           parent: panel
         })
-        createElem('div', err.message, { classes: ['text-error'], parent: panel})
-        createElem('div', "DIFF:", {parent: panel})
-        // const div = document.createElement('button')
-        // div.classList.add('btn', 'btn-error', 'inline-block-tight');
-        // div.innerText = test.fullTitle()
-        // panel.appendChild(div)
-        // panel.append(err.message)
-        console.log("ERR", err)
 
-        const diff = document.createElement('div')
+        const details = createElem('atom-panel', "", {
-        diff.classList.add('inset-panel', 'padded', 'block')
+          classes: ['inset-panel', 'padded'], parent: panel
+        })
+        button.onclick = (evt) => {
+          evt.preventDefault()
+          details.style.display = details.style.display === 'none' ? 'block' : 'none'
+        }
+        createElem('div', err.message, { classes: ['text-error'], parent: details})
+
         if(err.expected && err.actual) {
+          createElem('div', "DIFF:", {parent: details})
+          const diff = createElem('div', '', {
+            classes: ['inset-panel', 'padded', 'block'],
+            parent: details
+          })
+
           diffElements.diffJson(err.expected, err.actual).forEach(patch => {
             const test = createElem('div', patch.value, {parent: diff})
             test.style['white-space'] = 'pre'
@@ -80,10 +85,9 @@ class Reporter {
             }
           })
         }
-        // panel.appendChild(diff)
         const stackTrace = createElem('div', '', {
           classes: ['block', 'padded'],
-          parent: panel
+          parent: details
         })
         stackTrace.style.display = 'flex';
         stackTrace.style['flex-direction'] = 'column';