フロントエンド自動化テストツールの紹介--karma+jasmineフレームワーク
5743 ワード
開発の過程では,コード自体に加えてテストも重要な一環である.大体、テストは以下のタイプに分けられます.
ユニットテスト機能テスト性能テストセキュリティテストは、一般の開発者にとって、ユニットテストと機能テストが最も一般的な2つのテスト方法であり、このシリーズで紹介するいくつかのツールは、この2つの側面についてです.ユニットテストは、独立したビジネスモジュールをテストし、小さな機能、さらには関数であってもよい.フロントエンド開発では、Jasmine(BDDベースのテストフレームワーク)、PhantomJS(インタフェースのないブラウザ)などのテストキットを統合した、Karmaを使用してコードのユニットテストを行うことができます.コードオーバーライド率のレポートを生成するなど、他にも役立つ機能があります.本稿ではKarmaの基本的な使用についてのみ説明する.
ユニットテストツールKarmaは、Karmaを使用してコードをユニットテストするには、まず一連の関連プラグインをインストールする必要があります.myKarmDemoというディレクトリを新規作成し、関連するプラグインをインストールします.
npm install karma-cli-g npm install karma jasmine-core karma-jasmine karma-phantomjs-launcher-D次に私たちのプロジェクトを初期化します.
karma initの後にいくつかのオプションがポップアップされ、初期化された構成作業が含まれ、上下方向キーを使用して構成項目を切り替えることができます.私はここでJasmineテストフレームワークを使用して、PhantomJS無インタフェースブラウザを使用して、全体の構成オプションは以下の通りです.
myKarmDemo karma init Which testing framework do you want to use ? Press tab to list possible options. Enter to move to the next question.
jasmine
Do you want to use Require.js ? This will add Require.js plugin. Press tab to list possible options. Enter to move to the next question.
no
Do you want to capture any browsers automatically ? Press tab to list possible options. Enter empty string to move to the next question.
PhantomJS
What is the location of your source and test files ? You can use glob patterns, eg. "js/.js"or "test//Spec.js". Enter empty string to move to the next question.
Should any of the files included by the previous patterns be excluded ? You can use glob patterns, eg. "*/.swp". Enter empty string to move to the next question.
Do you want Karma to watch all the files and run the tests on change ? Press tab to list possible options.
no
Config file generated at "/home/charley/Desktop/myKarmDemo/karma.conf.js". 初期化が完了すると、私たちのプロジェクトでkarmaが生成されます.conf.jsファイル、このファイルがKarmaのプロファイルです.プロファイルは比較的簡単で、比較的に簡単に理解することができて、ここで私は元のプロファイルに対して簡単な修正を行って、結果は以下の通りです:
//Karma configuration//Generated on Sun Oct 29 2017 21:45:27 GMT+0800 (CST)
module.exports = function(config) { config.set({
})}その後、srcディレクトリとtestディレクトリを作成し、indexをそれぞれ作成する.jsとindex.spec.jsファイル.私がしなければならないテストの内容は簡単です.indexです.jsの2つの関数(1つの加算関数、1つの乗算関数)をテストします.index.jsファイルは次のとおりです.
//加算関数function add(x){return function(y){return x+y;}//乗算関数function multi(x){return function(y){return x*y+1;}index.spec.jsファイルは次のとおりです.
describe(「演算機能ユニットテスト」,function(){it(「加算関数テスト」,function(){var add 5=add(5)expect(add 5(5)).toBe(10)});
})単測のコードを書くとkarma startを使用してユニットテストを実行できます.乗算コードにエラーがあるため、テスト結果は次のとおりです.
myKarmDemo karma start 29 10 2017 22:21:56.283:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/29 10 2017 22:21:56.287:INFO[launcher]:Launching browser PhantomJS with unlimited concurrency 29 2017 22:21:56.294:INFO[launcher]:Starting browser PhantomJS 29 22:21:56.549:INFO[ PhantomJS 2.1.1(Linux 0.0.0)]:Connected on socket 0 h 6 boaepSUMwG 7 l 2 AAAAAAAAAAAAwith id 44948955 PhantoJS 2.1.1(Linux 0.0.0)]:Linux 0.0.0)演算機能ユニット試験乗算関数試験FAILED Expected 26 to be 25.test/index.spec.js:9:31 PhantomJS 2.1.1(Linux 0.0.0):Executed 2 of 2(1 FAILED)(0.048 secs/0.002 secs)乗算関数のコードを正常に変更し、karma startを再有効にしてテストを行います.
29 10 2017 22:23:08.670:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/29 10 2017 22:23:08.673:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency 29 10 2017 22:23:08.685:INFO [launcher]: Starting browser PhantomJS 29 10 2017 22:23:08.940:INFO [PhantomJS 2.1.1 (Linux 0.0.0)]: Connected on socket pl_pZDcAK 4 rBTpr 0 AAAAAAwith id 40770640 PhantomJS 2.1.1(Linux 0.0.0):Executed 2 of 2 SUCCESS(0.045 secs/0.001 secs)が合っており、PhantomJSをコードとして使用している場合はES 6へのサポートがあまりよくなく、コードに矢印関数を使用していたので、実行時にエラーを報告しました.この問題を解決するには、Chromeまたは他のブラウザを使用してテストしたり、対応するlauncherをインストールしたりする必要があります.Chromeブラウザを使用してテストする場合は、karma-chrome-launcherプラグインをインストールする必要があります.あるいは、Babelなどのツールを使ってコードをトランスコードしてテストすることができます.PhantomJSを使用するメリットは、インタフェースのないブラウザ実行環境であり、コマンドライン環境で実行でき、Chromeなどのブラウザサーバ環境がない場合に便利で、コードの検収と統合を容易にすることです.Karmaの紹介はここまでで、本文はKarmaのインストールと使用について簡単に紹介しただけで、レンガを投げて玉を引くことができて、もっと多くの使い方について、あなたは更に研究することができます.
ユニットテスト機能テスト性能テストセキュリティテストは、一般の開発者にとって、ユニットテストと機能テストが最も一般的な2つのテスト方法であり、このシリーズで紹介するいくつかのツールは、この2つの側面についてです.ユニットテストは、独立したビジネスモジュールをテストし、小さな機能、さらには関数であってもよい.フロントエンド開発では、Jasmine(BDDベースのテストフレームワーク)、PhantomJS(インタフェースのないブラウザ)などのテストキットを統合した、Karmaを使用してコードのユニットテストを行うことができます.コードオーバーライド率のレポートを生成するなど、他にも役立つ機能があります.本稿ではKarmaの基本的な使用についてのみ説明する.
ユニットテストツールKarmaは、Karmaを使用してコードをユニットテストするには、まず一連の関連プラグインをインストールする必要があります.myKarmDemoというディレクトリを新規作成し、関連するプラグインをインストールします.
npm install karma-cli-g npm install karma jasmine-core karma-jasmine karma-phantomjs-launcher-D次に私たちのプロジェクトを初期化します.
karma initの後にいくつかのオプションがポップアップされ、初期化された構成作業が含まれ、上下方向キーを使用して構成項目を切り替えることができます.私はここでJasmineテストフレームワークを使用して、PhantomJS無インタフェースブラウザを使用して、全体の構成オプションは以下の通りです.
myKarmDemo karma init Which testing framework do you want to use ? Press tab to list possible options. Enter to move to the next question.
jasmine
Do you want to use Require.js ? This will add Require.js plugin. Press tab to list possible options. Enter to move to the next question.
no
Do you want to capture any browsers automatically ? Press tab to list possible options. Enter empty string to move to the next question.
PhantomJS
What is the location of your source and test files ? You can use glob patterns, eg. "js/.js"or "test//Spec.js". Enter empty string to move to the next question.
Should any of the files included by the previous patterns be excluded ? You can use glob patterns, eg. "*/.swp". Enter empty string to move to the next question.
Do you want Karma to watch all the files and run the tests on change ? Press tab to list possible options.
no
Config file generated at "/home/charley/Desktop/myKarmDemo/karma.conf.js". 初期化が完了すると、私たちのプロジェクトでkarmaが生成されます.conf.jsファイル、このファイルがKarmaのプロファイルです.プロファイルは比較的簡単で、比較的に簡単に理解することができて、ここで私は元のプロファイルに対して簡単な修正を行って、結果は以下の通りです:
//Karma configuration//Generated on Sun Oct 29 2017 21:45:27 GMT+0800 (CST)
module.exports = function(config) { config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
"./src/**/*.js",
"./test/**/*.spec.js",
],
// list of files to exclude
exclude: [
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: false,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['PhantomJS'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: true,
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity
})}その後、srcディレクトリとtestディレクトリを作成し、indexをそれぞれ作成する.jsとindex.spec.jsファイル.私がしなければならないテストの内容は簡単です.indexです.jsの2つの関数(1つの加算関数、1つの乗算関数)をテストします.index.jsファイルは次のとおりです.
//加算関数function add(x){return function(y){return x+y;}//乗算関数function multi(x){return function(y){return x*y+1;}index.spec.jsファイルは次のとおりです.
describe(「演算機能ユニットテスト」,function(){it(「加算関数テスト」,function(){var add 5=add(5)expect(add 5(5)).toBe(10)});
it(" ",function(){
var multi5 = multi(5)
expect(multi5(5)).toBe(25)
})
})単測のコードを書くとkarma startを使用してユニットテストを実行できます.乗算コードにエラーがあるため、テスト結果は次のとおりです.
myKarmDemo karma start 29 10 2017 22:21:56.283:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/29 10 2017 22:21:56.287:INFO[launcher]:Launching browser PhantomJS with unlimited concurrency 29 2017 22:21:56.294:INFO[launcher]:Starting browser PhantomJS 29 22:21:56.549:INFO[ PhantomJS 2.1.1(Linux 0.0.0)]:Connected on socket 0 h 6 boaepSUMwG 7 l 2 AAAAAAAAAAAAwith id 44948955 PhantoJS 2.1.1(Linux 0.0.0)]:Linux 0.0.0)演算機能ユニット試験乗算関数試験FAILED Expected 26 to be 25.test/index.spec.js:9:31 PhantomJS 2.1.1(Linux 0.0.0):Executed 2 of 2(1 FAILED)(0.048 secs/0.002 secs)乗算関数のコードを正常に変更し、karma startを再有効にしてテストを行います.
29 10 2017 22:23:08.670:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/29 10 2017 22:23:08.673:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency 29 10 2017 22:23:08.685:INFO [launcher]: Starting browser PhantomJS 29 10 2017 22:23:08.940:INFO [PhantomJS 2.1.1 (Linux 0.0.0)]: Connected on socket pl_pZDcAK 4 rBTpr 0 AAAAAAwith id 40770640 PhantomJS 2.1.1(Linux 0.0.0):Executed 2 of 2 SUCCESS(0.045 secs/0.001 secs)が合っており、PhantomJSをコードとして使用している場合はES 6へのサポートがあまりよくなく、コードに矢印関数を使用していたので、実行時にエラーを報告しました.この問題を解決するには、Chromeまたは他のブラウザを使用してテストしたり、対応するlauncherをインストールしたりする必要があります.Chromeブラウザを使用してテストする場合は、karma-chrome-launcherプラグインをインストールする必要があります.あるいは、Babelなどのツールを使ってコードをトランスコードしてテストすることができます.PhantomJSを使用するメリットは、インタフェースのないブラウザ実行環境であり、コマンドライン環境で実行でき、Chromeなどのブラウザサーバ環境がない場合に便利で、コードの検収と統合を容易にすることです.Karmaの紹介はここまでで、本文はKarmaのインストールと使用について簡単に紹介しただけで、レンガを投げて玉を引くことができて、もっと多くの使い方について、あなたは更に研究することができます.