我正在为 Angular7 模板中的函数编写单元测试用例。它是一个登录组件，登录函数在 http 请求中具有 router.naving，以便在正确登录时路由到仪表板。 但是我得到了错误 -
错误：预期间谍导航已使用 [ [ [ '/ProjectData/MasterSequence' ] ] 调用，但从未调用过。 堆栈 (http://localhost:9876/absolute/home/hp/Downloads/ICICI/ICICI_UI/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?0b1eaf7a13cae32191eadea482cfc96ae41fc22b:2455:17) at buildExpectationResult (http://localhost:9876/absolute/home/hp/Downloads/ICICI/ICICI_UI/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?0b1eaf7a13cae32191eadea482cfc96ae41fc22b:2425:14) at Spec.expectationResultFactory (http://localhost:9876/absolute/home/hp/Downloads/ICICI/ICICI_UI/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?0b1eaf7a13cae32191eadea482cfc96ae41fc22b:901:18) at Spec.addExpectationResult (http://localhost:9876/absolute/home/hp/Downloads/ICICI/ICICI_UI/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?0b1eaf7a13cae32191eadea482cfc96ae41fc22b:524:34) at Expectation.addExpectationResult (http://localhost:9876/absolute/home/hp/Downloads/ICICI/ICICI_UI/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?0b1eaf7a13cae32191eadea482cfc96ae41fc22b:845:21) at Expectation.toHaveBeenCalledWith (http://localhost:9876/absolute/home/hp/Downloads/ICICI/ICICI_UI/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?0b1eaf7a13cae32191eadea482cfc96ae41fc22b:2369:12) 在用户上下文中。(http://localhost:9876/src/app/authentication/login2/login2.component.spec.ts?:208:38)
app.component.html
loginData(value) {
this.username = value.username;
this.password = value.password;
this.dataObj = {
'username': this.username,
'password': this.password
}
this.loginService.login(this.dataObj).then((data) => {
console.log("data", data);
this.response = data;
console.log("message", this.response.message);
if (this.response.message == "Login Successful.") {
this.router.navigate(['/ProjectData/MasterSequence'])
}
else {
this.toastr.error("UserName or Password is incorrect");
}
})
app.component.spec.ts
describe('Login2Component', () => {
let comp: Login2Component;
let fixture: ComponentFixture<Login2Component>;
let de: DebugElement;
let el: HTMLElement;
beforeEach(async(() => {
mockRouter = { navigate: jasmine.createSpy('navigate') };
TestBed.configureTestingModule({
declarations: [Login2Component, MasterSequenceComponent],
imports: [
BrowserModule,
FormsModule,
RouterModule,
ReactiveFormsModule,
RouterTestingModule,
HttpClientModule,
[
RouterTestingModule.withRoutes([
{ path: '/ProjectData/MasterSequence',
component: MasterSequenceComponent }
])
]
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
providers: [{ provide: ToastrService, useValue: ToastrService }, Login2Service]
})
.compileComponents()
.then(() => {
//Login2Component
fixture = TestBed.createComponent(Login2Component);
comp = fixture.componentInstance;
de = fixture.debugElement.query(By.css('form'));
el = de.nativeElement;
});
}));
it('should redirect the user to "login form" component when button is clicked', () => {
const router = TestBed.get(Router);
const spy = spyOn(router, 'navigate');
fixture.detectChanges();
const button = fixture.debugElement.query(By.css('form[id=loginform]'));
button.triggerEventHandler('click', null);
let userN = comp.addLoginData.controls['username'];
userN.setValue('pallavi');
let pass = comp.addLoginData.controls['password'];
pass.setValue(1234);
let value = {
username: userN,
password: pass
};
comp.loginData(value);
expect(spy).toHaveBeenCalledWith(['/ProjectData/MasterSequence']);
});
});
参考-
Angular 2/4/6/7 - 使用路由器进行单元测试
使用此代码的进一步错误 -
it('should redirect the user to "login form" component when button is clicked', () => {
let value = {
username: 'user123',
password: 'pwd'
};
comp.username = '';
comp.password = '';
spyOn(comp.LoginService,'login').and.callThrough();
comp.loginData(value);
expect(comp.username).toBe('user123');
expect(comp.password).toBe('pwd');
expect(comp.LoginService.login).toHaveBeenCalledWith(value)
//expect(RouterMock.navigate).toHaveBeenCalledWith(['/ProjectData/MasterSe//quence']);
});
Unhandle Promise rejection：'， HttpErrorResponse{headers： HttpHeaders{normalizedNames： Map{}， lazyUpdate： null， he aders： Map{}}， 状态： 0， statusText： 'Unknown Error'， url： 'http://192.168.5.128:3002/api/user/login'， ok： false， name： 'HttpErrorResponse'， message： 'Http failure Response for http://192.168.5.128:3002/api/user/login： 0 Unknown Error'， error： ProgressEvent{isTrusted： true}}， ';区域：'， '代理区'， ';任务："， "承诺.然后"， ";Value：'， HttpErrorResponse{headers： HttpHeaders{normalizedNames： Map{}， lazyUpdate： null， headers： Map{}}， status： 0， statusText： 'Unknown Error'， url： 'http://192.168.5.128:3002/api/user/login'， ok： false， name： 'HttpErrorResponse'， message： 'Http failure Response for http://192.168.5.128:3002/api/user/login： 0 Unknown Error'， error： ProgressEvent{isTrusted： true}}， undefined
我找不到loginService.login()的代码，但我确信它一定在进行一些 API 调用，所以创建一个stub是一个很好的做法。 像这样：
export class LoginServiceStub{
login(obj){
return new Promise((resolve, reject) => {
resolve("whatever_data_is_expected");
});
}
}
在spec文件中：
describe('Login2Component', () => {
let RouterMock = {
navigate: jasmine.createSpy('navigate')
};
beforeEach(async(() => {
mockRouter = { navigate: jasmine.createSpy('navigate') };
TestBed.configureTestingModule({
decleration: [ .... ],
providers: [
{provide: ToastrService, useValue: ToastrService }, // I am not sure why you have done "useValue" with same Service
{provide: Login2Service, useClass: Login2ServiceStub },
{provide: Router, useValue: RouterMock }
],
// ... and other deceleration of Test Bed
)};
})
然后在it块中：
it('should redirect the user to "login form" component when button is clicked', () => {
let value = {
username: 'user123',
password: 'pwd';
};
comp.username = '';
comp.password = '';
spyOn(comp.loginService,'login').and.callThrough();
comp.loginData(value);
expect(comp.username).toBe('user123');
expect(comp.password).toBe('pwd');
expect(comp.loginService.login).toHaveBeenCalledWith(value)
expect(RouterMock.navigate).toHaveBeenCalledWith(['/ProjectData/MasterSequence']);
});
});
我还建议您阅读这组专门为 Angular 单元测试编写的文章集。您可以找到几个链接，这些链接将涵盖几乎所有的基本测试方案。