WebStorm主題

本文源自 https://blog.jetbrains.com/webstorm/2013/10/running-javascript-tests-with-karma-in-webstorm-7/

這篇文章最早 2013/10/3 由Ekaterina Prigara發佈,2016/8/8更新。文中的提及的WebStrom功能,只要你是2013/10/3後購買的都有支援。

隨著WebStorm的每次更新,我們嘗試添加了會讓你有更好開發體驗的現代技術和工具。在WebStorm 7(譯注: 舊的版本編號),我們推出了Karma支援–一個簡單而靈活可執行JavaScript測試的工具,由AngularJS團隊所開發。

下面是關於在WebStorm中整合Karma的基本資訊:

  • 它使用一個本地端的服務器在選擇你電腦安裝的瀏覽器中執行測試。
  • 它可以執行使用Jasmine,QUnit,或是Mocha所寫的測試,或是寫一個簡單的接合器(adapter)來使用任何你喜歡的框架。
  • 它可以用在 istanbul 代碼覆蓋率引擎。

下面是關於在WebStorm使用Karma的簡短指引。觀看影片或是閱讀以下的文章指示開始使用Karma。

初始配置

要開始使用Karma,確定你的電腦有安裝Node.js。你可以使用npm全面或是局部安裝Karma。推薦的方法是在專案目錄中本地安裝Karma。

然後,你需要一個Karma配置文件添加到你的專案。在此配置文件應指定你要使用的測試框架,並選擇用於測試的瀏覽器。

你可以用下面的命令生成它:

karma init karma.conf.js

或者手動添加。

karma-init

添加 Karma Run/Debug 配置

現在,你需要創建一個新的 Karma Run/Debug 配置,讓你隨時在WebStorm簡單地Run或Debug測試。

在專案視圖(Project View)中選karma.conf.js文件,按滑鼠右鍵然後選擇Create “karma.conf.js”選項來建立一個基於這個配置文件的新的 Run/Debug 配置。

create-karma-config

另一種選擇,你可以從編輯配置對話框(Edit configurations dialog)中添加Karma配置,編輯配置對話框可以在Run選單找到不要忘了指定到Karma配置文件的路徑。

karma-config

執行測試

要開始執行測試,從IDE導航欄右側的下拉列表選擇這個新的Run/Debug配置,然後點擊綠色的Run按鈕。或在Windows和Linux按下Alt-Shift-F10或在OS X按下CTRL-ALT- R然後在Run popup選擇配置。

run-popup

WebStorm將會執行Karma,很快的測試結果將會以不錯的視覺形式顯示在Karma工具視窗。

karma-tool-window

你可以瀏覽從測試結果到它的代碼,檢查測試執行統計數據,並從中製作HTML報告。

依改變重新執行測試

請注意,在WebStorm的Karma配置沒有啟用autoWatch。你可以點擊在Karma工具視窗左邊的切換auto-test圖像來啟用依改變而自動執行測試: 於10秒鐘內你的代碼更改後如果沒有語法錯誤,測試將運行。

您也可以重新執行測試在OS X上使用快捷鍵Ctrl -CMD -R ,在Windows和Linux使用Alt-Shift-R鍵。

覆蓋率執行

WebStorm提供了被Karma所使用的istanbul代碼覆蓋引擎的支持。安裝node模組karma-coverage,在Karma配置檔案增加覆蓋率的設定,然後很簡單的點擊Run with coverage按鈕,就可以得到你的代碼測試覆蓋率的表告。

測試偵錯

有了WebStorm你也可以對Karma測試偵錯。一旦Karma Run/Debug配置建立好了,把你的代碼設定中斷點然後點擊配置的下拉列表旁邊的Debug按鈕,開始做偵錯。一旦到達了中斷點,你可以一步步執行代碼然後評估代碼是否有錯誤。

– JetBrains WebStorm Team

f9aa325d3aed8e6e58ddb62a4749282f

關於Ekaterina Prigara

Ekaterina Prigara是JetBrains的WebStorm 產品行銷經理. 她熱衷於科技, UX與咖啡. 

ESAST CO LTD為JetBrains在台灣經銷, 本文經JetBrains授權翻譯

新創公司購買JetBrains IDE企業版本享有50%優惠

對於JavaScript如何做TDD有興趣,可以參考這本電子書 Test-Driving JavaScript Applications

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

你正使用 WordPress.com 帳號留言。 登出 / 變更 )

Twitter picture

你正使用 Twitter 帳號留言。 登出 / 變更 )

Facebook照片

你正使用 Facebook 帳號留言。 登出 / 變更 )

Google+ photo

你正使用 Google+ 帳號留言。 登出 / 變更 )

連結到 %s

分類

03-JetBrains, WebStorm