lundi 4 avril 2016

Angular2 Unit Testing with Karma on Travis CI

Travis Unit Tests not being reported. I am running Jasmine Unit tests with the Karma Test Runner. Here is my Gulp Task definition and here is the full Github repo.

karma.conf.js:

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

    basePath: '',

    frameworks: ['jasmine'],

    files: [
      // paths loaded by Karma
      {pattern: 'node_modules/systemjs/dist/system.js', included: true, watched: true},
      {pattern: 'node_modules/rxjs/bundles/Rx.js', included: true, watched: true},
      {pattern: 'node_modules/angular2/bundles/angular2-polyfills.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},
      {pattern: 'node_modules/traceur/bin/traceur.js', included: true, watched: true},

      // paths loaded via module imports
      {pattern: 'client/dev/**/*.js', included: false, watched: true},

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

      // paths to support debugging with source maps in dev tools
      {pattern: 'client/dev/**/*.ts', included: false, watched: false},
      {pattern: 'client/dev/**/*.js.map', included: false, watched: false},

      {pattern: 'tests/**/*_test.js', included: false, watched: false}
    ],
    // list of files to exclude
    exclude: [
      'node_modules/angular2/**/*_spec.js'
    ],
    // proxied base paths
    proxies: {
      // required for component assests fetched by Angular's compiler
      "/client/dev/": "/client/dev/"
    },

    customLaunchers: {
      Chrome_travis_ci: {
        base: 'Chrome',
        flags: ['--no-sandbox']
      }
    },

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

  if (process.env.TRAVIS) {
    config.browsers = ['Chrome_travis_ci'];
  }
}

and here's my todo.component test spec:

import {
  it,
  expect,
  describe,
  inject,
  injectAsync,
  TestComponentBuilder,
  beforeEachProviders
} from 'angular2/testing';

import {
  provide
} from 'angular2/core';

import {
  Observable
} from 'rxjs/Observable';

import {setBaseTestProviders} from 'angular2/testing';

import {
  TEST_BROWSER_PLATFORM_PROVIDERS,
  TEST_BROWSER_APPLICATION_PROVIDERS
} from 'angular2/platform/testing/browser';

import {TodoComponent} from '../../../../client/dev/todo/components/todo.component';
import {TodoService} from '../../../../client/dev/todo/services/todo.service';

class MockTodoService extends TodoService {
  getAll():Observable<any> {
    return new Observable((o) => {
      o.next([]);
    })
  }

  add(message: string):Observable<any> {
    return new Observable((o) => {
      o.next(message);
    });
  }

  remove(id: string):Observable<any> {
    return new Observable((o) => {
      o.next(id);
    });
  }
}

describe('todo_component', () => {
  setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS);

  beforeEachProviders(() => [provide(TodoService, {useClass: MockTodoService})]);

  describe('creation', () => {
    it('should create the component correctly', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
      return tcb.createAsync(TodoComponent).then((fixture) => {
        fixture.detectChanges();

        let compiled = fixture.debugElement.nativeElement;

        expect(compiled).toBeDefined();
      });
    }));

    it('should inicialize the cmp correctly', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
      return tcb.createAsync(TodoComponent).then((fixture) => {
        let instance = fixture.debugElement.componentInstance;

        spyOn(instance, '_getAll').and.callFake(() => {});

        fixture.detectChanges();

        expect(instance._getAll).toHaveBeenCalled();
      });
    }));

    it('should call add correctly', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
      return tcb.createAsync(TodoComponent).then((fixture) => {
        fixture.detectChanges();

        let instance = fixture.debugElement.componentInstance;

        let _todoMsg = 'yo';

        instance.add(_todoMsg);
      });
    }));

    it('should call remove correctly', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
      return tcb.createAsync(TodoComponent).then((fixture) => {
        fixture.detectChanges();

        let instance = fixture.debugElement.componentInstance;

        let _id = 'abc123';

        instance.remove(_id);
      });
    }));
  });
});

The build has been successful, but this is one of the reported log lines, which I think means the test aren't running. Any idea why?

12:36:45] Starting 'client.unit_test'...

04 04 2016 12:36:45.219:WARN [watcher]: Pattern "/home/travis/build/georgeedwards/Gen-App/node_modules/traceur/bin/traceur.js" does not match any file.

04 04 2016 12:36:45.269:INFO [karma]: Karma v0.13.22 server started at http://localhost:9876/

04 04 2016 12:36:45.273:INFO [launcher]: Starting browser Chrome

04 04 2016 12:36:46.353:INFO [Chrome 49.0.2623 (Linux 0.0.0)]: Connected on socket /#Nv33hAoNRPKgPeD_AAAA with id 88403610

04 04 2016 12:36:46.559:WARN [web-server]: 404: /base/client/dev/todo/components/todo.component

04 04 2016 12:36:46.560:WARN [web-server]: 404: /base/client/dev/todo/services/todo.service

04 04 2016 12:36:46.809:WARN [web-server]: 404: /traceur

Missing error handler on socket.

TypeError: (msg || "").replace is not a function

Oh, and here is the full Travis build log.

Any tips for how to debug this further would also be appreciated. Thanks.

Aucun commentaire:

Enregistrer un commentaire