angular：7如何在父组件上测试子发射器？

Question

Write test case for event emitter. Write test case for modelopen() method

parent ts file 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');
        });
      }
    });
}

parent HTML file author-article-carousel.component.html

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

child HTML file 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>

child ts file article-modal.component.ts

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

Answer 1

Assuming that you have a working test setup and created a working spy for your activeArticleService

There are two approaches depending on whether you are using a shallow test or actually have setup a test where all the components are declared. (I would suggest using the shallow test approach since it is only a unit test)

Using shallow testing (setting NO_ERRORS_SCHEMA ) you can trigger a custom EventHandler by accessing the desired element using:

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

For this to work your tests needs to use fakeAsync .

If you don't use this schema you would get the component instance with

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

and you would need something like this (be careful this is only pseudocode)

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

Please have a look here in the official documentation for more information on those different approaches to test a nested component.