Angular 开玩笑+;角度+;单元测试
我对开玩笑的角度测试非常陌生。下面是我到目前为止尝试的代码 规格tsAngular 开玩笑+;角度+;单元测试,angular,jestjs,Angular,Jestjs,我对开玩笑的角度测试非常陌生。下面是我到目前为止尝试的代码 规格ts import { async, ComponentFixture, TestBed } from '@angular/core/testing'; //All import stuff here describe('test1', () => { beforeEach(async(() => { const ngbActiveModalStub = { close: () => ({}
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
//All import stuff here
describe('test1', () => {
beforeEach(async(() => {
const ngbActiveModalStub = { close: () => ({}) };
//All my service stub goes here
TestBed.configureTestingModule({
providers: [
mycomponent,
{ provide: NgbActiveModal, useValue: ngbActiveModalStub }]
});
component = TestBed.get(mycomponent)
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
updateValueInDropDown($event, i) {
if($event.target.value == 'abct') {
this.active= true;
} else {
this.active= false;
}
}
abc() {
if(this.active== true) {
const value= this.form.value.xyz;
this.service.validate(value).subscribe(
(res)=>{
},
(error) => {
});
}
}
上述测试已成功执行。现在我想通过设置值为独立函数编写测试用例。考虑到我在TS文件中的一个函数如下:
组件。ts
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
//All import stuff here
describe('test1', () => {
beforeEach(async(() => {
const ngbActiveModalStub = { close: () => ({}) };
//All my service stub goes here
TestBed.configureTestingModule({
providers: [
mycomponent,
{ provide: NgbActiveModal, useValue: ngbActiveModalStub }]
});
component = TestBed.get(mycomponent)
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
updateValueInDropDown($event, i) {
if($event.target.value == 'abct') {
this.active= true;
} else {
this.active= false;
}
}
abc() {
if(this.active== true) {
const value= this.form.value.xyz;
this.service.validate(value).subscribe(
(res)=>{
},
(error) => {
});
}
}
那么,ca如何在testcase中使
处于活动状态
,以便调用以下API并在我的单元测试用例文件中测试此函数。请分享您的想法。您可以使用“component.variableName”为组件变量(“this”变量)设置值
it('testabc方法',()=>{
//将this.active设置为true
component.active=true;
//剩下的测试。。。。
});代码>在这种情况下,我将尝试模拟用户的行为。如果用户需要在下拉列表中选择某个内容来运行验证,那么我认为您也应该在测试中这样做。这样,您既可以记录组件的行为,又可以测试用户路径
例如:
describe('when the user selects "abct" on the dropdown', () => { // this description could be improved.
beforeEach(() => {
selectValue('abct');
...
})
it('should validate the provided value', () => {
// see below
})
})
function selectValue(value: string) {
// Depending on the implementation of your dropdown (simple select element, a component from Angular Material or sth else) this may be different.
// Maybe simply publishing the change event would suffice? See: https://stackoverflow.com/a/48947788/2842142
fixture.debugElement.query(By.css('.dropdown'))
.nativeElement
.click();
fixture.detectChanges();
fixture.debugElement.queryAll(By.css('option'))
.map(option => option.nativeElement)
.find(option => option.innerText === value) // or option.value === value
.click();
}
至于如何准确地测试验证是否发生-您可能有不同的选择。
在大多数情况下,我会检查验证结果。您可以查询dom中的一些更改或一些验证消息
在某些情况下,提供模拟服务、监视调用(spyOn(service,'validate')
)并检查该方法是否在测试过程中被调用(expect(service.validate).toHaveBeenCalledWith(expectedValue)
)。如果服务在更多的地方被使用并有自己的测试,我会考虑它。如果您提供了关于组件的更多细节,这将是有帮助的。在真实应用程序中它是如何变为“活动”的(如何以及何时在生产代码中变量设置为true)?@Apokralipsa“活动”将在用户在下拉列表中选择特定值时设置为true。请看我编辑的帖子。