[Sandbox-commits] r1653 - in oipf/test: css js

9 Jun 2015

Author: jruchaud
Date: 2015-06-09 13:59:26 +0000 (Tue, 09 Jun 2015)
New Revision: 1653

Url: http://forge.nuiton.org/projects/sandbox/repository/revisions/1653

Log:
Improve style

Modified:
   oipf/test/css/test.css
   oipf/test/js/Test.js

Modified: oipf/test/css/test.css
===================================================================

--- oipf/test/css/test.css	2015-06-09 13:34:15 UTC (rev 1652)
+++ oipf/test/css/test.css	2015-06-09 13:59:26 UTC (rev 1653)
@@ -1,102 +1,89 @@
-/*
-To change this license header, choose License Headers in Project Properties.
-To change this template file, choose Tools | Templates
-and open the template in the editor.
-*/
-/* 
-    Created on : 26 févr. 2015, 10:03:51
-    Author     : root
-*/
-:focus {
-    border: 3px navy solid;
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
 }
 
-#menu {
-    position: fixed;
-    top: 0;
-    left: 50%;
-    margin-left: auto;
-    margin-right: auto;
-    border: 1px solid grey;
+body {
+    color: #4e4f54;
 }
 
-#testControllerDiv {
-    margin: 0 0 1em 0;
+:focus {
+    border: 2px #0095dd solid;
 }
 
-#title, #titleTestControllerDiv, #titleGlobalTestResultsDiv  {
-    border: 1px solid grey;
-    background-color: #efe;
-    border-radius: 10px;
+#title  {
+    border-bottom: 1px solid grey;
+    background-color: #e3e7ea;
 }
 
 #title {
-    margin: 0% 20% 0% 20%;
+    width: 100%;
+    padding: 20px;
 }
 
-#titleTestControllerDiv, #titleGlobalTestResultsDiv {
-    margin: 1em 90% 0 0;
-    padding: 0;
-}
-
 #globalTestResultsDiv {
     display: none;
 }
 
-h1 {
-    text-align: center;
-    color: blue;
-} 
-
 table {
+    width: 90%;
     font: 100% sans-serif;
-    background-color: #efe;
+    margin: 15px;
     border-collapse: collapse;
     empty-cells: show;
     border: 1px solid #7a7;
 }
 
-table tbody td:nth-child(1) {
-    text-align: center;
-}
-
-table tbody td:nth-child(4) {
-    background-color: gainsboro;
-}
-
-
 table th,
 table td {
     text-align: left;
-    border: 1px solid #7a7;
+    border: 1px solid #e6ecef;
 }
 
+table td, table th {
+    padding: 5px;
+    background-color: #f8fafb;
+}
+
 table th {
+    text-align: center;
+    color: #5f6166;
+    padding: 5px;
     font-weight: bold;
-    padding-left: .5em;
-    padding-right: .5em;
+    background-color: #ced2d6;
 }
 
