From ec8beb2d57ddc7bce41074594f97eef43a959657 Mon Sep 17 00:00:00 2001
From: Naylin Medina <nmedina@teclib.com>
Date: Wed, 26 Sep 2018 17:00:27 -0400
Subject: [PATCH] docs(layout): add test report

Signed-off-by: Naylin Medina <nmedina@teclib.com>
---
 _includes/head.html                       |   3 +
 _layouts/testReport.html                  |   7 ++
 css/testReport.scss                       |  99 ++++++++++++++++++++
 development/test-report/master/index.html | 104 +++++++++++++++++++++-
 4 files changed, 211 insertions(+), 2 deletions(-)
 create mode 100644 _layouts/testReport.html
 create mode 100644 css/testReport.scss

diff --git a/_includes/head.html b/_includes/head.html
index 8a30164..0c22eea 100755
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -44,6 +44,9 @@
     <script src="{{ "/js/jazzy.js" | absolute_url }}" defer></script>
   {% endif %}
 
+  {% if page.layout == 'testReport' %}
+  <link rel="stylesheet" href="{{ "/css/testReport.css" | absolute_url }}">
+  {% endif %}
   <link rel="canonical" href="{{ page.url | replace:'index.html','' | absolute_url }}">
   <link rel="alternate" type="application/rss+xml" title="{{ site.title | escape }}" href="{{ "/feed.xml" | absolute_url }}">
   
diff --git a/_layouts/testReport.html b/_layouts/testReport.html
new file mode 100644
index 0000000..78dc510
--- /dev/null
+++ b/_layouts/testReport.html
@@ -0,0 +1,7 @@
+---
+layout: container
+---
+
+<div class="test-report">
+  {{ content }}
+</div>
\ No newline at end of file
diff --git a/css/testReport.scss b/css/testReport.scss
new file mode 100644
index 0000000..38b692b
--- /dev/null
+++ b/css/testReport.scss
@@ -0,0 +1,99 @@
+---
+---
+
+.test-report {
+
+    .total {
+        h2 {
+            margin-bottom: 30px;
+        }
+    }
+
+    p {
+        padding: 10px;
+    }
+
+    .test-suite {
+        cursor: pointer;
+        // padding: 10px;
+        &.passing {
+            h4 {
+              background-color: #A3D3A3;
+              padding: 4px 4px;
+            }
+            margin: 11.5px 0px;
+            border: groove;
+            border-color: #6fba6f;
+        }
+        &.failing {
+            h4 {
+                background-color: #fc8f8f;
+                padding: 4px 4px;
+            }
+            margin: 11.5px 0px;
+            border: groove;
+            border-color: #FA4444;
+           
+        }
+    }
+
+    .passing {
+        div {
+          background-color: #A3D3A3;
+        }
+        &.row {
+            margin-left: 0px;
+            margin-right: 0px;
+        }
+    }
+
+    .failing {
+        div {
+          background-color: #fc8f8f;
+        }
+
+        &.row {
+            margin-left: 0px;
+            margin-right: 0px;
+        }
+    }
+
+    @keyframes fadeIn {
+        from { opacity: 0; }
+          to { opacity: 1; }
+    }   
+
+    // body { font-family:Avenir Next, Helvetica Neue, sans-serif; color: #4A4A4A; background-color: #F0F3FB; margin:0;}
+    //   header { position: fixed;width: 100%;background: rgba(249, 254, 255, 0.9);margin: 0;padding: 10px;}
+    //   header:before, header:after { content:""; display:table;}
+    //   header:after { clear:both;}
+    //   a:link { color: #A1D761;}
+    //   footer { clear: both;position: relative;z-index: 10;height: 40px;margin-top: -10px; margin-left:30px; font-size:12px;}
+    //   table { width:100%; border-collapse: collapse;}
+    //   tr td:first-child { width:7%}
+    //   .left { float: left; margin-left:30px;}
+    //   .right { float: right; margin-right: 40px; margin-top: 0; margin-bottom:0;}
+    //   .test-suite { margin: 0 0 30px 0;}
+    //   .test-suite > .heading { font-family:Menlo, Monaco, monospace; font-weight: bold; border-color: #A1D761; background-color: #B8E986; border-width: 1px;}
+    //   .test-suite.failing > .heading { border-color: #C84F5E; background-color: #E58591;}
+    //   .test-suite > .heading > .title { margin-top: 4px; margin-left: 10px;}
+    //   .tests { overflow: scroll;margin: 0 30px 0 60px;}
+    //   .test, .test-suite > .heading { height: 30px; overflow: hidden; margin: 0 30px;}
+    //   .test, .test-suite > .heading { border-width: 1px; border-collapse: collapse; border-style: solid; }
+    //   .test { margin-left: 30px; border-top:none;}
+    //   .test.failing { border-color: #C84F5E; background-color: #F4DDE0;}
+    //   .test.passing { border-color: #A1D761;}
+    //   .test.failing { background-color: #E7A1AA;}
+    //   .test.passing { background-color: #CAF59F;}
+    //   .test.failing.odd { background-color: #EEC7CC;}
+    //   .test.passing.odd { background-color: #E5FBCF;}
+    //   .details.failing { background-color: #F4DDE0; border: 1px solid #C84F5E;}
+    //   .details.passing { background-color: #E5F4DC; border: 1px solid #A1D761;}
+    //   .test .test-detail:last-child { padding-bottom: 8px;}
+    //   .test .title { float: left; font-size: 0.9em; margin-top: 8px; font-family: Menlo, Monaco, monospace;}
+    //   .test .time { float: left;margin: 4px 10px 0 20px;}
+    //   .test-detail { font-family:Menlo, Monaco, monospace; font-size: 0.9em; margin: 5px 0 5px 0px;}
+
+}
+
+      
\ No newline at end of file
diff --git a/development/test-report/master/index.html b/development/test-report/master/index.html
index ff97b7c..30dafe3 100644
--- a/development/test-report/master/index.html
+++ b/development/test-report/master/index.html
@@ -1,3 +1,103 @@
 ---
