Testing Angular queryParams with Jasmine

Question

I want to be able to test the param being passed from one view to the other. I want to test to see if the param is there and that the param matches the mock test data I give it.

I'm quite new to unit tests, done a lot of reading into setting up the test in respect to the activated route and passing a param. I think the bit I am stuck on is the "expect". Its giving me an error

Argument of type '{ urn: string[]; }' is not assignable to parameter of type 'Expected<Observable<Params>>'

component

 export class SearchComponent implements OnInit {
  constructor(private route: ActivatedRoute, private router: Router) {
    this.getParam();
  }

  ngOnInit() {
  }

  getParam():void {
    this.route.queryParams.subscribe(params => {
      console.log(params["urn"]);
    });
}
}

spec

providers: [
        HttpClient,
        {
          provide: ActivatedRoute,
          useValue: {
            queryParams: of({
              urn: '123'
            })
          }
        }
      ],
...

  it('test queryParam in route', () => {
    const activatedRoute: ActivatedRoute = fixture.debugElement.injector.get(ActivatedRoute);

    activatedRoute.queryParams = of({ urn: '123' });

    fixture.detectChanges(); 
    //  tick();

    expect(activatedRoute.queryParams).toEqual({ urn: ['123'] }); // this line giving me trouble
  });

If anybody can give me a hand to see what I am doing wrong - here is the stackBlitz I came up with to demo

Arnaud Denoyelle · Accepted Answer · 2021-02-03 16:06:11Z

4

Here :

expect(activatedRoute.queryParams).toEqual({ urn: ['123'] })

activatedRoute.queryParams is not { urn: ['123'] } but an Observable that will fire this value.

You can test it like this :

  /*
    Notice the extra "done" parameter. It is a function that you must call
    to indicate that the test is finished.
    It is necessary because we are testing an asynchronous method.
    This will prevent the test from exiting until the "done" method is called.
    Also, the test will fail if the done method is not called within 5s by default.
  */                                
  it('test queryParam in route', (done) => {
    [...]

    activatedRoute.queryParams.subscribe((value) => {
      expect(value).toEqual({ urn: ['123'] })
      done();
    })

  });

edited Feb 3, 2021 at 16:06

answered Feb 3, 2021 at 14:06

Arnaud Denoyelle

31.5k18 gold badges106 silver badges161 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Tom Rudge Over a year ago

Thankyou - i didn't know about the "done" parameter. I hope somebody else finds this question and answer useful

Tom Rudge Over a year ago

the only issue I am getting is that "TypeError: Cannot read property 'subscribe' of undefined" - but I can see the value within the .subscribe is equal.

Arnaud Denoyelle Over a year ago

@TomRudge You would not reach the inside of the callback if activatedRoute.queryParams was undefined. I guess that this error comes from somewhere else. Do you have the line number or something to help you find where this error comes from ? Does it come from the .ts or from the spec.ts ?

Tom Rudge Over a year ago

stackoverflow.com/questions/66034837/…

Tom Rudge Over a year ago

it was unrelated @Arnaud but you could still help?

mrOak · Accepted Answer · 2023-01-27 20:10:57Z

0

Adding since this was the top result when searching angular test query params jest

If you are using const { params: { id } } = this.route.snapshot in your component. You should also define your mockActivatedRoute containing snapshot property

const mockActivatedRoute = { snapshot: { params: of({ id: 'test-id' })} }; otherwise you might get an error similar to TypeError: Cannot read property 'params' of undefined

answered Jan 27, 2023 at 20:10

mrOak

3836 silver badges13 bronze badges

Collectives™ on Stack Overflow

Testing Angular queryParams with Jasmine

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related