title: Angular - How to get the component instance of the route you've navigated to in an integration test?
body: <p>I'm writing an integration test for the first time and I'm a bit confused on how to go about it. </p>
  
  <p>Basically what I've done so far is set up the <code>AppComponent</code> with a <code>/signin</code> route you can go to, this is what I'm testing.</p>
  
  <p>This is my test setup:</p>
  
  <pre><code>describe('[INTEGRATION] SigninComponent', () =&gt; {
  
    let component: AppComponent;
    let fixture: ComponentFixture&lt;AppComponent&gt;;
    let location: Location;
    let router: Router;
    let usernameFormControlElement;
    let passwordFormControlElement;
    let submitBtn;
  
    beforeEach(() =&gt; {
  
      TestBed.configureTestingModule({
        imports: [
          AppModule,
          ModuleImports,
          RouterTestingModule.withRoutes([
            {path: 'signin', component: SigninComponent}
          ])
        ],
        providers: [
          Location
        ],
        schemas: [NO_ERRORS_SCHEMA],
        declarations: [SigninComponent]
      });
  
      fixture = TestBed.createComponent(AppComponent);
      component = fixture.componentInstance;
      location = TestBed.get(Location);
      router = TestBed.get(Router);
  
      fixture.detectChanges();
    });
  
    it('should navigate to dashboard when a token is received', async(() =&gt; {
  
      router.navigate(['signin']).then(() =&gt; {
  
        expect(location.path()).toBe('/signin');
  
        // Get the elements once we're on the right page
        usernameFormControlElement = fixture.debugElement.query(By.css('.username')).nativeElement;
        passwordFormControlElement = fixture.debugElement.query(By.css('.password')).nativeElement;
        submitBtn = fixture.debugElement.query(By.css('#submit')).nativeElement;
  
        // How exactly would I get a hold of the SigninComponent`instance here?
        const signinComponent = 
      });
    }));
  });
  </code></pre>
  
  <p>Now, where the <code>const signinComponent =</code> statement is, I'm not sure how to proceed. I need to get hold of the <code>SigninComponent</code> instance here so that I can get access to the reactive form model and set some values for <code>username</code> and <code>password</code> form elements and then submit the form. </p>
  
  <p>I don't think I'm supposed to call <code>TestBed.createComponent(SigninComponent)</code> and then get the <code>componentInstance</code> from that since we've already done that with the <code>AppComponent</code>.</p>
  
  <p>What is the correct way of doing this?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>I figured I could use <code>ActivatedRoute</code> but trying to read <code>.component</code> on it returns null. </p>