單元測試錯誤：無法從同步測試中調用Promise.then

Question

我開始關注單元測試角度2應用程序，但即使在最簡單的示例中，我也陷入了困境。我只是想運行一個簡單的測試來查看它是否可行，基本上我想要的是將標題頁面中的值與測試中的值進行比較。

這是我得到的錯誤，但我沒有看到錯誤來自哪裏，因爲一切看起來都與我同步。

Error: Error: Cannot call Promise.then from within a sync test.

單元測試：

import { ComponentFixture, TestBed } from '@angular/core/testing'; 
import { By }    from '@angular/platform-browser'; 
import { DebugElement, Input} from '@angular/core'; 
import { ToDoComponent } from './todo.component'; 
import { FormsModule } from '@angular/forms'; 
describe(("test input "),() => { 
    let comp: ToDoComponent; 
    let fixture: ComponentFixture<ToDoComponent>; 
    let de:  DebugElement; 
    let el:  HTMLElement; 

beforeEach(() => { 
    TestBed.configureTestingModule({ 
     declarations: [ ToDoComponent ], 
     imports: [ FormsModule ] 
    }) 
    .compileComponents(); 
    }); 
    fixture = TestBed.createComponent(ToDoComponent); 
    comp = fixture.componentInstance; 
    de = fixture.debugElement.query(By.css("h1")); 
    el = de.nativeElement; 

    it('should display a different test title',() => { 
     comp.pageTitle = 'Test Title'; 
     fixture.detectChanges(); 
     expect(el.textContent).toBe('Test Title423'); 
}); 


}); 

我的組件：內部beforeEach

import {Component} from "@angular/core"; 
import {Note} from "app/note"; 

@Component({ 
    selector : "toDoArea", 
    templateUrl : "todo.component.html" 
}) 

export class ToDoComponent{ 
    pageTitle : string = "Test"; 
    noteText : string =""; 
    noteArray : Note[] = []; 
    counter : number = 1; 
    removeCount : number = 1; 

    addNote() : void { 

     if (this.noteText.length > 0){ 
      var a = this.noteText; 
      var n1 : Note = new Note(); 
      n1.noteText = a; 
      n1.noteId = this.counter; 
      this.counter = this.counter + 1; 
      this.noteText = ""; 
      this.noteArray.push(n1);   
     } 

    } 

    removeNote(selectedNote : Note) :void{ 
     this.noteArray.splice(this.noteArray.indexOf(selectedNote),this.removeCount); 
    } 

} 

Answer 1

移動變量初始化

describe(("test input "),() => { 
    let comp: ToDoComponent; 
    let fixture: ComponentFixture<ToDoComponent>; 
    let de: DebugElement; 
    let el: HTMLElement; 

    beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     declarations: [ToDoComponent], 
     imports: [FormsModule] 
     }) 
     .compileComponents(); 
    })); 

    beforeEach(() => { 
    fixture = TestBed.createComponent(ToDoComponent); 
    comp = fixture.componentInstance; 
    de = fixture.debugElement.query(By.css("h1")); 
    el = de.nativeElement; 
    }) 


    it('should display a different test title',() => { 
    comp.pageTitle = 'Test Title'; 
    fixture.detectChanges(); 
    expect(el.textContent).toBe('Test Title423'); 
    }); 

}); 

參見

• https://angular.io/docs/ts/latest/guide/testing.html#!#waiting-compile-components