template driven form
の単体テストケースを追加しようとしています。 submit
ボタンを確認する方法は、初期段階ではdisabledであり、ユーザーがすべての有効なenable
を入力するとfield
になります。
こちらがフォームです
https://stackblitz.com/edit/angular-a8q2zr?file=src%2Fapp%2Fapp.component.html
ユニットテストケース
https://stackblitz.com/edit/angular-testing-5m3qwm?file=app%2Fapp.component.spec.ts
import { ComponentFixture, TestBed,async } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
//
describe('AppComponent', () => {
let fixture ,component,debugElement;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [ BrowserModule, FormsModule ],
declarations: [
AppComponent
],
}).compileComponents();
}));
beforeEach(()=>{
fixture = TestBed.createComponent(AppComponent);
component = fixture.componentInstance;
})
xdescribe('initial state of form',()=>{
it('form is invalide button is disable',()=>{
// fixture.detectChanges();
// debugElement = fixture.debugElement;
// expect(true).toBe(true)
})
})
})
すべてのアップデート ?
次のコマンドを使用して、送信ボタンを取得できます。
fixture.debugElement.query(By.css('input[type=submit]'))
それが無効になっているかどうかを確認するには、そのnativeElementを使用します。
describe('initial state of form',()=>{
it('form is invalide button is disable',()=>{
let submitEL: DebugElement = fixture.debugElement.query(By.css('input[type=submit]'));
expect(submitEL.nativeElement.disabled).toBe(true);
})
})