角单元测试：this.router.myMethod不是函数

Question

Am worrking on unit testing , under Angular 4.0.0

My test case is the following :

test.spec.ts :

        // Test Suite of Que-Again features
            describe('QueueAgainComponent features', () => {

                it('should navigate', () => {
                    comp.goToPrevious(); // HERE IS THE PROBLEM
                    expect(mockRouter.navigate).toHaveBeenCalledWith(['/home/pilote'], {skipLocationChange: true});
                    sharedclientService.user.isAdviser = true;
                    comp.goToPrevious();
                    expect(mockRouter.navigate).toHaveBeenCalledWith(['/home/advisor'], {skipLocationChange: true}); 
       });

Under the config part i ve mocked my RouteNavigator service like the following :

        let mockRouter = {
            navigate: jasmine.createSpy('navigate')
        };
    providers: [{provide: RouteNavigator, useValue: mockRouter}]

My test fails throwing tghis error :

TypeError: this.router.myMethod is not a function

The log file says that the problem points on 98:18 which is exactly this line :

comp.goToPrevious();

Therefore goToPrevious() is implemented in my component like this :

      goToPrevious() {
        this.routeNavigator.myMethod();
      }

And routeNavigator refers to a custom service used to deal with custom redirection , like this :

**Route-navigator.service.ts**
    import { LoginComponent } from '../../login/login.component';
    import { SharedclientService } from '../../service/sharedclient.service';
    import { Injectable } from '@angular/core';
    import { Router, ActivatedRoute } from '@angular/router';

    @Injectable()
    export class RouteNavigator {
      constructor(private router: Router, private sharedclientService: SharedclientService, private activatedRoute: ActivatedRoute) { }

      accessAdvancedSearchFromRegistration = false;
      accessSyntheseWhileGdfaShown = false;
      track360View = false;
      oldUrl: string;

      private rdvReferer: string;
      public navigateTo(url: string) {
        this.oldUrl = this.router.url;
        this.router.navigate([url], { skipLocationChange: true });
      }

      public myMethod()  // HERE IS MY METHOD
     {

        if(this.sharedclientService.user != null && this.sharedclientService.user.isAdviser==null){
            this.navigateTo('/home/blank');
            this.sharedclientService.setCurrentRole('');
        }

        else  if (this.sharedclientService.user != null && this.sharedclientService.user.isAdviser) {
          this.navigateTo('/home/advisor');
          this.sharedclientService.setCurrentRole('VENDEUR');
        } else {
          this.navigateTo('/home/pilote');
          this.sharedclientService.setCurrentRole('PILOTE');
        }
      }

      public goToNextAdvancedSearch() {
        if (this.accessAdvancedSearchFromRegistration || !this.sharedclientService.user.isAdviser) {
          this.navigateTo('/home/registration');
        }
        else {
          this.track360View = true;
          this.navigateTo('/home/view-360');
        }
      }

      public exitAdvancedSearch() {
        if (this.accessAdvancedSearchFromRegistration) {
          this.navigateTo('/home/registration');
        }
        else {
          this.goToHomeAccordingToProfile();
        }
      }

      goToRdv(url?:string) {
          if(!url)
        this.rdvReferer = this.router.url;
          else this.rdvReferer=url;
        this.navigateTo('/home/appointment');
      }

      exitRdv() {
        this.navigateTo(this.rdvReferer);
      }
      goToBlank() {
          this.navigateTo('/home/blank');
        }
      public url() {
        return this.router.url;
      }
     }

Any ideas about what's the problem or how to deal whith it ??

Answer 1

Because in goToPrevious() you use this.router.myMethod();

Unless you expanded the router, I don't have knowledge of this in the Router module of Angular !

EDIT your mock should contain this :

let mockRouter = {
  navigate: jasmine.createSpy('navigate'),
  myMethod: () => {/* mock it as you want here */}
};
providers: [{provide: RouteNavigator, useValue: mockRouter}]