¿Escribiendo la prueba unitaria más básica en Angular 2?


Problema: Tan pronto como importe Angular 2 en un archivo ninguna de mis pruebas ejecuta.

Pregunta: ¿Cómo puedo configurar mi karma para admitir angular two para que mi prueba pase correctamente?

O Pregunta: ¿Cómo puedo configurar cualquier marco de prueba con angular2 escrito en es6?

Git Repo (asegúrate de estar en la rama angular-2

Karma:

// Karma configuration
// Generated on Mon Jun 01 2015 14:16:41 GMT-0700 (PDT)

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

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jspm', 'jasmine'],


    // list of files / patterns to load in the browser
     jspm: {
        loadFiles: [
            'client/app/**/*.js'
        ]
    },


    // list of files to exclude

    plugins:[
            'karma-jasmine',
            'karma-coverage',
            'karma-jspm',
            'karma-chrome-launcher'
        ],


    // list of files to exclude
    exclude: [
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: true
  });
};

JS:

"use strict";
import {ComponentAnnotation as Component, ViewAnnotation as View} from 'angular2/angular2';
import List from './list/list';

//@Component({selector: 'my-app'})
//@View({template: `<h1>{{title}}</h1>`})
class Todo{
    constructor(){
        this.title = 'Gym';
        this.list = [new List()];

    }

    setTitle(newTitle){
        this.title = newTitle;
    }
    addListItem(){
        this.list.push(new List());
    }
    removeListItem(){
        this.list.pop();
    }

}
export default Todo;

Todo.spec.js:

import Todo from './todo';
describe('Todo list:', function(){
    var todo;
    beforeEach(function(){
        todo = new Todo();
    });

    it('expect Todo to be present', function(){
        expect(todo).not.toBe(null);
    });

    it('expect Todo constructor to accept a title', function(){
         expect(todo.title).toEqual('Gym');
    });

    it('expect Todo List property to be Present', function(){
        expect(todo.list).not.toBe(null);
    })

    it('expect Todo List property to accept a title:empty', function(){

         expect(todo.list[0].title).toEqual('empty');
    });

    it('expect Todo Title property to accept a title change', function(){
         todo.setTitle('Work');
         expect(todo.title).toEqual('Work');
    });

    it('expect Todo List property to have an add function', function(){
         todo.addListItem();
         expect(todo.list.length).toEqual(2);
    });

    it('expect Todo to have a remove function', function(){
         todo.removeListItem();
         expect(todo.list.length).toEqual(0);
    })

});

Errores Esperados:

$ karma start
INFO [karma]: Karma v0.12.36 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
WARN [web-server]: 404: /favicon.ico
INFO [Chrome 43.0.2357 (Mac OS X 10.10.3)]: Connected on socket 31YT5XsHM29BDG8sYXSq with id 13157663
Chrome 43.0.2357 (Mac OS X 10.10.3): Executed 0 of 0 ERROR (0.002 secs / 0 secs)

Si elimino angular import for Todo.js

$ karma start
INFO [karma]: Karma v0.12.36 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
WARN [web-server]: 404: /favicon.ico
INFO [Chrome 43.0.2357 (Mac OS X 10.10.3)]: Connected on socket 7QKCB-7aTRwNsOGfYjmG with id 71239348
Chrome 43.0.2357 (Mac OS X 10.10.3): Executed 7 of 7 SUCCESS (0.008 secs / 0.005 secs)

ACTUALIZACIÓN DE GITTER:

@matthewharwood intente cargar el archivo ng2 incluido en su sección de archivos de carga de jspm. con el plugin karma-jspm puede especificar rutas personalizadas, por lo que puede anular el angular / angular ruta para apuntar a ese único archivo incluido. hizo que nuestras pruebas fueran mucho más fáciles. también tuve que incluir el preprocesador karma babel y ejecutar mi código a través de eso.

Desafortunadamente no puedo hacer que los archivos de carga funcionen correctamente: c

Author: Matthew Harwood, 2015-06-12

1 answers

Después de abrir la página de depuración, pudo ver que angular le estaba diciendo que le faltaba el paquete reflect-metadata. Así que agregué una instrucción de importación manual, para ello en app/todo/todo.js que resolvió el problema:

import Reflect from 'reflect-metadata'
import {ComponentAnnotation as Component, ViewAnnotation as View} from 'angular2/angular2';
import List from './list/list';

Mi salida es ahora:

node_modules/.bin/karma start --single-run
INFO [karma]: Karma v0.12.36 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
WARN [web-server]: 404: /favicon.ico
INFO [Chrome 43.0.2357 (Mac OS X 10.10.3)]: Connected on socket cGnqva8p5bf-j7L2EVzI with id 94803307
Chrome 43.0.2357 (Mac OS X 10.10.3): Executed 7 of 7 SUCCESS (0.005 secs / 0.004 secs)
 9
Author: dignifiedquire,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-06-17 10:32:27