tape-six 0.9.0 → 0.9.1

package/README.md

@@ -1,9 +1,17 @@
-# tape6 [![NPM version][npm-img]][npm-url]
+# tape-six [![NPM version][npm-img]][npm-url]
 
-[npm-img]:      https://img.shields.io/npm/v/tape6.svg
-[npm-url]:      https://npmjs.org/package/tape6
+[npm-img]:      https://img.shields.io/npm/v/tape-six.svg
+[npm-url]:      https://npmjs.org/package/tape-six
 
-tape6 is a [TAP](https://en.wikipedia.org/wiki/Test_Anything_Protocol)-based library for unit tests. It is written in modern ES6 and works in [node](https://nodejs.org/), [deno](https://deno.land/) and browsers.
+tape-six is a [TAP](https://en.wikipedia.org/wiki/Test_Anything_Protocol)-based library for unit tests. It is written in modern ES6 and works in [node](https://nodejs.org/), [deno](https://deno.land/) and browsers.
+
+Why `tape-six`? It was supposed to be named `tape6` but `npm` does not allow names "similar" to existing packages. Instead of eliminating name-squatting they force to use unintuitive and unmemorable names. That's why all internal names, environment variables, and public names still use `tape6`.
+
+Why another library? Working on projects written in modern JS (with modules) I found two problems with existing unit test libraries:
+
+* In my opinion unit test files should be directly executable with `node`, `deno`, browsers (with a trivial HTML file to load a test file) without a need for a special test runner utility, which wraps and massages my beautiful code.
+* Some of them do not work with modules.
+* Some of them have the abysmal developer experience in browsers.
 
 The documentation is TBD but you can inspect `tests/` to see how it is used.
 If you are familiar with other TAP-based libraries you'll feel right at home.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tape-six",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "TAP for the modern JavaScript (ES6).",
   "type": "module",
   "main": "index.js",
@@ -19,10 +19,10 @@
     "build": "npm run copyDeep6",
     "prepublishOnly": "npm run build"
   },
-  "github": "http://github.com/uhop/tape6",
+  "github": "http://github.com/uhop/tape-six",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/uhop/tape6.git"
+    "url": "git+https://github.com/uhop/tape-six.git"
   },
   "keywords": [
     "tap",
@@ -34,15 +34,14 @@
   "author": "Eugene Lazutkin <eugene.lazutkin@gmail.com> (https://www.lazutkin.com/)",
   "license": "BSD-3-Clause",
   "bugs": {
-    "url": "https://github.com/uhop/tape6/issues"
+    "url": "https://github.com/uhop/tape-six/issues"
   },
-  "homepage": "https://github.com/uhop/tape6#readme",
+  "homepage": "https://github.com/uhop/tape-six#readme",
   "files": [
     "index.js",
     "bin",
-    "web",
-    "src",
-    "cjs"
+    "webApp",
+    "src"
   ],
   "tape6": {
     "tests": [

package/webApp/DashReporter.js

@@ -0,0 +1,114 @@
+import {formatNumber} from '../src/utils/formatters.js';
+
+const tagsToReplace = {'&': '&amp;', '<': '&lt;', '>': '&gt;'};
+const escapeHtml = string => string.replace(/[&<>]/g, tag => tagsToReplace[tag] || tag);
+
+const formatName = event =>
+  '<span class="' +
+  (event.fail ? 'text-failure' : 'text-success') +
+  '">' +
+  ((event.skip && '<span class="text-skipped">SKIP</span>&nbsp;') || '') +
+  ((event.todo && '<span class="text-todo">TODO</span>&nbsp;') || '') +
+  escapeHtml(event.name || '') +
+  '</span>';
+
+class DashReporter {
+  constructor({renumberAsserts = false} = {}) {
+    this.renumberAsserts = renumberAsserts;
+    this.assertCounter = 0;
+    this.depth = this.assertCounter = this.failureCounter = this.skipCounter = this.todoCounter = 0;
+    this.testCounter = -1;
+    this.currentTest = this.lastAssert = '';
+    this.scoreNode = document.querySelector('.tape6 .score');
+    this.donutNode = this.scoreNode && this.scoreNode.querySelector('tape6-donut');
+    this.legendNode = document.querySelector('.tape6 .legend');
+    this.spinnerNode = document.querySelector('.tape6 tape6-spinner');
+    this.running = true;
+  }
+  report(event) {
+    switch (event.type) {
+      case 'test':
+        ++this.depth;
+        ++this.testCounter;
+        this.currentTest = formatName(event);
+        this.updateDashboard();
+        break;
+      case 'end':
+        if (!--this.depth) {
+          this.running = false;
+          this.updateDashboard();
+        }
+        break;
+      case 'assert':
+        ++this.assertCounter;
+        event.fail && !event.skip && !event.todo && ++this.failureCounter;
+        event.skip && ++this.skipCounter;
+        event.todo && ++this.todoCounter;
+        this.lastAssert = formatName(event);
+        this.updateDashboard();
+        break;
+    }
+  }
+  updateDashboard() {
+    this.updateDonut();
+    this.updateLegend();
+    this.updateStatus();
+    this.updateScoreCard();
+  }
+  updateDonut() {
+    if (!this.donutNode) return;
+    const total = this.assertCounter - this.skipCounter,
+      success = total - this.failureCounter;
+    this.donutNode.show([
+      {value: success, className: 'success'},
+      {value: this.failureCounter, className: 'failure'},
+      {value: this.skipCounter, className: 'skipped'},
+      {value: this.todoCounter, className: 'todo'}
+    ]);
+  }
+  updateLegend() {
+    if (!this.legendNode) return;
+    const total = this.assertCounter - this.skipCounter,
+      success = total - this.failureCounter;
+    let node = this.legendNode.querySelector('.legend-tests .value');
+    node && (node.innerHTML = formatNumber(this.testCounter));
+    node = this.legendNode.querySelector('.legend-asserts .value');
+    node && (node.innerHTML = formatNumber(this.assertCounter));
+    node = this.legendNode.querySelector('.legend-success .value');
+    node && (node.innerHTML = formatNumber(success));
+    node = this.legendNode.querySelector('.legend-failure .value');
+    node && (node.innerHTML = formatNumber(this.failureCounter));
+    node = this.legendNode.querySelector('.legend-skipped .value');
+    node && (node.innerHTML = formatNumber(this.skipCounter));
+    node = this.legendNode.querySelector('.legend-todo .value');
+    node && (node.innerHTML = formatNumber(this.todoCounter));
+  }
+  updateStatus() {
+    if (!this.spinnerNode) return;
+    this.spinnerNode[this.running ? 'show' : 'hide']();
+  }
+  updateScoreCard() {
+    if (!this.scoreNode) return;
+    const total = this.assertCounter - this.skipCounter,
+      success = total - this.failureCounter,
+      fail = success < total,
+      result = total > 0 ? formatNumber(100 * (success / total), 1) : '100';
+    let node = this.scoreNode.querySelector('.text');
+    node.classList.remove('nothing');
+    if (fail) {
+      node.classList.remove('success-dark');
+      node.classList.add('failure-dark');
+    } else {
+      node.classList.remove('failure-dark');
+      node.classList.add('success-dark');
+    }
+    node = this.scoreNode.querySelector('.message');
+    while (node.lastChild) node.removeChild(node.lastChild);
+    node.appendChild(document.createTextNode(fail ? 'Need some work' : 'All good!'));
+    node = this.scoreNode.querySelector('.result');
+    while (node.lastChild) node.removeChild(node.lastChild);
+    node.appendChild(document.createTextNode(result + '% passed'));
+  }
+}
+
+export default DashReporter;

package/webApp/DomReporter.js

@@ -0,0 +1,160 @@
+const formatValue = value => {
+  if (typeof value == 'string') return value;
+  return JSON.stringify(value);
+};
+
+class DomReporter {
+  constructor({root, renumberAsserts = false} = {}) {
+    this.root = root;
+    this.renumberAsserts = renumberAsserts;
+    this.assertCounter = 0;
+    this.stack = []; // previous test nodes
+    this.current = null; // the current test node
+  }
+  report(event) {
+    let text;
+    switch (event.type) {
+      case 'test':
+        this.stack.push(this.current);
+        if (this.stack.length <= 1) break;
+        this.current = document.createElement('div');
+        this.current.className = 'test running';
+        {
+          const header = document.createElement('div');
+          header.className = 'header';
+          if (event.todo) {
+            const todo = document.createElement('span');
+            todo.className = 'text-todo';
+            todo.appendChild(document.createTextNode('TODO'));
+            header.appendChild(todo);
+            header.appendChild(document.createTextNode(' '));
+          }
+          header.appendChild(document.createTextNode(event.name));
+          this.current.appendChild(header);
+        }
+        ((this.stack.length && this.stack[this.stack.length - 1]) || this.root).appendChild(this.current);
+        break;
+      case 'end':
+        if (this.current) {
+          this.current.classList.remove('running');
+          this.current.classList.add(event.fail ? 'failed' : 'passed');
+        }
+        this.current = this.stack.pop();
+        break;
+      case 'comment':
+        {
+          const comment = document.createElement('div');
+          comment.className = 'comment text-comment';
+          comment.appendChild(document.createTextNode(event.name));
+          (this.current || this.root).appendChild(comment);
+        }
+        break;
+      case 'bail-out':
+        text = 'Bail out!';
+        event.name && (text += ' ' + event.name);
+        this.write(text, 'bail-out');
+        {
+          const bailOut = document.createElement('div');
+          bailOut.className = 'bail-out';
+          bailOut.appendChild(document.createTextNode(event.name));
+          this.root.appendChild(bailOut);
+        }
+        break;
+      case 'assert':
+        {
+          const assert = document.createElement('div');
+          assert.className = 'assert ' + (event.fail ? 'failed' : 'passed');
+          const header = document.createElement('div');
+          header.className = 'header';
+          if (event.skip) {
+            const node = document.createElement('span');
+            node.className = 'text-skipped';
+            node.appendChild(document.createTextNode('SKIP'));
+            header.appendChild(node);
+            header.appendChild(document.createTextNode(' '));
+          }
+          if (event.todo) {
+            const node = document.createElement('span');
+            node.className = 'text-todo';
+            node.appendChild(document.createTextNode('TODO'));
+            header.appendChild(node);
+            header.appendChild(document.createTextNode(' '));
+          }
+          header.appendChild(document.createTextNode(event.name));
+          assert.appendChild(header);
+          if (event.operator) {
+            const row = document.createElement('div'),
+              name = document.createElement('span'),
+              value = document.createElement('code');
+            row.className = 'data';
+            name.className = 'name';
+            name.appendChild(document.createTextNode('operator:'));
+            value.className = 'value';
+            value.appendChild(document.createTextNode(event.operator));
+            row.appendChild(name);
+            row.appendChild(value);
+            assert.appendChild(row);
+          }
+          if (event.hasOwnProperty('expected')) {
+            const row = document.createElement('div'),
+              name = document.createElement('span'),
+              value = document.createElement('code');
+            row.className = 'data';
+            name.className = 'name';
+            name.appendChild(document.createTextNode('expected:'));
+            value.className = 'value';
+            value.appendChild(document.createTextNode(formatValue(event.expected)));
+            row.appendChild(name);
+            row.appendChild(value);
+            assert.appendChild(row);
+          }
+          if (event.hasOwnProperty('actual')) {
+            const row = document.createElement('div'),
+              name = document.createElement('span'),
+              value = document.createElement('code');
+            row.className = 'data';
+            name.className = 'name';
+            name.appendChild(document.createTextNode('actual:'));
+            value.className = 'value';
+            value.appendChild(document.createTextNode(formatValue(event.actual)));
+            row.appendChild(name);
+            row.appendChild(value);
+            assert.appendChild(row);
+          }
+          if (event.at) {
+            const row = document.createElement('div'),
+              name = document.createElement('span'),
+              value = document.createElement('code');
+            row.className = 'data';
+            name.className = 'name';
+            name.appendChild(document.createTextNode('at:'));
+            value.className = 'value';
+            value.appendChild(document.createTextNode(event.at));
+            row.appendChild(name);
+            row.appendChild(value);
+            assert.appendChild(row);
+          }
+          {
+            const stack = event.actual && event.actual.type === 'Error' && typeof event.actual.stack == 'string' ? event.actual.stack : event.marker.stack;
+            if (typeof stack == 'string') {
+              const row = document.createElement('div'),
+                name = document.createElement('span'),
+                value = document.createElement('pre');
+              row.className = 'data stack';
+              name.className = 'name';
+              name.appendChild(document.createTextNode('stack:'));
+              value.className = 'value';
+              stack.split('\n').forEach(line => value.appendChild(document.createTextNode(line + '\n')));
+              row.appendChild(name);
+              row.appendChild(value);
+              assert.appendChild(row);
+            }
+          }
+          (this.current || this.root).appendChild(assert);
+        }
+        break;
+    }
+  }
+}
+
+export default DomReporter;

package/webApp/TestWorker.js

@@ -0,0 +1,54 @@
+import EventServer from '../src/utils/EventServer.js';
+
+export default class TestWorker extends EventServer {
+  constructor(...args) {
+    super(...args);
+    this.counter = 0;
+    window.__tape6_reporter = (id, event) => {
+      this.report(id, event);
+      if (event.type === 'end' && event.test === 0) this.close(id);
+    };
+    window.__tape6_error = (id, error) => {
+      error && this.report(id, {type: 'comment', name: 'fail to load: ' + error.message, test: 0});
+      this.close(id);
+    };
+  }
+  makeTask(fileName) {
+    const id = String(++this.counter);
+    const iframe = document.createElement('iframe');
+    iframe.id = 'test-iframe-' + id;
+    iframe.className = 'test-iframe';
+    if (/\.html?$/i.test(fileName)) {
+      iframe.src = '/' + fileName + '?id=' + id + (this.options.failOnce ? '&flags=F' : '');
+      iframe.onerror = error => window.__tape6_error(id, error);
+      document.body.append(iframe);
+    } else {
+      document.body.append(iframe);
+      iframe.contentWindow.document.open();
+      iframe.contentWindow.document.write(`
+        <!doctype html>
+        <html>
+          <head>
+            <title>Test IFRAME</title>
+            <script type="module">
+              window.__tape6_id = ${JSON.stringify(id)};
+              window.__tape6_flags = "${this.options.failOnce ? 'F' : ''}";
+              const s = document.createElement('script');
+              s.setAttribute('type', 'module');
+              s.src = '/${fileName}';
+              s.onerror = error => window.parent.__tape6_error(window.__tape6_id, error);
+              document.documentElement.appendChild(s);
+            </script>
+          </head>
+          <body></body>
+        </html>
+      `);
+      iframe.contentWindow.document.close();
+    }
+    return id;
+  }
+  destroyTask(id) {
+    const iframe = document.getElementById('test-iframe-' + id);
+    iframe && iframe.parentElement.removeChild(iframe);
+  }
+}

package/webApp/donut.js

@@ -0,0 +1,235 @@
+const TWO_PI = 2 * Math.PI;
+
+const tmpl = (template, dict) => template.replace(/\$\{([^\}]*)\}/g, (_, name) => dict[name]);
+
+export const makeSegment = (args, options) => {
+  // args is {startAngle, angle, index, className}
+  // optional index points to a data point
+  // optional className is a CSS class
+  // default startAngle=0 (in radians)
+  // default angle=2*PI (in radians)
+
+  // options is {center, innerRadius, radius, gap, precision, document}
+  // default center is {x=0, y=0}
+  // default innerRadius=0
+  // default radius=100
+  // default gap=0 (gap between segments in pixels)
+  // default precision=6 (digits after decimal point)
+  // default document is document
+
+  const node = (options.document || document).createElementNS('http://www.w3.org/2000/svg', 'path'),
+    center = options.center || {x: 0, y: 0},
+    innerRadius = Math.max(options.innerRadius || 0, 0),
+    radius = Math.max(options.radius || 100, innerRadius),
+    gap = Math.max(options.gap || 0, 0),
+    precision = options.precision || 6,
+    angle = typeof args.angle != 'number' || args.angle >= TWO_PI ? TWO_PI : args.angle,
+    startAngle = args.startAngle || 0;
+
+  let path;
+
+  const innerGapAngle = gap / innerRadius / 2,
+    gapAngle = gap / radius / 2,
+    cx = center.x,
+    cy = center.y,
+    data = {
+      cx: cx.toFixed(precision),
+      cy: cy.toFixed(precision),
+      r: radius.toFixed(precision)
+    };
+
+  if (angle >= TWO_PI) {
+    data.tr = (2 * radius).toFixed(precision);
+    // generate a circle
+    if (innerRadius <= 0) {
+      // a circle
+      path = tmpl('M${cx} ${cy}m -${r} 0a${r} ${r} 0 1 0 ${tr} 0a${r} ${r} 0 1 0 -${tr} 0z', data);
+    } else {
+      data.r0 = innerRadius.toFixed(precision);
+      data.tr0 = (2 * innerRadius).toFixed(precision);
+      // a donut
+      path = tmpl(
+        'M${cx} ${cy}m -${r} 0a${r} ${r} 0 1 0 ${tr} 0a${r} ${r} 0 1 0 -${tr} 0zM${cx} ${cy}m -${r0} 0a${r0} ${r0} 0 1 1 ${tr0} 0a${r0} ${r0} 0 1 1 -${tr0} 0z',
+        data
+      );
+    }
+  } else {
+    const endAngle = startAngle + angle;
+    let start = startAngle + gapAngle,
+      finish = endAngle - gapAngle;
+    if (finish < start) {
+      start = finish = startAngle + angle / 2;
+    }
+    data.lg = angle > Math.PI ? 1 : 0;
+    data.x1 = (radius * Math.cos(start) + cx).toFixed(precision);
+    data.y1 = (radius * Math.sin(start) + cy).toFixed(precision);
+    data.x2 = (radius * Math.cos(finish) + cx).toFixed(precision);
+    data.y2 = (radius * Math.sin(finish) + cy).toFixed(precision);
+    if (innerRadius <= 0) {
+      // a pie slice
+      path = tmpl('M${cx} ${cy}L${x1} ${y1}A${r} ${r} 0 ${lg} 1 ${x2} ${y2}L${cx} ${cy}z', data);
+    } else {
+      start = startAngle + innerGapAngle;
+      finish = endAngle - innerGapAngle;
+      if (finish < start) {
+        start = finish = startAngle + angle / 2;
+      }
+      data.r0 = innerRadius.toFixed(precision);
+      data.x3 = (innerRadius * Math.cos(finish) + cx).toFixed(precision);
+      data.y3 = (innerRadius * Math.sin(finish) + cy).toFixed(precision);
+      data.x4 = (innerRadius * Math.cos(start) + cx).toFixed(precision);
+      data.y4 = (innerRadius * Math.sin(start) + cy).toFixed(precision);
+      // a segment
+      path = tmpl('M${x1} ${y1}A${r} ${r} 0 ${lg} 1 ${x2} ${y2}L${x3} ${y3}A${r0} ${r0} 0 ${lg} 0 ${x4} ${y4}L${x1} ${y1}z', data);
+    }
+  }
+  node.setAttribute('d', path);
+  if ('index' in args) {
+    node.setAttribute('data-index', args.index);
+  }
+  if (args.className) {
+    node.setAttribute('class', args.className);
+  }
+  return node;
+};
+
+export const processPieRun = (data, options) => {
+  // data is [datum, datum...]
+  // datum is {value, className, skip, hide}
+  // value is a positive number
+  // className is an optional CSS class name
+  // skip is a flag (default: false) to skip this segment completely
+  // hide is a flag (default: false) to suppress rendering
+
+  // options is {center, innerRadius, radius, startAngle, minSizeInPx, skipIfLessInPx, emptyClass, precision}
+  // default center is {x=0, y=0}
+  // default innerRadius=0
+  // default radius=100
+  // default startAngle=0 (in radians)
+  // default gap=0 (gap between segments in pixels)
+  // default precision=6 (digits after decimal point)
+  // minSizeInPx is to make non-empty segments at least this big (default: 0).
+  // skipIfLessInPx is a threshold (default: 0), when to skip too small segments.
+  // emptyClass is a CSS class name for an empty run
+
+  const radius = Math.max(options.radius || 100, options.innerRadius || 0, 0),
+    gap = Math.max(options.gap || 0, 0),
+    minSizeInPx = Math.max(options.minSizeInPx || 0, 0),
+    skipIfLessInPx = Math.max(options.skipIfLessInPx || 0, gap),
+    runOptions = {
+      center: options.center,
+      innerRadius: options.innerRadius,
+      radius: radius,
+      gap: gap,
+      precision: options.precision,
+      document: options.document
+    };
+
+  // sanitize data
+  data.forEach((datum, index) => {
+    if (!datum.skip && (isNaN(datum.value) || datum.value === null || datum.value <= 0)) {
+      datum.skip = true;
+    }
+    datum.index = index;
+  });
+
+  const total = data.reduce((acc, datum) => (datum.skip ? acc : acc + datum.value), 0);
+
+  let node;
+  if (total <= 0) {
+    // empty run
+    node = makeSegment(
+      {
+        index: -1, // to denote that it is not an actionable node
+        className: options.emptyClass
+      },
+      runOptions
+    );
+    return [node];
+  }
+
+  const nonEmptyDatumNumber = data.reduce((acc, datum) => (datum.skip ? acc : acc + 1), 0);
+
+  if (nonEmptyDatumNumber === 1) {
+    data.some(datum => {
+      if (datum.skip) return false;
+      node = makeSegment(
+        {
+          index: datum.index,
+          className: datum.className
+        },
+        runOptions
+      );
+      return true;
+    });
+    return [node];
+  }
+
+  // find too small segments
+  const sizes = data.map(datum => {
+    let angle = 0;
+    if (!datum.skip) {
+      angle = (datum.value / total) * TWO_PI;
+    }
+    return {angle: angle, index: datum.index};
+  });
+
+  let minAngle, newTotal, changeRatio;
+  if (minSizeInPx > 0) {
+    // adjust angles
+    minAngle = (minSizeInPx + gap) / radius;
+    sizes.forEach((size, index) => {
+      const datum = data[index];
+      if (!datum.skip && !datum.hide && size.angle < minAngle) {
+        size.angle = minAngle;
+      }
+    });
+    newTotal = sizes.reduce((acc, size) => acc + size.angle, 0);
+    const excess = newTotal - total,
+      totalForLargeAngles = sizes.reduce((acc, size) => (size.angle <= minAngle ? acc : acc + size.angle), 0);
+    changeRatio = (totalForLargeAngles - excess) / totalForLargeAngles;
+    sizes.forEach(size => {
+      if (size.angle > minAngle) {
+        size.angle *= changeRatio;
+      }
+    });
+  } else if (skipIfLessInPx > 0) {
+    // suppress angles
+    minAngle = skipIfLessInPx / radius;
+    sizes.forEach((size, index) => {
+      const datum = data[index];
+      if (!datum.skip && !datum.hide && size.angle < minAngle) {
+        size.angle = 0;
+      }
+    });
+    newTotal = sizes.reduce((acc, size) => acc + size.angle, 0);
+    changeRatio = TWO_PI / newTotal;
+    sizes.forEach(size => {
+      if (size.angle > 0) {
+        size.angle *= changeRatio;
+      }
+    });
+  }
+
+  // generate shape objects
+  const shapes = [];
+  let startAngle = options.startAngle || 0;
+  data.forEach((datum, index) => {
+    if (!datum.skip) {
+      const angle = sizes[index].angle;
+      if (!datum.hide) {
+        shapes.push({
+          index: index,
+          startAngle: startAngle,
+          angle: angle,
+          className: datum.className
+        });
+      }
+      startAngle += angle;
+    }
+  });
+
+  return shapes.map(shape => makeSegment(shape, runOptions));
+};
+
+export const addShapes = parent => node => parent.appendChild(node);