Fix: Progress bar continue to update after footer (#4084)

**Summary**

Fixes #4023. There was nothing preventing the console reporter from
having more than one progress bars, or keep updating and rendering
its progress bar after it was finished or the reporter was "done".

This patch stores the active progress bar, and stops it before
`footer` is printed out. Also makes sure the progress bar itself
ignores any updates once it stops.

**Test plan**

One, weak, existing test with updated snapshot. Manual steps:

- Run `yarn install express`
- Observe that your console is properly cleared after `yarn`
  finishes and the last thing you see is the "Done in X.YZs."
  message and not a corrupted progress bar.

Author: BYK

__tests__/reporters/__snapshots__/console-reporter.js.snap

@@ -136,7 +136,7 @@ exports[`ProgressBar 1`] = `"░░ 0/2"`;
 
 exports[`ProgressBar 2`] = `"░░ 0/2█░ 1/2"`;
 
-exports[`ProgressBar 3`] = `"[2K[1G[1G░░ 0/2[1G█░ 1/2[2K[1G[1G██ 2/2"`;
+exports[`ProgressBar 3`] = `"[2K[1G[1G░░ 0/2[1G█░ 1/2[1G██ 2/2"`;
 
 exports[`Spinner 1`] = `"⠁ "`;
 

src/cli/index.js

@@ -170,7 +170,6 @@ export function main({
   const run = (): Promise<void> => {
     invariant(command, 'missing command');
     return command.run(config, reporter, commander, commander.args).then(exitCode => {
-      reporter.close();
       if (outputWrapper) {
         reporter.footer(false);
       }

src/reporters/console/console-reporter.js

@@ -42,6 +42,7 @@ export default class ConsoleReporter extends BaseReporter {
   }
 
   _lastCategorySize: number;
+  _progressBar: ?Progress;
 
   _prependEmoji(msg: string, emoji: ?string): string {
     if (this.emoji && emoji && this.isTTY) {
@@ -63,6 +64,11 @@ export default class ConsoleReporter extends BaseReporter {
     this.inspect(obj);
   }
 
+  close() {
+    this.stopProgress();
+    super.close();
+  }
+
   table(head: Array<string>, body: Array<Row>) {
     //
     head = head.map((field: string): string => this.format.underline(field));
@@ -136,6 +142,8 @@ export default class ConsoleReporter extends BaseReporter {
   }
 
   footer(showPeakMemory?: boolean) {
+    this.stopProgress();
+
     const totalTime = (this.getTotalTime() / 1000).toFixed(2);
     let msg = `Done in ${totalTime}s.`;
     if (showPeakMemory) {
@@ -387,7 +395,14 @@ export default class ConsoleReporter extends BaseReporter {
       };
     }
 
-    const bar = new Progress(count, this.stderr);
+    // Clear any potentiall old progress bars
+    this.stopProgress();
+
+    const bar = (this._progressBar = new Progress(count, this.stderr, (progress: Progress) => {
+      if (progress === this._progressBar) {
+        this._progressBar = null;
+      }
+    }));
 
     bar.render();
 
@@ -396,6 +411,12 @@ export default class ConsoleReporter extends BaseReporter {
     };
   }
 
+  stopProgress() {
+    if (this._progressBar) {
+      this._progressBar.stop();
+    }
+  }
+
   async prompt<T>(message: string, choices: Array<*>, options?: PromptOptions = {}): Promise<Array<T>> {
     if (!process.stdout.isTTY) {
       return Promise.reject(new Error("Can't answer a question unless a user TTY"));

src/reporters/console/progress-bar.js

@@ -4,12 +4,13 @@ import type {Stdout} from '../types.js';
 import {clearLine, toStartOfLine} from './util.js';
 
 export default class ProgressBar {
-  constructor(total: number, stdout: Stdout = process.stderr) {
+  constructor(total: number, stdout: Stdout = process.stderr, callback: ?(progressBar: ProgressBar) => void) {
     this.stdout = stdout;
     this.total = total;
     this.chars = ProgressBar.bars[0];
     this.delay = 60;
     this.curr = 0;
+    this._callback = callback;
     clearLine(stdout);
   }
 
@@ -20,28 +21,44 @@ export default class ProgressBar {
   chars: [string, string];
   delay: number;
   id: ?number;
+  _callback: ?(progressBar: ProgressBar) => void;
 
   static bars = [['█', '░']];
 
   tick() {
+    if (this.curr >= this.total) {
+      return;
+    }
+
     this.curr++;
 
     // schedule render
     if (!this.id) {
       this.id = setTimeout((): void => this.render(), this.delay);
     }
+  }
 
-    // progress complete
-    if (this.curr >= this.total) {
+  cancelTick() {
+    if (this.id) {
       clearTimeout(this.id);
-      clearLine(this.stdout);
+      this.id = null;
+    }
+  }
+
+  stop() {
+    // "stop" by setting current to end so `tick` becomes noop
+    this.curr = this.total;
+
+    this.cancelTick();
+    clearLine(this.stdout);
+    if (this._callback) {
+      this._callback(this);
     }
   }
 
   render() {
     // clear throttle
-    clearTimeout(this.id);
-    this.id = null;
+    this.cancelTick();
 
     let ratio = this.curr / this.total;
     ratio = Math.min(Math.max(ratio, 0), 1);