Adding toggle functionality to step list

Author: Maciej Kamela

templates/assets/js/chart.js

@@ -35,21 +35,20 @@ app.chart  = (function () {
           c = this.getContext('2d'),
           p = c.getImageData(x, y, 1, 1).data,
           hex = "#" + ("000000" + self.rgbToHex(p[0], p[1], p[2])).slice(-6);
-        /** Displaying text inside donout chart*/
+
+        /** Displaying text inside donut chart*/
         var a = 200;
         var b = 200;
         chartCtx.font = '30pt Arial';
         chartCtx.textAlign = 'center';
         chartCtx.fillStyle = hex;
-        var statistics = self.getStatistics();
-        var passed = statistics.passed;
-        var passedRound = Math.round(passed) + "%";
-        var failed = statistics.failed;
-        var failedRound = Math.round(failed) + "%";
+        var statistics = self.getStatistics(),
+            passed = statistics.passed,
+            passedRound = Math.round(passed) + "%",
+            failed = statistics.failed,
+            failedRound = Math.round(failed) + "%";
         chartCtx.clearRect(120, 150, 150, 90);
 
-
-
         if (hex.toLowerCase() === data.colors.cs[0].toLowerCase()) {
           chartCtx.fillText(passedRound, a, b);
         } else if (hex.toLowerCase() === data.colors.cs[1].toLowerCase()) {
@@ -63,13 +62,13 @@ app.chart  = (function () {
       document.querySelector('.close_chart').onclick = this.toggleChart.bind(this);
       document.querySelector('.document_container').onclick = this.toggleChart.bind(this);
     },
-
+    /** Transforming rgb colors into Hex */
     rgbToHex: function (r, g, b) {
       if (r > 255 || g > 255 || b > 255)
         throw "Invalid color component";
       return ((r << 16) | (g << 8) | b).toString(16);
     },
-
+    /** Finding mouse position on chart */
     findPos: function(obj) {
       var curleft = 0, curtop = 0;
       if (obj.offsetParent) {
@@ -80,7 +79,7 @@ app.chart  = (function () {
         return {x: curleft, y: curtop};
       }
     },
-
+    /** Animated displaying and hiding chart */
     onAnimationEnd: function () {
 
       var documentContainer = document.querySelector('.document_container');
@@ -107,6 +106,7 @@ app.chart  = (function () {
         this.to = to;
         this.lineWidth = lineWidth;
       };
+      /** Drawing report chart */
 
       this.draw = function (data) {
 
@@ -128,7 +128,7 @@ app.chart  = (function () {
         }
       };
     },
-
+    /** Passed and failed percentage */
     getStatistics:function () {
       var scenarioPassed = document.querySelectorAll('.scenario.passed').length,
         scenarioFailed = document.querySelectorAll('.scenario.failed').length,
@@ -150,7 +150,7 @@ app.chart  = (function () {
       var documentContainer = document.querySelector('.document_container');
       documentContainer.style.display = (documentContainer.style.display != 'block' ? 'block' : documentContainer.classList.add('backdrop-hidden'));
     },
-
+    /** Displaying and hiding chart */
     toggleChart: function () {
       var chart = document.querySelector('.scenario-chart');
 

templates/assets/js/navigation.js

@@ -13,7 +13,7 @@ app.navigation  = (function () {
       this.bindEvents(errors, scenarios, filteringButtons, displayChartButton);
       this.bindFilterButtonsEvent(filteringButtons, scenarios, steps);
     },
-
+  /** Showing error log  for step that failed */
     showErrorDetails: function (e) {
         e.stopPropagation();
         var display = this.querySelector('.error-details').style.display;
@@ -24,7 +24,7 @@ app.navigation  = (function () {
           this.querySelector('.error-details').style.display = 'block';
         }
     },
-
+    /** Hiding and displaying steps after clicking on scenario header*/
     toggleStep: function () {
       var steps = this.querySelectorAll('.step');
       for (var k = 0; k < steps.length; k++) {
@@ -48,14 +48,15 @@ app.navigation  = (function () {
         scenarios[i].addEventListener('click', this.toggleStep, false);
       }
     },
-
-
-    /** Filtering scenarios */
+    /**
+     * Filtering passed and failed scenarios by clicking the passed or failed button respectively
+     *
+     * @param buttonState indicates the clicked button
+     */
     filterScenarios: function (buttonState) {
       var scenarios = document.querySelectorAll('.scenario'),
         hasClass;
       for (var i = 0; i < scenarios.length; i++) {
-
         hasClass = scenarios[i].classList.contains(buttonState);
         if (hasClass === true) {
           if (scenarios[i].parentNode.style.display === 'none') {
@@ -66,16 +67,20 @@ app.navigation  = (function () {
         }
       }
     },
-
-    /** Displaying all scenarios */
+    /**
+     * Displaying all scenarios within the report
+     *
+     * @param scenarios indicate the all scenarios in report
+     *
+     */
     displayAllScenarios: function (scenarios) {
       for (var i = 0; i < scenarios.length; i++) {
         if (scenarios[i].style.display != 'block') {
           scenarios[i].style.display = 'block';
         }
       }
     },
-    /*
+    /**
      * @param string buttonsList indicate the group of buttons that have the "active" class name
      *
      * Removing "active" class from all buttons except for the active one
@@ -85,7 +90,15 @@ app.navigation  = (function () {
         buttonsList[j].classList.remove('active');
       }
     },
-
+    /**
+     * Run appropriate action depending on button state
+     *
+     * @param filteringButtons indicate the navigation buttons
+     *
+     * @param scenarios indicate all scenarios in report
+     *
+     * @param steps indicate all steps in report
+     */
     bindFilterButtonsEvent: function (filteringButtons, scenarios, steps) {
       var self = this,
         btnState;
@@ -94,7 +107,7 @@ app.navigation  = (function () {
 
           btnState = this.dataset.state;
 
-          if (btnState !== 'chart') {
+          if (btnState !== 'steps') {
             self.removeActiveClass(filteringButtons);
             this.classList.add('active');
             self.hideSteps(steps);
@@ -110,7 +123,7 @@ app.navigation  = (function () {
               break;
             case 'steps':
               self.displayAllScenarios(scenarios);
-              self.showSteps(steps);
+              self.toggleSteps(steps);
               break;
             default:
               self.filterScenarios(btnState);
@@ -120,13 +133,28 @@ app.navigation  = (function () {
         }, false);
       }
     },
-
-    showSteps: function (steps) {
+    /**
+     * Displaying and hiding steps by clicking "chart report" button
+     *
+     * @param steps indicate all steps in report
+     */
+    toggleSteps: function (steps) {
       for (var i = 0; i < steps.length; i++) {
-        steps[i].style.display = 'block';
+        var display = steps[i].style.display;
+        if (display === 'none' || display === '') {
+          steps[i].style.display = 'block';
+          all_btn.classList.add('active');
+        } else {
+          all_btn.classList.add('active');
+          steps[i].style.display = 'none';
+        }
       }
     },
-
+    /**
+     * Hiding currently displayed steps
+     *
+     * @param steps indicate all steps in report
+     */
     hideSteps: function (steps) {
       for (var i = 0; i < steps.length; i++) {
         steps[i].style.display = 'none';

templates/header_template.html

@@ -16,8 +16,8 @@ <h1>Cucumber features</h1>
         </div>
         <div class="col-md-3 col-sm-4 additional_btns">
             <div class="btn_support">
-                <button data-state="steps" class="btn fa fa-list btn_list" id="display_btn"></button>
-                <button data-state="chart" class=" btn fa fa-pie-chart btn_chart"></button>
+                <button data-state="steps" title="Display all steps within scenario" class="btn fa fa-list btn_list" id="display_btn"></button>
+                <button data-state="chart" title="Display chart" class="btn fa fa-pie-chart btn_chart"></button>
             </div>
         </div>
     </div>