2014-05-03 120 views
5

我使用的代碼覆蓋率NPM和咕嚕在本地,但我想在瀏覽器證明這一點添加代碼覆蓋測試茉莉花在瀏覽器

如果我打開我怎麼能已經在瀏覽器中生成的代碼覆蓋率codepen?
請給出一個例子。

這裏我測試控制器和茉莉花測試代碼,但我想知道這是否是100%覆蓋,並顯示在瀏覽器的http://codepen.io/clouddueling/pen/Jwaru?editors=001

我可以將我的代碼提交給服務器嗎?讓它立即在其他地方進行測試,比如在heroku上並獲得結果?Instanbul能否以某種方式在客戶端運行並輸出html報告或json字符串?

回答

6

您可以使用Blanket.js,支持茉莉測試運行,運行在瀏覽器本身的代碼覆蓋率。

這裏是一個展示PLUNKER您的示例應用程序和規格。這裏需要注意的幾個關鍵點是:

<!-- Use of data-cover provided by blanket to test coverage of concerned file --> 
<script type="text/javascript" src="app.js" data-cover></script> 

毯爵士需要一個adapter for jasminejasmine-blanket.js是plunker中顯示的適配器。

我更喜歡在codepen上運行。希望有所幫助。這不光滑嗎?

更新9-11-2017 blanket.js項目沒有被主動維護,您可以在他們的github存儲庫中看到。 enter image description here

+0

我必須等待40分鐘的賞金,但這是嚇人的光滑!如果我刪除其中一個測試,它會突出顯示紅色代碼xD –

+1

很高興它有幫助。我們使用伊斯坦布爾,但這是一個輕量級的庫,當我想通過完全抽象任何與服務器端相關的配置來考慮在瀏覽器中對TDD和代碼覆蓋進行培訓(設置您的示例)時,我認爲它可以被完全使用。@MichaelCalkins – dmahapatro

+0

這就是爲什麼我想要這個,所以我可以教TDD :) –

0

如果你需要覆蓋和複雜的數據,我強烈建議你看看Grunt.io和NPM。 NPM擁有像業力報道這樣的軟件包,可以爲您提供關於您的應用程序的全面報道。 Grunt是您的這些報告的自動化任務運行人員。但請記住,100%的覆蓋率並不總是相關的。這是一個代碼複雜性的工具。我使用NPM包grunt-complexity和karma-coverage來查看未覆蓋的內容,然後確定在我的代碼的這一部分中完整測試覆蓋率有多少值。

Eghead有一個很好的咕嚕介紹視頻https://egghead.io/lessons/gruntjs-introduction-to-grunt

希望這有助於一點,

喬丹

+0

我已經使用了咕嚕和NPM本地,但我想這樣做在瀏覽器中的教學範例。 –

+0

我可以將業務覆蓋範圍配置爲輸出到html。它也很漂亮。我認爲Angular的Vojta就是這樣做的。 –

+0

我基本上想在瀏覽器中運行instanbul,看看我的codepen,使用它我可以做代碼覆蓋? –