连接Karma,Angular2,打字稿

时间:2016-09-07 16:17:21

标签: angular typescript jasmine webpack karma-jasmine

我正在尝试围绕ng2-admin project编写一些测试。我在设置测试环境时遇到问题。测试将用typescript编写,因此karma.config.js还需要指定一个转换器。但是在尝试运行它时遇到错误。

karma.config.js

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

    basePath: '.',

    frameworks: ['jasmine', 'requirejs'],

    files: [
        // paths loaded by Karma
        {pattern: 'node_modules/angular2/bundles/angular2-polyfills.js', included: true, watched: true},
        {pattern: 'node_modules/systemjs/dist/system.src.js', included: true, watched: true},
         {pattern: 'node_modules/rxjs/bundles/Rx.js', included: true, watched: true},
         {pattern: 'node_modules/angular2/bundles/angular2.dev.js', included: true, watched: true},
         {pattern: 'node_modules/angular2/bundles/testing.dev.js', included: true, watched: true},
        {pattern: 'karma-test-shim.js', included: true, watched: true},
        {pattern: 'node_modules/lodash/lodash.js',included:true,watched:true},


        // paths to support debugging with source maps in dev tools
        {pattern: 'src/app/**/*.ts', included: true, watched: true},
        {pattern: 'src/test/**/*.ts', included: true, watched: true},

    ],

    // proxied base paths
    proxies: {
        // required for component assests fetched by Angular's compiler
    },

    port: 9876,

    logLevel: config.LOG_INFO,

    colors: true,

    autoWatch: true,

    browsers: ['Chrome'],

    // Karma plugins loaded
    plugins: [
        'karma-jasmine',
        'karma-coverage',
        'karma-requirejs',
        'karma-chrome-launcher',
        'karma-typescript-preprocessor'
    ],

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

    // Source files that you wanna generate coverage for.
    // Do not include tests or libraries (Files used by Istanbul)
    preprocessors: {
        'src/app/**/*.ts': 'typescript',
        'src/test/**/*.ts': 'typescript',
        'dist/**/!(*spec).js': ['coverage']
    },

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

    singleRun: true
})

};

果报测试shim.js

// Tun 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() {};

System.config({
    packages: {
        'base/dist': {
            defaultExtension: false,
            format: 'cjs',
            map: Object.keys(window.__karma__.files).filter(onlyAppFiles).reduce(createPathRecords, {})
        }
    }
});

System.import('angular2/src/platform/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) {
    // creates local module name mapping to global path with karma's fingerprint in path, e.g.:
    // './vg-player/vg-player':
    // '/base/dist/vg-player/vg-player.js?f4523daf879cfb7310ef6242682ccf10b2041b3e'
    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\/dist\/(?!.*\.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);
        });
}

这是怪物package.json:

