title: How to unit test 'navigate' with Query Params in Angular?
body: <p>This is my method in the component.</p>
  
  <pre><code> editThis(id) {
      this.router.navigate(['/categories/edit'], { queryParams: { id: id } });
    }
  </code></pre>
  
  <p>This is my unit test-case.</p>
  
  <pre><code>fit('should call navigate with correct params', () =&gt; {
      component.editThis("5c7d5fde213e25232864dbe0");
      expect(new MockRouter().navigate).toHaveBeenCalledWith(['/categories/edit'], { queryParams: { id: "5c7d5fde213e25232864dbe0" } });
    });
  </code></pre>
  
  <p>This is the mocked router.</p>
  
  <pre><code>class MockRouter {
    navigateByUrl(url: string) { return url; }
    navigate = jasmine.createSpy('navigate');
  
  }
  </code></pre>
  
  <p>I am getting this error.</p>
  
  <blockquote>
    <p>Expected spy navigate to have been called with [ [ '/categories/edit'
    ], Object({ queryParams: Object({ id: '5c7d5fde213e25232864dbe0' }) })
    ] but it was never called.</p>
  </blockquote>
  
  <p>Can you suggest me a way to test the method?</p>
  
  <p>Full test code.</p>
  
  <pre><code>import { FacadeService } from './../../../services/facade.service';
  import { HttpClientModule } from '@angular/common/http';
  import { AngularFontAwesomeModule } from 'angular-font-awesome';
  import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  
  import { CategoriesViewComponent } from './categories-view.component';
  import { RouterTestingModule } from '@angular/router/testing';
  import { Observable, of } from 'rxjs';
  import { Router } from '@angular/router';
  
  var allCategories = [
  
    {
      "_id": "5c7d5fde213e25232864dbe0",
      "name": "Politics",
      "updatedAt": "2019-03-04T17:26:54.262Z",
      "createdAt": "2019-03-04T17:26:54.262Z",
      "__v": 0
    }
  ];
  
  class MockRouter {
    navigateByUrl(url: string) { return url; }
    navigate = jasmine.createSpy('navigate');
  
  }
  
  class MockedFacadeService {
    getUserDataFromLocalStorage() {
      return false;
    }
    getGuestPermissionsFromLocalStorage() {
      return { "comments": { "create": false, "read": true, "update": false, "deleteAny": false, "delete": false }, "post": { "create": false, "read": true, "update": false, "delete": false, "like": false, "dislike": false }, "category": { "create": false, "read": true, "update": false, "delete": false } };
    }
    getCategories() {
      return of(allCategories);
    }
  }
  
  describe('CategoriesViewComponent', () =&gt; {
    let component: CategoriesViewComponent;
    let fixture: ComponentFixture&lt;CategoriesViewComponent&gt;;
  
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        imports: [AngularFontAwesomeModule, RouterTestingModule, HttpClientModule],
        declarations: [CategoriesViewComponent],
        providers: [{ provide: FacadeService, useClass: MockedFacadeService },
        { provide: Router, useClass: MockRouter }]
      })
        .compileComponents();
    }));
  
    beforeEach(() =&gt; {
      fixture = TestBed.createComponent(CategoriesViewComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });
  
    fit('should create', () =&gt; {
      expect(component).toBeTruthy();
    });
  
    fit('should call navigate with correct params', () =&gt; {
      component.editThis("5c7d5fde213e25232864dbe0");
      expect(new MockRouter().navigate).toHaveBeenCalledWith(['/categories/edit'], { queryParams: { id: "5c7d5fde213e25232864dbe0" } });
    });
  
  });
  </code></pre>