Testování Javascriptových projektů

od aichi  

Skoro každý programátor se setkal s pojmy jako Unit testy, výkonové testy nebo akceptační kritéria. Když dojde na lámání chleba, většina programátorů testy nepíše, protože čas nad nimi strávený neumí prodat, nebo hůře, vůbec neplánovat. V lepším případě neví jak testy psát a jaké nástroje použít. Na tyto programátory je zaměřen tento text.

Pro testování Javascriptových projektů na bázi unit testů je k dispozici celkem mnoho frameworků od základního JSUnit až po nejaktuálnější Jasmine. Je zajímavé, že oba dva pochází z dílny firmy Pivotal. V dnešním článku se seznámíme se starým dobrým JSUnit.

JSUnit

Skoro v žádném programovacím jazyce nesmí chybět klon SUnit, tedy frameworku, který se poprvé objevil ve Smalltaku, rozšíříl se jako JUnit do Javy a nakonec jako JSUnit i do Javascriptu.

JSUnit je již jedenáct let starý a léta neudržovaný framework, nicméně je to stále základní volba, pokud framework podobného typu používáte na straně serveru. Tento framework jsme zvolili pro testování Javascriptové knihovny JAK v Seznamu.
Níže probereme základní instalaci a použití. Dále se podíváme na testování XMLHTTPRequestu a asynchronních funkcí, zejména volání funkcí pomocí setTimeout.

Instalace

Knihovnu stáhneme z výše odkazované stránky a rozbalíme do složky na webovém serveru (jsunit). Vytvoříme adresář pro testy taktéž dostupný z webového serveru (tests). V adresáři testů budeme vytvářet běžné HTML soubory s jednotlivými testy. Dobrým pravidlem je jeden soubor pro jednu unit, tedy např. "třídu", nebo jiný funkční celek.

Každý soubor s testem by měl vypadat na začátku takto:

<html>
	<head>
		<script language="JavaScript" src="../jsunit/app/jsUnitCore.js"></script>
		<script language="JavaScript" src="VASE_TESTOVANE_KNIHOVNY.js"></script>
		<script language="JavaScript">
//budouci kod testu
		</script>
	</head>
	<body>
	</body>
</html>

První test

Prvním řádkem přilinkujeme testovací framework JSUnit, dalšími řádky přilinkujete vaše soubory s funkčností, kterou hodláte v daném testu testovat a do vlastního script tagu ve stránce napíšete testy.

Zkusme si napsat jednoduchý test pro knihovnu jQuery:

<html>
	<head>
		<script language="JavaScript" src="../jsunit/app/jsUnitCore.js"></script>
		<script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
		<script language="JavaScript">
			function prepareData() {
				var div = document.createElement('div');
				div.id = 'testDiv';
				return div;
			};

			function testGettingElement() {
				var div = prepareData();
				document.body.appendChild(div);

				var jdiv = $("#testDiv");
				assertNotNull(jdiv);
				assertEquals(jdiv[0], div);

				var jdiv2 = $("#div");
				assertNotNull('jQuery objekt musí existovat',jdiv2);
				assertEquals('jQuery objekt nesmí obsahovat žádný element',jdiv2[0], null);
			};
		</script>
	</head>
	<body>
	</body>
</html>

Testovací funkce, která se jmenuje "testGettingElement", obsahuje 4 testy. Všechny testy v JSUnit začínají klíčovým slovem assert. Je vidět, že první parametr funkce je nepovinný a je jím popis daného testu. Přehled všech možností funkcí assert najdete v dokumentaci.

Dále stojí za povšimnutí, že JSUnit rozezná běžné funkce od funkcí testovacích na základě jejich názvu. Název každé testovací funkce musí začít na slovo test.

Spuštění testu

V adresáři frameworku JSUnit naleznete soubor testRunner.html, který spusťte v prohlížeči. Zde v horní části zadejte URL k souboru s vaším testem a stiskněte tlačítko Run.

Jelikož máme jeden test, výsledkem by měl být červený sloupec a pod ním zobrazeno, že proběhl jeden test a jeden chyboval. Test který chyboval se objevý v selectboxu níže. Při poklepání se objeví alert okno se zprávou:

jQuery objekt nesmí obsahovat žádný element
Expected <null> but was <undefined>

Ano, docela očekávané, protože přístup k neexistujícímu indexu pole je v Javascriptu undefined a ne null. Pokud test opravíme, bude již sloupec proběhlých testů zelený.

Spuštění více testů najednou

Pokud budeme dodržovat pravidlo jeden soubor pro jednu jednotku, budeme mít více souborů s unit testy a budeme je chtít spouštět v testRunneru najednou. Pro tento případ JSUnit zavádí pojem Suite, tedy sadu testů. Stačí vytvořit novou html stránku v adresáři s testy a vytvořit v ní Suite, do které načteme soubory s testy.

<html>
	<head>
		<script language="JavaScript" src="../jsunit/app/jsUnitCore.js"></script>
		<script language="JavaScript">
			function suite() {
				var newsuite = new jsUnitTestSuite();
            		newsuite.addTestPage("../tests/MY_TEST_1.html");
				newsuite.addTestPage("../tests/MY_TEST_2.html");
				return newsuite;
			};
		</script>
	</head>
	<body>
	</body>
</html>

Z kódu je zřejmé, že je nutné vytvořit metodu suite, kterou hledá framework a v této metodě vytvoříme instanci TestSuite, které sdělíme cestu k testům, nebo dalším Suite a tuto instanci vrátíme.

Pokud využíváme relativní cesty jako v příkladu, musíme vzít v potaz, že cesta musí být relativní k souboru testRunner.html a ne k danému souboru obsahující Suite.

Konec prvního dílu

Nyní již můžete přemýšlet jak napsat správně testy pro váš kód. V příštím díle se podíváme na to jak správně nakonfigurovat prostředí a dále jak testovat asynchronní funkce a použití mock objektů. V dalších dílech si také rozebereme knihovnu Jasmine.

Adresy zpětných odkazů pro tento příspěvek:

Trackback URL (right click and copy shortcut/link location)

3 komentářů

Komentář od: Daniel Steigerwald [Návštěvník]
Daniel Steigerwald

ehm, language="JavaScript"? To je pro Nescape 4, ne? :) Ale jinak článek dobrej.

23. 02. 11 @ 10:38
Komentář od: aichi [Člen]  
aichi

no je to zkopírovaný z jejich šablony a ta je zhruba těch 11 let stará ;)

23. 02. 11 @ 12:02
Komentář od: Ludek Janicek [Návštěvník]  
Ludek Janicek

Stručný, ale výstižný článek, chválím :-)

30. 01. 12 @ 16:43