Karma

1. Node.js をダウンロードしてインストールします。

2. 設定で JavaScript and TypeScript プラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、 プラグイン を選択します。 インストール済み タブをクリックします。 検索フィールドに JavaScript と TypeScript と入力します。 プラグインに関する詳細は、 プラグインの管理を参照してください。

3. Karma プラグインを 設定 | プラグイン ページの Marketplace タブにインストールして有効化し、 JetBrains Marketplace からプラグインをインストールする説明に従ってください。 プラグインは、Ultimate サブスクリプションを利用している IntelliJ IDEA でのみ使用できます。

1. コマンドライン シェルまたは埋め込み ターミナル （Alt+F12 ）を開きます。

2. 次のいずれかのコマンドを入力します。

   • Karma と必要なすべてのプラグインが package.json にすでに定義されている場合は npm install

   • 開発の依存関係(英語)として Karma とプラグインをインストールするには:

     npm install --save-dev karma npm install --save-dev <karma_plugin> <another_karma_plugin>

Karma 構成ファイルを作成する

1. ターミナル を開き、オペレーティングシステムに応じて次のいずれかを入力して karma.conf.js 生成ウィザードを開始します。

   • macOS および Linux の場合: ./node_modules/karma/bin/karma init

   • Windows の場合:

     npm install -g karma-cli karma init

2. ウィザードの質問に答えて、使用するテストフレームワークと自動的にキャプチャーされるブラウザーを指定します。

   Karma ファイル: パターンマッチング(英語)も参照してください。

エディターから単一のテストを実行する

• 左側のガターの または をクリックして、リストから <test_name> の実行 を選択します。

  ガターの テストステータスアイコン および により、エディターでテストが成功したか失敗したかを確認することもできます。

Karma 実行構成を作成する

1. 実行 / デバッグ構成ダイアログ (メインメニューの 実行 | 実行構成の編集) を開き、左側のペインで をクリックし、リストから Karma を選択します。 実行/デバッグ構成: Karmaダイアログが開きます。

2. 使用する Node.js ランタイムを指定します。

   プロジェクト エイリアスを選択すると、IntelliJ IDEA は JavaScript Runtime ページの ノードランタイム フィールドからプロジェクトの既定のインタープリターを自動で使用します。 ほとんどの場合、IntelliJ IDEA はプロジェクトの既定のランタイムを検出し、フィールド自体に入力します。

   別の構成済みのローカルインタープリターまたはリモートインタープリターを選択するか、 をクリックして新しいインタープリターを構成することもできます。

   必要に応じて、Node.js に渡す Node.js 固有のオプションパラメーターと 環境変数(英語)を指定します。

   変数の定義は、 環境変数 フィールドにセミコロン（; ）を区切りとして表示されます。例えば：

   • NODE_PATH

     モジュールの解決時に検索する追加ディレクトリの一覧です。 リスト内のディレクトリを区切るには、macOS または Linux ではコロン（: ）、Windows ではセミコロン（; ）を使用してください。

   • NODE_MODULE_CONTEXTS

     独自のグローバルコンテキストでモジュールをロードするには 1 に設定します。

   • NODE_DISABLE_COLORS

     REPL の色を無効化するには 1 に設定します。

   

   または、フィールドの右側にある 参照 をクリックし、開いた 環境変数 ダイアログで変数の一覧を設定します：

   • 、 、 、 ボタンを使ってカスタム変数の一覧を管理します。

   • ダイアログには利用可能なシステム環境変数の一覧も表示されます。 現在の構成でシステム環境変数を使用しない場合は、 システム環境変数を含める チェックボックスの選択を解除してください。

   • 準備ができたら OK をクリックします。

3. karma.conf.js へのパスを指定します。

4. 使用する karma パッケージを指定します。 これは次のいずれかです。

   • Karma インストールホーム /npm/node_modules/karma 。 Node パッケージマネージャーを介して Karma を定期的にインストールした場合、IntelliJ IDEA は Karma インストールホーム自体を検出します。

   • node_modules/@angular/cli へのパス。

   • Nx(英語) を使用している場合は、 node_modules/nx へのパス。

   

5. アプリケーションの作業ディレクトリを指定します。 デフォルトでは、 作業ディレクトリ フィールドにはプロジェクトのルートフォルダーが表示されます。 この定義済みの設定を変更するには、目的のフォルダーへのパスを指定します。

