如何爲具有HTML和JavaScript或jQuery的網頁編寫Jasmine測試？

在Jasmine上閱讀的材料中，他們只測試.js文件。但如果測試是在網頁上，說什麼，用代碼：如何爲具有HTML和JavaScript或jQuery的網頁編寫Jasmine測試？

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>

這只是說，如果用戶點擊（或選項卡）輸入框中，使箱子的背景變成黃色，並在聚焦時將其變爲淺藍色。在這種情況下，我們如何測試.html文件中的上述行爲？（這個html文件應該放在哪裏 - 可以是Jasmine lib文件和SpecRunner.html之外的任何地方，以及SpecRunner.html如何包含它以某種方式測試頁面？

jsfiddle位於：http://jsfiddle.net/MspUF/

更新：這是很好的HTML內容和JavaScript代碼中分離出來，不過，什麼是爲了能夠測試它的具體

來源

2013-03-31 太極者無極而生

人們通常，最好的做法是腳本移到外部js文件也在網頁瀏覽器中。

您可以將代碼移到一個.js文件，然後通過做它包含在你的HTML：

<script src='myfile.js'>

，其中將包括它，這將讓您輕鬆地使用茉莉花對文件進行測試。你可以模擬你的DOM在DOM之外進行單元測試。

如果您需要一般測試而不是單元測試，我建議像PhantomJS這樣的模擬瀏覽器，並讓您測試完整的用戶體驗。（其他不錯的選擇包括我已經成功使用的Selenium）

另外，here is a nice article關於使用QUnit測試jQuery。

來源

2013-03-31 12:39:56

你的意思是，如果我的HTML文件很複雜，比如一個有200或500行，那麼我必須嘲笑他們，而不是使用HTML文件原樣？（以及如何「模擬它」？）我需要測試的是，當用戶點擊它時，背景確實會發生變化 –

在這種情況下，單獨使用Jasmine可能不適合您，請檢查PhantomJS或Selenium， PhantomJS與Jasmine一起工作，它模擬一個網頁瀏覽器並讓你測試你的代碼，聽起來就像你所需要的。 –

PhantomJS將全部基於終端？在工作中，我的同事實際上已經設置好了，所以如果有20個HTML文件全部使用各種'.js'文件，那麼所有20個HTML文件都可以在Chrome或Safari內部進行測試......並且所有20 HTML文件實際上顯示爲1個單獨頁面，看起來就像'SpecRunner.html'。我不能問他是如何做到幾天後 –

經過一番研究，我找到了一種簡單的方法來測試JavaScript與HTML，CSS和JSON數據。它是Jasmine-jQuery，這些被稱爲HTML設備等。因此，不是一個完整的，獨立的頁面，但可能足以告訴你的小工具如果鼠標移過它就可以正常工作，或者如果用戶點擊某些東西，會發生什麼。（通過使用jQuery .mouseover()或.click()等）

來源

2013-04-05 23:02:27

如何爲具有HTML和JavaScript或jQuery的網頁編寫Jasmine測試？

回答

相關問題