-layout: page
----
\ No newline at end of file
+layout: testReport
+---
+
+  <script>
+    let changeDisplay = function (id) {
+      $(id).slideToggle()
+    }
+  </script>
+
+
+  <div class="total row">
+    <div class="col-sm-12">
+        <h2>Test Results</h2>
+    </div>
+    <div class="col-sm-12">
+        <h2> 8 tests</h2>
+    </div>
+  </div>
+
+    <div class="category">
+        <div class="test-suite row failing" onclick="changeDisplay('#test-1')">
+            <h4 class="col-sm-12">FlyveMDMInventoryAgentUITests</h4>
+            <h4 class="col-sm-12">1 test</h4>
+        </div>
+        <!-- Failing or passing class -->
+        <div class="failing row">
+          <div class="content" id="test-1">
+            <div class="title col-sm-12 dropdown-item">
+                <p>testTakeScreenshots</p>
+            </div>
+            <div class="time col-sm-12 dropdown-item">
+                <p>29.457s</p>
+            </div>
+            </div>
+        </div>
+    </div>
+
+        <div class="category">
+          <div class="test-suite row passing" onclick="changeDisplay('#test-2')">
+            <h4 class="col-sm-12">FlyveMDMInventoryAgentTests</h4>
+            <h4 class="col-sm-12">7 tests</h4>
+          </div>
+          <div id="test-2">
+              <div class="passing row">    
+                  <div class="title col-sm-12">
+                      <p>testAgentSettingsController</p>
+                  </div>
+                  <div class="time col-sm-12">
+                      <p>0.020s</p>
+                  </div>
+                </div>
+                <div class="passing row">    
+                    <div class="title col-sm-12">
+                        <p>testCreateInventory</p>
+                    </div>
+                    <div class="time col-sm-12">
+                        <p>0.045s</p>
+                    </div>
+                </div>
+                <div class="passing row">     
+                    <div class="title col-sm-12">
+                        <p>testFooterView</p>
+                    </div>
+                    <div class="time col-sm-12">
+                        <p>0.017s</p>
+                    </div>
+                </div>
+                <div class="passing row">     
+                    <div class="title col-sm-12">
+                        <p>testInventoryTableView</p>
+                    </div>
+                    <div class="time col-sm-12">
+                        <p>0.017s</p>
+                    </div>
+                </div>
+                <div class="passing row">     
+                    <div class="title col-sm-12">
+                        <p>testLoadingIndicatorView</p>
+                    </div>
+                    <div class="time col-sm-12">
+                        <p>0.022s</p>
+                    </div>
+                </div>
+                <div class="passing row"> 
+                    <div class="title col-sm-12">
+                        <p>testMessageLabel</p>
+                    </div>
+                    <div class="time col-sm-12">
+                        <p>0.021s</p>
+                    </div>
+                  </div>
+                <div class="passing row">     
+                    <div class="title col-sm-12">
+                        <p>testSendXMLInventory</p>
+                    </div>
+                    <div class="time col-sm-12">
+                        <p>0.053s</p>
+                    </div>
+                </div>
+          </div>
+          
+      </div>