Angular2 Tests Routerstub isnt used

Question

I want to test the right routing to another Component. I swap the original Router with my RouterStub, so my Spy can spy on 'navigateByUrl'. As I understand it, navigateByUrl should be overwritten, and the FakeMethod will be executed. The Test doesn't seem to use RouterStub, it still uses the normal Router. I declare to use RouterStub in vonfigureTestingModule - Providers. Any Idea Why? That is my test file:

 beforeEach(() => {
    TestBed.configureTestingModule({
        declarations: [
            InstructionsComponent,
            ClinicDataComponent, PatientDataComponent, ArchiveComponent,
            RouterLinkStubDirective
        ],
        imports: [RouterTestingModule.withRoutes([
            {path: 'instructions', component: InstructionsComponent},
            {path: 'patient-data', component: PatientDataComponent},
            {path: 'archive', component: ArchiveComponent}
        ])],
        providers: [
            {provide: Router, useClass: RouterStub}
        ]
    })
        fixture = TestBed.createComponent(InstructionsComponent);
        comp = fixture.componentInstance;
        fixture.detectChanges();
});

class RouterStub {
    navigateByUrl(url: string) {
      console.log("############  ROUTERSTUB ########## url : " + url);
      return url;
    }
}

And the Test:

    it('Should find html node', async(inject([Router], (router:RouterStub) => {
  fixture.whenStable()
    .then(() => {
      fixture.detectChanges();
      return fixture.whenStable();
    })
    .then(() => {
        let button = fixture.debugElement.query(By.css('button'));
        const spy = spyOn(router, 'navigateByUrl');
        button.triggerEventHandler('click',null);
        const navArgs = spy.calls.first().args[0];
        expect(true).toBe(true);
    });
})));

And the Component I want to test.

@Component({
selector: 'instructions',
templateUrl: './instructions.component.html',
styleUrls: ['./instructions.component.scss'],
providers: [InstructionsStepsService]
})

export class InstructionsComponent implements OnInit {
steps: InstructionStep[];

constructor(private instructionStepsService: InstructionsStepsService,
            private router: Router) {
}

getSteps(): void {
  console.log("getSTeps");
    this.instructionStepsService.getSteps().then(steps => this.steps = steps);
}

ngOnInit(): void {
    this.getSteps();
}

goto(link: string): void {
  console.log("GOTO ########   " + link +  "#######")
    let route: string = '/' + link;
    this.router.navigate([route]);
}
}

I'm really new to Angular2. Do you mean in the actual component? I add it in the constructor: constructor(private instructionStepsService: InstructionsStepsService, private router: Router){} — Andreas Burghardt, Nov 02 '16 at 13:28
That's the only way I could see the real `Router` being used. Other than that, how do you know the real router is being used? The way your test is set up, it _should_ use the stub. — Paul Samsotha, Nov 02 '16 at 13:40
No, I edited the Componends Code to the Question. The Routing works, so is there any need to have it in the decorator? — Andreas Burghardt, Nov 02 '16 at 13:41
But you're not calling `navigateByUrl` anywhere in your code — Paul Samsotha, Nov 02 '16 at 13:42
button.triggerEventHandler('click',null); calls goto in the Component. Where this.router.navitage([route]) is called (Which should call navigateByUrl ?). Found this way to test routing in the Angular2 Testing Documentation. — Andreas Burghardt, Nov 02 '16 at 14:46
thanks for pointing out the obvious. The Stub was used, and the Problem was the bad naming of 'navigateByUrl' . It should have been only 'navigate' — Andreas Burghardt, Nov 03 '16 at 10:10

Angular2 Tests Routerstub isnt used

0 Answers0