From 72bdb8231754dfcaa747cf8549b4cf0f6f1ff0ad Mon Sep 17 00:00:00 2001
From: "Kay.L" <KayLeung@users.noreply.github.com>
Date: Thu, 14 Sep 2017 06:59:02 +0800
Subject: [PATCH] Fix: use simpler charaters for progress bar to avoid
 overflows (#4317)

**Summary**
Fixes #2530. This patch replaces the 2-byte progress bar characters with `-` and `#` wrapped in a pair of `[` and `]` symbols to make it looks like a progress bar on the console with "simple", one-byte characters.

The reason for preferring one-byte characters is the inconsistent width calculation on certain terminal emulators causing the calculated progress bar width to overflow the available terminal width, causing the progress bar to split into multiple lines.

It now looks like this:
![new progress bar chars](https://i.imgur.com/d8XA4yS.gif)

**Test plan**

Manual verification and updating of existing test snapshots.
---
 .../reporters/__snapshots__/console-reporter.js.snap   | 10 +++++-----
 src/reporters/console/progress-bar.js                  |  6 +++---
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/__tests__/reporters/__snapshots__/console-reporter.js.snap b/__tests__/reporters/__snapshots__/console-reporter.js.snap
index ebd842029e..ad869a2132 100644
--- a/__tests__/reporters/__snapshots__/console-reporter.js.snap
+++ b/__tests__/reporters/__snapshots__/console-reporter.js.snap
@@ -58,7 +58,7 @@ Object {
 
 exports[`ConsoleReporter.progress 1`] = `
 Object {
-  "stderr": "░░ 0/2█░ 1/2",
+  "stderr": "[--] 0/2[#-] 1/2",
   "stdout": "",
 }
 `;
@@ -132,11 +132,11 @@ Object {
 }
 `;
 
-exports[`ProgressBar 1`] = `"░░ 0/2"`;
+exports[`ProgressBar 1`] = `"[--] 0/2"`;
 
-exports[`ProgressBar 2`] = `"░░ 0/2█░ 1/2"`;
+exports[`ProgressBar 2`] = `"[--] 0/2[#-] 1/2"`;
 
-exports[`ProgressBar 3`] = `"░░ 0/2█░ 1/2██ 2/2"`;
+exports[`ProgressBar 3`] = `"[--] 0/2[#-] 1/2[##] 2/2"`;
 
 exports[`Spinner 1`] = `"⠁ "`;
 
@@ -148,7 +148,7 @@ exports[`Spinner 4`] = `"⠁ ⠂ foo⠄ bar"`;
 
 exports[`close 1`] = `
 Object {
-  "stderr": "░░ 0/2█░ 1/2⠁ ",
+  "stderr": "[--] 0/2[#-] 1/2⠁ ",
   "stdout": "",
 }
 `;
diff --git a/src/reporters/console/progress-bar.js b/src/reporters/console/progress-bar.js
index 10ecff8075..499fc69d00 100644
--- a/src/reporters/console/progress-bar.js
+++ b/src/reporters/console/progress-bar.js
@@ -23,7 +23,7 @@ export default class ProgressBar {
   id: ?number;
   _callback: ?(progressBar: ProgressBar) => void;
 
-  static bars = [['█', '░']];
+  static bars = [['#', '-']];
 
   tick() {
     if (this.curr >= this.total) {
@@ -68,12 +68,12 @@ export default class ProgressBar {
 
     // calculate size of actual bar
     // $FlowFixMe: investigate process.stderr.columns flow error
-    const availableSpace = Math.max(0, this.stdout.columns - bar.length - 1);
+    const availableSpace = Math.max(0, this.stdout.columns - bar.length - 3);
     const width = Math.min(this.total, availableSpace);
     const completeLength = Math.round(width * ratio);
     const complete = this.chars[0].repeat(completeLength);
     const incomplete = this.chars[1].repeat(width - completeLength);
-    bar = `${complete}${incomplete}${bar}`;
+    bar = `[${complete}${incomplete}]${bar}`;
 
     toStartOfLine(this.stdout);
     this.stdout.write(bar);