カルマをAngular2で有効にしたときのユニットテスト

Question

角度CLIを使用してAngular2プロジェクトをセットアップしました。私はフォームコンポーネントをテストしようとしています。メールとパスワードの2つのフィールドがあります。どちらもrequiredです。タイプsubmitのログインボタンがあります。ユーザーが両方のフィールドに有効な入力を提供した後でのみ有効になります。

<form (ngSubmit)="login()" #loginForm="ngForm"> 

     <md-input-container class="md-block"> 
      <input md-input [(ngModel)]="user.email" class="userEmail" 
       name="userEmail" type="email" placeholder="Email" 
       ngControl="userEmail" 
      required> 
     </md-input-container> 
     <br> 

     <md-input-container class="md-block"> 
      <input md-input [(ngModel)]="user.password" class="userPassword" 
       name="userPassword" type="password" placeholder="Password" 
       ngControl="userPassword" 
      required> 
     </md-input-container> 
     <br> 



     <!--the button is enabled only after all form fields are valid--> 
     <button color="primary" md-button 
      type="submit" class='loginButton' 
     [disabled]="!loginForm.form.valid"> 
      Login 
     </button> 

ここで、カルマを使用してボタンをテストします。私は、ドキュメントを経て、テスト中にランダムな入力を与え、それを検証することにより、入力をテストすることができました：テストが失敗した理由を、私は見ていない

//imports... 

describe('LoginComponent (inline template)',() => { 
    let comp: LoginComponent; 
    let fixture: ComponentFixture<TmLoginComponent>; 
    let userEmail: HTMLInputElement; 
    let userPassword: HTMLInputElement; 
    let loginBtn: HTMLElement; 
    let title: HTMLElement; 



    beforeEach(() => { 

    TestBed.configureTestingModule({ 
     declarations: [ LoginComponent ], // declare the test component 
     imports: [ MaterialModule.forRoot(), FormsModule, 
        RouterTestingModule.withRoutes(
        [{path: 'login', component: LoginComponent}, ]) 
       ], 
     providers: [{provide: UserAuthenticationService, useValue: uaServiceStub }, CookieService], 

    }); 

    fixture = TestBed.createComponent(LoginComponent); 

    comp = fixture.componentInstance; //LoginComponent test instance 

    // query by CSS element selector 
    userEmail = fixture.debugElement.query(By.css('.userEmail')).nativeElement; 
    userPassword = fixture.debugElement.query(By.css('.userPassword')).nativeElement; 
    loginBtn = fixture.debugElement.query(By.css('.loginButton')).nativeElement; 


//tests 

//this test is successful 
    it('should check initial input',() => { 
    fixture.detectChanges(); 
    expect(userEmail.value).toBe('') 
    }); 

//this test is successful 
    it('should check later input', async(() => {  
    fixture.detectChanges(); 
    fixture.whenStable().then(() => { 
     userEmail.value = 'someValue'; 
     userEmail.dispatchEvent(new Event('change')); 

     expect(userEmail.value).toBe('someValue'); 
    }); 

    })); 

//EDITED: NEW TEST 
it('should check loginBtn is disabled initially',() => { 
    fixture.detectChanges(); 
    loginBtn = fixture.debugElement.query(By.css('.loginButton')).nativeElement; 
    fixture.whenStable().then(() => { 
    expect(loginBtn.disabled).toBe(true) 
    }) 
}); 


//this test fails. "Expected true to be false" 
    it('should check loginBtn is enabled after inputs check out', async(() => { 
    fixture.detectChanges(); 
    fixture.whenStable().then(() => { 
    userEmail.value = 'raj@gmail.com';//valid 
    userEmail.dispatchEvent(new Event('change')); 

    userPassword.value = 'asdf';//vaild 
    userPassword.dispatchEvent(new Event('change')); 
    fixture.detectChanges(); 
    expect(loginBtn.disabled).toBe(false) 
    }) 
})); 

}); 

。誰でも助けることができますか？

Answer 1

あなたはDefaultValueAccessorソースコードを見てみた場合：

host: {'(input)': 'onChange($event.target.value)', '(blur)': 'onTouched()'}, 

https://github.com/angular/angular/blob/2.4.2/modules/%40angular/forms/src/directives/default_value_accessor.ts#L36

あなたがメインの自分のミスが間違ったイベント名であることに気づくことができます。

代わりchange

it('should check loginBtn is enabled after inputs check out', async(() => { 
    fixture.detectChanges(); 
    fixture.whenStable().then(() => { 
    userEmail.value = 'raj@gmail.com'; 
    userEmail.dispatchEvent(new Event('input')); 

    userPassword.value = 'asdf'; 
    userPassword.dispatchEvent(new Event('input')); 
    fixture.detectChanges(); 
    expect(loginBtn.disabled).toBe(false) 
    }); 
})); 

Plunker Example