router will not work in current configuration about angular-seed

[ludohenin]

@butterfieldcons you should try it like this @Inject(Router) router: Router. Inject is exported by angular2/angular2

Still getting an error. Also tried with the forwardRef syntax. I have no doubt it would work outside karma/jasmin with angular bootstrap, but got to have a tests!!!!! Everything else works except the Router. Thanks.

Chrome 45.0.2454 (Windows 7 0.0.0): Executed 1 of 4 SUCCESS (0 secs / 0.003 secs
Chrome 45.0.2454 (Windows 7 0.0.0) About component should work FAILED
        Error: Timeout - Async callback was not invoked within timeout specified
 by jasmine.DEFAULT_TIMEOUT_INTERVAL.

import {Component, View, NgFor, Inject} from 'angular2/angular2';
import {Router} from 'angular2/router';
import {NamesList} from '../../services/NameList';
import { forwardRef, Binding } from 'angular2/di';
@Component({
  selector: 'about'
})
@View({
  templateUrl: './components/about/about.html?v=<%= VERSION %>',
  directives: [NgFor]
})
export class About {
    router: Router;
  constructor(public list: NamesList, @Inject(Router) router: Router) {
      this.router = router;
  }
  addName(newname) {
    this.list.add(newname.value);
    newname.value = '';
  }
}

[ludohenin]

Will have a look at it, but something like this (router test) binded to the rootTestComponent might solve the problem.

Ok thanks, traced bindings.js - the pic below shows it failing. This scenario occurs when I did this in the spec. using the @Inject(Router) in the about.ts just fails outright with no error (which would work in a type angular2 bootstrap(ed) application.

@Component({selector: 'test-cmp', bindings: [NamesList, Router]})

Guessing something like this is what is needed. I'll give it a try early tonight since I'm going somewhere for the day. Seems simple enough, just need to figure out how to work with 'bootstrap' along with the 'TestComponentBuilder'. This code is from route_config_spec.ts under the test/router folder.

import {
  AsyncTestCompleter,
  beforeEach,
  ddescribe,
  describe,
  expect,
  iit,
  inject,
  it,
  xdescribe,
  xit,
} from 'angular2/test_lib';

import {bootstrap} from 'angular2/bootstrap';
import {Component, Directive, View} from 'angular2/metadata';
import {DOM} from 'angular2/src/dom/dom_adapter';
import {bind} from 'angular2/di';
import {DOCUMENT} from 'angular2/src/render/render';
import {Type} from 'angular2/src/facade/lang';

import {
  ROUTER_BINDINGS,
  Router,
  RouteConfig,
  APP_BASE_HREF,
  ROUTER_DIRECTIVES
} from 'angular2/router';

import {ExceptionHandler} from 'angular2/src/core/exception_handler';
import {LocationStrategy} from 'angular2/src/router/location_strategy';
import {MockLocationStrategy} from 'angular2/src/mock/mock_location_strategy';

class _ArrayLogger {
  res: any[] = [];
  log(s: any): void { this.res.push(s); }
  logGroup(s: any): void { this.res.push(s); }
  logGroupEnd(){};
}

export function main() {
  describe('RouteConfig with POJO arguments', () => {
    var fakeDoc, el, testBindings;
    beforeEach(() => {
      fakeDoc = DOM.createHtmlDocument();
      el = DOM.createElement('app-cmp', fakeDoc);
      DOM.appendChild(fakeDoc.body, el);
      var logger = new _ArrayLogger();
      var exceptionHandler = new ExceptionHandler(logger, true);
      testBindings = [
        ROUTER_BINDINGS,
        bind(LocationStrategy).toClass(MockLocationStrategy),
        bind(DOCUMENT).toValue(fakeDoc),
        bind(ExceptionHandler).toValue(exceptionHandler)
      ];
    });

    it('should bootstrap an app with a hierarchy', inject([AsyncTestCompleter], (async) => {
         bootstrap(HierarchyAppCmp, testBindings)
             .then((applicationRef) => {
               var router = applicationRef.hostComponent.router;
               router.subscribe((_) => {
                 expect(el).toHaveText('root { parent { hello } }');
                 expect(applicationRef.hostComponent.location.path()).toEqual('/parent/child');
                 async.done();
               });
               router.navigate('/parent/child');
             });
       }), 1000);

Couldn't get the above working.....same darn binding error...DI doesn't see the router.

[ludohenin]

I've added support for unit test using router in test_router branch (home component). Import part is still maybe to be cleaned-up.

Hi,
So far working fine. Really appreciate your time. Sometimes we/I really need a direction; as you know plowing through source code can take a quite a bit of time. I was close, but was looking at bootstrapping the router, but honestly I was not sure of how all the pieces went together. For example, I was having problems with the location. Also, I didn't realize that ROUTER_DIRECTIVES had to be a part of the actual about.ts file (I was trying to put them in the dummy spec component).

For others reading this, this is a nice link which discusses the above solution although ludohenin (Ludovic Henin) does a nice job at putting it all together in the testing framework. The link --> http://blog.thoughtram.io/angular/2015/06/16/routing-in-angular-2.html