Angular Testing, dynamically change ActivatedRoute params for different test cases

Question

Component:

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html'
})
export class TestComponent implements OnInit {
  useCase: string;

  constructor(
    private route: ActivatedRoute,
  ) {}

  ngOnInit() {
    this.route.queryParams.subscribe(p => {
      if (p) {
        this.useCase = p.u;
      }
    });
  }
}

Test Spec

describe('TestComponent', () => {
  let component: TestComponent;
  let fixture: ComponentFixture<TestComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        AppModule
      ],
      providers: [
        { provide: ActivatedRoute, useValue: ??? }
      ]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(TestComponent);
    component = fixture.componentInstance;
  });

  it('should create', () => {
    expect(component).toBeTruthy();
    expect(component.useCase).toBeFalsy();
  });

  it('should set useCase variable with query string value', () => {
    fixture.detectChanges();
    // Set different route.queryParams here...
    expect(component.useCase).toBe('success');
  });
});

Using Angular 6, Karma and Jasmine for unit testing.

I know we can set ActivatedRoute to an object that will be used through out this testing, as such:

providers: [
  { provide: ActivatedRoute, useValue: {
    queryParams: Observable.of({id: 123})
  } }
]

But this will set the values for all the test cases. Is there a way to dynamically change the ActivatedRoute in each different test case?

score 30 · Accepted Answer · edited Jul 23 '21 at 08:51

30

You can get it with TestBed.get(ActivatedRoute) in your it functions if you want to stock it in a variable. You can update value also.

From Karma v9.0.0 at the angular's newest versions the TestBed.get method is deprecated

edited Jul 23 '21 at 08:51

adrisons

3,443
3
32
48

answered Aug 21 '18 at 04:16

Suresh Kumar Ariya

9,516
1
18
27

10

Thanks Suresh! That works. It's as simple as `TestBed.get(ActivatedRoute).queryParams = of({ id: 1 });` – stack247 Aug 21 '18 at 16:29
you're a genius ^^ haha – Vitor Kevin Jul 22 '21 at 22:46
In Angular 14 (for example) use `TestBed.inject` in place of `TestBed.get`. – 500 - Internal Server Error Mar 23 '23 at 21:04

score 2 · Answer 2 · answered May 20 '22 at 19:01

Credit to Suresh for the correct answer, and to update it slightly as of Angular 9 TestBed.get is deprecated. The recommended approach is now

let activatedRoute: ActivatedRoute;
...
activatedRoute = TestBed.inject(ActivatedRoute);
activatedRoute.snapshot.params = { foo: 'bar' };

score 1 · Answer 3 · edited Jun 11 '21 at 18:46

1

if you are not using testBed then use this line of code:

in the beforeEach method, the activatedRoute mock should be defined as follows:

activatedRoute = {queryParams: of({id: 1})};

then in your it method, update the activatedRoute to:

activatedRoute.queryParams = of({id: 2})};

edited Jun 11 '21 at 18:46

IAfanasov

4,775
3
27
42

answered Jun 11 '21 at 14:24

Ashia Nagi

11
1

score 0 · Answer 4 · answered Jul 23 '21 at 12:57

There is an alternative with a stub class. Follow bellow the approach.

Declare a stub class

class ActivatedRouteStub {
    private _params = new Subject<any>();

    get params() {
        return this._params.asObservable();
    }

    public push(value) {
        this._params.next(value);
    }
}

In your beforeEach declare an alias for the activated route provider

beforeEach(waitForAsync(() => {
        TestBed.configureTestingModule({
            imports: [
                RouterTestingModule
            ],
            declarations: [YourComponentComponent],
            providers: [
                {
                    provide: ActivatedRoute,
                    useClass: ActivatedRouteStub
                }
            ]
        })
            .compileComponents();
    }));

And you can use it anywhere you desire. Bellow example in "it" test.

it('should show example, how to set parameters', () => {
        let spy = spyOn(router, 'navigate');
        
        // here we pass the any parameter for return and type the route variable with the stub class
        let route: ActivatedRouteStub = TestBed.inject<any>(ActivatedRoute);
        // you can push the parameters like you desire.
        route.push({id: 0})

        expect(spy).toHaveBeenCalledWith(['not-found'])
    });

Angular Testing, dynamically change ActivatedRoute params for different test cases

4 Answers4