我正在為我的暫存器組件撰寫一些單元測驗。在這個組件中，我有一個 html 元素：
<form class="register-form" [formGroup]="registerForm">
<mat-form-field>
.....
</mat-form-field>
...
</form>
我想撰寫 3 個測驗，首先檢查我的表單元素的類，如果 registerForm isDefined 則通過另一個測驗，如果 registerForm 被注入到 的表單中則通過。
我的測驗：
describe('register-form',() => {
it('register-form should have class: register-form', () => {
expect(registerForm.className).toBe('register-form');
});
it('component should have defined formGroup: registerForm', () => {
expect(registerComponent.registerForm).toBeDefined();
});
});
我缺少來自我的表單元素的 registerForm => formGroup 的連接測驗。我該如何撰寫這個測驗？
很快：我不想訪問 HTMLElement 的 Property formGroup 。
uj5u.com熱心網友回復：
您可以使用 CSS 選擇器查詢輸入元素并檢查它的值。
it('register-form should have class: register-form', () => {
let input = fixture.debugElement.query(By.css('input'));
let el = input.nativeElement;
expect(el.value).toBe('expected value');
});
更多資訊在：Angular 測驗檔案
uj5u.com熱心網友回復：
我剛剛發現了我的問題的解決方案。我只是為托管組件創建一個模擬。
describe('componentUnderTest', () => {
@Component({
selector: `host-component`,
template: `<component-under-test [testInput]="testInput">
</component-under-test >`
})
class TestHostComponent {
public testInput: string = '';
}
}
之后我創建了這個測驗
it('deviceUnderTest should have @Input() decorator on testInput', () => {
testHostComponent.testInput='testString';
testHostFixture.detectChanges();
expect(testHostFixture.debugElement.query(By.css('component-under-test'))
.componentInstance['testInput']).toEqual('testString');
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/412502.html
標籤：