測(cè)試JavaScript：Karma

Karma

此功能僅在Ultimate版本中受支持。

Karma是一種用于測(cè)試客戶端JavaScript的工具。Karma針對(duì)在真實(shí)瀏覽器中運(yùn)行的應(yīng)用程序執(zhí)行測(cè)試，以確保測(cè)試結(jié)果的正確性和可信度。IntelliJ IDEA與Karma集成，因此您可以從IDE內(nèi)部運(yùn)行，調(diào)試和監(jiān)控測(cè)試的覆蓋范圍。您可以在樹視圖中查看測(cè)試結(jié)果，并從那里輕松導(dǎo)航到測(cè)試源。測(cè)試狀態(tài)顯示在編輯器的測(cè)試旁邊，可以選擇快速運(yùn)行或調(diào)試它。

在開始使用Karma之前，你需要：

1. 安裝Node.js。

2. 如“插件管理”中所述， 在“插件”頁面上安裝并啟用Karma存儲(chǔ)庫插件 。

安裝Karma和插件

• 打開內(nèi)置的IntelliJ IDEA 終端（Alt+F12）并在命令提示符下鍵入以下命令之一：

  • 如果已經(jīng)定義了Karma和所有必需的插件package.json，則：npm install。

  • 安裝Karma和所需的插件（例如karma-jasmine或jasmine-core）作為開發(fā)依賴項(xiàng)：

    npm install --save-dev karma
    npm install --save-dev <required_karma_plugin> <another_required_karma_plugin>

  在Karma官方網(wǎng)站上了解更多信息。

生成Karma配置文件

Karma測(cè)試根據(jù)在交互模式下生成的karma.conf.js配置文件運(yùn)行。如果您的項(xiàng)目中已經(jīng)有karma.conf.js，請(qǐng)?zhí)^此步驟。有關(guān)Karma配置的更多詳細(xì)信息，請(qǐng)參閱Karma官方網(wǎng)站。

創(chuàng)建Karma配置文件

1. 打開終端并根據(jù)您的操作系統(tǒng)鍵入以下內(nèi)容之一來啟動(dòng)karma.conf.js生成向?qū)В?

   • 對(duì)于macOS和Linux：
     ./ node_modules / karma / bin / karma init

   • 對(duì)于Windows：

     npm install -g karma-cli
     karma init

2. 回答向?qū)У膯栴}，指定要使用的測(cè)試框架和自動(dòng)捕獲的瀏覽器。另請(qǐng)參見Karma文件：模式匹配。

運(yùn)行測(cè)試

使用IntelliJ IDEA，您可以直接從編輯器快速運(yùn)行單個(gè)Karma測(cè)試，或創(chuàng)建運(yùn)行/調(diào)試配置以執(zhí)行部分??或全部測(cè)試。

從編輯器運(yùn)行單個(gè)測(cè)試

• 單擊左側(cè)裝訂線中的 或 ，然后從彈出列表中選擇“運(yùn)行<test_name> ”。由于左側(cè)裝訂線中的測(cè)試狀態(tài)圖標(biāo) ，所以您還可以在編輯器中查看測(cè)試是否已通過或失敗。

創(chuàng)建Karma運(yùn)行配置

1. 在“項(xiàng)目”工具窗口中選擇一個(gè)測(cè)試文件，然后在上下文菜單中選擇“創(chuàng)建<文件名> ”。將打開“運(yùn)行/調(diào)試配置：Karma”對(duì)話框。

2. 指定要使用的Node.js解釋器。這可能是一個(gè)本地Node.js的解釋 或適用于Linux的Windows子系統(tǒng)的Node.js。

   （可選）指定Node.js特定的選項(xiàng)參數(shù)以及要傳遞給Node.js的環(huán)境變量。

3. 指定karma包的位置，karma.conf.js的路徑以及Karma將從中訪問其服務(wù)器的瀏覽器。

通過運(yùn)行配置運(yùn)行測(cè)試

1. 從主工具欄上的列表中選擇Karma運(yùn)行/調(diào)試配置，然后單擊列表右側(cè)的： 。

2. Karma測(cè)試服務(wù)器自動(dòng)啟動(dòng)，無需您執(zhí)行任何步驟。在“運(yùn)行”工具窗口的“因果服務(wù)器”選項(xiàng)卡中查看和分析來自測(cè)試服務(wù)器的消息。

3. 在“運(yùn)行”工具窗口的“測(cè)試運(yùn)行器”選項(xiàng)卡中監(jiān)視測(cè)試執(zhí)行。

重新運(yùn)行失敗的測(cè)試

