feat: add progress bars to summary

src/LineWriter.js

@@ -1,5 +1,6 @@
 const path = require('path');
 const chalk = require('chalk');
+const progressBar = require('./progressBar');
 
 const REG_TRACE_LINE = /\s*(.+)\((.+):([0-9]+):([0-9]+)\)$/;
 const REG_INTERNALS = /^(node_modules|internal)\//;
@@ -23,6 +24,21 @@ const PASS = chalk.supportsColor ?
 const formatComment = (line) => chalk`{hidden #} ${line}`;
 const formatFailureMessageTraceLine = (description, relativeFilePath, row, column) =>
   chalk`${description}({cyan ${relativeFilePath}}:{black.bold ${row}}:{black.bold ${column}})`;
+const formatStatsBar = (percent, hasErrors) => {
+  // eslint-disable-next-line no-use-extend-native/no-use-extend-native
+  const percentFormatted = (Math.round(100 * percent) + '%').padStart(3, ' ').padEnd(4, ' ');
+  const bar = progressBar(percent, hasErrors ? 'red' : 'grey.dim');
+
+  let textStyles = 'green';
+
+  if (hasErrors) {
+    textStyles = 'red.bold';
+  } else if (percent < 1) {
+    textStyles = 'yellow';
+  }
+
+  return chalk`{${textStyles} ${percentFormatted}} ${bar}`;
+};
 
 class LineWriter {
   constructor (logger, root) {
@@ -60,41 +76,46 @@ class LineWriter {
     this.comment(chalk`{dim ${line}}`);
   }
 
-  keyValue (key, value) {
+  keyValue (key, value, prefix = '') {
     // eslint-disable-next-line no-use-extend-native/no-use-extend-native
     const keyFormatted = (key + ':').padEnd(12, ' ');
 
-    this.comment(chalk`{bold ${keyFormatted}} ${value}`);
+    this.comment(chalk`${prefix}{bold ${keyFormatted}} ${value}`);
   }
 
-  keyValueList (key, list) {
+  keyValueList (key, list, prefix = '') {
     let value = '';
 
-    for (const [label, style, num] of list) {
-      value += (value ? ', ' : '') + chalk`{${style} ${num} ${label}}`;
+    for (const item of list) {
+      value += (value ? ', ' : '') + item;
     }
 
-    this.keyValue(key, value);
+    this.keyValue(key, value, prefix);
   }
 
   stats (name, failed, skipped, passed, total) {
     const list = [];
 
     if (total) {
+      const bar = formatStatsBar(passed / total, passed + skipped < total);
+
+      list.push(bar);
+
       if (failed) {
-        list.push(['failed', 'red.bold', failed]);
+        list.push(chalk`{red.bold ${failed} failed}`);
       }
 
       if (skipped) {
-        list.push(['skipped', 'yellow.bold', skipped]);
+        list.push(chalk`{yellow.bold ${skipped} skipped}`);
       }
 
       if (passed) {
-        list.push(['passed', 'green.bold', passed]);
+        list.push(chalk`{green.bold ${passed} passed}`);
       }
     }
 
-    list.push(['total', 'reset', total]);
+    list.push(chalk`{reset ${total} total}`);
+
     this.keyValueList(name, list);
   }
 
@@ -105,23 +126,28 @@ class LineWriter {
 
     const list = [];
 
+    const percent = passed / total;
+    const bar = formatStatsBar(percent, percent < 1 && !updated);
+
+    list.push(bar);
+
     if (failed) {
-      list.push(['failed', 'red.bold', failed]);
+      list.push(chalk`{red.bold ${failed} failed}`);
     }
 
     if (updated) {
-      list.push(['updated', 'yellow.bold', updated]);
+      list.push(chalk`{yellow.bold ${updated} updated}`);
     }
 
     if (added) {
-      list.push(['added', 'green.bold', added]);
+      list.push(chalk`{green.bold ${added} added}`);
     }
 
     if (passed) {
-      list.push(['passed', 'green.bold', passed]);
+      list.push(chalk`{green.bold ${passed} passed}`);
     }
 
-    list.push(['total', 'reset', total]);
+    list.push(chalk`{reset ${total} total}`);
 
     this.keyValueList('Snapshots', list);
   }

src/TapReporter.js

@@ -110,7 +110,11 @@ class TapReporter {
     if (snapshotsTotal) {
       this.writer.snapshots(snapshotsFailed, snapshotsUpdated, snapshotsAdded, snapshotsPassed, snapshotsTotal);
     }
-    this.writer.keyValue('Time', `${((Date.now() - startTime) / 1e3).toFixed(3)}s` + (estimatedTime ? `, estimated ${estimatedTime}s` : ''));
+
+    const timeValue = `${((Date.now() - startTime) / 1e3).toFixed(3)}s` + (estimatedTime ? `, estimated ${estimatedTime}s` : '');
+
+    this.writer.keyValue('Time', timeValue);
+    this.writer.blank();
     this.writer.commentLight('Ran all test suites.');
     this.writer.blank();
   }

src/progressBar.js

@@ -1,6 +1,6 @@
 const chalk = require('chalk');
 const bar = require('utf8-bar');
 
-const progressBar = (percentage, styles = 'grey') => chalk`{${styles} ${bar(20, percentage)}}`;
+const progressBar = (percentage, styles = 'grey') => chalk`{${styles} ${bar(10, percentage)}}`;
 
-export default progressBar;
+module.exports = progressBar;

test/__snapshots__/LineWriter.spec.js.snap

@@ -32,7 +32,8 @@ Array [
 exports[`LineWriter .keyValueList() formats 3-tuple list into a value and calls .keyValue() 1`] = `
 Array [
   "foo",
-  "{styles1 1 name1}, {styles2 2 name2}, {styles3 3 name3}, {styles4 4 name4}",
+  "name1,styles1,1, name2,styles2,2, name3,styles3,3, name4,styles4,4",
+  "",
 ]
 `;
 
@@ -43,7 +44,8 @@ exports[`LineWriter .pending() colors "ok" yellow 1`] = `"{yellow ok}"`;
 exports[`LineWriter .snapshots() when all values are greater than zero prints them all 1`] = `
 Array [
   "Snapshots",
-  "1 failed, 1 updated, 1 added, 1 passed, 4 total",
+  "25%  ██▌       , 1 failed, 1 updated, 1 added, 1 passed, 4 total",
+  "",
 ]
 `;
 
@@ -81,35 +83,40 @@ Array [
 exports[`LineWriter .stats() when all tests pass shows only passed and total tests 1`] = `
 Array [
   "foo",
-  "1 passed, 1 total",
+  "100% ██████████, 1 passed, 1 total",
+  "",
 ]
 `;
 
 exports[`LineWriter .stats() when some tests are skipped and no tests fail shows only passed, skipped and total tests 1`] = `
 Array [
   "foo",
-  "1 skipped, 1 passed, 2 total",
+  "50%  █████     , 1 skipped, 1 passed, 2 total",
+  "",
 ]
 `;
 
 exports[`LineWriter .stats() when some tests are skipped shows all items 1`] = `
 Array [
   "foo",
-  "1 failed, 1 skipped, 1 passed, 3 total",
+  "33%  ███▍      , 1 failed, 1 skipped, 1 passed, 3 total",
+  "",
 ]
 `;
 
 exports[`LineWriter .stats() when some tests fail shows only passed, failed and total tests 1`] = `
 Array [
   "foo",
-  "1 failed, 1 passed, 2 total",
+  "50%  █████     , 1 failed, 1 passed, 2 total",
+  "",
 ]
 `;
 
 exports[`LineWriter .stats() when zero tests shows only total zero 1`] = `
 Array [
   "foo",
   "0 total",
+  "",
 ]
 `;