Question

我正在尝试测试新重写的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的变化？

谢谢

如何测试Ionic 4组件（模具）

0 个答案: