mercredi 30 décembre 2020

Why HttpTestingController method expectOne does not work with [ngb-pagination] directive?

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