Модульные тесты для родительского компонента, который имеет дочерний компонент - PullRequest
Новая
       21

Модульные тесты для родительского компонента, который имеет дочерний компонент

0 голосов
/ 18 марта 2020

Я недавно начал изучать юнит-тестирование, и я все еще путаюсь с некоторыми аспектами тестирования.

У меня есть родительский компонент, который содержит Дочерний компонент, который отображает таблицу. 

<section class="header" >
  <h3>Parent Component</h3>
</section>

 <app-mat-table 
   [data]="faculties" 
   [columns]="columns"             <----- Child component
   [countRecords]="length"
   (pageEvent)='pageUpdate($event)'>
</app-mat-table>

</section>
  • Нужно ли создавать макет дочернего компонента? Потому что в родительском компоненте я использую @ViewChild и вызываю методы из дочернего компонента.
  • Как проверить параметры @Input и @Output?
  • Что если Дочерние методы содержат методы из службы, которая возвращает Observable, мне нужен шпион для этой службы?

Например: 

 getRange(callback) {
    setTimeout(() => this.isLoading = true);
    this.apiService.getRecordsRange(this.entity, this.pageSize, this.pageIndex * this.pageSize)
      .subscribe(data => {
        callback(data);
        this.isLoading = false;
      });
  }

ParentComponent.ts 

 export class ParentComponent   {

      @ViewChild(ChildComponent, {static: false}) table: ChildComponent;

      faculties: Faculty[] = [];
      columns: Column [] = [*some Data*];
      length: number;

      pageUpdate() {
        this.table.getRange((data: Faculty[]) => this.faculties = data);
        this.table.getCountRecords(response => this.length = response.numberOfRecords);
      }
}

ChildComponent. html 

<div class="table-container">
    <table> 
       <tr *ngFor="let item of data;></tr>  
    </table>
</div>

ChildComponent.ts 

export class ChildComponent implements AfterViewInit {

  @Input() data: any[] = [];
  @Input() columns: Column[];
  @Input() countRecords: number;
  @Output() pageEvent = new EventEmitter<PageEvent>();

  constructor(private apiService: ApiService) {}

  ngAfterViewInit(): void {
    this.onPaginationChange({ *emit some stuff* });
  }

   getRange(callback) {
    setTimeout(() => this.isLoading = true);
    this.apiService.getRecordsRange(this.entity, this.pageSize, this.pageIndex * this.pageSize)
      .subscribe(data => {
        callback(data);
        this.isLoading = false;
      });
  }
...