jeudi 29 septembre 2016

Karma - Use PhantomJS instead of Chrome

I'm trying to set up automated testing with Karma. Although I ran into a problem.

npm start or npm install give me this error:

> concurrently "npm run tsc:w" "npm run lite"

[0] /c: /c: is a directory
[1] /c: /c: is a directory
[0] npm run tsc:w exited with code 126
[1] npm run lite exited with code 126

npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\Ivar\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "start"
npm ERR! node v4.5.0
npm ERR! npm  v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! angular-quickstart@1.0.0 start: `concurrently "npm run tsc:w" "npm run lite" `
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the angular-quickstart@1.0.0 start script 'concurrently "npm run tsc:w" "npm run lite" '.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular-quickstart package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     concurrently "npm run tsc:w" "npm run lite"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs angular-quickstart
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls angular-quickstart
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:

Before they gave me:

> karma start karma.conf.js

29 09 2016 16:49:27.659:WARN [watcher]: Pattern "C:/Users/Ivar/documents/school/stage/workspace/webapplicatie/systemjs.config.extras.js" does not match any file.
29 09 2016 16:49:27.679:WARN [watcher]: Pattern "C:/Users/Ivar/documents/school/stage/workspace/webapplicatie/app/**/*.css" does not match any file.
29 09 2016 16:49:27.691:WARN [watcher]: Pattern "C:/Users/Ivar/documents/school/stage/workspace/webapplicatie/test/**/*.ts" does not match any file.
29 09 2016 16:49:27.692:WARN [watcher]: Pattern "C:/Users/Ivar/documents/school/stage/workspace/webapplicatie/test/**/*.js.map" does not match any file.
29 09 2016 16:49:28.158:INFO [karma]: Karma v1.3.0 server started at http://localhost:9876/
29 09 2016 16:49:28.159:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
29 09 2016 16:49:28.166:INFO [launcher]: Starting browser PhantomJS
29 09 2016 16:49:29.956:INFO [PhantomJS 2.1.1 (Windows 8 0.0.0)]: Connected on socket /#GGY-X69uV6wlYJOnAAAA with id 60252055
29 09 2016 16:49:30.387:WARN [web-server]: 404: /base/node_modules/systemjs/dist/system-polyfills.js
PhantomJS 2.1.1 (Windows 8 0.0.0) ERROR
  TypeError: undefined is not a constructor (evaluating 'System.config')
  at karma-test-shim.js:30

PhantomJS 2.1.1 (Windows 8 0.0.0) ERROR
  TypeError: undefined is not a constructor (evaluating 'System.config')
  at karma-test-shim.js:30

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

while in node_modules/systemjs/dist the sytem-polyfills.js does exist.

Now my karma config code:

