Question

此子组件已保存按钮组件。因此，我要做的是确保在表单输入字段值更改时显示“保存”按钮。

我可以确认表单名称值更改后，它可以得到form.invalid = false和form.dirty = true，但是Child组件从未显示，仍然是saveBtnComp = null，btnElmsAfterEdit = []。

为什么子组件从不显示？

在parent.component.html

中

<div>
  <save-button-component
    *ngIf="form.dirty"
    [invalid]="form.invalid"
    (saveChangesEvent)="submit()"
    (cancelEvent)="reset()"
  ></save-button-component>
</div>

在测试用例中

beforeEach(() => {
    fixture = TestBed.createComponent(ParentComponent);
    component = fixture.componentInstance;
    component.value ={
       name: 'John Doe',
       age: '20'
    };
    component.ngOnInit();
    fixture.detectChanges();
});

it('Save Button shows when form is edited', async(() => {

   // before edit form value
   const saveBtnBeforeEdit = fixture.debugElement.nativeElement.querySelector('save-button-component');

   expect(saveBtnBeforeEdit).toBeNull();

   const name = getControl('name');
   name.setValue('Stan Hansen');
   name.markAsDirty();
   fixture.detectChanges();


   // after edit form value
   fixture.whenStable().then(() => {

       const saveBtnAfterEdit = fixture.debugElement.nativeElement.querySelector('save-button-component');

       expect(saveBtnAfterEdit).not.toBeNull();

   });
}));

function getControl(...path: string[]): FormControl {
    return component.form.get(path) as FormControl;
}

Answer 1

我解决了这个问题。

我将component.ngOnInit（）移至beforeEach（）;

我更新了代码。

编辑父组件表单时如何测试有角子组件

1 个答案: