我有一个使用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>
我想对上面的复选框进行单元测试。就像我想识别复选框并测试它是否可勾选一样。我该如何使用Karma Jasmine进行单元测试?
我有一个使用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>
我想对上面的复选框进行单元测试。就像我想识别复选框并测试它是否可勾选一样。我该如何使用Karma Jasmine进行单元测试?
组件,例如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
});
});
需要编写fixture.detectChanges()
吗?
我没有使用这个方法进行测试,但测试依然成功。 按钮1默认为“已选中”。
const button1 = debugElement.nativeElement.querySelector(selectorBtn1);
const button2 = debugElement.nativeElement.querySelector(selectorBtn2);
...
expect(button1.checked).toBeTruthy();
expect(button2.checked).toBeFalsy();
button2.click();
expect(button1.checked).toBeFalsy();
expect(button2.checked).toBeTruthy();
...
ngModel指令是异步的,需要使用Angular单元测试的异步能力。添加async和whenStable函数。
it('checkbox is checked if value is true', async(() => {
component.model = true;
fixture.detectChanges();
fixture.whenStable().then(() => {
const inEl = fixture.debugElement.query(By.css('#mob_Q1'));
expect(inEl.nativeElement.checked).toBe(true);
});
}));
源链接链接