Angular2のチェックボックスの単位テスト方法

Question

Angular2で書かれたチェックボックスのサンプルコードがあります。

<div class="col-sm-7 align-left" *ngIf="Some-Condtion"> 
    <input type="checkbox" id="mob_Q1" value="Q1" /> 
    <label for="mob_Q1">Express</label> 
</div> 

私は上記のチェックボックスを単体テストしたいと思います。私はチェックボックスを認識し、それがチェック可能であるかどうかをテストしたいと思う。これをユニットカルマジャスミンとどうやってテストするのですか？

Answer 1

コンポーネント。 CheckboxComponentは入力要素を含んでいます。単体テストは次のようになります。

import {ComponentFixture, TestBed} from '@angular/core/testing'; 
import {By} from '@angular/platform-browser'; 
import {CheckboxComponent} from './checkbox.component'; 

describe('Checkbox test.',() => { 

let comp: CheckboxComponent; 
let fixture: ComponentFixture<CheckboxComponent>; 
let input: Element; 

beforeEach(() => { 
    TestBed.configureTestingModule(
     { 
      declarations: [CheckboxComponent], 
     }, 
    ); 

    fixture = TestBed.createComponent(CheckboxComponent); 
    comp = fixture.componentInstance; 
    input = fixture.debugElement.query(By.css('#mob_Q1')).nativeElement; 
}); 

it('should click change value',() => { 
    expect(input.checked).toBeFalsy(); // default state 

    input.click(); 
    fixture.detectChanges(); 

    expect(input.checked).toBeTruthy(); // state after click 
}); 
});