Im zweiten Teil dieser Blogserie habe ich die Bedeutung von OPA5 Tests erläutert und erklärt, wie man diese implementiert und nutzt.
Dieser dritte Beitrag soll nun zeigen, wie mit QUnit Funktionstests geschrieben werden können.
Womit sollte ich beginnen?
Ein Vorteil der QUnit Tests ist, dass diese direkt im Browser ausgeführt werden können und keine zusätzlichen Tools benötigt werden. Dafür erzeugt man zuerst die sogenannte QUnit Test Page mit der Dateiendung .qunit.html (z. B. unitTests.qunit.html). Abgelegt werden sollte die Datei in dem Ordner /test/unit. Wird für die Erstellung der App ein Web IDE App Template genutzt, werden der Ordner und die QUnit Test Page automatisch erzeugt.
Zur besseren Übersicht sollte die Struktur des /test/unit Ordners sich an der Ordnerstruktur der App orientieren.
Die QUnit Test Page bietet einen Überblick über alle ausgeführten Tests. Hier kann man leicht erkennen, welche Tests erfolgreich waren, bzw. fehlgeschlagen sind. Dazu können einzelne Tests manuell wiederholt werden und ich habe die Möglichkeit die Testliste nach verschiedenen Kriterien zu filtern. Bei fehlgeschlagenen Tests wird zudem der erwartete Wert, das Ergebnis sowie die Differenz angezeigt. Zudem ist die betroffene Zeile im Coding angegeben. So lassen sich Fehlerquellen schnell ausmachen und leichter beheben.
Nutzt ihr kein Web IDE App Template, könnt ihr für die Erstellung der Testpage folgendes Template nutzen.
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<base href="../../../../../../">
<!--[if lte IE 9]><script type="text/javascript">
(function() {
var baseTag = document.getElementsByTagName('base')[0];
baseTag.href = baseTag.href;
})();
</script><![endif]-->
<script id="sap-ui-bootstrap"
type="text/javascript"
src="resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-noConflict="true">
</script>
<link rel="stylesheet" href="resources/sap/ui/thirdparty/qunit.css" type="text/css" media="screen" />
<script type="text/javascript" src="resources/sap/ui/thirdparty/qunit.js"></script>
<script type="text/javascript" src="resources/sap/ui/qunit/qunit-junit.js"></script>
<script type="text/javascript" src="resources/sap/ui/qunit/QUnitUtils.js"></script>
<script language="javascript">
/* Create and structure your QUnit tests here
Documentation can be found at http://docs.jquery.com/QUnit
Example:
module("Module A");
test("1. a basic test example", 2, function() {
ok( true, "this test is fine" );
var value = "hello1";
equals( value, "hello1", "We expect value to be 'hello1'" );
});
*/
</script>
</head>
<body>
<div id="qunit"></div>
<!-- [TODO: add additional html content here] -->
</body>
</html>
Eigene Tests schreiben
Für jeden zu testenden Controller wird auch eine .js Datei im Testordner erstellt, in der die zugehörigen Tests implementiert werden. Möchte ich zum Beispiel die Funktionen in meiner formatter.js testen, lege ich auch im Testordner eine Datei formatter.js an.
Um die einzelnen Tests zu gruppieren, werden sie in sogenannte Module unterteilt. Diese stellen jeweils eine Funktion des Controllers dar. Innerhalb der Module befindet sich die Testfunktion, welche nach dem Arrange-Act-Assert Muster aufgebaut ist. Dieses Muster wurde in Teil zwei dieser Blogserie in Zusammenhang mit den Objekten Given, Then, When erläutert.
Der Arrange-Teil beschreibt die Ausgangssituation für unser Testsystem. Der Act-Teil sollte bestenfalls nur aus dem Methodenaufruf der zu testenden Methode bestehen. Im Assert-Teil wird dann der erwartete Wert mit dem von der Funktion zurückgegebenen Wert verglichen und eine Erfolgsmeldung definiert. Darauf folgen dann die einzelnen Tests. Diese enthalten als Parameter jeweils eine kurze Beschreibung z. B. “Should round down a 3 digit number” sowie den Aufruf der Testfunktion. Diese bekommt einen zu testenden Wert (1,223) sowie den erwarteten Output (1,22) übergeben.
Führt man nun die QUnit-Tests aus, ruft die Testfunktion z. B. die formatter Funktion auf. Anschließend wird der Rückgabewert mit dem erwarteten Wert verglichen.
Stimmen diese beiden Werte überein, ist der Test erfolgreich und erscheint grün. Gibt es hier Abweichungen ist der Test rot. Durch einen Klick auf die jeweilige Testzeile sind der erwartete Wert, das Ergebnis, die Abweichung und die entsprechende Stelle im Coding zu sehen.
Ich hoffe mit diesem Beitrag konnte ich euch bei der Erstellung von QUnit-Tests in SAPUI5 helfen.
Dies war der vorerst letzte Beitrag meiner Testing in SAPUI5 Serie. Meine nächsten Artikel werden also von anderen Themen handeln, ich hoffe ihr schaut dann wieder rein 😉
Du interessierst dich für Fiori und hast Lust coole Projekte mit uns zu machen? Wir suchen dich! Schau doch mal in unserer Stellenbeschreibung vorbei.
