title: Unit Testing (Angular) Error: Cannot call Promise.then from within a sync test
body: <p>i got a problem when im writing test in angular the fact that i wanna test routing of button but it got error like this</p>
  
  <p><strong>this is my homepage.component.spec.ts file</strong> (this is not app.component.spec.ts file)</p>
  
  <pre><code>import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  import { DebugElement } from '@angular/core';
  import { HomepageComponent } from './homepage.component';
  import { Router } from '@angular/router';
  import { inject } from '@angular/core/src/render3';
  import { RouterTestingModule } from '@angular/router/testing';
  import { AppComponent } from '../app.component';
  import { RegisterpageComponent } from'../registerpage/registerpage.component';
  import { Location } from '@angular/common';
  
  describe('HomepageComponent', () =&gt; {
    let component: HomepageComponent;
    let fixture: ComponentFixture&lt;HomepageComponent&gt;;
  
  beforeEach(async(() =&gt; {
    TestBed.configureTestingModule({
    imports: [RouterTestingModule],
    declarations: [ HomepageComponent,
                    AppComponent,
                    RegisterpageComponent ]
  })
  .compileComponents();
  }));
  
  
  beforeEach(() =&gt; {
    fixture = TestBed.createComponent(HomepageComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });
  
  it('should create', () =&gt; {
    expect(component).toBeTruthy();
  });
  
  // tslint:disable-next-line:prefer-const
  let location: Location;
  // tslint:disable-next-line:prefer-const
  let router: Router;
  // tslint:disable-next-line:prefer-const
  
  router = TestBed.get(Router);
  location = TestBed.get(Location);
  
  router.initialNavigation();
  
  it('navigate to "registerpage"', () =&gt; {
    router.navigate(['register']);
    expect(location.path()).toBe('/register');
   });
  });
  </code></pre>
  
  <p><strong>this is app-routing.module.ts file</strong></p>
  
  <pre><code>import { ApplicationRef, NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { CommonModule } from '@angular/common';
  import { FormsModule } from '@angular/forms';
  import { Routes, RouterModule } from '@angular/router';
  import { AppComponent } from './app.component';
  import { HomepageComponent } from './homepage/homepage.component';
  import { RegisterpageComponent } from './registerpage/registerpage.component';
  
  const routes: Routes = [
      { path: '',
      //   redirectTo: '/home',
           component: HomepageComponent,
           pathMatch: 'full' },
  
  
       { path: 'register',
         component: RegisterpageComponent}
    // { path: '**',
    //   component: PagenotfoundComponent }
  ];
  
  @NgModule({
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule],
  })
  export class AppRoutingModule { }
  </code></pre>
  
  <p>i have stuck with this for a week and seem like no hope please help me! Thanks</p>
  
  <p>ps.actually im confusing that i have to write test code in AppComponent.spec.ts file or not</p>