Merge pull request #11 from MailOnline/feat/progress-bar

Feat/progress bar
MailOnline · Nov 13, 2017 · 790ff2f · 790ff2f
2 parents 9d45570 + a6f2ce7
commit 790ff2f
Show file tree

Hide file tree

Showing 7 changed files with 104 additions and 32 deletions.
diff --git a/package.json b/package.json
@@ -44,6 +44,7 @@
   },
   "dependencies": {
     "chalk": "^2.3.0",
-    "strip-ansi": "4.0.0"
+    "strip-ansi": "4.0.0",
+    "utf8-bar": "0.1.0"
   }
 }
diff --git a/src/LineWriter.js b/src/LineWriter.js
@@ -1,10 +1,15 @@
+/* eslint-disable complexity, no-use-extend-native/no-use-extend-native */
 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)\//;
 const REG_AT = /^\s*at/;
 const REG_ERROR = /^\s*Error:\s*/;
+const REG_RECEIVED = /^\s*Received:/;
+const REG_EXPECTED = /^\s*Expected value to equal:/;
+const REG_DIFFERENCE = /^\s*Difference:/;
 
 const MDASH = '\u2014';
 const CIRCLE = '●';
@@ -21,9 +26,29 @@ const PASS = chalk.supportsColor ?
   ` ${PASS_TEXT} `;
 
 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) => {
+  let percentFormatted = Math.round(100 * percent) + '%';
+
+  percentFormatted = percentFormatted.padStart(3, ' ');
+  percentFormatted = percentFormatted.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) {
     this.counter = 0;
@@ -70,8 +95,8 @@ class LineWriter {
   keyValueList (key, list) {
     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);
@@ -81,20 +106,25 @@ class LineWriter {
     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 +135,28 @@ class LineWriter {
 
     const list = [];
 
+    const percent = passed / total;
+    const bar = formatStatsBar(percent, percent < 1 && !updated && !added);
+
+    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);
   }
@@ -138,8 +173,8 @@ class LineWriter {
     this.result(chalk`{red not ok}`, chalk`{red.bold ${CIRCLE} ${title}}`);
   }
 
-  pending (title) {
-    this.result(chalk`{yellow ok}`, chalk`{yellow #} {yellow.bold SKIP} ${title}`);
+  skipped (title) {
+    this.result(chalk`{yellow ok}`, chalk`{yellow #} {yellow.bold SKIP} {yellow ${title}}`);
   }
 
   getPathRelativeToRoot (filePath) {
@@ -149,6 +184,7 @@ class LineWriter {
   formatFailureMessage (message) {
     const [firstLine, ...lines] = message.split('\n');
     const outputLines = [];
+    let context = '';
     const whitespace = '  ';
 
     const push = (line) => {
@@ -179,7 +215,7 @@ class LineWriter {
           if (!isLastLineBlank) {
             push('');
           }
-          push(chalk`{bold.dim Stack trace:}`);
+          push('Stack:');
           push('');
         }
 
@@ -203,7 +239,32 @@ class LineWriter {
           pushTraceLine(line);
         }
       } else {
-        push(line);
+        // eslint-disable-next-line no-lonely-if
+        if (line.match(REG_RECEIVED)) {
+          context = 'received';
+          push('');
+          push('Received:');
+          push('');
+        } else if (line.match(REG_EXPECTED)) {
+          context = 'expected';
+          push('Expected:');
+          push('');
+        } else if (line.match(REG_DIFFERENCE)) {
+          context = 'difference';
+          push('Difference:');
+        } else {
+          switch (context) {
+          case 'expected':
+          case 'received':
+            push('  ' + line);
+            break;
+          case 'difference':
+            push('    ' + line);
+            break;
+          default:
+            push(line);
+          }
+        }
       }
     }
 

diff --git a/src/TapReporter.js b/src/TapReporter.js
@@ -48,7 +48,7 @@ class TapReporter {
       this.writer.errors(failureMessages);
       break;
     case STATUS_PENDING:
-      this.writer.pending(formattedTitle);
+      this.writer.skipped(formattedTitle);
       this.writer.errors(failureMessages);
       break;
     default:
@@ -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();
   }

diff --git a/src/progressBar.js b/src/progressBar.js
@@ -0,0 +1,6 @@
+const chalk = require('chalk');
+const bar = require('utf8-bar');
+
+const progressBar = (percentage, styles = 'grey') => chalk`{${styles} ${bar(10, percentage)}}`;
+
+module.exports = progressBar;
diff --git a/test/LineWriter.spec.js b/test/LineWriter.spec.js
@@ -338,14 +338,14 @@ describe('LineWriter', () => {
     });
   });
 
-  describe('.pending()', () => {
+  describe('.skipped()', () => {
     test('calls .result() with the right parameters', () => {
       chalk.__stripColors();
 
       const writer = create();
 
       writer.result = jest.fn();
-      writer.pending('Test pending');
+      writer.skipped('Test pending');
 
       expect(writer.result).toHaveBeenCalledTimes(1);
       expect(writer.result.mock.calls[0]).toEqual(['ok', '# SKIP Test pending']);
@@ -357,7 +357,7 @@ describe('LineWriter', () => {
       const writer = create();
 
       writer.result = jest.fn();
-      writer.pending('Test pending');
+      writer.skipped('Test pending');
 
       expect(writer.result).toHaveBeenCalledTimes(1);
       expect(writer.result.mock.calls[0][0]).toMatchSnapshot();

diff --git a/test/TapReporter.spec.js b/test/TapReporter.spec.js
@@ -79,8 +79,8 @@ describe('TapReporter', () => {
 
       tapReporter.onTestResult({}, skippedTestSuite);
 
-      expect(tapReporter.writer.pending).toHaveBeenCalledTimes(1);
-      expect(tapReporter.writer.pending.mock.calls).toMatchSnapshot();
+      expect(tapReporter.writer.skipped).toHaveBeenCalledTimes(1);
+      expect(tapReporter.writer.skipped.mock.calls).toMatchSnapshot();
     });
 
     test('must output all the tests on a suite tests', () => {
@@ -91,7 +91,7 @@ describe('TapReporter', () => {
 
       expect(tapReporter.writer.passed.mock.calls).toMatchSnapshot();
       expect(tapReporter.writer.failed.mock.calls).toMatchSnapshot();
-      expect(tapReporter.writer.pending.mock.calls).toMatchSnapshot();
+      expect(tapReporter.writer.skipped.mock.calls).toMatchSnapshot();
     });
 
     describe('suite log', () => {

diff --git a/test/__snapshots__/LineWriter.spec.js.snap b/test/__snapshots__/LineWriter.spec.js.snap
@@ -12,7 +12,7 @@ exports[`LineWriter .errors() format stack trace 1`] = `
 "#   
 #   foobar
 #   
-#   Stack trace:
+#   Stack:
 #   
 #       at Something (../foo/bar.js:10:10)
 #       at Foobar (../foo/bar2.js:20:20)
@@ -32,18 +32,18 @@ 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",
 ]
 `;
 
 exports[`LineWriter .passed() colors "ok" green 1`] = `"{green ok}"`;
 
-exports[`LineWriter .pending() colors "ok" yellow 1`] = `"{yellow ok}"`;
+exports[`LineWriter .skipped() 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,28 +81,28 @@ 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",
 ]
 `;