Reporting onto the new UI

src/initialize-new-test-window.js

@@ -3,6 +3,7 @@ const { requireModule } = require('./module-utils');
 const fs = require('fs');
 const path = require('path');
 const vm = require('vm')
+const {glob} = require('glob');
 
 module.exports = async function({ blobStore }) {
   const { remote } = require('electron');
@@ -157,6 +158,7 @@ module.exports = async function({ blobStore }) {
 
 
     prepareUI();
+    runAllTests(testPaths);
   //   // const statusCode = await testRunner({
   //   //   logFile,
   //   //   headless,
@@ -181,17 +183,25 @@ module.exports = async function({ blobStore }) {
 }
 
 function prepareUI() {
-  // Requires mocha under the context of the new window
-  vm.runInThisContext('const Mocha = require("mocha")')
-  const Reporter = require('./mocha-test-runner/reporter')
-  Reporter.setMocha(Mocha)
+  const div = document.createElement('div');
+  div.style.display = 'flex';
+  div.style.width = '100%'
+  div.style.height = '100%'
 
-  let mocha = new Mocha()
-  mocha.addFile(
-    '/home/mauricio/projects/pulsar_repos/star-ring/test/star-linter-test.js'
-  )
-  mocha.reporter(Reporter)
-  mocha.run()
+  const testPanel = document.createElement('atom-panel');
+  testPanel.classList.add('padded', 'tool-panel');
+  div.append(testPanel);
+
+  const testDiv = document.createElement('div');
+  testDiv.classList.add('tests', 'padded', 'block');
+  testPanel.append(testDiv);
+
+  const workspace = atom.views.getView(atom.workspace);
+  workspace.style.width = '100%'
+  workspace.style.height = '100%'
+  div.append(workspace);
+  document.body.append(div);
+  // Requires mocha under the context of the new window
 
   // const Workspace = require('./workspace');
   // const w = new Workspace()
@@ -203,3 +213,29 @@ function prepareUI() {
   // const workspace = document.createElement('atom-workspace')
   // document.body.append
 }
+
+let mocha
+async function runAllTests(testPaths) {
+  vm.runInThisContext('const Mocha = require("mocha")')
+  const Reporter = require('./mocha-test-runner/reporter')
+  Reporter.setMocha(Mocha)
+
+  mocha?.unloadFiles()
+  mocha = new Mocha();
+  mocha.reporter(Reporter);
+
+  const promises = testPaths.map(async (path) => {
+    const files = await glob(
+      `${path}/**/*{spec,test}.{js,coffee,ts,cjs,jsx,mjs}`,
+      { ignore: 'node_modules/**' }
+    );
+    files.forEach(file => mocha.addFile(file));
+  })
+  // // glob.glob(`${paths[0]}/**/*{spec,test}.{js,coffee,ts,cjs,jsx,mjs}`, { ignore: 'node_modules/**' }, (_, e) => console.log("files", e))
+  //
+  // mocha.addFile(
+  //   '/home/mauricio/projects/pulsar_repos/star-ring/test/star-linter-test.js'
+  // )
+  await Promise.all(promises)
+  mocha.run();
+}

src/mocha-test-runner/reporter.js

@@ -1,3 +1,4 @@
+const diffElements = require('diff');
 
 class Reporter {
   static setMocha(Mocha) {
@@ -5,7 +6,7 @@ class Reporter {
   }
 
   constructor(runner) {
-    this._indents = 0;
+    // this._indents = 0;
     const stats = runner.stats;
 
     const {
@@ -16,26 +17,63 @@ class Reporter {
       EVENT_SUITE_BEGIN,
       EVENT_SUITE_END
     } = Reporter.constants;
+    let divs = []
+    const testDiv = document.querySelector('div.tests')
 
     runner
       .once(EVENT_RUN_BEGIN, () => {
         console.log('start');
       })
-      .on(EVENT_SUITE_BEGIN, () => {
-        this.increaseIndent();
+      .on(EVENT_SUITE_BEGIN, evt => {
+        const header = document.createElement(`h${divs.length + 1}`)
+        header.innerText = evt.title
+        testDiv.appendChild(header)
+        const div = document.createElement('div')
+        divs.push(div)
+        testDiv.appendChild(div)
       })
-      .on(EVENT_SUITE_END, () => {
-        this.decreaseIndent();
+      .on(EVENT_SUITE_END, (a) => {
+        divs.pop()
+        // this.decreaseIndent();
+        // console.log("End", a)
       })
       .on(EVENT_TEST_PASS, test => {
         // Test#fullTitle() returns the suite name(s)
         // prepended to the test title
-        console.log(`${this.indent()}pass: ${test.fullTitle()}`);
+        const div = document.createElement('div')
+        div.classList.add('badge', 'badge-success');
+        div.innerText = test.fullTitle()
+        divs[divs.length - 1].appendChild(div)
       })
+
       .on(EVENT_TEST_FAIL, (test, err) => {
-        console.log(
-          `${this.indent()}fail: ${test.fullTitle()} - error: ${err.message}`
-        );
+        const div = document.createElement('div')
+        div.classList.add('badge', 'badge-error');
+        div.innerText = test.fullTitle()
+        // console.log("ERROR", arguments, test, err)
+
+        const diff = document.createElement('div')
+        diff.classList.add('inset-panel', 'padded', 'block')
+        diffElements.diffJson(err.expected, err.actual).forEach(patch => {
+          // const span = document.createElement('span')
+          const test = document.createElement('div')
+          test.style['white-space'] = 'pre'
+          if(patch.added) {
+            // span.classList.add('inline-block', 'status-added', 'icon', 'icon-diff-added')
+            test.classList.add('status-added')
+          } else if(patch.removed) {
+            // span.classList.add('inline-block', 'status-removed', 'icon', 'icon-diff-removed')
+            test.classList.add('status-removed')
+          } else {
+            // span.classList.add('inline-block', 'status-ignored', 'icon', 'icon-diff-ignored')
+            test.classList.add('status-ignored')
+          }
+          // test.appendChild(span)
+          test.append(patch.value)
+          diff.appendChild(test)
+        })
+        divs[divs.length - 1].appendChild(div)
+        divs[divs.length - 1].appendChild(diff)
       })
       .once(EVENT_RUN_END, () => {
         console.log(`end: ${stats.passes}/${stats.passes + stats.failures} ok`);

src/workspace.js

@@ -210,7 +210,7 @@ module.exports = class Workspace extends Model {
 
     this.scandalDirectorySearcher = new DefaultDirectorySearcher();
     this.ripgrepDirectorySearcher = new RipgrepDirectorySearcher();
-    console.log("PACKAGE?", this.packageManager)
+    // console.log("PACKAGE?", this.packageManager)
     this.consumeServices(this.packageManager);
 
     this.paneContainers = {