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 '/'
-
2can you provide more details what are trying to do , from description it is not very clear what exactly you want to do.pritesh agrawal– pritesh agrawal2017-09-18 05:18:33 +00:00Commented Sep 18, 2017 at 5:18
-
show Your codesSalim Ibrohimi– Salim Ibrohimi2017-09-18 05:39:26 +00:00Commented Sep 18, 2017 at 5:39
Add a comment
|
4 Answers
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;
4 Comments
Alex Ryltsov
This is the only solution that worked for me, when both, RouterTestingModule and router.url are used in unit tests
PeterS
This answer needs more upvotes if you are using a later version of Angular then the other answers will not work.
Andrei Fara
Not possible anymore in Angular 17, currentUrlTree is readonly as well.
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
});
1 Comment
kodeaben
If it needs further explaining, please let me know :)
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.
Comments
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();
1 Comment
Mohit Khandelwal
I am getting an error
cannot assign to 'url' bacause its a constant property