fix: Make clickable reason-links for skipped results in html report

Author: up73k

lib/reporters/html/lib.js

@@ -11,7 +11,6 @@ var _ = require('lodash'),
 
     absolutePath = _.partial(path.resolve, REPORT_OUT_DIR);
 
-
 /**
  * @param {String} kind - одно из значение 'ref', 'current', 'diff'
  * @param {StateResult} result

lib/reporters/html/static/report.css

@@ -81,6 +81,16 @@
     user-select: none;
 }
 
+.section__title_skipped {
+    color: #ccc;
+    cursor: default;
+
+    -moz-user-select: text;
+    -webkit-user-select: text;
+    -ms-user-select: text;
+    user-select: text;    
+}
+
 .section__title:before, .meta-info__switcher:before {
     display: inline-block;
     margin-right: 2px;

lib/reporters/html/templates/suite.hbs

@@ -13,12 +13,14 @@
         {{#each browsers}}
             <div class="section section_collapsed {{section-status}} {{has-retries}}">
                 {{#if result.skipped}}
-                    {{#if result.reason}}
-                        <div class="section__title">[skipped] {{result.name}}, reason: {{result.reason}}</div>
-                    {{/if}}
-                    {{#unless result.reason}}
-                        <div class="section__title">[skipped] {{result.name}}</div>
-                    {{/unless}}
+                    <div class="section__title section__title_skipped">
+                        {{#if result.reason}}
+                            [skipped] {{result.name}}, reason: {{{result.reason}}}
+                        {{/if}}
+                        {{#unless result.reason}}
+                            [skipped] {{result.name}}
+                        {{/unless}}
+                    </div>
                 {{/if}}
                 {{#unless result.skipped}}
                     <div class="section__title">

lib/reporters/html/view-model.js

@@ -18,17 +18,15 @@ module.exports = class ViewModel {
      * @param {StateResult} result
      */
     addSkipped(result) {
+        const comment = result.suite.skipComment && wrapLinkByTag(result.suite.skipComment);
+
+        this._skips.push({suite: result.suite.fullName, browser: result.browserId, comment});
+
         this._addTestResult(result, {
             skipped: true,
-            reason: result.suite.skipComment
+            reason: comment
         });
 
-        const comment = result.suite.skipComment
-            && result.suite.skipComment.replace(/https?:\/\/[^\s]*/g, (url) => {
-                return `<a target="_blank" href="${url}">${url}</a>`;
-            });
-        this._skips.push({suite: result.suite.fullName, browser: result.browserId, comment});
-
         this._counter.onSkipped(result);
     }
 
@@ -208,3 +206,9 @@ function findOrCreate(node, statePath) {
 
     return findOrCreate(child, statePath);
 }
+
+function wrapLinkByTag(text) {
+    return text.replace(/https?:\/\/[^\s]*/g, (url) => {
+        return `<a target="_blank" href="${url}">${url}</a>`;
+    });
+}