title: Angular Testing, dynamically change ActivatedRoute params for different test cases
body: <p>Component:</p>
  
  <pre><code>@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 =&gt; {
        if (p) {
          this.useCase = p.u;
        }
      });
    }
  }
  </code></pre>
  
  <p>Test Spec</p>
  
  <pre><code>describe('TestComponent', () =&gt; {
    let component: TestComponent;
    let fixture: ComponentFixture&lt;TestComponent&gt;;
  
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        imports: [
          AppModule
        ],
        providers: [
          { provide: ActivatedRoute, useValue: ??? }
        ]
      })
        .compileComponents();
    }));
  
    beforeEach(() =&gt; {
      fixture = TestBed.createComponent(TestComponent);
      component = fixture.componentInstance;
    });
  
    it('should create', () =&gt; {
      expect(component).toBeTruthy();
      expect(component.useCase).toBeFalsy();
    });
  
    it('should set useCase variable with query string value', () =&gt; {
      fixture.detectChanges();
      // Set different route.queryParams here...
      expect(component.useCase).toBe('success');
    });
  });
  </code></pre>
  
  <p>Using Angular 6, Karma and Jasmine for unit testing.</p>
  
  <p>I know we can set <code>ActivatedRoute</code> to an object that will be used through out this testing, as such:</p>
  
  <pre><code>providers: [
    { provide: ActivatedRoute, useValue: {
      queryParams: Observable.of({id: 123})
    } }
  ]
  </code></pre>
  
  <p>But this will set the values for all the test cases. Is there a way to dynamically change the <code>ActivatedRoute</code> in each different test case?</p>