From b3fedca99cd15b0952940038b5913140ee8c6f42 Mon Sep 17 00:00:00 2001
From: Nivedha <nivedhasenthil@gmail.com>
Date: Wed, 8 Jul 2020 09:58:26 +0530
Subject: [PATCH] #257 Show message to add custom screenshot (#268)

* Show message to add custom screenshot #257

Signed-off-by: Nivedha <nivedhasenthil@gmail.com>
Signed-off-by: NivedhaSenthil <nivedhasenthil@gmail.com>

* #257 Fix test to show message

- when screenshot not available

Signed-off-by: NivedhaSenthil <nivedhasenthil@gmail.com>
---
 generator/generate_test.go          |  8 +++++++-
 themes/default/assets/css/style.css | 10 ++++++++++
 themes/default/views/partials.tmpl  | 23 +++++++++++++++--------
 3 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/generator/generate_test.go b/generator/generate_test.go
index a83569c..a3f0709 100644
--- a/generator/generate_test.go
+++ b/generator/generate_test.go
@@ -311,7 +311,13 @@ var wStepFailDiv = `<div class="error-container failed">
           <pre>expected:&lt;foo [foo] foo&gt; but was:&lt;foo [bar] foo&gt;</pre>
         </h4>
         <pre class="stacktrace">stacktrace</pre>
-      </div>
+	  </div>
+	  <div class="screenshot-container custom-screenshot-message">
+		<div class="screenshot">
+		 <p class="custom-message">To view a screenshot of this failed step, Please set up a <a href="https://docs.gauge.org/writing-specifications/#taking-custom-screenshots">custom screenshot handler.</a>
+		 </p>
+		</div>
+	  </div>		
   </div>
 </div>`
 
diff --git a/themes/default/assets/css/style.css b/themes/default/assets/css/style.css
index 90b6e35..ba8cdf1 100644
--- a/themes/default/assets/css/style.css
+++ b/themes/default/assets/css/style.css
@@ -1509,4 +1509,14 @@ svg#pie-chart {
     .report_test-results {
         margin-top: 20px;
     }
+}
+
+.custom-screenshot-message{
+    border: solid;
+    border-width: 1px;
+}
+
+.custom-message{
+    font-style: italic;
+    font-size: medium;
 }
\ No newline at end of file
diff --git a/themes/default/views/partials.tmpl b/themes/default/views/partials.tmpl
index 8fa7c1a..5e07096 100644
--- a/themes/default/views/partials.tmpl
+++ b/themes/default/views/partials.tmpl
@@ -565,20 +565,27 @@
         </h4>
         <pre class="stacktrace">{{.StackTrace | escapeHTML | encodeNewLine}}</pre>
       </div>
-      {{ if .FailureScreenshotFile}}
+      {{ if not .FailureScreenshotFile}}
+        {{if .FailureScreenshot}}
         <div class="screenshot-container">
           <div class="screenshot">
-            <a href="{{toPath .BasePath (print "images/" .FailureScreenshotFile)}}" rel="lightbox">
-              <img src="{{toPath .BasePath (print "images/" .FailureScreenshotFile)}}" class="screenshot-thumbnail" />
+            <a href="data:image/png;base64,{{.FailureScreenshot}}" rel="lightbox">
+              <img src="data:image/png;base64,{{.FailureScreenshot}}" class="screenshot-thumbnail" />
             </a>
           </div>
         </div>
-      {{end}}
-      {{if .FailureScreenshot}}
-        <div class="screenshot-container">
+        {{else}}
+          <div class="screenshot-container custom-screenshot-message">
+            <div class="screenshot">
+            <p class="custom-message">To view a screenshot of this failed step, Please set up a <a href="https://docs.gauge.org/writing-specifications/#taking-custom-screenshots">custom screenshot handler.</a></p>
+            </div>
+          </div>
+        {{end}}
+      {{else}}
+         <div class="screenshot-container">
           <div class="screenshot">
-            <a href="data:image/png;base64,{{.FailureScreenshot}}" rel="lightbox">
-              <img src="data:image/png;base64,{{.FailureScreenshot}}" class="screenshot-thumbnail" />
+            <a href="{{toPath .BasePath (print "images/" .FailureScreenshotFile)}}" rel="lightbox">
+              <img src="{{toPath .BasePath (print "images/" .FailureScreenshotFile)}}" class="screenshot-thumbnail" />
             </a>
           </div>
         </div>