角2テスト開始方法

Question

単体テストについて考えずにアプリケーションのコーディングを開始しました。しかし、今私はそれらを書く必要があります。私はジャスミンを使用してテストを書こうとしましたが、コンポーネントのいずれかをインポートしてウェブブラウザでジャスミンを起動するとエラーが発生します。「システムは定義されていません」。カルマとジャスミンを既存のプロジェクトに追加することは可能ですか？私はいくつかのチュートリアルを読んだが、それらのすべてが新しいプロジェクトのためであり、正直言って私はいくつかのことを理解していない（私はかなり新しい）。ですから、誰かが少し言葉で記述できる場合、どのようにangular2アプリのための基本的なテスト環境を設定するには、私は感謝します。あなたの答えに事前に感謝します。

Answer 1

は、次の設定を追加する必要があります、package.jsonファイルにカルマの依存関係を

• をし、それを実行するためのコマンド
• カルマ構成用karma.conf.jsファイル
• 活字体のテストをロードするkarma-test-shim.jsファイルSystemJSを使用して

package.jsonファイルの内容：ここで

{ 
    "name": "test-karma", 
    "version": "1.0.0", 
    "scripts": { 
    "build": "rm -rf dist && tsc", 
    "pretest": "npm run build", 
    "test": "karma start karma.conf.js", 
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ", 
    "tsc": "tsc", 
    "tsc:w": "tsc -w", 
    "lite": "lite-server", 
    "postinstall": "typings install", 
    "typings": "typings" 
    }, 
    "license": "ISC", 
    "dependencies": { 
    "@angular/common": "2.0.0-rc.1", 
    "@angular/compiler": "2.0.0-rc.1", 
    "@angular/core": "2.0.0-rc.1", 
    "@angular/http": "2.0.0-rc.1", 
    "@angular/platform-browser": "2.0.0-rc.1", 
    "@angular/platform-browser-dynamic": "2.0.0-rc.1", 
    "@angular/router": "2.0.0-rc.1", 
    "@angular/router-deprecated": "2.0.0-rc.1", 
    "@angular/upgrade": "2.0.0-rc.1", 
    "systemjs": "0.19.6", 
    "es6-shim": "^0.35.0", 
    "reflect-metadata": "^0.1.3", 
    "rxjs": "5.0.0-beta.6", 
    "zone.js": "^0.6.12", 
    "angular2-in-memory-web-api": "0.0.7", 
    "bootstrap": "^3.3.6" 
    }, 
    "devDependencies": { 
    "concurrently": "^2.0.0", 
    "jasmine-core": "^2.4.1", 
    "karma": "^0.13.22", 
    "karma-chrome-launcher": "^1.0.1", 
    "karma-coverage": "^1.0.0", 
    "karma-firefox-launcher": "^1.0.0", 
    "karma-jasmine": "^1.0.2", 
    "karma-phantomjs-launcher": "^1.0.0", 
    "lite-server": "^2.2.0", 
    "phantomjs": "^2.1.7", 
    "phantomjs-prebuilt": "^2.1.7", 
    "typescript": "^1.8.10", 
    "typings": "^0.8.1", 
    "uglify": "^0.1.5" 
    } 
} 

はカルマ構成（karma.conf.js）です：

'use strict'; 

