Skip to content

Commit

Permalink
Fix: use simpler charaters for progress bar to avoid overflows (#4317)
Browse files Browse the repository at this point in the history
**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.
  • Loading branch information
KayLeung authored and BYK committed Sep 13, 2017
1 parent 78a5f33 commit 72bdb82
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 8 deletions.
10 changes: 5 additions & 5 deletions __tests__/reporters/__snapshots__/console-reporter.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ Object {

exports[`ConsoleReporter.progress 1`] = `
Object {
"stderr": "[2K[1G[1G░░ 0/2[1G█░ 1/2[2K[1G",
"stderr": "[2K[1G[1G[--] 0/2[1G[#-] 1/2[2K[1G",
"stdout": "",
}
`;
Expand Down Expand Up @@ -132,11 +132,11 @@ Object {
}
`;
exports[`ProgressBar 1`] = `"[2K[1G[1G░░ 0/2"`;
exports[`ProgressBar 1`] = `"[2K[1G[1G[--] 0/2"`;
exports[`ProgressBar 2`] = `"[2K[1G[1G░░ 0/2[1G█░ 1/2"`;
exports[`ProgressBar 2`] = `"[2K[1G[1G[--] 0/2[1G[#-] 1/2"`;
exports[`ProgressBar 3`] = `"[2K[1G[1G░░ 0/2[1G█░ 1/2[1G██ 2/2"`;
exports[`ProgressBar 3`] = `"[2K[1G[1G[--] 0/2[1G[#-] 1/2[1G[##] 2/2"`;
exports[`Spinner 1`] = `"⠁ "`;
Expand All @@ -148,7 +148,7 @@ exports[`Spinner 4`] = `"⠁ ⠂ foo⠄ bar"`;
exports[`close 1`] = `
Object {
"stderr": "[2K[1G[1G░░ 0/2[1G█░ 1/2[1G⠁ [0K[2K[1G[2K[1G",
"stderr": "[2K[1G[1G[--] 0/2[1G[#-] 1/2[1G⠁ [0K[2K[1G[2K[1G",
"stdout": "",
}
`;
6 changes: 3 additions & 3 deletions src/reporters/console/progress-bar.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export default class ProgressBar {
id: ?number;
_callback: ?(progressBar: ProgressBar) => void;

static bars = [['', '']];
static bars = [['#', '-']];

tick() {
if (this.curr >= this.total) {
Expand Down Expand Up @@ -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);
Expand Down

0 comments on commit 72bdb82

Please sign in to comment.