カルマ入門
7946 ワード
本文では、カラマの入門知識点を紹介します.
何がカルマですか
テストの効率を向上させるツールであり、開発者がより速く複数の環境でテストコードを実行するように助け、テスト結果を得る.実行時には、設定されたブラウザを自動的に起動し、nodeサーバを起動し、起動したブラウザでテストコードを実行し、テストコードの実行結果をnodeサーバに転送し、nodeサーバで受信した実行結果をプリントアウトします.
カラマを取り付ける
npmでカルマを取り付けることができます.
インストールが完了したら、ターゲット項目のルートディレクトリに切り替えて、運転します.
Require.jsについては、Require.jsのモジュール情報などを構成するための入口ファイルの構成にも注意が必要である.
上記のカラマプロファイルのtest/mail.jsはRequire.jsの入口ファイルであり、このファイルのコードは一般的にこのようなものであるべきである.
次のコマンドを実行して、テストを実行します.
テストを実行する時、
そして次のスクリプトラベルの山を見てください.大体こんな感じです.
URLパスの
coverage
kamaのcoverageプラグインを導入してテストのカバー率を確認します.このプラグインは対象コードに多くの追加コードを挿入します.テストコードの実行フローがこれらの場所に来たかどうかを判断します.debugでは、coverage機能をオフにしたほうがいいです.そうでないと、これらの追加コードはデバッグに非常に影響します.
また、カルマ-coverage-es 6はES 6を支持すると主張していますが、だめですか?
jasmaneのHTMLレポート
デフォルトでは、ブラウザのdebugページからjamineのテスト結果は出力されません.
しかし、
何がカルマですか
テストの効率を向上させるツールであり、開発者がより速く複数の環境でテストコードを実行するように助け、テスト結果を得る.実行時には、設定されたブラウザを自動的に起動し、nodeサーバを起動し、起動したブラウザでテストコードを実行し、テストコードの実行結果をnodeサーバに転送し、nodeサーバで受信した実行結果をプリントアウトします.
カラマを取り付ける
npmでカルマを取り付けることができます.
//
npm i karma --save-dev
//
npm i karma -g
初期カルマインストールが完了したら、ターゲット項目のルートディレクトリに切り替えて、運転します.
karma init
このようにして、ガイドとしてカルマのプロファイルkarma.conf.js
が生成され、ファイルの内容は概ね次の通りである.// Karma configuration
// Generated on Wed Jun 29 2016 23:22:24 GMT+0800 (CST)
module.exports = function(config) {
config.set({
// , 。
basePath: '',
//
// : https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine', 'requirejs'],
//
files: [
'test/main.js',
{
pattern: 'src/**/*.js',
// false script js ,
included: false
},
{
pattern: 'test/**/*Spec.js',
included: false
}
],
// files
exclude: [],
// , 。
// coffee 、 ES6 。
preprocessors: {
'src/**/*.js': ['babel', 'coverage'],
'test/**/!(main).js': ['babel', 'coverage'],
'node_modules/protectobject/src/**/*.js': ['babel']
},
// babel
babelPreprocessor: {
options: {
presets: ['es2015', 'stage-0'],
plugins: ['transform-decorators-legacy', 'transform-es2015-modules-amd']
}
},
//
coverageReporter: {
type: 'html',
dir: 'coverage'
},
//
// : https://npmjs.org/browse/keyword/karma-reporter
reporters: ['dots', 'coverage'],
//
port: 9876,
// ( ) /
colors: true,
//
// : config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// /
autoWatch: true,
//
browsers: ['Chrome', 'Firefox', 'Safari'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false,
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity
});
};
Require.jsを設定しますRequire.jsについては、Require.jsのモジュール情報などを構成するための入口ファイルの構成にも注意が必要である.
上記のカラマプロファイルのtest/mail.jsはRequire.jsの入口ファイルであり、このファイルのコードは一般的にこのようなものであるべきである.
var TEST_REGEXP = /(spec|test)\.js$/i;
var allTestFiles = [];
// Get a list of all the test files to include
Object.keys(window.__karma__.files).forEach(function(file) {
if (TEST_REGEXP.test(file)) {
// Normalize paths to RequireJS module names.
// If you require sub-dependencies of test files to be loaded as-is (requiring file extension)
// then do not normalize the paths
var normalizedTestModule = file.replace(/^\/base\/|\.js$/g, '');
allTestFiles.push(normalizedTestModule);
}
});
require.config({
// Karma serves files under /base, which is the basePath from your config file
baseUrl: '/base/src',
// example of using a couple of path translations (paths), to allow us to refer to different library dependencies, without using relative paths
paths: {
'jquery': '../lib/jquery',
'underscore': '../lib/underscore',
},
// example of using a shim, to load non AMD libraries (such as underscore)
shim: {
'underscore': {
exports: '_'
}
},
// dynamically load all test files
deps: allTestFiles,
// we have to kickoff jasmine, as it is asynchronous
callback: window.__karma__.start
});
テストを実行次のコマンドを実行して、テストを実行します.
karma start
カルマ分析テストを実行する時、
debug
ボタンをクリックして、debugページに入ります.ブラウザ開発者ツールを開けて、HTMLにjsコードがあります.// Configure our Karma
window.__karma__.config = {"args":[],"useIframe":true,"captureConsole":true,"clearContext":true};
// All served files with the latest timestamps
window.__karma__.files = {
'/base/node_modules/requirejs/require.js': '2c8b45573db27c131094a113e995236d20f043bb',
'/base/node_modules/karma-requirejs/lib/adapter.js': '2621a4400d4a8a49588243fce2d8609ef950b46a',
'/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js': '391e45351df9ee35392d2e5cb623221a969fc009',
'/base/node_modules/karma-jasmine/lib/boot.js': '945a38bf4e45ad2770eb94868231905a04a0bd3e',
'/base/node_modules/karma-jasmine/lib/adapter.js': '7975a273517f1eb29d7bd018790fd4c7b9a485d5',
'/base/test/main.js': 'fc5206f4dff3b583db818cb10ed7c5cade572896',
'/base/src/State.js': 'db89a58b4570983b8f8febfd4dedbc586c353670',
'/base/test/StateSpec.js': 'faf31b373690a6d7a7035fdfdc9c85d906ace5c1'
};
window.__karma__.files
にはブラウザで実行される可能性のあるすべてのjsがリストされていますが、ここで列挙されていないjsをRequire.jsでロードすると、エラーが発生します.そして次のスクリプトラベルの山を見てください.大体こんな感じです.
window.__karma__.loaded();
require.js、kamaに関する一山のjs、jasmineに関するjsを直接導入し、先ほど構成されたtest/mail.js(Require.jsエントリファイル)も直接導入したことが見られます.なお、ここではincluded: false
のjsが直接導入されていない.URLパスの
base
各種のリソース要求のURLアドレスをよく見ると、debug.js
およびcontext.js
を除いて、他のjsファイルは/base
で始まり、Require.jsを構成する際に、この点に注意しなければならない.coverage
kamaのcoverageプラグインを導入してテストのカバー率を確認します.このプラグインは対象コードに多くの追加コードを挿入します.テストコードの実行フローがこれらの場所に来たかどうかを判断します.debugでは、coverage機能をオフにしたほうがいいです.そうでないと、これらの追加コードはデバッグに非常に影響します.
また、カルマ-coverage-es 6はES 6を支持すると主張していますが、だめですか?
jasmaneのHTMLレポート
デフォルトでは、ブラウザのdebugページからjamineのテスト結果は出力されません.
karma-jasmine-html-reporter
を介してこの問題を解決することができます.しかし、
karma-jasmine-html-reporter
にはピットがあり、プラグインのindex.jsには、このようなコードがある.var createPattern = function(path) {
return {pattern: path, included: true, served: true, watched: false};
};
var initReporter = function(files, baseReporterDecorator) {
baseReporterDecorator(this);
files.unshift(createPattern(__dirname + '/lib/adapter.js'));
files.unshift(createPattern(__dirname + '/lib/html.jasmine.reporter.js'));
files.unshift(createPattern(__dirname + '/css/jasmine.css'));
};
initReporter.$inject = ['config.files', 'baseReporterDecorator'];
module.exports = {
'reporter:kjhtml': ['type', initReporter]
};
files
とは、kama.co nf.jsに配置されたfilesを指し、ここでunshift
の方法を使ってこのjs、cssをfilesの一番前に置いておけば、html.jasmine.reporter.js
より先にjasmine.js
をロードし、エラーが発生します.