在PhantomJS上运行时，Karma测试失败

Question

There is a unit test implementation for Angular, JS. The test wasn't created by me. The test is build using Jasmine and runs with Karma on PhantomJS.

The problem is that the test opens the Chrome, does something and close the browser. Now I want to change this implementation not to use Chrome, but PhantomJs in order to not open the browser.

The karma.conf.js file looks like:

  module.exports = function(config) {

  var appBase   = 'app/';      // transpiled app JS files
  var appAssets ='/base/app/'; // component assets fetched by Angular's compiler

  config.set({
    basePath: '',
    frameworks: ['jasmine'],
    plugins: [
      require('karma-jasmine'),
//      require('karma-chrome-launcher'),
      require('karma-htmlfile-reporter'),
      require('karma-phantomjs-launcher')
    ],

    customLaunchers: {
      expletiveRedacted: {
        base: 'PhantomJS',
        options: {
          windowName: 'my-window',
          settings: {
            webSecurityEnabled: false
          },
        },
        flags: ['--load-images=true'],
        debug: true
      },

//    phantomjsLauncher: {
//      // Have phantomjs exit if a ResourceError is encountered (useful if karma exits without killing phantom)
//      exitOnResourceError: true
//    }
  },

//    customLaunchers: {
//      // From the CLI. Not used here but interesting
//      // chrome setup for travis CI using chromium
//      Chrome_travis_ci: {
//        base: 'Chrome',
//        flags: ['--no-sandbox']
//      }
//    },
    files: [
      // System.js for module loading
      'node_modules/systemjs/dist/system.src.js',
      'node_modules/systemjs/dist/system-polyfills.js',

      // Polyfills
      'node_modules/core-js/client/shim.js',

      // Reflect and Zone.js
      'node_modules/reflect-metadata/Reflect.js',
      'node_modules/zone.js/dist/zone.js',
      'node_modules/zone.js/dist/long-stack-trace-zone.js',
      'node_modules/zone.js/dist/proxy.js',
      'node_modules/zone.js/dist/sync-test.js',
      'node_modules/zone.js/dist/jasmine-patch.js',
      'node_modules/zone.js/dist/async-test.js',
      'node_modules/zone.js/dist/fake-async-test.js',

      // RxJs.
      { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
      { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },

      // Angular 2 itself and the testing library
      {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false},
      {pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false},

      {pattern: 'systemjs.config.js', included: false, watched: false},
//      'karma-test-shim.js',
      {pattern: "karma-test-shim.js", watched: false},

      // transpiled application & spec code paths loaded via module imports
      {pattern: appBase + '**/*.js', included: false, watched: true},

      // asset (HTML & CSS) paths loaded via Angular's component compiler
      // (these paths need to be rewritten, see proxies section)
      {pattern: appBase + '**/*.html', included: false, watched: true},
      {pattern: appBase + '**/*.css', included: false, watched: true},

      // paths for debugging with source maps in dev tools
      {pattern: appBase + '**/*.ts', included: false, watched: false},
      {pattern: appBase + '**/*.js.map', included: false, watched: false},

      {pattern: 'node_modules/angular2-notifications/**/*.js', included: false, watched: false},
      {pattern: 'node_modules/angular2-notifications/**/*.js.map', included: false, watched: false}
    ],

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

    exclude: [],
    preprocessors: {},
    reporters: ['progress', 'html'],

    // HtmlReporter configuration
    htmlReporter: {
      // Open this file to see results in browser
      outputFile: '_test-output/tests.html',

      // Optional
      pageTitle: 'Unit Tests',
      subPageTitle: __dirname
    },

    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['expletiveRedacted'],
    singleRun: true
  })
}

The karma-test-shim.js file:

// /*global jasmine, __karma__, window*/
Error.stackTraceLimit = Infinity;
jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;

__karma__.loaded = function () {
};

function isJsFile(path) {
  return path.slice(-3) == '.js';
}

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

function isBuiltFile(path) {
  var builtPath = '/base/app/';
  return isJsFile(path) && (path.substr(0, builtPath.length) == builtPath);
}

var allSpecFiles = Object.keys(window.__karma__.files)
  .filter(isSpecFile)
  .filter(isBuiltFile);

System.config({
  baseURL: '/base/app',
  packageWithIndex: true // sadly, we can't use umd packages (yet?)
});

System.import('systemjs.config.js')
  .then(() => Promise.all([
      System.import('@angular/core/testing'),
      System.import('@angular/platform-browser-dynamic/testing')
    ]))
  .then((providers) => {
    var coreTesting = providers[0];
    var browserTesting = providers[1];
    coreTesting.TestBed.initTestEnvironment(
            browserTesting.BrowserDynamicTestingModule,
            browserTesting.platformBrowserDynamicTesting());

  })
  .then(function () {
  // Finally, load all spec files.
  // This will run the tests directly.
  return Promise.all(
    allSpecFiles.map(function (moduleName) {
      return System.import(moduleName);
    }));
  })
  .then(__karma__.start, __karma__.error);

Now when I run the test, I get the next exception:

> karma start karma.conf.js

03 11 2016 12:31:11.264:INFO [karma]: Karma v1.3.0 server started at http://localhost:9876/
03 11 2016 12:31:11.264:INFO [launcher]: Launching browser expletiveRedacted with unlimited concurrency
03 11 2016 12:31:11.275:INFO [launcher]: Starting browser PhantomJS
03 11 2016 12:31:11.708:INFO [phantomjs.launcher]: ACTION REQUIRED:
03 11 2016 12:31:11.709:INFO [phantomjs.launcher]: 
03 11 2016 12:31:11.709:INFO [phantomjs.launcher]:   Launch browser at
03 11 2016 12:31:11.709:INFO [phantomjs.launcher]:   http://localhost:9000/webkit/inspector/inspector.html?page=2
03 11 2016 12:31:11.709:INFO [phantomjs.launcher]: 
03 11 2016 12:31:11.709:INFO [phantomjs.launcher]: Waiting 15 seconds ...
03 11 2016 12:31:28.639:INFO [PhantomJS 2.1.1 (Windows 8 0.0.0)]: Connected on socket /#7v0Lf6-X3ckgi5xZAAAA with id 33327697
PhantomJS 2.1.1 (Windows 8 0.0.0) ERROR
  SyntaxError: Unexpected token ')'
  at karma-test-shim.js:31


npm ERR! Test failed.  See above for more details.

Line 31 is the following : .then(() => Promise.all([

I don't really know Node.JS. Any ideas what is the cause of this issue and how could it be fixed ?

Answer 1

SyntaxError: Unexpected token ')'
  at karma-test-shim.js:31

Line 31 is the following : .then(() => Promise.all([

It's most likely your use of the arrow function. It's supported in Chrome, but probably not PhantomJS. Just change it to use function instead

System.import('systemjs.config.js')
  .then(function() { 
     return Promise.all([
       System.import('@angular/core/testing'),
       System.import('@angular/platform-browser-dynamic/testing')
     ]) 
   })
  .then(function(providers) {
     ...
  })