Karma/Jasmine 与/ Angular 2 项目的问题答案

【问题标题】：Karma/Jasmine Issues w/ Angular2 ProjectKarma/Jasmine 与/ Angular 2 项目的问题
【发布时间】：2016-07-18 10:39:09
【问题描述】：

我有一个看起来像这样的项目：

我正在尝试让 Karma/Jasmine 作为测试框架工作。我尝试复制这个项目：https://github.com/juliemr/ng2-test-seed，根据我的需要进行修改。我正在尝试运行 test 文件夹中的模拟测试。不过，当我尝试执行 npm run test 时，我得到了：

我不确定karma-test-shim.js/karma.conf.js 中的文件路径是否正确，因为我对使用 npm/node 项目还是比较陌生。

这是我的karma-test-shim.js（文件路径位于var moduleName和onlyAppFiles函数中）：

// 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/src/app': {
      defaultExtension: false,
      format: 'register',
      map: Object.keys(window.__karma__.files).
            filter(onlyAppFiles).
            reduce(function createPathRecords(pathsMapping, appPath) {
              // creates local module name mapping to global path with karma's fingerprint in path, e.g.:
              // './hero.service': '/base/src/app/hero.service.js?f4523daf879cfb7310ef6242682ccf10b2041b3e'
              var moduleName = appPath.replace(/^\/base\/app\/.*\/.*\//, './').replace(/\.js$/, '');
              pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath]
              return pathsMapping;
            }, {})

      }
    }
});

System.import('angular2/testing').then(function(testing) {
  return System.import('angular2/platform/testing/browser').then(function(providers) {
    testing.setBaseTestProviders(providers.TEST_BROWSER_PLATFORM_PROVIDERS,
                                 providers.TEST_BROWSER_APPLICATION_PROVIDERS);
  });
}).then(function() {
  return Promise.all(
    Object.keys(window.__karma__.files) // All files served by Karma.
    .filter(onlySpecFiles)
    // .map(filePath2moduleName)        // Normalize paths to module names.
    .map(function(moduleName) {
      // loads all spec files via their global module names (e.g. 'base/src/app/hero.service.spec')
      return System.import(moduleName);
    }));
})
.then(function() {
  __karma__.start();
}, function(error) {
  __karma__.error(error.stack || error);
});


