2013-03-31 14 views
7

Z materiału, który czytam na Jasmine, testują tylko plik .js. Ale co, jeśli test jest na stronie internetowej, powiedzmy, z kodem:Jak napisać test Jasmine dla strony z HTML i JavaScript lub jQuery?

try.html:

<input id="the-input"></input> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script> 

    $("#the-input").focus(function() { 
     $(this).css("background", "#ff9"); 
    }); 

    $("#the-input").blur(function() { 
     $(this).css("background", "#cff"); 
    }); 

</script> 

który jest po prostu powiedzieć, jeśli użytkownik kliknie na (lub zakładka do) pole wejściowe , spraw, aby tło pola było żółte, a gdy się wyostrzy, ustaw je na jasnoniebieskie. W takim przypadku jak przetestować powyższe zachowanie w pliku .html? (gdzie powinien być ten plik html - czy może być gdziekolwiek poza plikiem lib Jasmine i SpecRunner.html, i jak SpecRunner.html uwzględnia go jakoś przetestować stronę?

A jsfiddle znajduje się pod adresem: http://jsfiddle.net/MspUF/

Aktualizacja:. to jest w porządku, aby oddzielić zawartość HTML i kod JavaScript, ale jeszcze, jakie są specyfiki, aby móc go przetestować

Odpowiedz

2

generalnie, najlepszych praktyk, aby przenieść skrypty zewnętrzne pliki js również w przeglądarkach internetowych:

Można przenieść swój kod do pliku .js a następnie umieścić go w kodzie HTML, wykonując:

<script src='myfile.js'> 

który obejmie go, będzie to pozwalają łatwo korzystać Jasmine przetestować plik. Możesz kpić z DOM na testowanie jednostkowe poza DOM.

Jeśli potrzebujesz ogólnego testowania zamiast testowania jednostkowego, proponuję coś takiego jak PhantomJS, które faktycznie symuluje przeglądarkę i umożliwia testowanie pełnego komfortu użytkowania. (Inne dobre alternatywy to Selen, z którym odniosłem sukces)

Ponadto, here is a nice article o testowaniu jQuery z QUnit.

+0

masz na myśli, że jeśli mój plik HTML jest skomplikowany, na przykład taki, który ma 200 lub 500 linii, to muszę wyśmiać je wszystkie zamiast używać pliku HTML, jak jest? (i jak to "wyśmiać"?). To, co muszę przetestować, to to, że gdy użytkownik kliknie, tło zmieni się. –

+0

W takim przypadku sama Jasmine prawdopodobnie nie jest odpowiednim narzędziem dla ciebie, sprawdź PhantomJS lub Selenium, PhantomJS współpracuje z Jasmine, symuluje przeglądarkę internetową i pozwala przetestować twój kod, brzmi jak dokładnie to, czego potrzebujesz. –

+0

PhantomJS będzie oparty na terminalach? W pracy mój współpracownik ustawił wszystko tak, że jeśli jest 20 plików HTML, wszystkie używają różnych plików '.js', wtedy można przetestować wszystkie 20 plików HTML, wszystkie w przeglądarce Chrome lub Safari ... i raport dla wszystkich 20 Pliki HTML faktycznie wyświetlają się jako jedna strona wyglądająca jak "SpecRunner.html". Nie mogę go zapytać, jak to się robi, dopóki kilka dni później –

6

Po kilku badaniach znalazłem prosty sposób testowania JavaScript razem z danymi HTML, CSS i JSON. Jest to Jasmine-jQuery, a te są nazywane osprzętem HTML itd. Nie jest to więc pełna, samodzielna strona, ale prawdopodobnie wystarczająca informacja, że ​​widżety działają poprawnie, gdy mysz jest nad nim, lub co powinno się stać, gdy użytkownik kliknie coś. (używając jQuery .mouseover() lub .click(), itp.)

Powiązane problemy