module.exports = function(config) {

  var appBase    = 'app/';       // transpiled app JS and map files
  var appSrcBase = 'app/';       // app source TS files
  var appAssets  = '/base/app/'; // component assets fetched by Angular's compiler

  var testBase    = 'test/';       // transpiled test JS and map files
  var testSrcBase = 'test/';       // test source TS files

  config.set({
    basePath: '',
    frameworks: ['jasmine'],
    plugins: [
      require('karma-jasmine'),
      require('karma-phantomjs-launcher'),
      require('karma-jasmine-html-reporter'), // click "Debug" in browser to see it
      require('karma-htmlfile-reporter') // crashing w/ strange socket error
    ],

    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',

      // Polyfills
      'node_modules/core-js/client/shim.js',
      'node_modules/reflect-metadata/Reflect.js',

      // zone.js
      'node_modules/zone.js/dist/zone.js',
      'node_modules/http://ift.tt/1KReNIi',
      'node_modules/http://ift.tt/2c7PMID',
      'node_modules/http://ift.tt/2cGDBrq',
      'node_modules/http://ift.tt/1KReLA0',
      'node_modules/http://ift.tt/2anIl3w',
      'node_modules/http://ift.tt/2b8mEkP',

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

      // Paths loaded via module imports:
      // Angular itself
      {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},
      {pattern: 'systemjs.config.extras.js', included: false, watched: false},
      'karma-test-shim.js',

      // transpiled application & spec code paths loaded via module imports
      {pattern: appBase + '**/*.js', included: false, watched: true},
      {pattern: testBase + '**/*.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: appSrcBase + '**/*.ts', included: false, watched: false},
      {pattern: appBase + '**/*.js.map', included: false, watched: false},
      {pattern: testSrcBase + '**/*.ts', included: false, watched: false},
      {pattern: testBase + '**/*.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: {},
    // disabled HtmlReporter; suddenly crashing w/ strange socket error
    reporters: ['progress', 'kjhtml'],//'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: ['PhantomJS'],
    singleRun: false
  })
}

Karma shim

// #docregion
// /*global jasmine, __karma__, window*/
Error.stackTraceLimit = 0; // "No stacktrace"" is usually best for app testing.

// Uncomment to get full stacktrace output. Sometimes helpful, usually not.
// Error.stackTraceLimit = Infinity; //

jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;

var builtPath = '/base/app/';

__karma__.loaded = function () { };

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

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

function isBuiltFile(path) {
  return isJsFile(path) && (path.substr(0, builtPath.length) == builtPath);
}

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

System.config({
  baseURL: '/base',
  // Extend usual application package list with test folder
  packages: { 'testing': { main: 'index.js', defaultExtension: 'js' } },

  // Assume npm: is set in `paths` in systemjs.config
  // Map the angular testing umd bundles
  map: {
    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
    '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
    '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
    '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
    '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
  },
});

System.import('systemjs.config.js')
  .then(importSystemJsExtras)
  .then(initTestBed)
  .then(initTesting);

/** Optional SystemJS configuration extras. Keep going w/o it */
function importSystemJsExtras(){
  return System.import('systemjs.config.extras.js')
  .catch(function(reason) {
    console.log(
      'Warning: System.import could not load the optional "systemjs.config.extras.js". Did you omit it by accident? Continuing without it.'
    );
    console.log(reason);
  });
}

function initTestBed(){
  return Promise.all([
    System.import('@angular/core/testing'),
    System.import('@angular/platform-browser-dynamic/testing')
  ])

  .then(function (providers) {
    var coreTesting    = providers[0];
    var browserTesting = providers[1];

    coreTesting.TestBed.initTestEnvironment(
      browserTesting.BrowserDynamicTestingModule,
      browserTesting.platformBrowserDynamicTesting());
  })
}

// Import all spec files and start karma
function initTesting () {
    console.log("init testing");
  return Promise.all(
    allSpecFiles.map(function (moduleName) {

        console.log("module: "+moduleName);
      return System.import(moduleName);
    })
  )
  .then(__karma__.start, __karma__.error);
}

last but not least package.json

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "description": "QuickStart package.json from the documentation, supplemented with testing support",
  "scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    "docker-build": "docker build -t ng2-quickstart .",
    "docker": "npm run docker-build && docker run -it --rm -p 3000:3000 -p 3001:3001 ng2-quickstart",
    "pree2e": "npm run webdriver:update",
    "e2e": "tsc && concurrently \"http-server -s\" \"protractor protractor.config.js\" --kill-others --success first",
    "lint": "tslint ./app/**/*.ts -t verbose",
    "lite": "lite-server",
    "postinstall": "typings install",
    "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
    "test-once": "tsc && karma start karma.conf.js --single-run",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings",
    "webdriver:update": "webdriver-manager update"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "~2.0.1",
    "@angular/compiler": "~2.0.1",
    "@angular/core": "~2.0.1",
    "@angular/forms": "~2.0.1",
    "@angular/http": "~2.0.1",
    "@angular/platform-browser": "~2.0.1",
    "@angular/platform-browser-dynamic": "~2.0.1",
    "@angular/router": "~3.0.1",
    "@angular/upgrade": "~2.0.1",

    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.39",
    "zone.js": "^0.6.25",
    "angular2-in-memory-web-api": "0.0.20",
    "bootstrap": "^3.3.7"
  },
  "devDependencies": {
    "concurrently": "^3.0.0",
    "lite-server":"~2.2.2",
    "canonical-path": "0.0.2",
    "http-server": "^0.9.0",
    "tslint": "^3.15.1",
    "lodash": "^4.16.2",
    "jasmine-core": "~2.5.2",
    "karma": "^1.3.0",
    "karma-phantomjs-launcher": "^1.0.0",
    "karma-cli": "^1.0.1",
    "karma-htmlfile-reporter": "^0.3.4",
    "karma-jasmine": "^1.0.2",
    "karma-spec-reporter": "0.0.13",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "^3.3.0",
    "rimraf": "^2.5.4",
    "phantomjs-prebuilt": "^2.1.7",
    "typescript": "^2.0.3",
    "typings": "^1.4.0"
  }
}

Sorry for the amount of code but I can't seem to find the problem myself.

Aucun commentaire:

Enregistrer un commentaire