vendredi 4 octobre 2019

How can I test Ionic 4 components (Stencil)

I'm trying to test the newly rewritten Ionic 4 components (written with StencilJS) and Angular TestBed. Those components are internally using shadowDOM, so there's no way to access the internal <input> element e.g. for the following radio-button:

<ion-radio-group [(ngModel)]="model">
  <ng-container *ngFor="let option of checklist.checklistOptions; let i = index">
  <ion-radio
    id="--"
    name="-"
    type="radio"
    [value]="option"
    [ngClass]="{ 'selected': option === 'model' }"
  ></ion-radio>
</ng-container>
</ion-radio-group>

I have a test that basically does:

@Component({
  template: `
    <my-radio-group-component [checklist]="checklist" [(ngModel)]="selection">
    </my-radio-group-component>
  `,
})
class TestHostComponent {
    public selection: string;
    public widget: Checklist;
}

[...]
test('the model of the component changes properly', () => {
    const radio = fixture.query(By.directive(IonRadio));

    expect(testHost.selection).toBeUndefined();
    radio.nativeElement.click(); // does not work
    (radio.componentInstance as IonRadio).checked = true; // does not work
    radio.triggerEventHandler('change', null); // does not work
    radio.triggerEventHandler('click', null); // does not work
    fixture.detectChanges();

    expect(testHost.selection).toEqual(checklist.checklistOptions[0]); //fails, the model is undefined
});

Is there a way I can programmatically select the Ionic radio-button and click it so that it gets selected in the test and change of the ngModel of the parent group is reflected??

Thanks

Aucun commentaire:

Enregistrer un commentaire