3

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="{{ checklist.id }}-{{ context.qaIdentifier }}-{{ i }}"
    name="{{ checklist.id }}-{{ context.qaIdentifier }}"
    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

skyboyer
  • 22,209
  • 7
  • 57
  • 64
Alex Arvanitidis
  • 4,403
  • 6
  • 26
  • 36

0 Answers0