Merge pull request #406 from inikulin/gh374-5

Redesign error decorator, so it fits needs of both API versions (#374 part5)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "testcafe",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "main": "lib/index",
   "bin": {
     "testcafe": "./bin/testcafe"
@@ -12,13 +12,14 @@
     "babel-preset-es2015-node4": "^2.0.2",
     "babel-preset-stage-2": "^6.3.13",
     "babel-runtime": "^6.3.19",
-    "callsite-record": "^1.0.2",
+    "callsite-record": "^2.0.0",
     "chalk": "^1.1.0",
     "commander": "^2.8.1",
     "dedent": "^0.4.0",
     "elegant-spinner": "^1.0.1",
     "endpoint-utils": "^1.0.0",
     "globby": "^3.0.1",
+    "highlight-es": "^1.0.0",
     "indent-string": "^1.2.2",
     "is-glob": "^2.0.1",
     "lodash": "^4.5.1",
@@ -106,6 +107,7 @@
       "elegant-spinner",
       "endpoint-utils",
       "globby",
+      "highlight-es",
       "indent-string",
       "is-glob",
       "lodash",

src/errors/test-run/formattable-adapter.js

@@ -1,21 +1,26 @@
-import { assignIn } from 'lodash';
+import { find, assignIn } from 'lodash';
 import { Parser } from 'parse5';
+import { renderers } from 'callsite-record';
+import stackFilter from '../stack-filter';
 
 var parser = new Parser();
 
 export default class TestRunErrorFormattableAdapter {
-    constructor (err, userAgent) {
+    constructor (err, userAgent, screenshotPath, callsite) {
         this.TEMPLATES = null;
-        this.userAgent = userAgent;
+
+        this.userAgent      = userAgent;
+        this.screenshotPath = screenshotPath;
+        this.callsite       = callsite;
 
         assignIn(this, err);
     }
 
     static _getSelector (node) {
-        var dataTypeAttr = node.attrs.filter(attr => attr.name === 'data-type')[0];
-        var type         = dataTypeAttr && dataTypeAttr.value || '';
+        var classAttr = find(node.attrs, { name: 'class' });
+        var cls       = classAttr && classAttr.value;
 
-        return type ? `${node.tagName} ${type}` : node.tagName;
+        return cls ? `${node.tagName} ${cls}` : node.tagName;
     }
 
     static _decorateHtml (node, decorator) {
@@ -40,6 +45,10 @@ export default class TestRunErrorFormattableAdapter {
         return msg;
     }
 
+    getCallsiteMarkup () {
+        return this.callsite.renderSync({ renderer: renderers.html, stackFilter });
+    }
+
     formatMessage (decorator, viewportWidth) {
         var msgHtml  = this.TEMPLATES[this.type](this, viewportWidth);
         var fragment = parser.parseFragment(msgHtml);

src/legacy/test-run-error/formattable-adapter.js

@@ -1,10 +1,31 @@
+import { escape as escapeHtml } from 'lodash';
+import highlight from 'highlight-es';
 import TestRunErrorFormattableAdapter from '../../errors/test-run/formattable-adapter';
 import TEMPLATES from './templates';
 
+const NEWLINE = /\r\n|[\n\r\u2028\u2029]/;
+
+var renderer = ['string', 'punctuator', 'keyword', 'number', 'regex', 'comment', 'invalid'].reduce((syntaxRenderer, tokenType) => {
+    syntaxRenderer[tokenType] = str => `<span class="syntax-${tokenType}">${escapeHtml(str)}</span>`;
+
+    return syntaxRenderer;
+}, {});
+
 export default class LegacyTestRunErrorFormattableAdapter extends TestRunErrorFormattableAdapter {
-    constructor (err, userAgent) {
-        super(err, userAgent);
+    constructor (err, userAgent, screenshotPath, callsite) {
+        super(err, userAgent, screenshotPath, callsite);
 
         this.TEMPLATES = TEMPLATES;
     }
+
+    getCallsiteMarkup () {
+        var code     = highlight(this.callsite, renderer);
+        var lines    = code.split(NEWLINE);
+        var lastLine = lines.pop();
+
+        lastLine = `<div class="code-line-last">${lastLine}</div>`;
+        lines    = lines.map(line => `<div class="code-line"><div class="code-line-src">${line}</div></div>`);
+
+        return `<div class="code-frame">${lines.join('')}${lastLine}</div>`;
+    }
 }