When I imitate a click on element generated by Bootstrap directive I can not mock http call. If I work with generated by directive html directly everything is fine.
Here I have a simple component with two variants of paginator. One of them is generated by 'bootstrap' directive another one - without it.
@Component({
// does not work
// template: `
// <ngb-pagination
// [collectionSize]="1"
// [pageSize]="1"
// [page]="1"
// (pageChange)="nextPg($event)">
// </ngb-pagination>
// `,
// works
template: `
<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>
`
})
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 a test in order to verify HTTP call
describe('test', () => {
let component: QuestionComponent;
let fixture: ComponentFixture<QuestionComponent>;
let httpMock: HttpTestingController;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [
QuestionComponent
],
imports: [
NgbModule,
HttpClientTestingModule
],
providers: []
});
fixture = TestBed.createComponent(QuestionComponent);
component = fixture.componentInstance;
httpMock = TestBed.inject(HttpTestingController);
});
it('test', () => {
fixture.detectChanges();
const pageItem = fixture.nativeElement.querySelectorAll('.page-link')[1];
pageItem.click();
httpMock.expectOne('some_url');
});
});
Aucun commentaire:
Enregistrer un commentaire