DEV: Add color to testem output (#23266)

app/assets/javascripts/discourse/package.json

@@ -26,6 +26,7 @@
   "devDependencies": {
     "@babel/core": "^7.22.11",
     "@babel/standalone": "^7.22.12",
+    "@colors/colors": "^1.6.0",
     "@discourse/backburner.js": "^2.7.1-0",
     "@discourse/itsatrap": "^2.0.10",
     "@ember-compat/tracked-built-ins": "^0.9.1",

app/assets/javascripts/discourse/testem.js

@@ -1,13 +1,20 @@
 const TapReporter = require("testem/lib/reporters/tap_reporter");
 const { shouldLoadPlugins } = require("discourse-plugins");
 const fs = require("fs");
+const displayUtils = require("testem/lib/utils/displayutils");
+const colors = require("@colors/colors/safe");
 
-class Reporter {
+class Reporter extends TapReporter {
   failReports = [];
   deprecationCounts = new Map();
 
   constructor() {
-    this._tapReporter = new TapReporter(...arguments);
+    super(...arguments);
+
+    // Colors are enabled automatically in dev env, just need to toggle them on in GH
+    if (process.env.GITHUB_ACTIONS) {
+      colors.enable();
+    }
   }
 
   reportMetadata(tag, metadata) {
@@ -16,17 +23,50 @@ class Reporter {
       const currentCount = this.deprecationCounts.get(id) || 0;
       this.deprecationCounts.set(id, currentCount + 1);
     } else if (tag === "summary-line") {
-      process.stdout.write(`\n${metadata.message}\n`);
+      this.out.write(`\n${metadata.message}\n`);
     } else {
-      this._tapReporter.reportMetadata(...arguments);
+      super.reportMetadata(...arguments);
     }
   }
 
   report(prefix, data) {
     if (data.failed) {
-      this.failReports.push([prefix, data, this._tapReporter.id]);
+      this.failReports.push([prefix, data, this.id]);
+    }
+
+    super.report(prefix, data);
+  }
+
+  display(prefix, result) {
+    if (this.willDisplay(result)) {
+      const string = displayUtils.resultString(
+        this.id++,
+        prefix,
+        result,
+        this.quietLogs,
+        this.strictSpecCompliance
+      );
+
+      const color = this.colorForResult(result);
+      const matches = string.match(/([\S\s]+?)(\n\s+browser\slog:[\S\s]+)/);
+
+      if (matches) {
+        this.out.write(color(matches[1]));
+        this.out.write(colors.cyan(matches[2]));
+      } else {
+        this.out.write(color(string));
+      }
+    }
+  }
+
+  colorForResult(result) {
+    if (result.todo || result.skipped) {
+      return colors.yellow;
+    } else if (result.passed) {
+      return colors.green;
+    } else {
+      return colors.red;
     }
-    this._tapReporter.report(prefix, data);
   }
 
   generateDeprecationTable() {
@@ -61,24 +101,24 @@ class Reporter {
     } else {
       deprecationMessage += "No deprecations logged";
     }
-    process.stdout.write(`\n${deprecationMessage}\n\n`);
+    this.out.write(`\n${deprecationMessage}\n\n`);
   }
 
   finish() {
-    this._tapReporter.finish();
+    super.finish();
 
     this.reportDeprecations();
 
     if (this.failReports.length > 0) {
-      process.stdout.write("\nFailures:\n\n");
+      this.out.write("\nFailures:\n\n");
 
       this.failReports.forEach(([prefix, data, id]) => {
         if (process.env.GITHUB_ACTIONS) {
-          process.stdout.write(`::error ::QUnit Test Failure: ${data.name}\n`);
+          this.out.write(`::error ::QUnit Test Failure: ${data.name}\n`);
         }
 
-        this._tapReporter.id = id;
-        this._tapReporter.report(prefix, data);
+        this.id = id;
+        super.report(prefix, data);
       });
     }
   }

app/assets/javascripts/yarn.lock

@@ -1069,6 +1069,11 @@
   resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
   integrity sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==
 
+"@colors/colors@^1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.6.0.tgz#ec6cd237440700bc23ca23087f513c75508958b0"
+  integrity sha512-Ir+AOibqzrIsL6ajt3Rz3LskB7OiMVHqltZmspbW/TJuTVuyOMirVqAkjfY6JISiLHgyNqicAC8AyHHGzNd/dA==
+
 "@discourse/backburner.js@^2.7.1-0":
   version "2.7.1-0"
   resolved "https://registry.yarnpkg.com/@discourse/backburner.js/-/backburner.js-2.7.1-0.tgz#0fc5f93c8f3ee013af2beed55d30ff10362d8f06"