module.exports = function(config) { 
    config.set({ 

    basePath: '.', 
    frameworks: ['jasmine'], 

    files: [ 
     // Paths loaded by Karma 
     {pattern: 'node_modules/es6-shim/es6-shim.min.js', included: true, watched: true}, 
     {pattern: 'node_modules/reflect-metadata/Reflect.js', included: true, watched: true}, 
     {pattern: 'node_modules/zone.js/dist/zone.js', included: true, watched: true}, 
     {pattern: 'node_modules/zone.js/dist/async-test.js', included: true, watched: true}, 
     {pattern: 'node_modules/systemjs/dist/system-polyfills.js', included: true, watched: true}, 
     {pattern: 'node_modules/systemjs/dist/system.src.js', included: true, watched: true}, 
     {pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false}, 
     {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false}, 
     {pattern: 'karma-test-shim.js', included: true, watched: true}, 

     // Paths loaded via module imports 
     {pattern: 'app/**/*.js', included: false, watched: true}, 

     // Paths to support debugging with source maps in dev tools 
     {pattern: 'app/**/*.ts', included: false, watched: true}, 
     {pattern: 'app/**/*.js.map', included: false, watched: false} 
    ], 

    // Proxied base paths 
    proxies: { 
     // Required for component assests fetched by Angular's compiler 
     '/app/': '/base/app/' 
    }, 

    port: 9876, 

    logLevel: config.LOG_INFO, 

    colors: true, 

    autoWatch: true, 

    browsers: ['PhantomJS', 'Chrome', 'Firefox'], 

    // Karma plugins loaded 
    plugins: [ 
     'karma-jasmine', 
     'karma-coverage', 
     'karma-chrome-launcher', 
     'karma-firefox-launcher', 
     'karma-phantomjs-launcher' 
    ], 

    // Coverage reporter generates the coverage 
    reporters: ['progress', 'dots', 'coverage'], 

    // Source files that you wanna generate coverage for. 
    // Do not include tests or libraries (these files will be instrumented by Istanbul) 
    preprocessors: { 
     'dist/**/!(*spec).js': ['coverage'] 
    }, 

    coverageReporter: { 
     reporters: [ 
     {type: 'json', subdir: '.', file: 'coverage-final.json'} 
     ] 
    }, 

    singleRun: true 
    }); 
}; 

とkarma-test-shim.jsファイル：

'use strict'; 

// Turn on full stack traces in errors to help debugging 
Error.stackTraceLimit = Infinity; 

jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000; 

// Cancel Karma's synchronous start, 
// we will call `__karma__.start()` later, once all the specs are loaded. 
__karma__.loaded = function() {}; 

var map = { 
    'app': 'base/app', 
    'rxjs': 'base/node_modules/rxjs', 
    '@angular': 'base/node_modules/@angular' 
}; 

var packages = { 
    'app': { main: 'main.js', defaultExtension: 'js' }, 
    'rxjs': { defaultExtension: 'js' } 
}; 

var packageNames = [ 
    '@angular/common', 
    '@angular/compiler', 
    '@angular/core', 
    '@angular/http', 
    '@angular/platform-browser', 
    '@angular/platform-browser-dynamic', 
    '@angular/router', 
    '@angular/router-deprecated', 
    '@angular/testing', 
    '@angular/upgrade', 
]; 

packageNames.forEach(function(pkgName) { 
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' }; 
}); 

packages['base/app'] = { 
    defaultExtension: 'js', 
    format: 'cjs', 
    map:  Object.keys(window.__karma__.files).filter(onlyAppFiles).reduce(createPathRecords, {}) 
}; 

var config = { 
    map: map, 
    packages: packages 
}; 

System.config(config); 

System.import('@angular/platform-browser/src/browser/browser_adapter') 
    .then(function(browser_adapter) { browser_adapter.BrowserDomAdapter.makeCurrent(); }) 
    .then(function() { return Promise.all(resolveTestFiles()); }) 
    .then(function() { __karma__.start(); }, function(error) { __karma__.error(error.stack || error); }); 

function createPathRecords(pathsMapping, appPath) { 
    var pathParts = appPath.split('/'); 
    var moduleName = './' + pathParts.slice(Math.max(pathParts.length - 2, 1)).join('/'); 
    moduleName = moduleName.replace(/\.js$/, ''); 
    pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath]; 
    return pathsMapping; 
} 

function onlyAppFiles(filePath) { 
    return /\/base\/app\/(?!.*\.spec\.js$).*\.js$/.test(filePath); 
} 

function onlySpecFiles(path) { 
    return /\.spec\.js$/.test(path); 
} 

function resolveTestFiles() { 
    return Object.keys(window.__karma__.files) // All files served by Karma. 
     .filter(onlySpecFiles) 
     .map(function(moduleName) { 
      // loads all spec files via their global module names (e.g. 
     // 'base/dist/vg-player/vg-player.spec') 
      return System.import(moduleName); 
     }); 
}