start of filtering tests

lib/reportGenerator.js

@@ -145,7 +145,8 @@ function parseLess (callback) {
 function minifyJs (callback) {
   var jsReqs = [
     path.join(config.nodeModulesDir, 'chart.js', 'Chart.js'),
-    path.join(config.nodeModulesDir, 'bootstrap', 'dist', 'js', 'bootstrap.js')
+    path.join(config.nodeModulesDir, 'bootstrap', 'dist', 'js', 'bootstrap.js'),
+    path.join(config.templatesDir, 'js', 'client.js')
   ];
   callback(null, uglify.minify(jsReqs));
 }

templates/_summary.mu

@@ -9,15 +9,15 @@
   </div>
   <div class="summary-col summary-passes">
     <h1 class="summary-count">{{passes}}</h1>
-    <h4 class="summary-label">Passed</h4>
+    <h4 class="summary-label summary-filter">Passed</h4>
   </div>
   <div class="summary-col summary-failures">
     <h1 class="summary-count">{{failures}}</h1>
-    <h4 class="summary-label">Failed</h4>
+    <h4 class="summary-label summary-filter">Failed</h4>
   </div>
   <div class="summary-col summary-pending">
     <h1 class="summary-count">{{pending}}</h1>
-    <h4 class="summary-label">Pending</h4>
+    <h4 class="summary-label summary-filter">Pending</h4>
   </div>
   <div class="summary-col summary-duration">
     <h1 class="summary-count">{{formatSummaryDuration duration}}</h1>

templates/js/client.js

@@ -0,0 +1,77 @@
+$(function() {
+  var filters = {
+    'summary-passes': '.passed',
+    'summary-failures': '.failed',
+    'summary-pending': '.pending'
+  };
+  var activeFilters = [];
+  addEventHandlers();
+  makeSuiteCharts();
+
+  function makeSuiteCharts() {
+    var chartOpts = {
+      percentageInnerCutout : 70,
+      animationEasing: 'easeOutQuint',
+      showTooltips: false
+    };
+    var suiteCharts = document.getElementsByClassName("suite-chart");
+    for (var i=0; i<suiteCharts.length; i++) {
+      var ctx = suiteCharts[i].getContext('2d');
+      var data = [{
+        value: suiteCharts[i].getAttribute('data-total-passes')*10,
+        color:"#5cb85c",
+        highlight: "#FF5A5E",
+        label: "Passed"
+      },
+      {
+        value: suiteCharts[i].getAttribute('data-total-failures')*10,
+        color: "#d9534f",
+        highlight: "#FFC870",
+        label: "Failed"
+      },
+      {
+        value: suiteCharts[i].getAttribute('data-total-pending')*10,
+        color: "#999999",
+        highlight: "#FFC870",
+        label: "Pending"
+      }]
+      new Chart(ctx).Doughnut(data, chartOpts);
+    };
+  }
+
+  function addEventHandlers() {
+    $('.summary-filter').on('click', function (e) {
+      var $el = $(this),
+          $parent = $el.parent('.summary-col'),
+          filter = $parent[0].className.split(' ')[1];
+
+      if ($parent.hasClass('selected')) {
+        $parent.removeClass('selected');
+        activeFilters.splice(activeFilters.indexOf(filter), 1);
+      } else {
+        $parent.addClass('selected');
+        activeFilters.push(filter);
+      }
+
+      updateFilteredTests();
+    });
+  }
+
+  function updateFilteredTests() {
+    if (activeFilters.length) {
+      var testsToShow = [];
+      for (var i=0; i < activeFilters.length; i++) {
+        testsToShow.push(filters[activeFilters[i]]);
+      }
+      $('.test').hide().filter(testsToShow.toString()).show();
+    } else {
+      $('.test').show();
+    }
+
+    // TODO:
+    // if a suite no longer has tests showing, hide it
+    // then check any parent suites and if it no longer has suites showing, hide it
+    // work up the chain to the main suite
+  }
+
+});

templates/mochawesome.mu

@@ -48,12 +48,12 @@
     <!-- Scripts -->
     <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
     <script src="js/mochawesome.js"></script>
-    <script>
+    <!--<script>
       window.onload = onLoadFunction;
       function onLoadFunction() {
         makeSuiteCharts();
       }
-      function makeSuiteCharts(){
+      function makeSuiteCharts() {
         var chartOpts = {
           percentageInnerCutout : 70,
           animationEasing: 'easeOutQuint',
@@ -80,9 +80,9 @@
             highlight: "#FFC870",
             label: "Pending"
           }]
-          var chart = new Chart(ctx).Doughnut(data, chartOpts);
+          new Chart(ctx).Doughnut(data, chartOpts);
         };
       }
-      </script>
+      </script>-->
   </body>
 </html>

templates/styles/_summary.less

@@ -8,6 +8,31 @@
   .summary-count {
     color: @color2;
   }
+  &.selected {
+    .summary-label {
+      background: #fff;
+      color: @color;
+      .box-shadow(inset 0px 1px 2px #ccc);
+    }
+  }
+}
+
+.summaryHover(@color) {
+  @color-dark: darken(@color, 11%);
+  .summary-label {
+    .linkTransition();
+    .user-select(none);
+    cursor: pointer;
+    &:hover {
+      background: @color-dark;
+    }
+  }
+  &.selected {
+    .summary-label:hover {
+      background: #fff;
+      color: @color-dark;
+    }
+  }
 }
 
 // Base Summary Styles / Layou
@@ -66,11 +91,14 @@
   }
   &.summary-passes {
     .summaryColor(@brand-success);
+    .summaryHover(@brand-success);
   }
   &.summary-failures {
     .summaryColor(@brand-danger);
+    .summaryHover(@brand-danger);
   }
   &.summary-pending {
     .summaryColor(#999);
+    .summaryHover(#999);
   }
 }