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