javascript - run - unit test angular 4

Problemas de Karma/Jasmine con el Proyecto Angular2

Question

Tengo un proyecto que se ve así:

Estoy tratando de hacer que Karma / Jasmine funcione como el marco de prueba. Intenté replicar este proyecto: https://github.com/juliemr/ng2-test-seed , modificándolo a mis necesidades. Tengo una prueba simulada en la carpeta de test que estoy tratando de ejecutar. Sin embargo, cuando trato de hacer la npm run test esto es lo que obtengo:

No estoy seguro de si mis rutas de archivos son correctas en karma-test-shim.js / karma.conf.js ya que todavía soy relativamente nuevo para trabajar con proyectos de npm / node.

Aquí está mi karma-test-shim.js (las rutas de archivos se encuentran en var moduleName y 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);
}

Y mi 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
  })
}

Y 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/[email protected]",
      "traceur-runtime": "github:jmcriffey/[email protected]",
      "typescript": "npm:typescript@^1.8.9"
    }
  }
}

¿Alguien puede descubrir dónde me estoy equivocando?

Answer 1

Parece que no tienes un nivel src en tu estructura de proyecto. Entonces usas esto en tu archivo 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) {
          (...)
        }, {})
      }
    }
});

También agregaría una tarea de pretest previa en su archivo package.json para compilar sus archivos de TypeScript antes de ejecutar Karma. Algo como eso:

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

Answer 2

Terminé haciendo que funcionara, resulta que estaba haciendo el pedido de construir módulos / ejecutar pruebas incorrectamente.

Aquí está la configuración actual, tengo archivos .spec.js dentro de cada equivalente .ts/.js :

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

Con 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 un gulpfile.js para compilar archivos ts (ejemplo):

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

Pasos:

1. Compilar archivos .ts
2. Crear archivos .spec.js con pruebas
3. ejecutar karma start karma.conf.js