Merge pull request #8 from MarcosEllys/feature/issue-7

Add Failures Section
MarcosEllys · Sep 7, 2018 · c576314 · c576314
2 parents 47f9ae4 + 0d15741
commit c576314
Show file tree

Hide file tree

Showing 5 changed files with 128 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,5 @@
-# newman-html-report-template-verbose
+# Newman HTML Report Template
+
 a newman html report template which contains request and response details (body plus http headers) in the report.
 (similar what you could get with the newman v2 -O out option)
 
@@ -8,6 +9,10 @@ The template is a modification from the [original reporter file](https://github.
 
 [Awesome Newman Html Template](https://marcosellys.github.io/awesome-newman-html-template/)
 
+## Collection of tests
+
+[Postman Echo](https://www.getpostman.com/collections/631643-f695cab7-6878-eb55-7943-ad88e1ccfd65-JsLv?referrer=https%3A%2F%2Fdocs.postman-echo.com%2F#)
+
 ## Advantages:
 
 - Built with the world's most popular front-end component library.
@@ -17,16 +22,21 @@ The template is a modification from the [original reporter file](https://github.
 - With a modern library to copy text to clipboard.
 
 ## Prints
-* Report Tab
+
+### Report Tab
+
 <p align="center">
   <img alt="Initial Screen" src="https://raw.githubusercontent.com/MarcosEllys/awesome-newman-html-template/master/prints/one.png">
 </p>
-* Request Tab
+
+### Request Tab
+
 <p align="center">
   <img alt="Request opened" src="https://raw.githubusercontent.com/MarcosEllys/awesome-newman-html-template/master/prints/two.png">
 </p>
 
-* Request opened
+### Failures Tab
+
 <p align="center">
   <img alt="Requ2est opened" src="https://raw.githubusercontent.com/MarcosEllys/awesome-newman-html-template/master/prints/three.png">
 </p>
@@ -37,8 +47,9 @@ The template is a modification from the [original reporter file](https://github.
 - [Fuse JS](http://fusejs.io/)
 
 ## How to use
-* install newman
-* call newman as follows:
+* [Install Newman](https://github.com/postmanlabs/newman-reporter-html)
+* [Install Report HTML](https://github.com/postmanlabs/newman-reporter-html)
+* Call newman as follows:
 ```
-newman run -e env-INTEG.json --reporters cli,html --reporter-html-template templates/htmlreqres.hbs --reporter-html-export nice_report.html mycollection.postman.json
+newman run -e my.environment.json -g my.globals.json --reporters cli,html --reporter-html-template templates/htmlreqres.hbs --reporter-html-export my_report.html my.collection.postman.json
 ```
diff --git a/prints/one.png b/prints/one.png
diff --git a/prints/three.png b/prints/three.png
diff --git a/prints/two.png b/prints/two.png
diff --git a/templates/htmlreqres.hbs b/templates/htmlreqres.hbs
@@ -101,7 +101,18 @@
             <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Report</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Requests</a>
+            <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">
+              Requests
+              <strong class="pull-right"> <span class="badge badge-info" style="font-size: 80%;">
+                {{#with summary}} {{#with stats}} {{requests.total}} {{/with}} {{/with}}
+              </span> </strong>
+            </a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" id="failure-tab" data-toggle="tab" href="#failure" role="tab" aria-controls="failure" aria-selected="false">
+              Failures 
+              <strong class="pull-right"> <span class="badge badge-danger" style="font-size: 80%;">{{summary.failures.length}}</span> </strong>
+            </a>
           </li>
         </ul>
         <div class="tab-content" id="myTabContent">
@@ -385,7 +396,25 @@
 
                 <div class="row">
 
-                  <div class="col-lg-6 col-md-6 col-sm-12">
+                  <div class="col-lg-4 col-md-4 col-sm-12">
+                    <div class="widget">
+                      <div class="widget-heading widget-heading-gray clearfix">
+                        <div class="pull-left">Failures</div>
+                      </div>
+                      <div class="widget-body widget-body-gray clearfix">
+                        <span class="icon-card">
+                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path fill="currentColor" d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"></path>
+                          </svg>
+                        </span>
+                        <div class="pull-right number">
+                          <h2>{{summary.failures.length}}</h2>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="col-lg-4 col-md-4 col-sm-12">
                     <div class="widget">
                       <div class="widget-heading widget-heading-red clearfix">
                         <div class="pull-left">Bad response time</div>
@@ -404,7 +433,7 @@
                     </div>
                   </div>
 
-                  <div class="col-lg-6 col-md-6 col-sm-12">
+                  <div class="col-lg-4 col-md-4 col-sm-12">
                     <div class="widget">
                       <div class="widget-heading widget-heading-green clearfix">
                         <div class="pull-left">Best response time</div>
@@ -635,8 +664,86 @@
               {{/each}} {{/inline}}
 
 
+            </div>
+
+            <div class="tab-pane fade" id="failure" role="tabpanel" aria-labelledby="failure-tab">
+              <hr>
+
+              <div class="col">
+                <div class="row">
+                  {{#each summary.failures}}
+                      <div class="card">
+                        <div class="card-header clearfix" role="tablist" id="collapse-failure-{{@index}}">
+                          <h4>
+                            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#requestData-{{@index}}"
+                              aria-controls="requestData-{{@index}}" aria-expanded="false" style="text-decoration: none;">
+                              <span class="test-name">{{error.name}}: {{#if error.test}}{{error.test}}{{else}}{{error.message}}{{/if}}</span>
+                            </a>
+                          </h4>
+                        </div>
+                        <div id="requestData-{{@index}}" class="card-body panel-collapse collapse" role="tabpanel" aria-labelledby="requestHead-{{@index}}">
+                          <div class="panel-body">
+
+                            <div class="row">
+                              <div class="col-md-12">
+                                <div class="list-group">
+                                  {{#if error.test}}
+                                    <button type="button" class="list-group-item list-group-item-action">
+                                      <div class="pull-left" style="width: 40px;">
+                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                          <path fill="#3f51b5" d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z">
+                                          </path>
+                                        </svg>
+                                      </div>
+                                      <span style="margin-top: 7px; position: absolute; margin-left: 20px;">{{error.message}}</span>
+                                    </button>
+                                  {{/if}}
+                                  <button type="button" class="list-group-item list-group-item-action">
+                                    <div class="pull-left" style="width: 40px;">
+                                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
+                                        <path fill="#3f51b5" d="M225.38 233.37c-12.5 12.5-12.5 32.76 0 45.25 12.49 12.5 32.76 12.5 45.25 0 12.5-12.5 12.5-32.76 0-45.25-12.5-12.49-32.76-12.49-45.25 0zM248 8C111.03 8 0 119.03 0 256s111.03 248 248 248 248-111.03 248-248S384.97 8 248 8zm126.14 148.05L308.17 300.4a31.938 31.938 0 0 1-15.77 15.77l-144.34 65.97c-16.65 7.61-33.81-9.55-26.2-26.2l65.98-144.35a31.938 31.938 0 0 1 15.77-15.77l144.34-65.97c16.65-7.6 33.8 9.55 26.19 26.2z">
+                                        </path>
+                                      </svg>
+                                    </div>
+                                    <span style="margin-top: 7px; position: absolute; margin-left: 20px;">{{at}}</span>
+                                  </button>
+                                  <button type="button" class="list-group-item list-group-item-action">
+                                    <div class="pull-left" style="width: 40px;">
+                                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
+                                        ><path fill="#3f51b5" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zM124 296c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h264c6.6 0 12 5.4 12 12v56c0 6.6-5.4 12-12 12H124z">
+                                        </path>
+                                      </svg>
+                                    </div>
+                                    <span style="margin-top: 7px; position: absolute; margin-left: 20px;">Request {{source.name}}</span>
+                                  </button>
+                                  {{#gt cursor.cycles 1}}
+                                    <button type="button" class="list-group-item list-group-item-action">
+                                      <div class="pull-left" style="width: 40px;">
+                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
+                                          <path fill="black" d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+                                            />
+                                        </svg>
+                                      </div>
+                                      <span style="margin-top: 7px; position: absolute; margin-left: 20px;">{{add cursor.iteration 1}}</span>
+                                    </button>
+                                  {{/gt}}
+                                </div>
+                              </div>
+
+                            </div>
+
+                          </div>
+                        </div>
+                      </div>
+
+                  {{/each}}
+                </div>
+              </div>
+
+
             </div>
           </div>
+
         </div>
       </div>
     </div>