如何測試其右操作數與FormControl相關的ngIf？

我用ngIf顯示在*。html的這樣一些信息：如何測試其右操作數與FormControl相關的ngIf？

<input name="name" id="name" formControlName="name" required> 
<span *ngIf="name.invalid && (name.dirty || name.touched)" id="message"> 
    Some messages 
</span>

，現在我要檢查它是否生效。因此，在* spec.ts中，我將該ngIf的右操作數設置爲true（成功通過「expect」驗證），然後使用debugElement通過id查詢它。不幸的是，查詢的返回值爲空。我認爲這意味着上面的跨度尚未創建。

我已經嘗試使用「detectChanges」後，我設置「名稱」的值並將其標記爲髒，它仍然無法正常工作。我嘗試過的另一種方法是直接指定HTMLInputElement的值，然後使用「dispatchEvent」，但仍然無效。

我利用茉莉花和業力來測試我的Angular 4應用程序。任何人都知道如何解決這個問題？

謝謝！

來源

2017-10-28 Qi Sun

這是什麼'

對不起，這是一個錯字... –

這是我成功地測試它。有些步驟可能不是必需的，但我把所有的東西都扔在了它上面。

it('should not show error messages when input is valid', async(() => { 
    const fixture = TestBed.createComponent(AppComponent); 
    fixture.detectChanges(); 
    const compiled = fixture.debugElement.nativeElement; 
    const messages = compiled.querySelector('#message'); 
    expect(messages).toBeFalsy(); 
    })); 

    it('should show error messages when input is invalid', async(() => { 
    const fixture = TestBed.createComponent(AppComponent); 
    const component = fixture.componentInstance; 
    component.ngOnInit(); 
    fixture.detectChanges(); 
    const compiled = fixture.debugElement.nativeElement; 
    const input = component.formGroup.controls['name']; 
    input.setValue('') 
    input.markAsTouched(); 
    fixture.detectChanges(); 
    fixture.whenStable().then(() => { 
     const messages = compiled.querySelector('#message'); 
     expect(messages).toBeTruthy(); 
    }); 
    }));

來源

2017-10-29 03:28:26

非常感謝你:)我忘了初始化組件。現在它工作了！ –

ngif是不正確的，你必須改變它

*ngIf not ngIf 

<span *ngIf="name.invalid && (name.dirty || name.touched)" id="message"> 
    Some messages 
</span>

來源

2017-10-28 21:23:47

對不起，這是一個錯字。我改變了它。 –

如何測試其右操作數與FormControl相關的ngIf？

回答

相關問題