QUnit: Per innerHTML bevölkerte Fixtures führen enthaltenen Code nicht aus
Wer sich einige Zeit mit JavaScript beschäftigt, sucht irgendwann nach einer Lösung zum automatischen Testen von Code. QUnit sticht aufgrund der Fixtures aus der Menge der Frameworks heraus - es gibt kaum einen effizienteren Weg, um DOM-Interaktionen zu prüfen.
- Tam Hanna
Wer sich einige Zeit mit JavaScript beschäftigt, sucht irgendwann nach einer Lösung zum automatischen Testen von Code. QUnit sticht aufgrund der Fixtures aus der Menge der Frameworks heraus - es gibt kaum einen effizienteren Weg, um DOM-Interaktionen zu prüfen.
Für Quereinsteiger: eine Fixture ist ein div-Tag, dessen Inhalt bei jedem Durchlauf eines Testfalls geleert wird:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QUnit Example</title>
<link rel="stylesheet" href="http://code.jquery.com/QUnit/↵
QUnit-1.14.0.css">
</head>
<body>
<div id="QUnit"></div>
<div id="QUnit-fixture"></div>
<script src="http://code.jquery.com/QUnit/QUnit-1.14.0.js"></script>
<script src="/tests.js"></script>
</body>
</html>
Besonders kreative Entwickler kommen nun auf die Idee, die Fixture über die innerHTML-Eigenschaft mit Inhalten zu befüllen. Solch eine auf den ersten Blick durchaus einleuchtende Vorgehensweise scheitert daran, dass Browser auf diese Art und Weise eingepflegte Script-Elemente nicht parsen.
Da dieses Problem durchaus weit verbreitet ist, haben sich im Laufe der Zeit einige Patterns herausgebildet. Am "einfachsten" ist es, den Testfall schlicht unter Nutzung von jQuery zusammenzubauen:
var htmlFixture='<input type="text" id="i1" />
<input type="text" id="i2" />
<input type="text" id="i3" />
<input type="text" id="o" />
<input id="b" type="button" value="Los!"/>';
document.getElementById("QUnit-fixture").innerHTML = htmlFixture;
document.getElementById("i1").value="10";
document.getElementById("i2").value="1";
document.getElementById("i3").value="12";
$('#b').click(function
{
var i1 = document.getElementById("i1").value;
var i2 = document.getElementById("i2").value;
var i3 = document.getElementById("i3").value;
var myGold=new GoldClass(i1, i2);
alert(myGold.getAgio(i3));
});
$('#b').trigger('click');
equal(document.getElementById("o").value, "20");
Als Alternative zu dieser bei großen Projekten aufwendigen Vorgehensweise bietet sich die Nutzung von Frameworks an. Manche DOM-Bearbeitungsframeworks arbeiten enthaltene script-Tags automatisch auf, was das weiter oben beschriebene Einpflegen ermöglicht. ()
