Angular Unit Tests - how to mock router.url

Question

I have an angular 6 application and I am trying to unit test a component where I inject the Router. In my ngOnInit method I reference this.router.url and work with it.

So now I am attempting to write a jasmine unit test and I cannot set the router.url property because it "is a constant ot read only property". I am currently mocking the router like this.

mockRouter = jasmine.createSpyObj<Router>("router", ["navigate", "navigateByUrl"]);

What else do I need to set to properly mock the url value in my test?

Answer 1

Jasmine spy on property should be reasonable solution

spyOnProperty(router, 'url', 'get').and.returnValue('/users');

as recommended here https://stackoverflow.com/a/43793575/11552394

and documented in Jasmine docs https://jasmine.github.io/api/3.4/global.html#spyOnProperty

Answer 2

this is what worked for me:

describe('Yourserviceorcomponent', () => {

...

let router: Router;

...

beforeEach(() => {
TestBed.configureTestingModule({
  providers: [
    {
      provide: Router,
      useValue: {
        url: '/page1',
        events: of(new NavigationEnd(0, '/page1', '/')),
        navigate: jasmine.createSpy('navigate'),
      },
    },
  ],
  imports: [RouterTestingModule],
}).compileComponents();

router = TestBed.inject(Router);

MockRender();
});
...
});