HttpTestingController expectOne not working when Bootstrap directive is used

179 views Asked by At

When I imitate a click on an element generated by the Bootstrap directive I can not mock HTTP requests in a unit test.

Here I have a component with links for pagination.

@Component({
   template: `
       <ngb-pagination [collectionSize]="1" [pageSize]="1" [page]="1 (pageChange)="nextPg($event)"></ngb-pagination>
     `
})
export class QuestionComponent {
  public dataFromServer: string;

  constructor(
    private readonly httpClient : HttpClient
  ) { }

  public nextPg() {
    this.httpClient.get<string>('some_url')
      .subscribe(x => this.dataFromServer = x);
  }
}

And I have also a test in order to verify HTTP call. The test always fails.

it('test', () => {
    fixture.detectChanges();

    const pageItem = fixture.nativeElement.querySelectorAll('.page-link')[1];
    pageItem.click();

    httpMock.expectOne('some_url');//Fails here
});

When I work with generated by directive HTML directly everything is fine.

      <ul class="pagination">
        <li class="page-item disabled">
          <a class="page-link"></a>
        </li>
        <li class="page-item">
          <a class="page-link" (click)="nextPg()"> 1 </a>
        </li>
        <li class="page-item">
          <a class="page-link"></a>
        </li>
      </ul>
0

There are 0 answers