Angular 4 - router.url unit testing

Question

How do I mock router.url in angular 4 unit testing?

I use router.url in ngOnint in my component but in my test the value for router.url is '/'

Pampuch

can you provide more details what are trying to do , from description it is not very clear what exactly you want to do. – Hankhanke

show Your codes – Edrick

Answer 1

In Angular v9 Router.url is a readonly getter property. You can force the private property value to set the url property:

    const mockUrlTree = router.parseUrl('/heroes/captain-marvel');
    // @ts-ignore: force this private property value for testing.
    router.currentUrlTree = mockUrlTree;

Chaldron

This is the only solution that worked for me, when both, RouterTestingModule and router.url are used in unit tests – Tm

This answer needs more upvotes if you are using a later version of Angular then the other answers will not work. – Toogood

Not possible anymore in Angular 17, currentUrlTree is readonly as well. – Galagalactagogue

The problem isn't that currentUrlTree is readonly. The problem is it is now also a getter. The raw value is now buried in another Service that isn't end user accessible – Chaldron

Answer 2

you could use jasmine spyObj. In you TestBed:

providers:[
 {
 provide: Router,
 usevalue: jasmine.createSpyObj('Router',['methodOne','methodTwo]),
 },
],

in beforeEach:

router = fixture.debugElement.injector.get(Router);

in the test:

it('should...', ()=> {
 (router.methodOne as Spy).and.returnValue(whateverValue)// if you wanna mock the response
});

Ventriloquy

If it needs further explaining, please let me know :) – Ventriloquy

Answer 3

I have had to move from some of the suggested solutions used here during my migration to Angular 17. Inside the TestBed Configuration, provide some test routes:

imports: [
    RouterTestingModule.withRoutes([
      { path: '', component: YourComponent },
      { path: 'page', component: YourComponent },
      { path: 'page/fail', component: YourComponent },
      { path: 'etc', component: YourComponent },
      { path: '**', redirectTo: '' }
    ])
  ]

Then in your actual test, it can be configured as the following:

it('should return true if url ends with page', async () => {
  // Arrange
  const expected = true;
  await component['router'].navigate(['page']);

  // Act
  const actual = component.isPage();

  // Assert
  expect(actual).toEqual(expected);
});

This may not be ideal, but now that the properties we have been relying on until now are readonly, I'm not aware of any other path forward for the moment.

Shrine

Answer 4

This sounds like a solution jasmine angular 4 unit test router.url

const router = TestBed.get(Router);
router.url = '/path/to/anything';
// now you can run your tested method:
component.ngOnint();

Selfconscious

I am getting an error cannot assign to 'url' bacause its a constant property – Kingfisher