function filePath2moduleName(filePath) {
  return filePath.
           replace(/^\//, '').              // remove / prefix
           replace(/\.\w+$/, '');           // remove suffix
}


function onlyAppFiles(filePath) {
  return /^\/base\/app\/.*\/.*\/.*\.js$/.test(filePath)
}


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

还有我的karma.conf.js：

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

    basePath: '',

    frameworks: ['jasmine'],

    files: [
      // paths loaded by Karma
      {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/es6-shim/es6-shim.js', included: true, watched: true},
      {pattern: 'node_modules/angular2/bundles/angular2-polyfills.js', included: true, watched: true},
      {pattern: 'node_modules/rxjs/bundles/Rx.js', included: true, watched: true},
      {pattern: 'node_modules/angular2/bundles/angular2.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},

      // paths loaded via module imports
      {pattern: 'app/components/**/*.js', included: false, watched: true},
      {pattern: 'app/interfaces/**/*.js', included: false, watched: true},
      {pattern: 'app/models/**/*.js', included: false, watched: true},
      {pattern: 'app/services/**/*.js', included: false, watched: true},

      // paths loaded via Angular's component compiler
      // (these paths need to be rewritten, see proxies section)
      {pattern: 'app/components/**/*.html', included: false, watched: true},
      {pattern: 'assets/css/*.css', included: false, watched: true},

      // paths to support debugging with source maps in dev tools
      {pattern: 'app/*.ts', included: false, watched: false},
      {pattern: 'app/components/**/*.ts', included: false, watched: true},
      {pattern: 'app/interfaces/**/*.ts', included: false, watched: true},
      {pattern: 'app/models/**/*.ts', included: false, watched: true},
      {pattern: 'app/services/**/*.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/"
    },

    reporters: ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  })
}

还有package.json:

{
  "name": "taohd-app-seed",
  "version": "1.0.0",
  "scripts": {
    "start": "npm run lite",
    "app": "./node_modules/.bin/electron main.js",
    "lite": "lite-server -c bs-config.json",
    "typings": "typings",
    "postinstall": "typings install",
    "test": "karma start karma.conf.js"
  },
  "main": "main.js",
  "license": "MIT",
  "dependencies": {
    "angular2": "^2.0.0-beta.12",
    "app-module-path": "^1.0.5",
    "bootstrap": "^3.3.6",
    "electron-prebuilt": "^0.36.11",
    "es6-module-loader": "^0.17.11",
    "es6-promise": "^3.1.2",
    "es6-shim": "^0.35.0",
    "graceful-fs": "^4.1.3",
    "jspm": "^0.16.31",
    "lodash": "^4.6.1",
    "moment": "^2.12.0",
    "ng2-material": "^0.2.12",
    "polo": "^0.8.1",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "systemjs": "^0.19.22",
    "tslint": "^3.6.0",
    "uuid": "^2.0.1",
    "zone.js": "^0.6.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "del": "^2.2.0",
    "electron-debug": "^0.5.2",
    "gulp": "^3.9.1",
    "gulp-coverage": "^0.3.38",
    "gulp-debug": "^2.1.2",
    "gulp-htmllint": "0.0.7",
    "gulp-inject": "^3.0.0",
    "gulp-jasmine": "^2.3.0",
    "gulp-shell": "^0.5.2",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-tslint": "^4.3.3",
    "gulp-typescript": "^2.12.1",
    "gulp-util": "^3.0.7",
    "jasmine": "^2.4.1",
    "jasmine-core": "^2.4.1",
    "karma": "^0.13.22",
    "karma-chrome-launcher": "^0.2.3",
    "karma-cli": "^0.1.2",
    "karma-jasmine": "^0.3.8",
    "lite-server": "^2.1.0",
    "typescript": "^1.8.9",
    "typings": "^0.7.9"
  },
  "jspm": {
    "directories": {
      "baseURL": "app"
    },
    "dependencies": {
      "angular": "github:angular/bower-angular@^1.5.2",
      "systemjs-hot-reloader": "github:capaj/systemjs-hot-reloader@^0.5.6"
    },
    "devDependencies": {
      "babel": "npm:babel-core@^5.8.24",
      "babel-runtime": "npm:babel-runtime@^5.8.24",
      "core-js": "npm:core-js@^1.1.4",
      "traceur": "github:jmcriffey/bower-traceur@0.0.93",
      "traceur-runtime": "github:jmcriffey/bower-traceur-runtime@0.0.93",
      "typescript": "npm:typescript@^1.8.9"
    }
  }
}

谁能弄清楚我哪里出错了？

【问题讨论】：

标签： javascript node.js jasmine angular karma-runner

【解决方案1】：

您的项目结构中似乎没有src 级别。所以你在你的karma-test-shim.js 文件中使用它：

System.config({
  packages: {
    'base/app': { // <----- (instead of base/src/app)
      defaultExtension: false,
      format: 'register',
      map: Object.keys(window.__karma__.files).
        filter(onlyAppFiles).
        reduce(function createPathRecords(pathsMapping, appPath) {
          (...)
        }, {})
      }
    }
});

我还将在您的 package.json 文件中添加一个 pretest 任务，以在执行 Karma 之前编译您的 TypeScript 文件。类似的东西：

{
  (...)
  scripts: {
    (...)
    "pretest": "tsc",
    "test": "karma start karma.conf.js"
  }
}

【讨论】：

谢谢！我确实错过了最初的道路。我现在正在试验脚本步骤 - 将报告。

【解决方案2】：

我最终让它工作了，结果发现我构建模块/运行测试的顺序错误。

这是当前的设置，我在每个 .ts/.js 等价物中都有 .spec.js 文件：

我的karma.conf.js

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

    basePath: '',

    frameworks: ['jasmine'],

    files: [
      // paths loaded by Karma
      {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/es6-shim/es6-shim.js', included: true, watched: true},
      {pattern: 'node_modules/angular2/bundles/angular2-polyfills.js', included: true, watched: true},
      {pattern: 'node_modules/rxjs/bundles/Rx.js', included: true, watched: true},
      {pattern: 'node_modules/angular2/bundles/angular2.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},

      // paths loaded via module imports
      {pattern: 'app/components/**/*.js', included: false, watched: true},
      {pattern: 'app/interfaces/*.js', included: false, watched: true},
      {pattern: 'app/models/**/*.js', included: false, watched: true},
      {pattern: 'app/services/**/*.js', included: false, watched: true},

      // paths loaded via Angular's component compiler
      // (these paths need to be rewritten, see proxies section)
      {pattern: 'app/components/**/*.html', included: false, watched: true},
      {pattern: 'assets/css/*.css', included: false, watched: true},

      // paths to support debugging with source maps in dev tools
      {pattern: 'app/*.ts', included: false, watched: false},
      {pattern: 'app/components/**/*.ts', included: false, watched: false},
      {pattern: 'app/interfaces/*.ts', included: false, watched: false},
      {pattern: 'app/models/**/*.ts', included: false, watched: false},
      {pattern: 'app/services/**/*.ts', included: false, watched: false},
      {pattern: 'app/components/**/*.js.map', included: false, watched: false},
      {pattern: 'app/interfaces/*.js.map', included: false, watched: false},
      {pattern: 'app/models/**/*.js.map', included: false, watched: false},
      {pattern: 'app/services/**/*.js.map', included: false, watched: false}
    ],

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

    reporters: ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  })
}

