cli: strip ansi from stderr if no support (#2035)

* strip ansi from stderr if no support

* update changelog

* restore old run.ts

* handle publish banner correctly

* handle reports output properly

* remove unnecessary dep

* update dependencies

CHANGELOG.md

@@ -11,6 +11,9 @@ Please see [CONTRIBUTING.md](https://github.com/cucumber/cucumber/blob/master/CO
 ### Added
 - Add `willBeRetried` to the parameter passed to `After` hook functions ([#2045](https://github.com/cucumber/cucumber-js/pull/2045))
 
+### Fixed
+- Prevent outputting ANSI escapes to `stderr` if it can't display them ([#2035](https://github.com/cucumber/cucumber-js/pull/2035))
+
 ## [8.2.2] - 2022-05-27
 ### Changed
 - Use latest HTML formatter with better handling for scenario outlines

package.json

@@ -213,6 +213,7 @@
     "durations": "^3.4.2",
     "figures": "^3.2.0",
     "glob": "^7.1.6",
+    "has-ansi": "^4.0.1",
     "indent-string": "^4.0.0",
     "is-stream": "^2.0.0",
     "knuth-shuffle-seeded": "^1.0.6",
@@ -225,6 +226,7 @@
     "semver": "7.3.7",
     "stack-chain": "^2.0.0",
     "string-argv": "^0.3.1",
+    "strip-ansi": "6.0.1",
     "supports-color": "^8.1.1",
     "tmp": "^0.2.1",
     "util-arity": "^1.1.0",
@@ -273,7 +275,6 @@
     "express": "4.18.1",
     "fs-extra": "10.1.0",
     "genversion": "3.1.1",
-    "has-ansi": "^4.0.1",
     "mocha": "10.0.0",
     "mustache": "4.2.0",
     "nyc": "15.1.0",
@@ -285,7 +286,6 @@
     "sinon-chai": "3.7.0",
     "stream-buffers": "3.0.2",
     "stream-to-string": "1.2.0",
-    "strip-ansi": "6.0.1",
     "ts-node": "10.8.0",
     "tsd": "0.20.0",
     "typescript": "4.7.2"

src/api/formatters.ts

@@ -10,12 +10,16 @@ import path from 'path'
 import { DEFAULT_CUCUMBER_PUBLISH_URL } from '../formatter/publish'
 import HttpStream from '../formatter/http_stream'
 import { Writable } from 'stream'
+import { supportsColor } from 'supports-color'
 import { IRunOptionsFormats } from './types'
+import hasAnsi from 'has-ansi'
+import stripAnsi from 'strip-ansi'
 
 export async function initializeFormatters({
   env,
   cwd,
   stdout,
+  stderr,
   logger,
   onStreamError,
   eventBroadcaster,
@@ -26,6 +30,7 @@ export async function initializeFormatters({
   env: NodeJS.ProcessEnv
   cwd: string
   stdout: IFormatterStream
+  stderr: IFormatterStream
   logger: Console
   onStreamError: () => void
   eventBroadcaster: EventEmitter
@@ -88,7 +93,7 @@ export async function initializeFormatters({
     const readerStream = new Writable({
       objectMode: true,
       write: function (responseBody: string, encoding, writeCallback) {
-        logger.error(responseBody)
+        logger.error(sanitisePublishOutput(responseBody, stderr))
         writeCallback()
       },
     })
@@ -100,3 +105,16 @@ export async function initializeFormatters({
     await Promise.all(formatters.map(async (f) => await f.finished()))
   }
 }
+
+/*
+This is because the Cucumber Reports service returns a pre-formatted console message
+including ANSI escapes, so if our stderr stream doesn't support those we need to
+strip them back out. Ideally we should get structured data from the service and
+compose the console message on this end.
+ */
+function sanitisePublishOutput(raw: string, stderr: IFormatterStream) {
+  if (!supportsColor(stderr) && hasAnsi(raw)) {
+    return stripAnsi(raw)
+  }
+  return raw
+}

src/api/run_cucumber.ts

@@ -58,6 +58,7 @@ export async function runCucumber(
     env,
     cwd,
     stdout,
+    stderr,
     logger,
     onStreamError: () => (formatterStreamError = true),
     eventBroadcaster,

src/cli/publish_banner.ts

@@ -1,31 +1,37 @@
 import chalk from 'chalk'
 import Table from 'cli-table3'
 
+const chalkInstance = chalk.stderr
+
 const underlineBoldCyan = (x: string): string =>
-  chalk.underline(chalk.bold(chalk.cyan(x)))
+  chalkInstance.underline(chalkInstance.bold(chalkInstance.cyan(x)))
 
 const formattedReportUrl = underlineBoldCyan('https://reports.cucumber.io')
 const formattedEnv =
-  chalk.cyan('CUCUMBER_PUBLISH_ENABLED') + '=' + chalk.cyan('true')
+  chalkInstance.cyan('CUCUMBER_PUBLISH_ENABLED') +
+  '=' +
+  chalkInstance.cyan('true')
 const formattedMoreInfoUrl = underlineBoldCyan(
   'https://cucumber.io/docs/cucumber/environment-variables/'
 )
 
 const text = `\
 Share your Cucumber Report with your team at ${formattedReportUrl}
 
-Command line option:    ${chalk.cyan('--publish')}
+Command line option:    ${chalkInstance.cyan('--publish')}
 Environment variable:   ${formattedEnv}
 
 More information at ${formattedMoreInfoUrl}
 
-To disable this message, add this to your ${chalk.bold('./cucumber.js')}: 
-${chalk.bold("module.exports = { default: '--publish-quiet' }")}`
+To disable this message, add this to your ${chalkInstance.bold(
+  './cucumber.js'
+)}: 
+${chalkInstance.bold("module.exports = { default: '--publish-quiet' }")}`
 
 const table = new Table({
   style: {
     head: [],
-    border: ['green'],
+    border: chalkInstance.supportsColor ? ['green'] : [],
   },
 })