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"; } } - + });