与karma-test-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/app': {
      defaultExtension: false,
      format: 'register',
      map: Object.keys(window.__karma__.files).
            filter(onlyAppFiles).
            reduce(function createPathRecords(pathsMapping, appPath) {
              // creates local module name mapping to global path with karma's fingerprint in path, e.g.:
              // './hero.service': '/base/src/app/hero.service.js?f4523daf879cfb7310ef6242682ccf10b2041b3e'
              var moduleName = appPath.replace(/^\/base\/app\/.*\/.*\//, './').replace(/\.js$/, '');
              pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath]
              return pathsMapping;
            }, {})

      }
    }
});

System.import('angular2/testing').then(function(testing) {
  return System.import('angular2/platform/testing/browser').then(function(providers) {
    testing.setBaseTestProviders(providers.TEST_BROWSER_PLATFORM_PROVIDERS,
                                 providers.TEST_BROWSER_APPLICATION_PROVIDERS);
  });
}).then(function() {
  return Promise.all(
    Object.keys(window.__karma__.files) // All files served by Karma.
    .filter(onlySpecFiles)
    // .map(filePath2moduleName)        // Normalize paths to module names.
    .map(function(moduleName) {
      // loads all spec files via their global module names (e.g. 'base/src/app/hero.service.spec')
      return System.import(moduleName);
    }));
})
.then(function() {
  __karma__.start();
}, function(error) {
  __karma__.error(error.stack || error);
});


function filePath2moduleName(filePath) {
  return filePath.
           replace(/^\//, '').              // remove / prefix
           replace(/\.\w+$/, '');           // remove suffix
}


function onlyAppFiles(filePath) {
  return /^\/base\/app\/.*\/.*\/.*\.js$/.test(filePath)
}


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

使用gulpfile.js编译ts文件（示例）：

gulp.task('compile-components', function () 
{
    del(config.components_source + '(?!.*\.spec\.js$)*.js');
    return gulp
            .src(config.components_source + '*.ts', { base: "." })
            .pipe(debug())
            .pipe(tsc(tsProjectComponents))
            .pipe(gulp.dest("."));
});

步骤：

编译.ts文件
使用测试创建 .spec.js 文件
运行karma start karma.conf.js

【讨论】：