GH-51 display markdown as html, display screens shots

.vscode/settings.json

@@ -13,7 +13,9 @@
       "titleBar.inactiveForeground": "#e7e7e799",
       "statusBar.background": "#38224c",
       "statusBarItem.hoverBackground": "#52326f",
-      "statusBar.foreground": "#e7e7e7"
+      "statusBar.foreground": "#e7e7e7",
+      "statusBar.border": "#38224c",
+      "titleBar.border": "#38224c"
     },
     "python.linting.pylintEnabled": true,
     "cucumberautocomplete.steps": [

README.md

@@ -1,5 +1,5 @@
 # YACHR
-[![Build Status](https://travis-ci.org/yachr/yachr.svg?branch=GH-48)](https://travis-ci.org/yachr/yachr/branches)
+[![Build Status](https://travis-ci.org/yachr/yachr.svg?branch=develop)](https://travis-ci.org/yachr/yachr/branches)
 [![Coverage Status](https://coveralls.io/repos/github/yachr/yachr/badge.svg?branch=develop)](https://coveralls.io/github/yachr/yachr?branch=develop)
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
 ---

package.json

@@ -71,8 +71,10 @@
     "typescript": "^3.3.3333"
   },
   "dependencies": {
+    "@types/marked": "^0.7.4",
     "chart.js": "^2.8.0",
-    "handlebars": "^4.7.3"
+    "handlebars": "^4.7.3",
+    "marked": "^1.1.0"
   },
   "files": [
     "dist/"

src/reporter.ts

@@ -1,9 +1,8 @@
 import * as fs from 'fs';
 import * as Handlebars from 'handlebars';
+import * as marked from 'marked';
 
-import { FeatureSuiteSummary } from './models/aggregator/featureSuiteSummary';
 import { FeatureSummary } from './models/aggregator/featureSummary';
-import { ScenarioSuiteSummary } from './models/aggregator/scenarioSuiteSummary';
 import { ScenarioSummary } from './models/aggregator/scenarioSummary';
 import { IHtmlModel } from './models/htmlModel';
 import { ICucumberFeature } from './models/reporter/cucumberFeature';
@@ -32,7 +31,7 @@ export class Reporter {
 
     const aggregator = new ReportAggregator();
 
-    const data = <IHtmlModel>{
+    const data = <IHtmlModel> {
       cucumberReportSummary: aggregator.getSummaryForSuite(results),
       cucumberResult: results,
       generateTime: (new Date()).toLocaleString()
@@ -67,7 +66,7 @@ export class Reporter {
     // Gross work around because the template engine seems to reject
     // the work undefined as a property.
     Handlebars.registerHelper('countOf', (obj, property: 'string'): number =>
-      (<any>obj)[property] as number
+      (obj)[property] as number
     );
 
     Handlebars.registerPartial({
@@ -85,6 +84,10 @@ export class Reporter {
     Handlebars.registerHelper('getScenarioCss', (scenarioSummary: ScenarioSummary) =>
       this.getScenarioCss(scenarioSummary));
 
+    Handlebars.registerHelper('markdown2Html', (markdown: string) =>
+       marked(markdown || '')
+    );
+
     Handlebars.registerHelper('getStepCss', (step: IStep) => {
 
       switch (step.result.status) {
@@ -136,7 +139,7 @@ export class Reporter {
    * @param results An array of Cucumber Features from the Test Report
    */
   public parseJsonString(results: string): ICucumberFeatureSuite {
-    const features: ICucumberFeature[] = <ICucumberFeature[]>JSON.parse(results);
+    const features: ICucumberFeature[] = <ICucumberFeature[]> JSON.parse(results);
     return { features };
   }
 
@@ -145,7 +148,7 @@ export class Reporter {
    * @param options The options as passed in by the user
    */
   public populateDefaultOptionsIfMissing(options: IReportOptions): IReportOptions {
-    const defaultOptions = <IReportOptions>{
+    const defaultOptions = <IReportOptions> {
       featureTemplate: __dirname + '/templates/feature.html',
       htmlTemplate: __dirname + '/templates/standard.html',
       scenarioTemplate: __dirname + '/templates/scenario.html'

src/templates/feature.html

@@ -1,4 +1,4 @@
-<details class="{{ getFeatureCss this}}">
+<details class="{{ getFeatureCss this}} feature">
   <summary>
     {{#if this.tags }}
     <div><strong><small>{{ this.tags }}</small></strong></div>
@@ -23,9 +23,7 @@
     </span>
   </summary>
   <section>
-    <p class="feature-description">
-      {{this.featureDescription}}
-    </p>
+    {{{ markdown2Html this.featureDescription}}}
     {{#each this.failingScenarios}}
     {{> scenario}}
     {{/each}}

src/templates/scenario.html

@@ -24,7 +24,8 @@
       <span class="summary-counts-passing"><i class="material-icons" title="Passing">done</i>{{this.passed}}</span>
       {{/if}}
   </summary>
-  <p>{{this.scenarioDescription}}</p>
+  <section>
+  {{{ markdown2Html this.scenarioDescription}}}
   {{#each this.steps}}
   <p title="{{this.result.status}}"><strong class="
     {{ getStepCss this}}
@@ -46,5 +47,17 @@
     {{/each}}
   </p>
   {{/if}}
+  {{#if this.embeddings.length }}
+  <p>
+    {{#each this.embeddings }}
+      <img class="screenshot-thumbnail" onclick="document.getElementById('myModal').style.display = 'block';
+      document.getElementById('modal-image').src='data:{{this.mime_type}};base64,{{this.data}}'
+      return false;" style="height:10%;width:10%;" src="data:{{this.mime_type}};base64,{{this.data}}"></img>
+    {{/each}}
+  </p>
+  {{/if}}
   {{/each}}
+</section>
 </details>
+
+

src/templates/standard.html

@@ -41,6 +41,7 @@
 
     details section {
       padding: 10px;
+      padding-bottom: 0px;
       overflow: hidden;
     }
 
@@ -75,8 +76,16 @@
       border: 1px solid #ddd;
     }
 
-    details .feature-description {
-      white-space: pre-wrap;
+    .scenario section {
+      padding-left: 10px;
+    }
+
+    .scenario {
+      margin-bottom: 5px;
+    }
+
+    .feature {
+      margin-bottom: 5px;
     }
 
     .scenario details p:hover {
@@ -229,6 +238,45 @@
     .summary-counts-passing {
       color: rgba(75, 192, 192, 1);
     }
+
+    /* Thanks to:  https://www.w3schools.com/howto/howto_css_modals.asp  */
+    /* The Modal (background) */
+    .modal {
+      display: none; /* Hidden by default */
+      position: fixed; /* Stay in place */
+      z-index: 1; /* Sit on top */
+      left: 0;
+      top: 0;
+      width: 100%; /* Full width */
+      height: 100%; /* Full height */
+      overflow: auto; /* Enable scroll if needed */
+      background-color: rgb(0,0,0); /* Fallback color */
+      background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    }
+
+    /* Modal Content/Box */
+    .modal-content {
+      background-color: #fefefe;
+      margin: 15% auto; /* 15% from the top and centered */
+      padding: 20px;
+      border: 1px solid #888;
+      width: 80%; /* Could be more or less, depending on screen size */
+    }
+
+    /* The Close Button */
+    .close {
+      color: #aaa;
+      float: right;
+      font-size: 28px;
+      font-weight: bold;
+    }
+
+    .close:hover,
+    .close:focus {
+      color: black;
+      text-decoration: none;
+      cursor: pointer;
+    }
   </style>
 </head>
 
@@ -237,7 +285,15 @@ <h1>Specification Execution Results</h1>
   <span style="position: absolute;right: 40px;top: 15px; font-size: 12px; color: lightgray;">Generated at:
     {{ generateTime }}</span>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
-
+  <script>
+    // if the user is looking at the modal, and clicks the background close the modal.
+    window.onclick = (event) => {
+      // Don't close if they are trying to open the modal
+      if (!event.target.classList.contains('screenshot-thumbnail')) {
+        document.getElementById('myModal').style.display = 'none';
+      }
+    }
+  </script>
   <div class="chart">
     <canvas id="myChart"></canvas>
   </div>
@@ -420,6 +476,14 @@ <h2>Feature Breakdown</h2>
     {{/each}}
 </body>
 
+<div id="myModal" class="modal">
+  <!-- Modal content -->
+  <div class="modal-content">
+    <span onclick="document.getElementById('myModal').style.display = 'none';" class="close">&times;</span>
+    <img id="modal-image"></img>
+  </div>
+</div>
+
 </html>
 
 <script id="foo-partial" type="text/x-handlebars-template">