Làm thế nào để viết một bài kiểm tra Jasmine cho một trang web có HTML và JavaScript hoặc jQuery?

Question

Trong tài liệu tôi đọc trên Jasmine, họ chỉ kiểm tra tệp .js. Nhưng nếu thử nghiệm trên một trang web, chẳng hạn, với các mã:

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> 

mà chỉ là để nói, nếu người dùng nhấp vào (hoặc tab để) hộp nhập liệu , làm cho nền của hộp màu vàng, và khi tập trung ra, sau đó làm cho nó ánh sáng màu xanh. Trong trường hợp này, làm cách nào để kiểm tra hành vi trên trong tệp .html? (tệp html này nên ở đâu - có thể là bất kỳ nơi nào bên ngoài tệp lib Jasmine và SpecRunner.html và cách SpecRunner.html bao gồm nó bằng cách nào đó để kiểm tra trang này?

cập nhật:. nó là tốt để tách các nội dung HTML và mã JavaScript, nhưng vẫn còn, các chi tiết cụ như để có thể kiểm tra nó là gì

Answer 1

người ta nói chung, thực hành tốt nhất để di chuyển bản chính sang bên ngoài các tệp js trong trình duyệt web.

Bạn có thể chuyển mã của bạn vào một tập tin .js và sau đó đưa nó vào trong HTML của bạn bằng cách thực hiện:

<script src='myfile.js'> 

Mà sẽ bao gồm nó, điều này sẽ cho phép bạn dễ dàng sử dụng Jasmine để kiểm tra các tập tin. Bạn có thể giả lập DOM của bạn để kiểm tra đơn vị bên ngoài DOM.

Nếu bạn cần thử nghiệm chung thay vì kiểm tra đơn vị, tôi đề xuất một cái gì đó như PhantomJS thực sự sẽ mô phỏng trình duyệt và cho phép bạn kiểm tra trải nghiệm người dùng hoàn chỉnh. (Các lựa chọn thay thế tốt khác bao gồm Selenium mà tôi đã thành công)

Ngoài ra, here is a nice article về thử nghiệm jQuery với QUnit.

Answer 2

Sau một số nghiên cứu, tôi đã tìm thấy một cách đơn giản để kiểm tra JavaScript cùng với dữ liệu HTML, CSS và JSON. Nó là Jasmine-jQuery và chúng được gọi là đồ đạc HTML, vv Vì vậy, không phải là trang đầy đủ, độc lập, nhưng có thể đủ để nói cho các widget của bạn hoạt động tốt nếu con chuột kết thúc hoặc điều gì sẽ xảy ra nếu người dùng nhấp vào một cái gì đó. (bằng cách sử dụng jQuery .mouseover() hoặc .click(), v.v.)