Karma jasmine 测试 Angular 5 无法调用 Promise

Question

我是 karma jasmine 测试的新手，我正在努力解决在启动测试时总是出现此错误的测试：

错误：无法从同步测试中调用 Promise.then。

我正在使用 Angular 5。这是我的测试代码：

fdescribe('CommentComponent', () => {
  let component: CommentComponent;
  let fixture: ComponentFixture<CommentComponent>;
  let commentService: CommentService;
  const stationId = 900;
  let station: Station;
  let comment: Comment;

  beforeEach(fakeAsync(() => {
    station = new Station();
    station.id = stationId;
    comment = new Comment('', null, null, '');

    TestBed.configureTestingModule({
      declarations: [
        CommentComponent,

      ],
      providers: [
        CommentService,
        StationService,
      ],
      imports: [
        HttpClientTestingModule,
        FormsModule,
        RouterTestingModule,
        MatSnackBarModule,
        NgxPaginationModule,
        BrowserAnimationsModule
      ],
      schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA]
    })
      .compileComponents().then(() => {
      fixture = TestBed.createComponent(CommentComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });
  }));
  afterEach(fakeAsync(() => {
    component = null;
    fixture.destroy();
    commentService = null;
    comment = null;
  }));

  commentService = TestBed.get(CommentService);
  it('should create', async() => {
    tick(1000);
    expect(component).toBeTruthy();
  });
});

这是我的组件代码：

@Component({
  selector: 'app-comment',
  templateUrl: './comment.component.html',
  styleUrls: ['./comment.component.css']
})
export class CommentComponent implements OnInit {

  @ViewChild('newCommentForm') form;
  params: Params;
  comment: Comment = new Comment('', null, null, '');
  comments = [];
  constructor(private commentService: CommentService,
              private route: ActivatedRoute,
              public snackBar: MatSnackBar) {this.route.params.subscribe( params => this.params = params);
  }
  ngOnInit() {
    this.getComment();
  }

  onSubmit() {
    this.commentService.saveComment(this.comment.text, this.params['id']).subscribe(
      comment => this.comment = comment,
      error => this.onErrorSave(error) ,
      () => this.onCompleteSave()
    );
  }

  getComment(): void {
    this.commentService.getComments(this.params['id']).subscribe(
      comments => this.comments = comments,
      error => console.error(error),
      () => console.log('Commentaires chargés')
    );
  }
  onErrorSave(error) {
    this.snackBar.open(errorMessageConnection, 'Close', {
      duration: 3000
    });
    console.error(error);
  }
  onCompleteSave() {
    this.snackBar.open(sendingMsgCommentSucces, 'Close', {
      duration: 3000
    });
    console.log('Commentaire sauvegardé');
    this.form.reset();
    this.getComment();
  }
}

如果有人可以帮助我，将不胜感激。

提前谢谢你。

Answer 1

你的测试，就像现在一样，是同步的，这意味着一旦测试范围结束，测试就结束了，业力/茉莉花。

你需要写asynchronous tests。为 it() 提供一个回调，您可以使用它们来表示测试已经结束。

describe("Should be async", () => {
  it("can call promises", done => {
    someAsyncThing().then(() => {
      done()
    });
  });
})