angular - 使用 Jasmine 进行 Angular 单元测试 - 错误:请添加 @NgModule 注释
问题描述
我正在尝试为使用两种服务和一种形式的 Angular 组件编写 Jasmine 单元测试(使用 Karma)。关于测试的教程(比如来自 Angular Docs的教程)只展示了如何使用一项服务测试组件,但不知何故我无法让它与更复杂的组件一起工作:
我的组件:user-login.component.ts:
该组件有一个登录表单,用户可以在其中输入他的凭据。OnSubmit
我将提供的凭据发送到身份验证服务,该服务处理对我的 API 的 http 请求。如果来自 API 的 http 响应状态为 200,它将包含一个登录令牌 (JWT),我将其存储在另一个名为 TokenStorageService 的服务中:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { TokenStorageService } from '../../../_services/token-storage.service';
import { AuthenticationService } from '../../../_services/authentication.service';
import { AuthRequest } from '../../../_models/authRequest';
@Component({
selector: 'app-user-login',
templateUrl: './user-login.component.html',
styleUrls: ['./user-login.component.scss']
})
export class UserLoginComponent implements OnInit {
loginForm: FormGroup;
constructor(private formBuilder: FormBuilder,
private tokenStorage: TokenStorageService,
private authService: AuthenticationService) { }
ngOnInit() {
this.loginForm = this.formBuilder.group({
username: ['', Validators.compose([Validators.required])],
password: ['', Validators.required]
});
}
onSubmit() {
this.authService.login({
userName: this.loginForm.controls.username.value,
password: this.loginForm.controls.password.value
})
.subscribe(data => {
if (data.status === 200) {
this.tokenStorage.saveToken(data.body)
console.log("SUCCESS: logged in")
}
}
});
}
}
我的测试:user-login.component.spec.ts:
所以我明白了我在构造函数中提供的三件事(FormBuilder
和TokenStorageService
)AuthenticationService
我也必须在我的TestBed
. 因为我真的不想为单元测试注入服务,所以我使用的是存根服务。所以我这样做了:
TestBed.configureTestingModule({
imports: [{HttpClientTestingModule}],
providers: [{provide: FormBuilder}, { provide: TokenStorageService, useValue: tokenStorageServiceStub }, { provide: AuthenticationService, useValue: authenticationServiceStub }
整个测试看起来像这样:
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { UserLoginComponent } from './user-login.component';
import { FormBuilder } from '@angular/forms';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { TokenStorageService } from 'src/app/_services/token-storage.service';
import { AuthenticationService } from 'src/app/_services/authentication.service';
describe('UserLoginComponent', () => {
let component: UserLoginComponent;
let fixture: ComponentFixture<UserLoginComponent>;
let tokenStorageServiceStub: Partial<TokenStorageService>;
let authenticationServiceStub: Partial<AuthenticationService>;
// let tokenStorageService;
// let authenticationService;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [{HttpClientTestingModule}],
providers: [{provide: FormBuilder}, { provide: TokenStorageService, useValue: tokenStorageServiceStub }, { provide: AuthenticationService, useValue: authenticationServiceStub } ],
declarations: [ UserLoginComponent ]
})
fixture = TestBed.createComponent(UserLoginComponent);
component = fixture.componentInstance;
// tokenStorageService = TestBed.inject(TokenStorageService);
// authenticationService = TestBed.inject(AuthenticationService);
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
我评论了 4 行,因为我认为它们是错误的,但在Angular Docs 示例中,他们也注入了真正的服务,即使他们说他们不想在测试中使用真正的服务也很艰难。我不明白文档示例中的那部分?
但无论哪种方式,我都会收到此错误消息:
由于错误说明了@NgModule
我认为它可能与我的app.module.ts
文件有关吗?这是我的app.module.ts
:
@NgModule({
declarations: [
AppComponent,
SidebarComponent,
UsersComponent,
DetailsComponent,
ProductsComponent,
UploadFileComponent,
GoogleMapsComponent,
AddUserComponent,
ProductFormComponent,
UserLoginComponent,
EditUserComponent,
ProductDetailsComponent,
MessagesComponent,
MessageDetailsComponent,
ChatComponent,
UploadMultipleFilesComponent,
InfoWindowProductOverviewComponent,
AddDormComponent,
AddProductComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
BrowserAnimationsModule,
FormsModule,
ReactiveFormsModule,
ImageCropperModule,
DeferLoadModule,
//Angular Material inputs (spezielle UI Elemente)
MatDatepickerModule,
MatInputModule,
MatNativeDateModule,
MatSliderModule,
MatSnackBarModule,
MatSelectModule,
MatCardModule,
MatTooltipModule,
MatChipsModule,
MatIconModule,
MatExpansionModule,
MDBBootstrapModule,
AgmCoreModule.forRoot({
apiKey: gmaps_environment.GMAPS_API_KEY
})
],
providers: [
UploadFileService,
{provide: MAT_DATE_LOCALE, useValue: 'de-DE'},
{provide:HTTP_INTERCEPTORS, useClass:BasicAuthHttpInterceptorService, multi:true},
],
bootstrap: [AppComponent],
})
export class AppModule { }
解决方案
现在您只声明了存根tokenStorageServiceStub
和authenticationServiceStub
,但您需要在提供它们之前对其进行初始化。沿着这些思路:
tokenStorageServiceStub = {
saveToken: () => {}
};
authenticationServiceStub = {
login: () => of({status: 200, body: {}})
}
此外,请考虑@PrincesNinja 的建议。
推荐阅读
- python-3.x - 如何从 PyQT5 的菜单中调用新的(弹出)窗口?
- javascript - 我可以在函数的回调函数中返回组件吗?
- mysql - 如何获取仅持续 5 分钟的游乐设施
- python - 有没有办法根据日期时间列有条件地格式化数据框?
- python-3.x - 如何从标记化的 txt 文件中添加和打印数字
- javascript - Javascript变量发布到php,它不起作用
- python - 如何为 Flask-Admin 视图绑定不同的 Mongoengine 数据库别名?
- javascript - Bootstrap 侧边栏 - 默认折叠?(Metronic HTML 模板)
- typescript - 如何使用 Parcel-bundler 正确转译?
- google-cloud-firestore - Firebase 功能未在创建新文档时触发