title: Testing a component, which depends on a route param
body: <p>I have a question about testing a routed component in angular2.</p>
  
  <p>Here is a simple component, which depends on a route with a parameter <code>'foo'</code>. The attribute <code>foo</code> in the component will be set to the value of the parameter.</p>
  
  <pre><code>import {Component, OnInit} from '@angular/core';
  import {ActivatedRoute, Params} from '@angular/router';
  
  @Component({
      selector: 'my-component',
      templateUrl: './my-component.html'
  })
  export class MyComponent implements OnInit
  {
      foo: string;
  
      constructor(
          private route: ActivatedRoute
      )
      {
      }
  
      ngOnInit()
      {
          this.route.params.subscribe((params: Params) =&gt; {
              this.foo = params['foo'];
          });
      }
  }
  </code></pre>
  
  <p>Now I want to test, that if the component will be created with the route, the param will be set correctly. So somewhere I want to have <code>expect(component.foo).toBe('3');</code>.</p>
  
  <pre><code>import {TestBed, ComponentFixture, async} from '@angular/core/testing';
  import {DebugElement} from '@angular/core';
  import {By} from '@angular/platform-browser';
  import {Params, ActivatedRoute} from '@angular/router';
  
  import {Observable} from 'rxjs';
  
  import {MyComponent} from './MyComponent';
  
  describe('MyComponent', () =&gt; {
      let mockParams, mockActivatedRoute;
  
      let component: MyComponent;
      let fixture: ComponentFixture&lt;MyComponent&gt;;
      let debugElement: DebugElement;
      let element: HTMLElement;
  
      beforeEach(async(() =&gt; {
          mockParams = Observable.of&lt;Params&gt;({foo: '3'});
          mockActivatedRoute = {params: mockParams};
  
          TestBed.configureTestingModule({
              declarations: [
                  MyComponent
              ],
              providers: [
                  {provide: ActivatedRoute, useValue: mockActivatedRoute}
              ]
          }).compileComponents();
      }));
  
      beforeEach(() =&gt; {
          fixture = TestBed.createComponent(MyComponent);
          component = fixture.componentInstance;
  
          debugElement = fixture.debugElement;
          element = debugElement.nativeElement;
  
          fixture.detectChanges();
      });
  
      it('should set foo to "3"', () =&gt; {
          expect(component.foo).toBe('3');
      });
  });
  </code></pre>
  
  <p>My problem is that I don't know how to wait, until resolving of the route is finished, and I can do an <code>expect()</code>. And in this example the test fails and it says "Expected undefined to be '3'.".</p>
  
  <p>Can someone help me please?!</p>
  
  <p>Thank you!</p>