{
  "name": "ng2-admin",
  "version": "0.4.2",
  "description": "Angular 2 and Bootstrap 4 Admin Template.",
  "author": "akveo",
  "homepage": "http://akveo.github.io/ng2-admin/",
  "license": "MIT",
  "dependencies": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "^0.2.0",
    "@angular/http": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/platform-server": "2.0.0-rc.4",
    "@angular/router": "3.0.0-beta.2",
    "@angular2-material/button": "^2.0.0-alpha.7-4",
    "@angular2-material/core": "^2.0.0-alpha.7-4",
    "@angular2-material/tabs": "^2.0.0-alpha.7-4",
    "@angular2-material/tooltip": "^2.0.0-alpha.7-4",
    "amcharts3": "file:../amcharts3",
    "ammap3": "file:../ammap3",
    "angular2": "^2.0.0-beta.17",
    "angular2-datatable": "^0.4.2",
    "animate.css": "^3.5.1",
    "bootstrap": "4.0.0-alpha.2",
    "bootstrap-loader": "^1.0.10",
    "chart.js": "^1.1.1",
    "chartist": "^0.9.7",
    "ckeditor": "^4.5.9",
    "core-js": "^2.4.0",
    "easy-pie-chart": "^2.1.7",
    "extract-text-webpack-plugin": "^1.0.1",
    "font-awesome": "^4.6.1",
    "font-awesome-sass-loader": "^1.0.1",
    "fullcalendar": "^2.7.2",
    "google-maps": "^3.2.1",
    "http-server": "^0.9.0",
    "ie-shim": "^0.1.0",
    "jquery": "^2.2.3",
    "jquery-slimscroll": "^1.3.6",
    "leaflet": "^0.7.7",
    "leaflet-map": "^0.2.1",
    "lodash": "^4.12.0",
    "ng2-bootstrap": "1.0.20",
    "ng2-branchy": "^0.0.2-5",
    "ng2-ckeditor": "1.0.4",
    "ng2-uploader": "0.5.6",
    "normalize.css": "^4.1.1",
    "rxjs": "5.0.0-beta.6", 
    "tether": "^1.2.4",
    "zone.js": "~0.6.12"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.28",
    "@types/hammerjs": "^2.0.28",
    "@types/lodash": "0.0.28",
    "@types/node": "^4.0.29",
    "@types/source-map": "^0.1.26",
    "@types/uglify-js": "^2.0.27",
    "@types/webpack": "^1.12.29",
    "angular": "^1.5.8",
    "angular-mocks": "^1.5.8",
    "angular-ui-router": "^0.3.1",
    "angular2-hmr": "~0.8.0",
    "angular2-polyfill": "^0.0.32",
    "angular2-template-loader": "^0.4.0",
    "awesome-typescript-loader": "1.1.1",
    "codelyzer": "~0.0.21",
    "compression-webpack-plugin": "^0.3.1",
    "copy-webpack-plugin": "^3.0.1",
    "css-loader": "^0.23.1",
    "es6-promise": "^3.1.2",
    "es6-promise-loader": "^1.0.1",
    "es6-shim": "^0.35.0",
    "es7-reflect-metadata": "^1.6.0",
    "reflect-metadata": "^0.1.3",
    "exports-loader": "^0.6.3",
    "expose-loader": "^0.7.1",
    "file-loader": "^0.9.0",
    "gh-pages": "^0.11.0",
    "html-webpack-plugin": "^2.21.0",
    "http-server": "^0.9.0",
    "imports-loader": "^0.6.5",
    "istanbul-instrumenter-loader": "^0.2.0",
    "jasmine-core": "^2.5.0",
    "json-loader": "^0.5.4",
    "karma": "^1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^0.0.4",
    "karma-coverage": "^1.1.1",
    "karma-jasmine": "^1.0.2",
    "karma-istanbul": "0.0.2",
    "karma-requirejs": "^1.0.0",
    "karma-typescript-preprocessor": "^0.2.1",
    "karma-webpack": "^1.8.0",
    "node-sass": "^3.5.3",
    "parse5": "^1.5.1",
    "raw-loader": "0.5.1",
    "remap-istanbul": "^0.6.4",
    "requirejs": "^2.3.1",
    "resolve-url-loader": "^1.4.3",
    "rimraf": "^2.5.2",
    "sass-loader": "^3.2.0",
    "source-map-loader": "^0.1.5",
    "style-loader": "^0.13.1",
    "systemjs": "^0.19.37",
    "to-string-loader": "^1.1.4",
    "ts-helpers": "1.1.1",
    "ts-node": "^0.9.1",
    "tslint": "^3.7.1",
    "tslint-loader": "^2.1.3",
    "typedoc": "^0.4.4",
    "typescript": "^1.8.10",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1",
    "webpack-md5-hash": "^0.0.5",
    "webpack-merge": "^0.14.0"
  },
  "scripts": {
    "rimraf": "rimraf",
    "tslint": "tslint",
    "typedoc": "typedoc",
    "webpack": "webpack",
    "webpack-dev-server": "webpack-dev-server",
    "webdriver-manager": "webdriver-manager",
    "clean": "npm cache clean && npm run rimraf -- node_modules doc coverage dist",
    "clean:dist": "npm run rimraf -- dist",
    "preclean:install": "npm run clean",
    "clean:install": "npm set progress=false && npm install",
    "preclean:start": "npm run clean",
    "clean:start": "npm start",
    "watch": "npm run watch:dev",
    "watch:dev": "npm run build:dev -- --watch",
    "watch:dev:hmr": "npm run watch:dev -- --hot",
    "watch:prod": "npm run build:prod -- --watch",
    "build": "npm run build:dev",
    "prebuild:dev": "npm run clean:dist",
    "build:dev": "webpack --config config/webpack.dev.js --progress --profile --colors --display-error-details --display-cached",
    "prebuild:prod": "npm run clean:dist",
    "build:prod": "webpack --config config/webpack.prod.js  --progress --profile --colors --display-error-details --display-cached --bail",
    "server": "npm run server:dev",
    "server:dev": "webpack-dev-server --config config/webpack.dev.js --progress --profile --colors --watch --display-error-details --display-cached --content-base src/",
    "server:dev:hmr": "npm run server:dev -- --inline --hot",
    "server:prod": "http-server dist --cors",
    "webdriver:update": "npm run webdriver-manager update",
    "webdriver:start": "npm run webdriver-manager start",
    "lint": "npm run tslint 'src/**/*.ts'",
    "pree2e": "npm run webdriver:update -- --standalone",
    "pretest": "npm run lint",
    "docs": "npm run typedoc -- --options typedoc.json --exclude '**/*.spec.ts' ./src/",
    "gh-pages": "wintersmith build -C docs && gh-pages -d docs/build",
    "start": "npm run server:dev",
    "start:hmr": "npm run server:dev:hmr",
    "postinstall": "bower install",
    "version": "npm run build",
    "postversion": "git push && git push --tags",
    "test": "karma start karma.conf.js",
    "posttest": "node_modules/.bin/remap-istanbul -i coverage/coverage-final.json -o coverage -t html",
    "coverage": "http-server -c-1 -o -p 9875 ./coverage"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/akveo/ng2-admin.git"
  },
  "bugs": {
    "url": "https://github.com/akveo/ng2-admin/issues"
  },
  "engines": {
    "node": ">= 4.2.1",
    "npm": ">= 3"
  }
}

测试中的类(truncate.pipe.ts):

import {Pipe} from '@angular/core'

@Pipe({
  name: 'truncate'
})
export class Truncate {

  transform(value, arg1, arg2) : string {
    !arg1 ? arg1 = 10 : arg1;
    !arg2 ? arg2 = '' : arg2;
    return value.length > arg1 ? value.substring(0, arg1) + arg2 : value;
  }
}

样本测试(truncate.pipe.spec.ts):

import {Truncate} from '../app/pages/dashboard/quotas/pipes/truncate.pipe.ts';

describe('MyPipe Tests', () => {
    let pipe: Truncate;

    beforeEach(() => {
        pipe = new Truncate();
    });

    it('Should truncate 10 characters ', () => {
        var result = pipe.transform('blah blah blah', null,null);

        expect(result).toEqual('blah blah ');
    });
});

任何帮助高度赞赏。

0 个答案:

没有答案