• 在Test Runner選項(xiàng)卡中，單擊工具欄上的 。IntelliJ IDEA將執(zhí)行上一個(gè)會(huì)話期間失敗的所有測(cè)試。

  

• 要重新運(yùn)行特定的失敗測(cè)試，??請(qǐng)?jiān)谄渖舷挛牟藛沃羞x擇“運(yùn)行<測(cè)試名稱> ”。

導(dǎo)航

使用IntelliJ IDEA，您可以在文件和相關(guān)的測(cè)試文件之間切換。還支持從“測(cè)試運(yùn)行器”選項(xiàng)卡中的測(cè)試結(jié)果導(dǎo)航到測(cè)試。

在文件和相關(guān)測(cè)試文件之間切換

• 在編輯器中打開文件，然后在上下文菜單中選擇：Go To|測(cè)試，或Go To|測(cè)試主題，或者只需按Ctrl+Shift+T。

從測(cè)試結(jié)果跳轉(zhuǎn)到測(cè)試

• 在Test Runner選項(xiàng)卡中選擇測(cè)試名稱，然后在上下文菜單中選擇：Jump to Source。

   
  測(cè)試文件在編輯器中打開，光標(biāo)位于測(cè)試定義中。

調(diào)試測(cè)試

使用IntelliJ IDEA，您可以直接從編輯器快速開始調(diào)試單個(gè)Karma測(cè)試，或創(chuàng)建運(yùn)行/調(diào)試配置來調(diào)試部分或全部測(cè)試。

從編輯器開始調(diào)試單個(gè)測(cè)試

• 在左側(cè)裝訂線點(diǎn)擊 或 ，并從彈出的列表中選擇調(diào)試<TEST_NAME>。

通過運(yùn)行/調(diào)試配置啟動(dòng)測(cè)試調(diào)試

1. 如上所述，創(chuàng)建Karma運(yùn)行/調(diào)試配置。

2. 從主工具欄上的列表中選擇Karma運(yùn)行/調(diào)試配置，然后單擊列表右側(cè)的 。

3. 在打開的調(diào)試工具窗口中，像往常一樣繼續(xù)：逐步完成測(cè)試，停止并恢復(fù)測(cè)試執(zhí)行，暫停時(shí)檢查測(cè)試等。

監(jiān)控代碼覆蓋率

使用IntelliJ IDEA，您還可以監(jiān)控Karma測(cè)試涵蓋的代碼量 。IntelliJ IDEA在專用工具窗口中顯示此統(tǒng)計(jì)信息，并在編輯器中直觀地標(biāo)記有遮蓋和未遮蓋的行。要監(jiān)控覆蓋范圍，您需要安裝karma-coverage軟件包并更新karma.conf.js。

安裝karma-coverage

• 打開內(nèi)置的IntelliJ IDEA終端（Alt+F12）并輸入：npm install  --save-dev karma-coverage。

將karma-coverage定義添加到配置文件中

1. 在編輯器中，打開：karma.conf.js。

2. 找到reporters定義并按照以下格式將coverage添加到值列表中：

   reporters: ['progress', 'coverage']

3. 添加preprocessors定義并以以下格式指定覆蓋范圍：

   preprocessors: {'**/*.js': ['coverage']}

以覆蓋范圍啟動(dòng)測(cè)試

1. 如上所述，創(chuàng)建Karma運(yùn)行/調(diào)試配置。

2. 從主工具欄上的列表中選擇Karma運(yùn)行/調(diào)試配置，然后單擊列表右側(cè)的 ?；蛘?，使用編輯器中的測(cè)試圖標(biāo)快速運(yùn)行特定套件或覆蓋測(cè)試：

   
3. 在Coverage工具窗口中監(jiān)視代碼覆蓋率。每次運(yùn)行Karma測(cè)試時(shí)，都會(huì)在磁盤上生成覆蓋率報(bào)告?？梢栽谂渲梦募信渲酶采w率報(bào)告的格式，例如：

   // karma.conf.js
   module.exports = function(config) {
   config.set({ ...
   // optionally, configure the reporter
   coverageReporter: { type : 'html', dir : 'coverage/' }
   ...
   });};

   type可接受以下值：

   • html：生成一堆帶有注釋源代碼的HTML文件。

   • lcovonly：生成一個(gè)lcov.info文件。

   • lcov：生成HTML + .lcov文件。默認(rèn)情況下應(yīng)用此格式。

   • cobertura：為簡(jiǎn)單的Hudson集成生成一個(gè)cobertura-coverage.xml文件。

   • text-summary：生成一個(gè)緊湊的文本摘要，通常是控制臺(tái)。

   • text：生成詳細(xì)的文本表，其中包含所有文件的coverage。