jasmine angular 4 unit test router.url

Question

I am unit testing a function in angular 4 project using jasmine which a switch statement like mentioned below:

    switch(this.router.url) {

    case 'firstpath': {
               // some code
            }
        break;
    case 'secondpath': {
               // some more code
            }
       break;
    default:
        break;

    }

In my spec.ts file. I can't stub or change the value of router.url.I want my cases to execute but default is executing. I tried different ways to set or spyOn and return value, but everytime url is '/'. Every suggestion or solution will be welcomed.

Martin Nuc · Accepted Answer · 2021-03-05T22:51:52.347

36

First you need to mock router in your testing module:

TestBed.configureTestingModule({
  ...
  providers: [
    {
       provide: Router,
       useValue: {
          url: '/path'
       } // you could use also jasmine.createSpyObj() for methods
    } 
  ]
});

You can also change the url in the test and run your tested method:

const router = TestBed.inject(Router);
// @ts-ignore: force this private property value for testing.
router.url = '/path/to/anything';
// now you can run your tested method:
component.testedFunction();

As you mention spyOn doesnt work because it works only for methods/functions. But url is a property.

edited Mar 05 '21 at 22:51

answered Nov 15 '18 at 08:14

Martin Nuc

5,604
2
42
48

2

@martin you are my savior! I tried using `spyOnProperty(spyRouter, 'url', 'get').and.returnValue('test');` But it did not workout quiet so well. – jvoigt Mar 27 '19 at 09:58
6

I'm getting an error "TypeError: Cannot set property url of [object Object] which has only a getter" when using router.url = '/path/to/anything' – Christopher Grigg Jul 03 '19 at 05:45
1

TestBed should return `any` type so you shouldn't get this error. Maybe you do `const router: Router = TestBed.get(Router);` instead? – Martin Nuc Jul 21 '19 at 08:36
7

If you're getting the error that is in Christoper Grigg's comment the router may not be mocked our properly. You can try the `spyOnProperty` and use it as `spyOnProperty(router, 'url', 'get').and.returnValue('yourUrl')` – DrZoo Oct 03 '19 at 18:24
3

can we do similar thing using `RouterTestingModule` ? – Mohit Khandelwal May 08 '20 at 11:59
2

@MartinNuc,really thanks for your answer.It also solved my router juni test problem. – sawyinwaimon Nov 13 '20 at 00:38
1

`TestBed.get` is deprecated by `TestBed.Inject`. Unfortunately, the URL becomes get only when switching to `.Inject`. – Peter Jan 13 '21 at 08:03
1

@Peter You could probably always fall back to any: `(router as any).url = '/path/to/anything'; – Martin Nuc Mar 05 '21 at 22:48
1

Updated the answer to reflect on read-only property when using `TestBed.inject` on newer Angular versions. – Martin Nuc Mar 05 '21 at 22:52

score 7 · Answer 2 · answered Jan 26 '21 at 11:16

For people using Angular 9 and above property url is now a readonly property and so spyOnProperty will not work. It's also confusing as you won't get an error, but you won't see any "spying" either.

To solve this, use the following code:

const mockUrlTree = routerSpy.parseUrl('/mynewpath/myattribute');
// @ts-ignore: force this private property value for testing.
routerSpy.currentUrlTree = mockUrlTree;

Thanks to Rob on this post here for the answer:

https://stackoverflow.com/a/63623284/1774291

jasmine angular 4 unit test router.url

2 Answers2

Linked