angular: 7 Как проверить дочерний излучатель на родительском компоненте?

Question

Написать контрольный пример для источника событий. Напишите контрольный пример для modelopen() метода

родительский файл TS Автор статьи-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-файл Автор статьи-carousel.component.html

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

дочерний HTML-файл Статья-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 Статья-modal.component.ts

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

Answer 1

Предполагая, что у вас есть рабочая тестовая установка и создан рабочий шпион для вашей activeArticleService

Существует два подхода в зависимости от того, используете ли вы неглубокий тест или фактически настроили тест, в котором объявлены все компоненты,(Я бы предложил использовать метод поверхностного тестирования, так как это всего лишь модульный тест)

Используя поверхностное тестирование (настройка NO_ERRORS_SCHEMA), вы можете запустить пользовательский EventHandler, открыв нужный элемент с помощью:

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();

Пожалуйста, посмотрите здесь в официальной документации для получения дополнительной информации об этих различных подходах к тестированию вложенного компонента.