karma tutorial front end unit testing using karma test runner
このチュートリアルでは、Karmaをセットアップし、Karmaを使用してフロントエンドの単体テストを自動化する方法、Karma.conf.jsファイルの基本構成オプションなどについて説明します。
このチュートリアルでは、Karmaとそれに関連するいくつかのツールを使用して、ソフトウェアのフロントエンドの単体テストを自動化する手順について説明します。
まず、JavaScriptライブラリ「Jquery」とJavaScriptランタイム「NodeJS」を使用して開発されたWebアプリケーションから始めます。後で、AngularJSやReactJSなどのJavaScriptフレームワークについて見ていきます。
=>下へスクロールKarmaチュートリアルの全リストを表示するには
学習内容：
- カルマチュートリアルのリスト
- このシリーズのカルマチュートリアルの概要
- フロントエンドユニットテストとは何ですか？
- カルマテストランナーとは何ですか？
- NodeJSとは何ですか？
- Karmaをインストールするにはどうすればいいですか？
- カルマ初期化の質問
- 結論
カルマチュートリアルのリスト
チュートリアル＃1： Karmaチュートリアル：Karma TestRunnerを使用したフロントエンドユニットテスト
チュートリアル＃2： 例を含むJasmineJqueryを含むJasmineフレームワークチュートリアル
チュートリアル＃3： KARMAとJASMINEを使用したフロントエンドユニットテストのサンプルプロジェクト
このシリーズのカルマチュートリアルの概要
| チュートリアル＃ | あなたが学ぶこと |
|---|---|
| チュートリアル_＃1： | Karmaチュートリアル：Karma TestRunnerを使用したフロントエンドユニットテスト この入門チュートリアルでは、Karmaをセットアップし、Karmaを使用してフロントエンドの単体テストを自動化する方法、Karma.conf.jsファイルの基本的な構成オプションなどについて説明します。 |
| チュートリアル_＃2： | 例を含むJasmineJqueryを含むJasmineフレームワークチュートリアル このチュートリアルでは、Jasmine TestingFrameworkとその構成について説明します。また、Jasmineを拡張してJqueryアプリケーションをテストするJasmine-Jqueryパッケージについても学びます。 |
| チュートリアル_＃3： | KARMAとJASMINEを使用したフロントエンドユニットテストのサンプルプロジェクト このチュートリアルでは、Karma＆Jasmineを使用してサンプルプロジェクトのテスト仕様を作成する方法を示します。また、gulp、browserifyなどの他のツールの使用方法もすぐに学びます。 |
フロントエンドユニットテストとは何ですか？
ソフトウェアシステムのフロントエンドは、ユーザーがシステムによって提供されるすべての機能にアクセスするためのインターフェイスです。最高のユーザーエクスペリエンスを保証するには、すべてのユーザー要件を念頭に置いて、フロントエンド開発者がフロントエンドをコーディングしていることを確認する必要があります。
これを実施する唯一の方法は、開発者のコードに対してテストを作成して実行することです。成果物は、これらすべてのテスト結果が「合格」ステータスにある場合にのみ、高品質のフロントエンドコード/機能として受け入れられる必要があります。
単体テストは一種のソフトウェアテスト方法であり、ソースコードの個々の独立した部分をテストして、使用に十分かどうかを判断します。
私たちが ソフトウェアのフロントエンド（クライアント側）でこの単体テストを実行します。これは、フロントエンド単体テストと呼ばれます。 フロントエンドテストの反対は、バックエンドテスト（サーバー側）です。
フロントエンドの単体テストは、手動または自動で実行できます。自動化されたフロントエンドユニットテストは、より効果的で時間の節約になるため、最近トレンドになっています。さまざまなプログラミングプラットフォームでのフロントエンド単体テストに使用できるさまざまなツールがあります。
AngularJSとReactJSは2つの人気のあるフロントエンドJavaScriptフレームワークですが、ReactJSはまったく新しいものです。
アプリケーションで単体テストを実行するには、これらのフロントエンドフレームワークで構築されたフロントエンド、またはフレームワークなしで構築されたフロントエンドでさえ、Karma、mocha、Jasmine、jest、enseyなどの特定の自動化テストツールが使用されます。
最初に、KarmaとJasmineを使用してフロントエンドの単体テストを実行する方法を学習し、その後、他のツールも確認できます。
まず、フロントエンド用のJavaScriptフレームワークを使用せずに構築されたフロントエンド用のフィクスチャを使用してフロントエンドの単体テストを実行します。合計で、このシリーズの学習内容を3つのチュートリアルに分けます。
この最初のチュートリアルでは、カルマがどのように設定されているかを把握しようとします。2番目のチュートリアルでは、ジャスミンについて詳しく説明します。最後に、3番目のチュートリアルでは、その実用的なアプリケーションについて説明します。
カルマテストランナーとは何ですか？
Karmaはノードベースのテストツールであり、複数の実際のブラウザでJavaScriptコードをテストできます。ノードベースのツールは、実行するためにNodejsエンジンをインストールする必要があり、ノードパッケージマネージャー（npm）を介してアクセス（インストール）できるツールです。
Karmaは、テスト駆動開発を迅速、楽しく、簡単にするツールです。技術的にはテストランナーと呼ばれます。ここで、KarmaがAngularチームによって開発されたことは注目に値します。
Karmaはテストランナーとしてどのように機能しますか？
テストランナーとして、カルマは3つの重要なことを行います。
- Webサーバーを起動し、そのサーバー上でJavaScriptソースとテストファイルを提供します。
- すべてのソースファイルとテストファイルを正しい順序でロードします。
- 最後に、ブラウザを起動してテストを実行します。
カルマは他に何ができますか？
上記のKarmaの機能とは別に、Karmaが実行するように構成できることは他にもいくつかあります。 例えば、 コードテストカバレッジをに公開するには coveralls.io ;コードをes6形式からes5にトランスパイルし、複数のファイルを1つのファイルにバンドルして、ソースマップを生成します。
以降のチュートリアルでは、これらのいくつかがどのように機能するかを見ていきます。
カルマを始めるための要件
Karmaを使い始めるには、NodeJSとNodeパッケージマネージャーを理解している必要があります。
NodeJSとは何ですか？
Nodejsは、JavaScript非同期呼び出しのブロッキングの性質を解決します。つまり、JavaScriptで非同期関数にアクセスすると、非同期呼び出しが返されるまでコードの他の部分が実行されなくなります。ただし、NodeJSを使用すると、非同期の非ブロッキング関数呼び出しを行うことができます。
技術的には、NodeJSは、スケーラブルなネットワークアプリケーションの構築を容易かつ可能にする非同期のイベント駆動型JavaScriptランタイムであると言えます。
NodeJS入門
NodeJSフレームワークをインストールするだけです。あなたがする必要があるのは彼らを訪問することです ウェブサイト また、OSに基づいて、インストーラーをダウンロードし、インストールに関するサイトの指示に従う必要があります。
Node Package Manager（Npm）とは何ですか？
ノードパッケージマネージャー（npm）は、独自のアプリケーションで再利用したい他のビルド済みのノードベースのアプリケーションまたはモジュールをインストールするために使用されるJavaScriptパッケージマネージャーです。
NpmはNodeJSをインストールするとインストールされますが、npmはノードよりも速く更新されます。したがって、ある時点でnpmを更新する必要があるかもしれません。 npmの最新バージョンをインストールするには、コマンドラインから次のコマンドを実行する必要があります。 npm install npm @ latest -g
makefile c ++を作成する方法
上記のコマンドは、OSシェルにアプリケーションnpmの実行を要求しており、アプリケーションがパッケージnpmのインストールを実行する必要があることを示しています。 @latestは、パッケージの最新バージョンをインストールする必要があることを示します。-gオプションは、パッケージをグローバルにインストールする必要があることを示します。
npmの詳細についてはこちらをご覧ください ここに 。
ここで言及する必要がある2つの重要なことがあります。つまり、–saveおよび–save-devオプションを使用してパッケージをインストールします。
テスト中、インストールされたパッケージはすべて–save-devオプションを使用してインストールする必要があります。つまり、プロジェクトの依存関係としてではなく、開発の依存関係としてパッケージをインストールするようにパッケージマネージャーに指示します（–saveを使用する場合）。
そのパッケージは本番フェーズではアプリケーションに必要ではなく、品質保証の目的で開発フェーズでのみ必要になるため、開発の依存関係を選択する必要があります。
Karmaをインストールするにはどうすればいいですか？
Karmaの使用を開始するには、単体テストを作成しようとしているプロジェクト用のフォルダーを作成する必要があります。 「basicUT」のように名前を付けることができます。 Visual Studio Codeをテキストエディターとして使用しているので、ダウンロードしてインストールすることもお勧めします。あなたはそれを見つけることができます ここに 。
Visual Studio Codeの組み込みターミナルウィンドウを開き、(表示)メニューをクリックして、統合ターミナルサブメニューを選択します。
次の図に示すように、ターミナルウィンドウで「npminit」と入力します。このコマンドは、すべてのノードベースのアプリケーションに必要な「package.json」ファイルを自動的に設定するためのガイドです。
package.jsonファイルには、名前、バージョン番号、作成者、アプリケーションの依存関係、開発の依存関係、テストコマンドまたはスクリプト、およびアプリケーションを起動したり、実行可能な形式にアプリをビルドしたりするためのスクリプトなど、アプリケーションに関する情報が格納されます。
クリック ここに 「package.json」ファイルの詳細については。
npminitを使用してpackage.jsonファイルを初期化するスクリーンショット
上記のように、Karmaをインストールするには、コマンドを実行するだけです。 npm install Karma @ latest –save-dev 。そのコマンドが意味することを今あなたが解釈できることを願っています。
これで、Karmaのインストールに成功しました。フロントエンドの単体テストに、Karmaを使用するために次に行う必要があることは何ですか？
あなたがする必要があるのはそれのための構成ファイルを書くことだけです、そしてファイルは通常JavaScriptのためにKarma.conf.jsとして名付けられます。ただし、CoffeeScriptでは異なります。クリック ここに Karma構成ファイルの詳細を調べます。
Karma.conf.jsファイル構成オプションの概要
Karma.conf.js構成ファイルには、Karmaの3つの重要な機能を実行するためにKarmaが従う必要のあるセットアップ命令が含まれている必要があります。
この構成ファイルは、コマンド「karma init」を使用して手動または自動で作成できます。これにより、回答するさまざまな質問が表示され、Karmaは提供された回答を使用して構成ファイルを設定します。
コマンド「karmainit」を実行するとエラーが発生することは、これまでにわかっているはずです。 「」 「カルマ」は、内部または外部のコマンド操作可能なプログラムまたはバッチファイルとして認識されません 」。
これは、Karmaが、作業中のプロジェクトにグローバルにではなくローカルにインストールされたためです。したがって、オペレーティングシステムシェルは、Windowsを使用している場合はパス環境設定で、Macを使用している場合は.bash_profileファイルでアプリケーションKarmaを見つけることができません。
このエラーを修正するには、Karmaをグローバルにインストールする必要があります。 Karmaだけでなく、コマンドラインであるKarma-cliでKarmaを使用できるように特別に設計されたパッケージ。コマンドを実行するだけで、 ′npm install -g karma-cli’ 。
ここで、コマンドkarma-initを再実行すると、次の図に示すような質問が表示されます。各質問に答えて「ENTER」キーを押すと、次の質問が表示されます。
コマンドラインでKarmainitコマンドを実行します。
以下の表は、質問のリスト、それらの意味、およびこのチュートリアルのコンテキストでの回答の内容を示しています。
カルマ初期化の質問
Q＃1）どのテストフレームワークを使用しますか？
説明： テストフレームワークは、特定の言語のソフトウェア製品のテストをコーディングするプロセスを自動化するために必要な機能とルーチンを提供するパッケージです。 例えば、 jasmineとmochaはJavaScriptソフトウェアパッケージのテストフレームワークであり、JunitとJTestはJavaのテストフレームワークです。確認してください。 この 詳細については。
回答： タブを使用してノードベースのアプリケーションで使用可能な他のテストフレームワークを表示するように求める指示が表示されますが、デフォルトではジャスミンが表示されるため、Enterをクリックするだけです。
Q＃2）Require.jsを使用しますか？
説明： Require.jsは、JavaScriptファイルおよびモジュールローダーです。あなたは疑問に思うかもしれません：なぜあなたはファイルまたはモジュールローダーが必要なのですか？読んだ この
回答： コードでは、require.jsを使用しないので、単に「いいえ」と答えて記述します。彼の質問は私たちが何を使うのかということです。 requireステートメントを使用して外部ファイルを別のファイルに取り込むことができるようにするには、モジュールローダーが必要なので、Browserifyを選択します。詳細については、以下をご覧ください。
Q＃3）ブラウザを自動的にキャプチャしますか？
説明： karmaは、さまざまなブラウザーでフロントエンドをテストするのに役立つツールであることを思い出してください。したがって、この質問は、karmastartでテストを実行するときにいつでも起動したいブラウザーを選択することを目的としています。
回答： このレッスンでは、chrome、firefox、およびphantomjsを選択します。ここで問題は、PhantomJSとは何ですか？ PhantomJSは、ヘッドレスWebサイトのテスト、画面キャプチャ、ページの自動化、およびネットワーク監視を目的としたヘッドレスWebブラウザーであり、詳細を確認できます。 ここに 。
別の質問、ヘッドレスWebブラウザとは何ですか？ヘッドレスWebブラウザーは、グラフィカルユーザーインターフェイスのないブラウザーであり、コードはコンソールのような環境で実行されます。
Q＃4）ソースファイルとテストファイルの場所はどこですか？
説明： この質問は、フロントエンドファイルとそれらの単体テストを実行するテストファイルを保存するパスを公開することを目的としています。
回答： このプロジェクトでは、ソースファイルのパスにpublic / js / *。jsを入力し、テストファイルのパスにtest / * Spec.jsを入力します。 * Spec.jsは、すべてのテストファイルを何でも呼び出すことができることを示しますが、末尾に.jsファイル拡張子が付いたSpecが含まれている必要があります。
Q＃5）前のパターンに含まれているファイルのいずれかを除外する必要がありますか？
説明： 特定のソースファイルとテストファイルをロードしないようにする必要がある場合があります。この質問は、Karmaがブラウザにロードしないファイルを指定するためのものです。
回答： Enterキーを押して、空の文字列を入力するだけです。 「グロブパターンを使用できますか？ 例えば、 「** / *。swp」。」 Globパターンは、ワイルドカード文字を使用してUnixライクな環境でファイル名のセットを指定するために使用されます。
この場合、public / js / *。jsは、（*）で示される任意の文字セットという名前のファイルを表し、ファイル拡張子は.jsで、パスpublic / jsにあります。続きを読む ここに
Q＃6）Karmaにすべてのファイルを監視させ、変更時にテストを実行させますか？
説明： タスク/テストランナーがファイルを監視する場合、それは単に、開発中にファイルを編集したり、ファイルをリロードしたり、ファイルの機能を再実行したりするたびに、手動で確認する必要がないことを意味します。もう一度やります。
回答： したがって、単に「はい」と答えてください。
その他のkarma.conf.jsファイルの内容
＃1）basePath ：この構成には、テストファイルとソースファイルに提供されたパス情報を解決するために使用する必要があるフォルダーの名前が付けられています。
＃2）プリプロセッサ ：これには、ソースファイルとテストファイルをブラウザにロードする前に処理するために使用する必要があるプログラムファイルの名前が付いています。
なぜこれが必要なのですか？
まだブラウザで理解されていないES6コーディングスタイルの出現により、ブラウザが理解できるES6形式からES5にコードをトランスパイルする必要があります。したがって、Karmaのbabelプリプロセッサを指定してトランスパイルに使用できます。ブラウザにロードする前に、ES6からES5にコードを記述します。
プリプロセッサの他の用途があります、 例えば。 coveralls.ioに公開するコードテストカバレッジ。を参照してください。 ここに 詳細については。
＃3）記者 ：この構成オプションは、テスト結果のレポートに使用するパッケージを指定します。コードテストカバレッジを報告するためのレポーターがいくつかあります。 例えば。 カバレッジ。ただし、デフォルトでは、進行するように設定されています。これは配列であるため、他のレポーターを追加することもできます。
＃4）ポート ：これは、ブラウザがスピンされるポートを指定します。
＃5）色 ：レポーターが色付きのレポートを作成するかどうかを指定します。
＃6） logLevel ：これはロギングのレベルを指定します。デフォルトでは、config.LOG_INFOに設定されています。これは、情報のみがログに記録されることを意味します。
＃7）singleRun ：これは、テストを1回実行した後にKarmaを終了するかどうかを指定します。 trueに設定すると、Karmaはテストを実行し、テストが失敗したか合格したかに応じて、ステータス0または1で終了します。それ以外の場合、Karmaは停止しません。
この構成は、TravisCIやCircleCIなどのツールを使用した継続的インテグレーションテストの目的で必要です。
＃8）並行性 ：これは、Karmaが同時に起動するブラウザーの数を指定します。デフォルトでは、無限大に設定されています。
クリック ここに Karma構成オプションの詳細については。
あなたが注意深い学習者であるならば、あなたはこれらの3つの線を見たに違いありません。
23 03 2017 15:47:54.912:WARN (init): Failed to install 'Karma-firefox-launcher' Please install it manually. 23 03 2017 15:47:54.913:WARN (init): Failed to install 'Karma-chrome-launcher' Please install it manually. 23 03 2017 15:47:54.914:WARN (init): Failed to install 'Karma-phantomjs-launcher' Please install it manually. 以下のセクションでこれを調べてみましょう。
Karmaブラウザランチャー
Karma-firefox-launcher、Karma-chrome-launcher、およびKarma-phantomjs-launcherは、一般にKarmaのブラウザーランチャーと呼ばれます。
Karmaは、独立したこれらのブラウザーアプリケーションを起動する必要があるため、Karmaがテストを実行しているオペレーティングシステムでブラウザーを起動するシェルコマンドを実行するために、Karmaへのインターフェイスを提供するサードパーティアプリケーションが必要です。
したがって、これらはそれぞれFirefox、chrome、およびphantomjs用のKarmaブラウザーランチャーです。 Karmaはこれらのステートメントをポップアップして、これらの要件をインストールできないことを通知し、手動でインストールするように求めています。
これを行うには、ノードパッケージマネージャーを使用して、コマンドラインから次のコマンドを実行します。 npm install Karma-chrome-launcher Karma-firefox-launcher Karma-phantomjs-launcher –save-dev
phantomjsがインストールされていない状態で、私たち全員がchromeおよびfirefoxブラウザをインストールしている必要があります。それが本当なら、それをインストールする必要があります。を参照してください。 ここに 詳細については、をクリックしてください ここに クイックスタートガイド。
結論
このチュートリアルでは、フロントエンドの単体テストとは何かを理解しようとしました。また、ノードベースのツールであるKarmaと呼ばれるJavaScriptソフトウェアの主要なフロントエンド単体テストツールも紹介しました。また、Karma.conf.jsファイルの基本的な構成オプションとそれらが意味するものも示しました。
要点
- 単体テストは一種のソフトウェアテスト方法であり、ソースコードの個々の独立した部分をテストして、使用に十分かどうかを判断します。
- ソフトウェアのフロントエンド（クライアント側）でこの単体テストを実行する場合、これはフロントエンド単体テストと呼ばれます。
- Karmaはノードベースのテストツールであり、複数の実際のブラウザでJavaScriptコードをテストできます。したがって、それはテストランナーと呼ばれます。
- Nodejsは、スケーラブルなネットワークアプリケーションの構築を簡単かつ可能にする非同期のイベント駆動型ランタイムJavaScriptです。
- ノードパッケージマネージャー（npm）は、独自のアプリケーションで再利用したい他のビルド済みのノードベースのアプリケーションまたはモジュールをインストールするために使用されるJavaScriptパッケージマネージャーです。
Karmaだけでは、JavaScriptアプリケーションのフロントエンド単体テストを自動化することはできません。また、テストケースの作成を容易にするテストフレームワークなどの他のテストツールと連携する必要があります。
次のチュートリアルでは、Jasmineと、Jasmineの機能を拡張してJavaScriptライブラリJqueryを利用するHTMLフィクスチャをテストできるようにするJasmine-Jqueryパッケージについて説明します。