角度:测试登录功能

Question

我正在推进 Angular 测试的第一步。特别是，我正在尝试在LoginComponent中测试此功能

login() {
this.restApi.login(this.loginForm.value).subscribe((resp) => {
this.user.username = (resp as any).user;
this.user.token = (resp as any).tkn;
this.router.navigate(['/main']);
});
}

restApi是RestApiService的一个实例，一个进行HTTP调用的服务。为了测试这个函数，我写了这个测试：

describe('LoginComponent', () => {
let component: LoginComponent;
let fixture: ComponentFixture<LoginComponent>;
let user = new UserService();
let httpMock: HttpTestingController;
let httpClient: HttpClient;
let testRouter = {
navigate: jasmine.createSpy('navigate'),
};
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [ReactiveFormsModule, FormsModule, HttpClientTestingModule],
declarations: [LoginComponent],
providers: [
{ provide: Router, useValue: testRouter },
{ provide: UserService, useValue: user },
RestApiService,
],
}).compileComponents();
httpClient = TestBed.inject(HttpClient);
httpMock = TestBed.inject(HttpTestingController);
}));
function updateForm() {
component.loginForm.controls['username'].setValue('bob');
component.loginForm.controls['password'].setValue('bobspassword');
}
beforeEach(() => {
fixture = TestBed.createComponent(LoginComponent);
component = fixture.componentInstance;
component.ngOnInit();
fixture.detectChanges();
});
it('should login', () => {
const loginRes = {
res: 1,
spec: 'ok',
tkn: 'aToken',
user: 'bob',
};
const loginReq = {
username: 'bob',
password: 'bobspassword',
};
updateForm();
component.login();
expect(component.user.token).toBeDefined();
expect(testRouter.navigate).toHaveBeenCalledWith(['/main']);
const req = httpMock.expectOne(
'http://myServerAddress:8080/restEndpoint/login'
);
expect(req.request.method).toBe('POST');
expect(req.request.body).toEqual(loginReq);
req.flush(loginRes);
});
});

测试失败，因为component.user.token未定义，并且无法导航到/main

你可以帮我吗？ 谢谢

Answer 1

这应该使用Mock来处理，而不是通过调用服务进行实际的 http 调用。

export class MockRestApiService{
login(){
return of({
user: 'someName',
tkn: 'someToken'
})
}
}

现在spec导入这个模拟类，如下所示：

beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [ReactiveFormsModule, FormsModule, HttpClientTestingModule],
declarations: [LoginComponent],
providers: [
{ provide: Router, useValue: testRouter },
{ provide: UserService, useValue: user },
{provide: RestApiService, useClass: MockRestApiService},
],
}).compileComponents();
httpClient = TestBed.inject(HttpClient);
httpMock = TestBed.inject(HttpTestingController);
}));

这将返回someToken作为被调用函数的值login()

尝试看看这篇文章，我已经用适当的模拟解释了一个组件代码..由于您是测试新手，因此我建议您从本文开始