基于Angular的单元测试：（一）测试环境搭建

ng new angular-test

cd angular-test

npm install

npm test

ionic start ionic-test --v2

npm install -g karma

cd ionic-test

npm install @angular/cli --save-dev  
npm install codelyzer --save-dev  
npm install jasmine-core --save-dev  
npm install jasmine-spec-reporter --save-dev  
npm install karma --save-dev  
npm install karma-cli --save-dev  
npm install karma-chrome-launcher --save-dev  
npm install karma-jasmine --save-dev  
npm install karma-jasmine-html-reporter --save-dev  
npm install karma-coverage-istanbul-reporter --save-dev  
npm install ts-node --save-dev  
npm install tslint --save-dev  
npm install tslint-eslint-rules --save-dev  
npm install @types/jasmine --save-dev  
npm install @types/node --save-dev

karma init karma.conf.js

module.exports = function (config) {   
  config.set({   
    basePath: '',   
    frameworks: ['jasmine', '@angular/cli'],   
    plugins: [   
      require('karma-jasmine'),   
      require('karma-chrome-launcher'),   
      require('karma-jasmine-html-reporter'),   
      require('karma-coverage-istanbul-reporter'),   
      require('@angular/cli/plugins/karma')   
    ],   
    client:{   
      clearContext: false    
    },   
    files: [   
      { pattern: './src/test.ts', watched: false }   
    ],   
    preprocessors: {   
      './src/test.ts': ['@angular/cli']   
    },   
    mime: {   
      'text/x-typescript': ['ts','tsx']   
    },   
    coverageIstanbulReporter: {   
      reports: [ 'html', 'lcovonly' ],   
      fixWebpackSourcePaths: true   
    },   
    angularCli: {   
      config: './.angular-cli.json',   
      environment: 'dev'   
    },   
    reporters: config.angularCli && config.angularCli.codeCoverage   
      ? ['progress', 'coverage-istanbul']   
      : ['progress', 'kjhtml'],   
    port: 9876,   
    colors: true,   
    logLevel: config.LOG_INFO,   
    autoWatch: true,   
    browsers: ['Chrome'],   
    singleRun: false   
  });  
};

{   
  "project": {   
    "version": "1.0.0",   
    "name": "ionic-test"   
  },   
  "apps": [   
  {   
    "root": "src",   
    "outDir": "dist",   
    "assets": [   
      "assets"   
    ],   
    "index": "index.html",   
    "main": "./app/main.ts",   
    "polyfills": "polyfills.ts",
    "test": "test.ts",   
    "tsconfig": "tsconfig.spec.json",   
    "prefix": "app",   
    "mobile": false,   
    "styles": [   
      "styles.css"   
    ],   
    "scripts": [],   
    "environmentSource": "environments/environment.ts",   
    "environments": {   
      "dev": "environments/environment.ts",   
      "prod": "environments/environment.prod.ts"   
    }   
  }],   
  "addons": [],   
  "packages": [],   
  "test": {   
    "karma": {   
      "config": "./karma.conf.js"   
    }   
  },   
  "defaults": {   
  "styleExt": "css",   
  "prefixInterfaces": false,   
  "inline": {   
     "style": false,   
     "template": false   
   },   
   "spec": {   
     "class": false,   
     "component": true,   
     "directive": true,   
     "module": false,   
     "pipe": true,   
     "service": true   
   }   
  }  
}

export const environment: any = {   
  production: true,  
};

export const environment: any = {   
  production: false,  
};

import 'core-js/es6/symbol';  
import 'core-js/es6/object';  
import 'core-js/es6/function';  
import 'core-js/es6/parse-int';  
import 'core-js/es6/parse-float';  
import 'core-js/es6/number';  
import 'core-js/es6/math';  
import 'core-js/es6/string';  
import 'core-js/es6/date';  
import 'core-js/es6/array';  
import 'core-js/es6/regexp';  
import 'core-js/es6/map';  
import 'core-js/es6/set';  
import 'core-js/es6/reflect';    

import 'core-js/es7/reflect';  
import 'zone.js/dist/zone';

import './polyfills.ts';   
import 'zone.js/dist/long-stack-trace-zone';  
import 'zone.js/dist/proxy.js';  
import 'zone.js/dist/sync-test';  
import 'zone.js/dist/jasmine-patch';  
import 'zone.js/dist/async-test';  
import 'zone.js/dist/fake-async-test';   

import { getTestBed, TestBed } from '@angular/core/testing';  
import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';   

// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.  
declare var __karma__: any;  
declare var require: any;   

// Prevent Karma from running prematurely.  
__karma__.loaded = function (): void {   
// noop  
};   

// First, initialize the Angular testing environment.  
getTestBed().initTestEnvironment(   
  BrowserDynamicTestingModule,   
  platformBrowserDynamicTesting()  
);   

// Then we find all the tests.  
let context: any = require.context('./', true, /\.spec\.ts/);   

// And load the modules.  
context.keys().map(context);   

// Finally, start Karma to run the tests.  
__karma__.start();

{   
  "compilerOptions": {   
    "baseUrl": "",   
    "declaration": false,   
    "emitDecoratorMetadata": true,   
    "experimentalDecorators": true,   
    "lib": ["es6", "dom"],   
    "mapRoot": "./",   
    "module": "es6",   
    "moduleResolution": "node",   
    "outDir": "../dist/out-tsc",   
    "sourceMap": true,   
    "target": "es5",   
    "typeRoots": [   
      "../node_modules/@types"   
    ]   
  }  
}

"test": "ng test"

npm test

ERROR in Could not resolve module @angular/router

npm install @angular/router

  Uncaught TypeError: Cannot read property 'apply' of undefined
  at http://localhost:9877webpack:///~/zone.js/dist/zone.js:1265:0 <- src/test.ts:123628

npm install zone.js@0.8.5

Uncaught Error: Zone already loaded.

// import './polyfills.ts';

• Angular Testing
  
• Angular CLI
  
• Ionic
  
• Test Driven Development in Ionic 2: An Introduction to TDD