-
-table > thead > tr:first-child > th {
+table > tbody > tr > td:first-child {
     text-align: center;
-    color: blue;
 }
 
-table > thead > tr + tr > th {
-    font-style: italic;
-    color: gray;
+#globalTestResultsTable {
+    width: auto;
 }
 
-table td {
-    background-color: #cef;
-    padding:.5em .5em .5em .5em;
+#globalTestResultsTable td, #globalTestResultsTable th {
+    text-align: right;
 }
 
-table tbody th:after {
-    content: " :";
+button {
+    background-color: #bacfe4;
+    color: #5f6166;
+    padding: 5px;
+    margin: 5px;
+    border: 1px solid #5f6166;
 }
 
-table tbody tr:nth-child(2n+3) {
-    background: #7a7;
-}  
\ No newline at end of file
+h4 {
+    padding: 10px;
+}
+
+.success {
+    background-color: #00978e;
+    color: white;
+}
+
+.error {
+    background-color: #e66e33;
+    color: white;
+}

Modified: oipf/test/js/Test.js
===================================================================
--- oipf/test/js/Test.js	2015-06-09 13:34:15 UTC (rev 1652)
+++ oipf/test/js/Test.js	2015-06-09 13:59:26 UTC (rev 1653)
@@ -1,7 +1,7 @@
-/* 
+/*
  * To change this license header, choose License Headers in Project Properties.
  * To change this template file, choose Tools | Templates
- * and open the template in the editor. 
+ * and open the template in the editor.
  */
 var Test = Class.extend({
     testsObjects: [{
@@ -841,10 +841,10 @@
             start: true,
             intervalID: 0
         };
-        
+
         this.sectionsID = [];
     },
-    
+
     runAll: function() {
         this.results = [];
         this.currentResult = {
@@ -853,17 +853,17 @@
         };
         this.runLoop(0, 0).then(this.totalPercentage.bind(this));
     },
-    
-    runLoop: function(indexObject, indexTest) {    
-        var element = this.testsObjects[indexObject]; 
+
+    runLoop: function(indexObject, indexTest) {
+        var element = this.testsObjects[indexObject];
         var object = element.object;
         var tests = element.tests;
-        
+
         var self = this;
         var loop = function() {
             if (indexTest < tests.length - 1) {
                 return self.runLoop(indexObject, indexTest + 1);
-                
+
             } else if (indexObject < self.testsObjects.length - 1) {
                 element.results = {
                     testName: "",
@@ -875,8 +875,8 @@
                 element.results.succeeded = self.currentResult.succeeded;
                 self.currentResult.failed = 0;
                 self.currentResult.succeeded = 0;
-                return self.runLoop(indexObject + 1, 0); 
-                
+                return self.runLoop(indexObject + 1, 0);
+
             }
             if (indexObject == self.testsObjects.length - 1) {
                 element.results = {
@@ -889,25 +889,25 @@
                 element.results.succeeded = self.currentResult.succeeded;
             }
         };
-        
+
         return this.updateTestResult(tests[indexTest], object)
         .then(loop).catch(loop);
-        
+
     },
-    
+
     percentageCalculating: function(currentResult) {
         this.round = Math.round.bind(Math);
         var testNumber = currentResult.failed + currentResult.succeeded;
-        currentResult.failed = this.round((currentResult.failed/testNumber)*100);
-        currentResult.succeeded = this.round((currentResult.succeeded/testNumber)*100);
+        currentResult.failed = this.round((currentResult.failed / testNumber) * 100);
+        currentResult.succeeded = this.round((currentResult.succeeded / testNumber) * 100);
     },
-    
+
     totalPercentage: function() {
         this.resultsPercentageFailed = 0;
         this.resultsPercentageSucceeded = 0;
-        
+
         for (var i = 0, l = this.testsObjects.length; i < l; i++) {
-            
+
             this.percentageCalculating(this.testsObjects[i].results);
             this.resultsPercentageFailed += this.testsObjects[i].results.failed;
             this.resultsPercentageSucceeded += this.testsObjects[i].results.succeeded;
@@ -917,97 +917,97 @@
         this.resultsPercentageSucceeded = this.resultsPercentageSucceeded/this.testsObjects.length;
         this.displayGlobalTestResults();
     },
-    
+
     displayGlobalTestResults: function() {
         var id = "globalTestResultsTable";
         var tableResult = document.getElementById(id);
-        var content;
+        var content = "";
         content += "<table>";
         content += "<tbody>";
         content += "<thead>";
         content += "<tr>";
-        content += "<th></th>"; 
-        content += "<th>Succeeded (%)</th>";
-        content += "<th>Failed (%)</th>";
+        content += "<th></th>";
+        content += "<th>Succeeded</th>";
+        content += "<th>Failed</th>";
         content += "</tr>";
         content += "</thead>";
         for (var i = 0, l = this.results.length; i < l; i++) {
             content += "<tr>";
             content += "<th>" + this.results[i].testName + "</th>";
-            content += "<td>" + this.results[i].succeeded + "</td>";
-            content += "<td>" + this.results[i].failed + "</td>";
+            content += "<td>" + this.results[i].succeeded + "%</td>";
+            content += "<td>" + this.results[i].failed + "%</td>";
             content += "</tr>";
         }
         content += "<tr>";
         content += "<th>Total</th>";
-        content += "<td>" + this.resultsPercentageSucceeded + "</td>";
-        content += "<td>" + this.resultsPercentageFailed + "</td>";
+        content += "<td>" + this.resultsPercentageSucceeded + "%</td>";
+        content += "<td>" + this.resultsPercentageFailed + "%</td>";
         content += "</tr>";
         content += "</tbody>";
         content += "</table>";
-        
+
         tableResult.innerHTML = content;
-        
+
         var style = document.getElementById("globalTestResultsDiv").style;
         style.display = (!style.display || style.display == "none") ? "block" : "none";
     },
-    
+
     runSectionTest : function(indexObject, indexTest) {
-        var element = this.testsObjects[indexObject]; 
+        var element = this.testsObjects[indexObject];
         var object = element.object;
         var tests = element.tests;
-        
+
         var self = this;
         var loop = function() {
             if (indexTest < tests.length - 1) {
                 self.runSectionTest(indexObject, indexTest + 1);
             }
         };
-        
+
         this.updateTestResult(tests[indexTest], object)
         .then(loop).catch(loop);
     },
-    
+
     run: function(indexObject, indexTest) {
-        var element = this.testsObjects[indexObject]; 
+        var element = this.testsObjects[indexObject];
         var object = element.object;
         var tests = element.tests;
-        
+
         return this.updateTestResult(tests[indexTest], object);
     },
-    
+
     displayInLineArray: function() {
         var content = "<div id='testsDisplay'>";
-        content += "<div id='title'><h1> Test Page</h1></div>";
+        content += "<div id='title'><h1>OIPF Tests</h1></div>";
         content += "<div id='testControllerDiv'>";
-        content +=      "<div id='titleTestControllerDiv'><h4>Test Controller<h4></div>";
+        content +=      "<div id='titleTestControllerDiv'><h4>All tests</h4></div>";
         content +=      "<button id='runAllBtn'>Run All</button>";
         content +=      "<button id='displayConfigBtn'>Hide/Show</button>";
         content +=      "<div id='globalTestResultsDiv'>";
-        content +=          "<div id='titleGlobalTestResultsDiv'><h4>Global Test Results<h4></div>";
+        content +=          "<div id='titleGlobalTestResultsDiv'><h4>Test Results</h4></div>";
         content +=          "<table id='globalTestResultsTable'></table>";
         content +=      "</div>";
         content += "</div>";
-        
+
         var testsObjects = this.testsObjects;
         content += "<div id=AllTestDiv>";
 
         for (var i = 0; i < testsObjects.length; i++) {
             var currentObject = testsObjects[i];
-            content += "<div id='" + currentObject.name + "Title'>" 
-            + "Section " + currentObject.name 
+            content += "<div id='" + currentObject.name + "Title' class='section'>"
+            + "<h4>Section " + currentObject.name + "</h4>"
             + "<button id='" + currentObject.name + "HideShowBtn'>Hide/Show</button>"
             + "<button id='runAll" + currentObject.name + "Btn'>Run tests of this section</button>";
             content += "</div>";
             var idOfTestSection = currentObject.name + "Section";
             this.sectionsID.push(idOfTestSection);
-            
+
             content += "<div id=" + idOfTestSection + ">";
             content += "<table id='" + currentObject.name + "Table'>";
             content += "<tbody>";
             content += "<thead>";
             content += "<tr>";
-            content += "<th>Lauching</th>"; 
+            content += "<th>Lauching</th>";
             content += "<th>Tested Method</th>";
             content += "<th>Label</th>";
             content += "<th>Test duration</th>";
@@ -1018,7 +1018,7 @@
             var currentObject = testsObjects[i];
             var tests = currentObject["tests"];
             for (var j = 0; j < tests.length; j++) {
-                
+
                 var currentTest = tests[j];
                 content += "<tr id='" + currentTest["method"] + "'>";
                 content += "<td><button id='" + currentTest["method"] + "Btn" + "'>Run</button></td>";
@@ -1036,26 +1036,30 @@
         content += "</div>";
         document.body.innerHTML += content;
     },
-    
+
     updateTestResult: function(currentTest, object) {
+        this.updateTestResultStart(currentTest);
+
         console.group(currentTest["label"]);
         var timeStart = new Date();
+
         var self = this;
         var result = false;
-        var promiseTest =  new Promise(function(resolve, reject) {
+        var promiseTest = new Promise(function(resolve, reject) {
             try {
                 timeout(object.timer || 5000)
                 .then(reject.bind(null, "No result returned."))
                 .then(function() {
                     !result
                     && self.stopAnimationInProgress(currentTest)
-                    && object.afterTest 
+                    && object.afterTest
                     && object.afterTest.bind(object);
                     self.currentResult && self.currentResult.failed++;
                 });
                 object.beforeTest && object.beforeTest(resolve, reject);
                 object[currentTest["method"]] && object[currentTest["method"]](resolve, reject);
                 self.startAnimationInProgress(currentTest);
+
             } catch (error) {
                 reject(error);
             }
@@ -1076,32 +1080,38 @@
             console.log(val);
             console.groupEnd(currentTest["label"]);
             var timeEnd = new Date();
-            self.updateTestResultError(timeStart, timeEnd, currentTest, val);                    
+            self.updateTestResultError(timeStart, timeEnd, currentTest, val);
             object.afterTest && object.afterTest();
         });
-        
+
         return promiseTest;
     },
-    
+
+    updateTestResultStart: function(currentTest) {
+        document.getElementById(currentTest["method"] + "Result").textContent = "None";
+        document.getElementById(currentTest["method"] + "Result").className = "";
+        document.getElementById(currentTest["method"] + "Duration").textContent = "None";
+    },
+
     updateTestResultSuccess: function(timeStart, timeEnd, currentTest, message) {
         document.getElementById(currentTest["method"] + "Result").textContent = message || "Success";
-        document.getElementById(currentTest["method"] + "Result").style.backgroundColor = "limegreen";
+        document.getElementById(currentTest["method"] + "Result").className = "success";
         document.getElementById(currentTest["method"] + "Duration").textContent = (timeEnd - timeStart).toFixed(2) + " ms";
     },
-    
+
     updateTestResultError: function(timeStart, timeEnd, currentTest, message) {
         document.getElementById(currentTest["method"] + "Result").textContent = message || "Error";
-        document.getElementById(currentTest["method"] + "Result").style.backgroundColor = this.colorManaging(message);
+        document.getElementById(currentTest["method"] + "Result").className = this.colorManaging(message);
         document.getElementById(currentTest["method"] + "Duration").textContent = (timeEnd - timeStart).toFixed(2) + " ms";
     },
-    
+
     startAnimationInProgress: function(currentTest) {
         var self = this;
-        
+
         self.animation.intervalID = setInterval(function() {
             var currentTestResult = document
                 .getElementById(currentTest["method"] + "Result");
-            
+
             if((self.animation.i%6) == 0) {
                 currentTestResult.textContent = "*";
                 self.animation.i = 1;
@@ -1115,35 +1125,37 @@
                 console.log("Test in progress");
                 self.animation.i++;
             }
-            
+
         }, 500);
     },
-    
+
     stopAnimationInProgress: function(object, currentTest) {
-        
+
         clearInterval(this.animation.intervalID);
         this.animation.id = 1;
         this.animation.start = true;
         this.animation.intervalID = null;
-        
+
     },
-    
+
     colorManaging: function(errorMessage) {
-        var map = { 
-            "No result returned.": "orange",
-            "Untestable case for the moment.": "sandybrown",
-            "Invalid state.": "orangered"
+        var map = {
+            "No result returned.": "error",
+            "Untestable case for the moment.": "error",
+            "Invalid state.": "error"
         };
-        
+
         if (!errorMessage) {
-            return "red";
+            return "error";
+
         } else if (typeof errorMessage == "string") {
             return map[errorMessage];
+
         } else if (errorMessage instanceof Error) {
-            return "tomato";
+            return "error";
         }
     }
-    
+
 });

    

[Sandbox-commits] r1653 - in oipf/test: css js

jruchaud＠users.nuiton.org