angular 2 testing componnet with directives and got error router loading

everyone. I try to test angular 2 application and got some interesting error when I try to test component with directives (and in those directive-components – router is included). Got error from Karma:

Error loading http://localhost:9876/angular2/router as “angular2/router” from D:built/application/breadcrumbs/breadcrumbs.component.js .

I don`t know what to do with this issue. Can anybody help me please?

There is my header component test (via jasmine and Karma):

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

import {HeaderComponent} from './header.component';
import {BreadcrumbsComponent} from '../../breadcrumbs/breadcrumbs.component';

describe('HeaderComponent Tests', () => {
  //let HeaderComponent: HeaderComponent;

  beforeEachProviders(() => [HeaderComponent,
    BreadcrumbsComponent,
    ROUTER_PROVIDERS]);

  it('Should contains title property - "Header"', inject([HeaderComponent],
    (headerComponent: HeaderComponent) => {
      expect(headerComponent.title).toBe('Header');
    }));

});

There is header component that I try to test.

 import {Component} from 'angular2/core';

import {HeaderDataInterface} from './header.component.interfaces';
import {BreadcrumbsComponent} from '../../breadcrumbs/breadcrumbs.component';
import {SearchComponent} from '../../../modules/search/search.component';

// module path. Created for avoid copy/paste
const BUILT_MODULE_PATH: string = '/built/application/partials/header/';


@Component({
  selector: 'cgm_header',
  templateUrl: `${BUILT_MODULE_PATH}header.component.html`,
  directives: [BreadcrumbsComponent, SearchComponent],
  styleUrls: [`..${BUILT_MODULE_PATH}header.component.css`],
})


export class HeaderComponent {
  public title: string = 'Header';

  // contains header data
  public headerData: HeaderDataInterface = {
    'searchPlaceholder': 'Search for Patient Name, MRN or MPID...',
    'logOutLabel': 'Log out'
  };
}

There is breadcrumb component

import {ROUTER_DIRECTIVES, Router} from 'angular2/router';
const builtModulePath: string = '/built/application/breadcrumbs/';

@Component({
  selector: 'sgm_breadcrumbs',
  templateUrl: `${builtModulePath}breadcrumbs.component.html`,
  styleUrls: [`..${builtModulePath}breadcrumbs.component.css`],
  directives: [ROUTER_DIRECTIVES]
})

export class BreadcrumbsComponent implements OnInit {
  private staticData = {
    'title': 'Breadcrumbs',
    'homeName': 'Home',
    'dashboardName': 'Dashboard'
  }

constructor(private _router: Router, private _injector: Injector) { }

}

  ngOnInit() {
    this._router.subscribe((value) => {
      let instructions = [];

      //console.log(this._router);
      this._router.recognize(value).then(instruction => {
        this.handleRouterRecognize(instruction);


      });

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

update

<script src="https://code.angularjs.org/2.0.0-beta.14/router.dev.js"></script>

is missing in index.html Plunker example

original

Try without templateUrl (use template instead). There were some related issues especially with async tests.

To set up tests use

// Somewhere in the test setup
import {setBaseTestProviders} from 'angular2/testing';
import {
  TEST_BROWSER_PLATFORM_PROVIDERS,
  TEST_BROWSER_APPLICATION_PROVIDERS
} from 'angular2/platform/testing/browser';
setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS,
                     TEST_BROWSER_APPLICATION_PROVIDERS);

See also https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta2-2016-01-28