Как я могу проверить компоненты Ionic 4 (трафарет) - PullRequest
Новая
       32

Как я могу проверить компоненты Ionic 4 (трафарет)

2 голосов
/ 04 октября 2019

Я пытаюсь протестировать недавно переписанные компоненты Ionic 4 (написанные с помощью StencilJS) и Angular TestBed. Эти компоненты внутренне используют shadowDOM, поэтому нет никакого доступа к внутреннему элементу <input>, например, для следующего переключателя: 

<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>

У меня есть тест, который в основном делает: 

@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
});

Есть ли способ, которым я могу программно выбрать радиокнопку Ionic и щелкнуть так, чтобы она была выбрана в тесте и отразилось изменение ngModel родительской группы ??

Спасибо

...