Angular2项目的因果报应/茉莉花发行

Question

I have a project that looks like:

I am trying to get Karma/Jasmine working as the test framework. I tried replicating this project: https://github.com/juliemr/ng2-test-seed , modifying it to my needs. I have a mock test in test folder that I am trying to get to run. Though, when I try to do the npm run test this is what I get:

I am not sure if my file paths are correct in the karma-test-shim.js / karma.conf.js as I'm still relatively new to working with npm/node projects.

Here is my karma-test-shim.js (file paths are located in var moduleName and onlyAppFiles function):

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

And my 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
  })
}

And 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"
    }
  }
}

Can anyone figure out where I am going wrong?

Answer 1

I ended up getting it working, turns out I was getting the order of building modules/running tests wrong.

Here is the current setup, I have .spec.js files inside of each .ts/.js equivalent:

My 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
  })
}

With 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);
}

Use a gulpfile.js to compile ts files (example):

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("."));
});

Steps:

1. Compile .ts files
2. Create .spec.js files w/ tests
3. run karma start karma.conf.js

Answer 2

It seems that you don't have a src level into your project structure. So you use this into your karma-test-shim.js file:

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) {
          (...)
        }, {})
      }
    }
});

I would also add a pretest task into your package.json file to compile your TypeScript files before executing Karma. Something like that:

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