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>