角度：7 如何测试父组件上的子发射器？

Question

为事件发射器编写测试用例。modelopen()为方法编写测试用例

父ts文件author-article-carousel.component.ts

public edit(row) {
    console.log(row);
    this.activeArticleService.getArticleDetail(row.id).subscribe((res: any) => {
      this.modalOpen(res);
    });
  }


  public modalOpen(value) {
    let config = {};
    config = {
      disableClose: true,
      maxWidth: '1050px',
      data: { value: value, user: 'author' }
    };
    if (this.dialogRef == null) {
      this.dialogRef = this.dialog.open(ArticleModalComponent, config);
    }
    this.dialogRef.afterClosed().subscribe(result => {
      console.log(`Dialog closed: ${result}`);
      this.dialogRef = null;
    });

    this.dialogRef.componentInstance.downloadreport.subscribe(response => {
      if (response) {
        this.activeArticleService.downloadReport(response).subscribe((response: HttpResponse<Blob>) => {
          this.activeArticleService.download(response, 'report.pdf');
        });
      }
    });
}

父 HTML 文件author-article-carousel.component.html

<prism-article-carousel
  (clickOnTitle)="edit($event)"
></prism-article-carousel>

子 HTML 文件article-carousel.component.html

 <div class="row">
            <div class="col-md-12">
              <a (click)="edit(item)" class="mat-card-title" style="cursor: pointer">{{ item.title }}</a>
            </div>

子 ts 文件article-modal.component.ts

  public downloadReport(url) {
    this.downloadreport.emit(url);
  }

Answer 1

假设您有一个有效的测试设置并为您的 activeArticleService 创建了一个有效的间谍

有两种方法，具体取决于您是使用浅层测试还是实际设置了声明所有组件的测试。（我建议使用浅测试方法，因为它只是一个单元测试）

使用浅层测试（设置NO_ERRORS_SCHEMA），您可以通过使用以下命令访问所需的元素来触发自定义事件处理程序：

const debugElem = fixture.debugElement.query(By.css('prism-article-carousel'));
debugElem.triggerEventHandler('clickOnTitle', YOUR_EXPECTED_EVENT_OBJECT)
tick();

为此，您的测试需要使用fakeAsync.

如果您不使用此架构，您将获得组件实例

fixture.debugElement.query(By.css('prism-article-carousel'))

你需要这样的东西（小心这只是伪代码）

childComponent = fixture.debugElement.query(By.css('prism-article-carousel')).componentInstance;
childComponent.emit(YOUR_VALUE_HERE);
tick();

请查看官方文档，了解有关测试嵌套组件的不同方法的更多信息。