6. 実行するテストを指定します。 これは、特定のテストまたはスイート、テストファイル全体、テストファイルを含むフォルダーにすることができます。

7. 必要に応じて、Karma に渡すコマンドラインオプションを指定して、 karma.conf.js 構成ファイルのデフォルト設定を上書きします。

   例: ヘッドレス Chrome でテストを実行またはデバッグするには、 Karma オプション フィールドに --browsers ChromeHeadless と入力します。 詳細については、「ヘッドレス Chrome による自動テスト(英語) 」を参照してください。

   使用可能なすべての CLI オプションを表示するには、 ターミナル Alt+F12 に karma start --help と入力します。

実行構成を介してテストを実行する

1. 構成のリストから Karma 実行 / デバッグ構成を選択し、リストまたはツールバーの をクリックします。

2. 実行 ツールウィンドウの テストランナー タブで、テストの実行を監視し、テスト結果を分析します。 詳細については、 テスト結果を調べるを参照してください。

失敗したテストの再実行

• テスト結果ツールバーの をクリックします。 IntelliJ IDEA は、前回のセッション中に失敗したすべてのテストを実行します。

  

• 特定の失敗したテストを再実行するには、そのコンテキストメニューで <テスト名> の実行 を選択します。

  

• 前回のセッションからすべてのテストを再実行するには、テスト結果ツールバーの をクリックするか、 Ctrl+F5 を押します。

• 関連するソースコードを変更した後にテストを自動的に再実行するには、テスト結果ツールバーの を押します。

• テストとそのサブジェクト間、またはその逆に移動するには、エディターでファイルを開き、コンテキストメニューから 移動先 | テスト または 移動先 | テスト対象 を選択するか、 Ctrl+Shift+T を押します。

• テスト結果からテスト定義に移動するには、「テストランナー 」タブでテスト名を 2 回クリックするか、コンテキストメニューから「ソースに移動 」を選択するか、単に F4 を押します。 テストファイルがエディターで開き、テスト定義にキャレットが置かれます。

• 失敗したテストの場合、IntelliJ IDEA はスタックトレースからテストの失敗ラインに移動します。 正確な行がスタックトレースにない場合は、テスト定義に移動します。

エディターから単一のテストのデバッグを開始する

1. テスト中の ブレークポイントを設定します。

2. ガターで または をクリックし、リストから デバッグ <test_name> を選択します。

実行 / デバッグ構成を介してテストデバッグを起動する

1. 必要に応じて ブレークポイントの設定。

2. 上記のように Karma 実行 / デバッグ構成を作成します。

3. 構成のリストから Karma 実行 / デバッグ構成を選択し、リストまたはツールバーの をクリックします。

4. 開いた デバッグツールウィンドウ で、通常どおり続行します： プログラムをステップ実行し、 プログラムの実行を停止して再開し、 中断時に調べ 、コールスタックと変数を調べ、ウォッチを設定し、変数を評価し、 実際の HTML DOM を表示します。

   ソースマップを無視して実際に実行されているコードをステップ実行するには、 を デバッグ ツールウィンドウのツールバーで押してください。

カルマカバレッジをインストールする

• コマンドライン シェルまたは組み込みの ターミナル (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']}

カバレッジ付きでテストを開始する

1. 上記のように Karma 実行 / デバッグ構成を作成します。

2. 構成のリストから Karma 実行 / デバッグ構成を選択し、リストまたはツールバーの をクリックします。

   または、エディターのテストアイコンを使用して、特定のスイートまたはカバレッジ付きのテストをすばやく実行します。

   

3. カバレッジツールウィンドウでコードカバレッジを監視します。

   Karma テストが実行されるたびに、カバレッジレポートが実際にディスク上に生成されます。 カバレッジレポートの形式は、次のように設定ファイルで設定できます。

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

   次の 型 値を使用できます。

   • html はアノテーション付きソースコードを含む一連の HTML ファイルを生成します。

   • lcovonly は lcov.info ファイルを作成します。

   • lcov は HTML + .lcov ファイルを生成します。 このフォーマットはデフォルトで適用されます。

   • cobertura は、Hudson と簡単に統合するための cobertura-coverage.xml ファイルを生成します。

   • text-summary は、通常はコンソールに、カバレッジの簡潔なテキスト要約を生成します。

   • テキスト は、すべてのファイルのカバレッジを持つ詳細なテキストテーブルを生成します。