@ui5/server
Version:
UI5 CLI - Server
311 lines (273 loc) • 13.8 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>SAPUI5 QUnit TestRunner</title>
<script src="../../../../resources/sap/ui/thirdparty/es6-promise.js"></script>
<script nomodule src="../../../../resources/sap/ui/thirdparty/es6-shim-nopromise.js"></script>
<script src="../../../../resources/sap/ui/thirdparty/jquery.js"></script>
<script src="../../../../resources/sap/ui/thirdparty/handlebars.js"></script>
<script src="../../../../resources/sap/ui/thirdparty/blanket.js"></script>
<script src="TestRunner.js"></script>
<link rel="stylesheet" href="testrunner.css">
<script id="qunitResults" type="text/x-handlebars-template">
<select id="testPageSelect" name="testPages" size="10" multiple style="width: 100%" >
{{#pages}}
<option value={{page}}>{{page}}</option>
{{/pages}}
</select>
</script>
<script>
jQuery.fn.filterByText = function($textbox) {
return this.each(function() {
var selectbox = this;
var options = [];
jQuery(selectbox).find("option").each(function() {
options.push({value: jQuery(this).val(), text: jQuery(this).text()});
});
jQuery(selectbox).data("options", options);
// jQuery object or a selector
// (https://codeql.github.com/codeql-query-help/javascript/js-unsafe-jquery-plugin/)
$textbox = ($textbox instanceof jQuery) ? $textbox : jQuery(jQuery.find($textbox));
$textbox.on("change keyup", function() {
var options = jQuery(selectbox).empty().data("options");
var search = jQuery(this).val().trim();
var regex = new RegExp(search, "gi");
jQuery.each(options, function(i) {
var option = options[i];
if(option.text.match(regex) !== null) {
jQuery(selectbox).append(jQuery("<option>").text(option.text).val(option.value).on("dblclick", function() {
jQuery("#selectedTests").append(jQuery(this).clone());
}));
}
});
});
});
};
function prepareNewRun() {
jQuery("div#innerBar").width("0%");
jQuery("#stop").toggle();
jQuery("div.testResult").remove();
jQuery("span.total").text("0");
jQuery("span.passed").text("0");
jQuery("span.failed").text("0");
jQuery("#coverageFrame").remove();
jQuery("div.test-coverage").hide();
}
jQuery(function() {
jQuery("#testPageLabel").text(window.location.origin);
function showResults() {
jQuery("div.test-reporting").attr("style", "padding: 0px; display: block; border: 1px solid rgb(170, 170, 170); margin: 10px;");
jQuery("#openReporting").attr("style", "width:0px;height:0px;margin:5px;border-style:solid;border-width:0 12px 12px 12px;border-color:transparent transparent #007dc0 transparent;float: right;position: relative;left: -10px;cursor: pointer;");
var $this = jQuery("#showResults");
if($this.val() === "Show all results") {
jQuery("div.testResult").show();
$this.val("Show errors only");
} else {
jQuery("div.testResult.pass").hide();
jQuery("div.testResult.fail").show();
$this.val("Show all results");
}
}
jQuery("#showResults").on("click", showResults);
jQuery("#testPage").val(sap.ui.qunit.TestRunner.getTestPageUrl());
function find() {
prepareNewRun();
var oContext = { pages:[] };
return sap.ui.qunit.TestRunner.checkTestPage(jQuery("#testPage").val(), document.getElementById("sequential").checked).then(function(aTestPages) {
window.aTestPages = aTestPages;
for (var i = 0; i < aTestPages.length; i++) {
oContext.pages.push({page: aTestPages[i]});
}
var fnTemplate = Handlebars.compile(jQuery("#qunitResults").html());
var sHTML = fnTemplate(oContext);
jQuery("#testPageSelectDiv").html(sHTML);
jQuery("#testPageSelect > option").on("dblclick", function () {
jQuery("#selectedTests").append(jQuery("#find").clone());
});
jQuery("#copyButtons").show();
jQuery("#selectedTestsDiv").show();
jQuery("#testPageSelect").filterByText(jQuery("#filter"));
jQuery("#filter").show();
jQuery("#console").val(aTestPages.join("\n"));
});
}
jQuery("#find").on("click", find);
function copy() {
var aSelectedTests = jQuery("#testPageSelect")[0].selectedOptions;
for (var i = 0; i < aSelectedTests.length; i++) {
jQuery("#selectedTests").append(jQuery("<option>").text(jQuery(aSelectedTests[i]).text()).val(jQuery(aSelectedTests[i]).text()));
}
}jQuery("#copy").on("click", copy);
function copyAll() {
jQuery("#selectedTests").append(jQuery("#testPageSelect > option").clone());
}
jQuery("#copyall").on("click", copyAll);
function remove() {
var aSelectedTests = jQuery("#selectedTests")[0].selectedOptions;
for (var i = aSelectedTests.length-1; i >= 0; i--) {
jQuery(aSelectedTests[i]).remove();
}
}jQuery("#remove").on("click", remove);
function removeAll() {
jQuery("#selectedTests > option").remove();
}
jQuery("#removeall").on("click", removeAll);
function run() {
jQuery("#open").trigger("click");
window.oStartTime = new Date();
var $this = jQuery("#run");
if ($this.val() === "Run") {
//$this.val("Stop");
var aTests = [];
var aSelectedTests = jQuery("#selectedTests")[0].children;
for (var i = 0; i < aSelectedTests.length; i++) {
aTests.push(jQuery(aSelectedTests[i]).text());
}
var nStep = 100 / aTests.length;
console.log(aTests.length);
console.log(nStep);
jQuery("#reportingHeader").toggle();
sap.ui.qunit.TestRunner.runTests(aTests, nStep).then(function(oResult) {
$this.val("Run");
jQuery("#stop").toggle();
if (sap.ui.qunit.TestRunner.hasCoverage()) {
var $testCoverage = jQuery("div.test-coverage");
$testCoverage.toggle();
sap.ui.qunit.TestRunner.reportCoverage( $testCoverage[0] );
}
}).then(function() {
$this.val("Run");
});
} else {
sap.ui.qunit.TestRunner.stopTests();
}
}
jQuery("#run").on("click", function () {
if(jQuery("#selectedTests>option").length === 0) {
alert("Please select at least on test to execute");
} else {
prepareNewRun();
run();
}
});
function open() {
var $testSelection = jQuery("div#test-selection");
if($testSelection.hasClass("opened")) {
$testSelection.removeClass("opened");
jQuery("div#elements").toggle();
$testSelection.animate({height: "40px"}, 500);
jQuery("#open").attr("style", "width:0px;height:0px;margin:5px;border-style:solid;border-width: 12px 12px 0 12px;border-color:#007dc0 transparent transparent transparent;float: right;position: relative;left: -10px;cursor: pointer;");
} else {
$testSelection.addClass("opened");
$testSelection.animate({height: "300px"}, 500, function() {
jQuery("div#elements").toggle();
});
jQuery("#open").attr("style", "width:0px;height:0px;margin:5px;border-style:solid;border-width:0 12px 12px 12px;border-color:transparent transparent #007dc0 transparent;float: right;position: relative;left: -10px;cursor: pointer;");
}
}
jQuery("#open").on("click", open);
function openCoverage() {
if(jQuery("#coverageContent").is(":visible")) {
jQuery("#coverageContent").hide();
jQuery("#openCoverage").attr("style", "width:0px;height:0px;margin:5px;border-style:solid;border-width: 12px 12px 0 12px;border-color:#007dc0 transparent transparent transparent;float: right;position: relative;left: -10px;cursor: pointer;");
} else {
jQuery("#coverageContent").show();
jQuery("#openCoverage").attr("style", "width:0px;height:0px;margin:5px;border-style:solid;border-width:0 12px 12px 12px;border-color:transparent transparent #007dc0 transparent;float: right;position: relative;left: -10px;cursor: pointer;");
}
}
jQuery("#openCoverage").on("click", openCoverage);
function openReporting() {
jQuery("#showResults").toggle();
if(jQuery("#showResults").css("display") === "none") {
jQuery("div.testResult").hide();
jQuery("div.test-reporting").attr("style", "padding: 0px; display: block; border: 1px solid rgb(170, 170, 170); margin: 10px; height: 40px;");
jQuery("#openReporting").attr("style", "width:0px;height:0px;margin:5px;border-style:solid;border-width: 12px 12px 0 12px;border-color:#007dc0 transparent transparent transparent;float: right;position: relative;left: -10px;cursor: pointer;");
} else {
jQuery("div.test-reporting").attr("style", "padding: 0px; display: block; border: 1px solid rgb(170, 170, 170); margin: 10px;");
jQuery("div.testResult").show();
jQuery("#showResults").val("Show errors only");
jQuery("#openReporting").attr("style", "width:0px;height:0px;margin:5px;border-style:solid;border-width:0 12px 12px 12px;border-color:transparent transparent #007dc0 transparent;float: right;position: relative;left: -10px;cursor: pointer;");
}
}
jQuery("#openReporting").on("click", openReporting);
function stop() {
sap.ui.qunit.TestRunner.stopTests();
}
jQuery("#stop").on("click", stop);
setInterval(function() {
if (window.aTestPages) {
jQuery("#run").show();
}
}, 500);
if (sap.ui.qunit.TestRunner.getAutoStart()) {
find().then(function() {
copyAll();
run();
})
}
});
</script>
</head>
<body class="sapUiBody" style="padding: 0; margin: 0;">
<div style="padding: 10px;">
<h1>SAPUI5 Selenium-based QUnit Tests</h1>
<div id="test-selection" class="opened" style="border: 1px solid; border-color: #aaa; height: 300px;">
<div id="selectionHeader" style="height: 30px;margin-top: 0px; padding-left: 2px;padding-top: 10px;background-color: #ccc;margin-bottom: 10px;">
<div style="float: left; width: 10%; font-family: Arial;position: absolute">Select Tests</div>
<div id="progress" style="float: left;width: 400px;font-family: Arial;position: relative;left: 200px">Progress</div>
<div id="bar" style="float: left;position: relative;left: -130px;border: 1px solid;width: 150px;height: 19px">
<div id="innerBar" style="background-color: #a4ec81;width:0%;height: 19px;text-align: right"></div>
</div>
<input id="stop" type="button" value="Stop" style="float: left;position: relative;left: -125px; display: none;">
<div id="duration" style="float: left;width: 75px;font-family: Arial;position: relative;left: 50px">Duration</div>
<div id="time" style="float: left;position: relative;left: 50px;width: 200px;height: 19px" >0 Seconds</div>
<div id="open" style="width:0px;height:0px;margin:5px;border-style:solid;border-width:0 12px 12px 12px;border-color:transparent transparent #007dc0 transparent;float: right;position: relative;left: -10px;cursor: pointer;"></div>
</div>
<div id="elements">
<!-- test-resources/qunit/testsuite.qunit.html -->
<label id="testPageLabel" for="testPage"></label>
<input id="testPage" type="text" size="50">
<input id="sequential" type="checkbox" title="Sequential?">
<input id="find" type="button" value="Find">
<input id="run" type="button" value="Run" style="display: none;">
<br>
<!--<textarea id="console" rows="20" style="width: 100%" readonly="readonly"></textarea>-->
<input id="filter" type="text" size="50" style="display: none;">
<div id="select" style="margin: 2px;">
<div id="testPageSelectDiv" style="position: absolute; width: 45%; vertical-align: middle; float: left;">
</div>
<div id="copyButtons" style="position: relative; width: 37px; left: 47%; vertical-align: middle; float: left; top: 29px; display: none;">
<input id="copy" type="button" value=">" style="margin: 2px; width: 32px;">
<input id="copyall" type="button" value=">>">
<input id="remove" type="button" value="<" style="width: 32px; margin: 2px;">
<input id="removeall" type="button" value="<<">
</div>
<div id="selectedTestsDiv" style="width: 45%; position: relative; left: 48%; vertical-align: middle; float: left; display: none;">
<select id="selectedTests" size="10" style="width: 100%;" multiple></select>
</div>
</div>
</div>
</div>
</div>
<div class="test-execution" style="padding: 10px;">
</div>
<div id="reportingHeader" class="test-reporting" style="display: none; padding: 0px; border: 1px solid;border-color: #aaa;margin: 10px;">
<div style="height: 30px;margin-top: 0px; padding-left: 2px;padding-top: 10px;background-color: #ccc;">
<div style="float: left; width: 15%; font-family: Arial;position: absolute;">Test Reporting</div>
<div style="float: left; white-space: nowrap; width: 50%; font-family: Arial;position: relative; left: 200px">Number of executed test: <span class="total">0</span> Number of passed tests: <span class="passed">0</span> Number of failed tests: <span class="failed">0</span></div>
<input id="showResults" type="button" value="Show all results" style="display: none; float: left; position: relative; left: 200px; bottom: 3px">
<div id="openReporting" style="width:0px;height:0px;margin:5px;border-style:solid;border-width: 12px 12px 0 12px;border-color:#007dc0 transparent transparent transparent;float: right;position: relative;left: -10px;cursor: pointer;"></div>
</div>
</div>
<div class="test-coverage" style="padding: 0px; display: none;border: 1px solid;border-color: #aaa;margin: 10px;">
<div id="coverageHeader" style="height: 30px;margin-top: 0px; padding-left: 2px;padding-top: 10px;background-color: #ccc;">
<div style="float: left; width: 10%; font-family: Arial;position: absolute">Test Coverage</div>
<div id="openCoverage" style="width:0px;height:0px;margin:5px;border-style:solid;border-width: 12px 12px 0 12px;border-color:#007dc0 transparent transparent transparent;float: right;position: relative;left: -10px;cursor: pointer;"></div>
</div>
<div id="coverageContent" style="display: none;">
<div id="blanket-main"></div>
</div>
</div>
</body>
</html>