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?

Answer 1

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

Answer 2

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})};

Answer 3

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' };